Jump to content

cssfreakie

Staff Alumni
 View Profile  See their activity

  • Posts

    1,674

  • Joined

  • Last visited

 Content Type 

Everything posted by cssfreakie

  1. cssfreakie
    I hope you agree with me that if you say ul li has some property that that is a pretty generic approach. for example: ul li { color:green;} What does that do? It tells every list item to use the color green Now what if I add an id to a second list would that make a difference?? WOuld that prevent the color green to be inherited? <ul id="list1"> <li>bla</Li> <li>bla</Li> </ul> < hr /> <ul id="list2"> <li>bla</Li> <li>bla</Li> </ul> No!, not unless we say that each <li> that is part of #list2 has a different color. Hence the name cascading style sheets: Cascading Style Sheets get their name from the way in which they determine order of precedence when more than one rule applies to a given element in the Web page. (more than 1 rule... so if you only have 1 rule, that one will ofcourse prevail ) Now, if our page would have looked like this: <style type="text/css"> ul li {color:green;} */We could have just used li, but since you used ul li i thought it would be a nice example */ #list2 li {color:orange;} /* this overwrites the more generic color assignment. */ </style> <body> <ul id="list1"> <li>bla</Li> <li>bla</Li> </ul> < hr /> <ul id="list2"> <li>bla</Li> <li>bla</Li> </ul> </body> Besides the above, your code had some errors in it. 2 times you missed the '#'- character and you had an extra </div> in there. Hope this helps.
  2. cssfreakie
    I looked at it a little closer and i noticed something odd. You might want to change /add the following to your stylesheet: body{margin:0; padding:0;} /* or just use a reset.css /read sticky */ .logo { background: -moz-linear-gradient(center top , #0272A7, #013953) repeat scroll 0 0 transparent; border: 1px solid #002232; border-radius: 15px 15px 15px 15px; box-shadow: 0 0 1px #EDF9FF inset; margin-left: auto; /* instead of 180px */ margin-right: auto; /* idem */ margin-top: 10px; padding: 30px; width: 825px; /* gave it a fixed with */ } try this
  3. cssfreakie
    My best guess is to change the dimensions of the inner elements so that they fit inside the 765px. As far as I can tell it's the same with an elephant in the room if it doesn't fit, either shrink the elephant or make the room bigger. So Set a fixed width to those images. I am pretty sure that should do the trick. If not, i'll look at it again.
  4. cssfreakie
    make sure you copy the code than, so your certain you have the most updated ones. Also just using good old pen and paper to work out the rough dimensions can be very useful to get a hold of this stuff.
  5. cssfreakie
    you should read this article: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ Also after you read that, inspect your elements with firebug and you will see what is going on.
  6. cssfreakie
    The last 2 codes i provided are 2 different techniques. I update 1 of them so , maybe try them out when you fully rested or something. Just run it as is, before you implement it in your own code. so you see how it works. They both just work, so before you post make sure you tested it and understand what is happening.
  7. cssfreakie
    The % is the position. the image that got loaded has 960px width. The same as page. If you have a #page with of 40px you make the image 40px width -edit so the % has nothing to do with the width.
  8. cssfreakie
    Than you just do the opposite of the sticky footer: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head><meta charset="UTF-8" /> <link type="text/css" rel="stylesheet" href="css/style.css" /> <link rel="icon" type="image/x-icon" href="favicon.ico"/> <title>example</title> <style type="text/css"> body,html{height:100%;margin:0; padding:0} #header{height:140px;background:green; margin-bottom:-140px; position:relative;} #nav{height: 40px; background:#333; position: relative; bottom:-100px;left:0; } #toppush{height:140px;} /* combined height of the header and nav */ #page{height:100%;width:960px;margin: 0 auto; background:orange} #push,#footer{height:50px;} #footer{margin-top:-50px;background:#999} </style> </head> <body> <div id="header"> <div id="nav"></div> </div> <div id="page"> <div id="toppush"></div> <div id="content"> Your content goes here </div> <div id="push"></div> </div> <div id="footer"></div> </body> </html>
  9. cssfreakie
    from the look of it it looks like your wrapper div is too narrow 765px for the inner elements (the images)768px
  10. cssfreakie
    yep that's how. that way it looks like your stretching it, very sneaky And if you can't use it which i doubt it's worth knowing of it
  11. cssfreakie
    just incase you want to have the visual effect as if #page stretches to the bottom, we use something sneaky for that. Which is the following. I added an image for it and the additional code, run that as see what happens. Although #page doesn't stretch to the bottom but outerwrapper does, The visual effect is the same. I forgot the name of this technique but it's common practise code: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head><meta charset="UTF-8" /> <link type="text/css" rel="stylesheet" href="css/style.css" /> <link rel="icon" type="image/x-icon" href="favicon.ico"/> <title>example</title> <style type="text/css"> body,html{height:100%;margin:0; padding:0} #outerwrapper{min-height:100%;background:yellowgreen url(back.png) repeat-y 50%} /*notice the 50% */ #header{height:100px;background:green} #nav{height: 40px; background:#333} #page{width:960px;margin: 0 auto; background:olive} #push,#footer{height:50px;} #footer{margin-top:-50px;background:#999} </style> </head> <body> <div id="outerwrapper"> <div id="header"></div> <div id="nav"></div> <div id="page"> </div> <div id="push"></div> </div> <div id="footer"></div> </body> </html> You could even use a data url in case you don't want an extra header request. Anyway this is how I would do it . [attachment deleted by admin]
  12. cssfreakie
    have a look at this <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head><meta charset="UTF-8" /> <link type="text/css" rel="stylesheet" href="css/style.css" /> <link rel="icon" type="image/x-icon" href="favicon.ico"/> <title>example</title> <style type="text/css"> body,html{height:100%;margin:0; padding:0} #outerwrapper{min-height:100%;background:yellowgreen} /* outer wrapper is the 100% one, rest inside has a normal position */ #header{height:100px;background:green} #nav{height: 40px; background:#333} #page{width:960px;margin: 0 auto} /* special width and centering*/ #push,#footer{height:50px;} #footer{margin-top:-50px;background:#999} </style> </head> <body> <div id="outerwrapper"> <div id="header"></div> <div id="nav"></div> <div id="page"> </div> <div id="push"></div> </div> <div id="footer"></div> </body> </html> test it out
  13. cssfreakie
    that is pretty easy really Make an extra wrapper outside #page and place your #header and #nav in there so those get that width of 100% Set the min-height of 100% on this outer wrapper. Could look like this <body> <div id="outerwrapper"> <div id="header"></div> <div id="nav"></div> <div id="page"> </div> <div id="push"></div> </div> <div id="footer"></div> </body> Make sure you remove that top margin you have now though otherwise it doesn't matter what you do
  14. cssfreakie
    lol ok didn't see that, i'll have a look (it wasn't blue ) I see you read it the article but missed a little point. The min-height of 100% is meant to stretch the page to the very bottom. But Because you added extra margin at the top of #page the height of this element becomes 100% + that margin-top so that is more than 100% thus making your page always scroll. What you could do - instead of placing you header and nav outside #page and positoned absolute - is just place them inside of the #page with a normal position. That way the height of #page is 100% (if you remove that margin-top)
  15. cssfreakie
    good to hear and see it works. Not surethough what you mean with bleeding. at the bottom, but just check in ie789 and looked as i want it Although i ones made that in hurry. It's not something I'm proud of, you can pm me your version if you want. Keeps this thread on topic Cheers!
  16. cssfreakie
    Well although my psychic powers know you read that article. What I can't do is guess what your setup is. If you have a link to your work it would help a lot.
  17. cssfreakie
    Don't use a wysiwyg editor... period! Also I just checked https://www.taskforcecentral.com/dev2/index.php and i don't see any grey stuff you talked about or more important what is page 1 or 2. Besides that you omitted to close you <body> tag (<body ) A simple setup could look like this: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head><meta charset="UTF-8" /> <link type="text/css" rel="stylesheet" href="css/style.css" /> <link rel="icon" type="image/x-icon" href="favicon.ico"/> <title>example</title> </head> <body> <div id="wrapper"> <div id="page1"> </div> <div id="page2"> </div> </div> </body> </html> than by using #page1 or #page2 you can target the inner elements and set a style to them.
  18. cssfreakie
    Read an article of ryan fait on the sticky footer. http://ryanfait.com/sticky-footer/ Pay attention to the use of min-height on the wrapper in that article.
  19. cssfreakie

    IE9 - Float

    cssfreakie replied to Cyto's topic in CSS Help

    you have a special stylesheet for IE9 that overwrites some vital properties. ! of them is that you set float to 'none' There is absolutely no need to have an extra stylesheet for IE9, it's a brilliant browser. Also, don't mix float left and right. Just stick to float: left for all your floating elements and if needed adjust the margin and or padding on them so they align properly.
  20. cssfreakie
    Like quite some elements <ul>'s have a default style. If you would give this a margin and padding of 0 they gap will probably be gone. Also maybe try instead to place a reset.css above your styles. (read the sticky, it's probably the second in the list) This will do the same but for more elements. In the end you might make your own reset, but for now it's good enough.
  21. cssfreakie
    I can relate to that... like wise Lol same here. weird stuff
  22. cssfreakie
    here try this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> #image{background:yellowgreen;height:150px; overflow:hidden;list-style:none;} #image li{display:inline;} #image li a{width:30px; height:150px;display:block;float:left;} #image li a:hover{width:150px;} #A1{background:url(http://www.1pw.co.uk/4.jpg) no-repeat;} #A2{background:url(http://www.1pw.co.uk/3.jpg) no-repeat;} #A3{background:url(http://www.1pw.co.uk/4.jpg) no-repeat;} #A4{background:url(http://www.1pw.co.uk/3.jpg) no-repeat;} #A5{background:url(http://www.1pw.co.uk/4.jpg) no-repeat;} </style> </head> <body> <ul id="image"> <li><a id="A1"href=""></a></li> <li><a id="A2"href=""></a></li> <li><a id="A3"href=""></a></li> <li><a id="A4"href=""></a></li> <li><a id="A5"href=""></a></li> </ul> </body> </html>
  23. cssfreakie
    right now your shrinking the images What you could do instead is to set the image as a background image on the anchor element. That way you can increase or decrease the width of the anchor without distorting the background image. Does that make sense? If not let me know and i'll give an example.
  24. cssfreakie
    as you might have guessed and if not read in the forum guidelines. It would be great if you could show some code and make more precise what your problem is. Unless of-course you want me to repeat exactly what I said before. If you have an online example of it it would be even better so we can check it out.
  25. cssfreakie
    not with pure html. html is stateless You need either php, or ajax to do what you want. Those 2 flavours allow more dynamic interaction.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.