cssfreakie
-
Posts
1,674 -
Joined
-
Last visited
Posts posted by 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
-
How can i solve it ?
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.
-
yeah you're right haha.. half asleep.. i'll try it tomorrow and get back to you
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.
-
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.
-
check it.. im back to square one :/ when trying your new code.. guess i'll just have to use the image technique :/
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.
-
my bad! missed the 50% width.. how do i get that to match the width of the #page? as with % it's fluid.. while #page isnt..
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.
-
i just tried it, but the issue is, the middle bit has a smaller width than the header and footer. i can't create an image easily because the amount of empty space either side will change based of screen size.. so how can i create the effect that the page bit stretches to the bottom without an image? (my primary aim)
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> -
from the look of it it looks like your wrapper div is too narrow 765px for the inner elements (the images)768px
-
oh i see.. so really i just created an image to extend down. i'll try that tomorrow and get back too you with the results, thanks!
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 -
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]
-
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
-
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
-
etcworld.co.uk/od3
i had placed it in the first post too
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)
-
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!
-
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.
-
Did not work. Still inherited the color of the included page.
Frustrating....................
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.
-
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.
-
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.
-
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.
-
Apparently I have a fear of finishing a personal project, since I've started several and haven't gotten around to finishing them.
I can relate to that...
like wise
Lol same here. weird stuff
-
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> -
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.
-
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.
-
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.
I dont want my ID to use rules for CLASS
in CSS Help
Posted
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?
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.