css not working properly
hi, i am still learning css stylesheets, so this might be a simple issue (i hope)
navigation buttons!
the following code works, the buttons appear when i call them in the html,
but when the window is resized the buttons squash together, and as I make the window smaller the more squashed they become
#navcontainer
{
background: #f0e7d7;
margin: 0 auto;
padding: 1em 0 0 0;
font-family: georgia, serif;
text-transform: lowercase;
}
/* to stretch the container div to contain floated list */
#navcontainer:after
{
content: ".";
display: block;
line-height: 1px;
font-size: 1px;
clear: both;
}
ul#navlist
{
list-style: none;
padding: 0;
margin: 0 auto;
width: 85%;
font-size: 0.8em;
}
ul#navlist li
{
display: block;
float: left;
width: 15%;
margin: 0;
padding: 0;
}
ul#navlist li a
{
display: block;
width: 100%;
padding: 0.5em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
text-decoration: none;
background: #f7f2ea;
}
#navcontainer>ul#navlist li a { width: auto; }
ul#navlist li#active a
{
background: #f0e7d7;
color: #800000;
}
ul#navlist li a:hover, ul#navlist li#active a:hover
{
color: #800000;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}also, if i wanted the same nav button style as the above produces, but down the side of the page, can i just use the required code in the same css stylesheet file but call it navcontainer2?
thanks for your help!
timjpriebe posted this at 14:07 — 26th March 2007.
He has: 2,667 posts
Joined: Dec 2004
Well, I can answer the first questions. You're using percentages all over the place for widths. This means that those elements will be resized when their container elements are resized. If all the elements up the chain that contain them are percentages, then when your window is resized, the elements are resized as well.
You'll want to change them to px or em instead. The trick then is to get it so that the site still looks good when resized to various sizes.
Tim
http://www.tandswebdesign.com
greg posted this at 20:45 — 26th March 2007.
He has: 1,581 posts
Joined: Nov 2005
thank you for the reply
it actually touches on another post i have, about how there are too many html/css/php etc tutorials on the net and how many of them are not very good
to a newbie learning code, we have no way to tell if its decent advice or not
that above code is a direct copy and paste of what i used from what seemed like a decent site!
proving my point!
thanks!
swate posted this at 20:58 — 26th March 2007.
They have: 78 posts
Joined: Sep 2002
what editor are you using?
greg posted this at 00:37 — 27th March 2007.
He has: 1,581 posts
Joined: Nov 2005
i just use notepad for html and css, if thats what you meant
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.