Re: [css-d] Floats & Background Images
Roger Roelofs wrote:
> Welcome to the list!
> First, validate your html and css. Often little typos can escape
> notice and cause all kinds of difficulty. Computers are inherently
> stupid and will do what you typed, not what you meant.
> Here's the css I used to get the look I think you want
>#navbar ul{
> list-style: none;
> padding: 0px;
> margin: 0;
> margin-left: 287px;
>}
>
>#navbar li {
> float: left;
>}
>
>#navbar ul li a {
>display: block;
>[...]
>
>
Hi Zellie,
Validating is your lifebelt indeed!
I saw the html-validator is indicating 8 errors, but when you rewrite
the link to the stylesheet in:
http://www.zdsign.com/gwp/new.css"; />
(all lower case, and a /slash before the end) there are only the two
alt's to add to the images.
This done, the css-validator can work now.
I see you are using a fixed font-size. In IE that can work (although it
isn't too accessible, for users cannot enlarge the font size clientside).
But ... better browsers as Firefox and Opera DO enlarge the fonts, when
the user wants that: "view > fontsize > larger".
That gives a problem: then your menu is breaking down, as you see.
Solution is to make a more liquid design, with relative distances. That
means that you cannot use the also fixed format of the button-image.
Happily, therfore is also a solution: make a background-image which is
high enough for the biggest font size, and place that with the
"background-position" property on the bottom line of the button. When
needed, then the button will grow.
Think a test page
will
say more then 1000 words, so have a look in the source code.
You can play around with all px and things to see what happenz if changing.
Succes!
fracncky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floats & Background Images
Zellie,
On Feb 5, 2006, at 12:30 PM, Zellie D. McClelland wrote:
> This is my first post.
Welcome to the list!
First, validate your html and css. Often little typos can escape
notice and cause all kinds of difficulty. Computers are inherently
stupid and will do what you typed, not what you meant.
> I am employing background images beneath the text links. These images
> appear when I employ a float: right; but they disappear when I use a
> left float and
> margin-left
Here's the css I used to get the look I think you want
#navbar ul{
list-style: none;
padding: 0px;
margin: 0;
margin-left: 287px;
}
#navbar li {
float: left;
}
#navbar ul li a {
display: block;
...
> And they are jumping out of the containing div.
One of the rules about floats is that if an element has all its
children floated, it takes up no space. So, in your case, if you put a
background image on #navbar ul it won't show because the li are all
floated and the ul ends up with a height of 0.
> http://www.zdsign.com/gwp/new.html
> http://www.zdsign.com/gwp/new.css
Thanks for the url. It makes helping _much_ easier!
--
Roger Roelofs
"Remember, if you’re headed in the wrong direction,
God allows U-turns!"
~Allison Gappa Bottke
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Floats & Background Images
This is my first post. I am designing my first site in CSS. I cannot get my navigational menu to work. I have three divs within a container: A header; a side bar title; a navbar. I have the sidebar title floating left w. a set width and am encountering difficulty w. my navbar. I am employing background images beneath the text links. These images appear when I employ a float: right; but they disappear when I use a left float and margin-left And they are jumping out of the containing div. Any help would be greatly appreciated. http://www.zdsign.com/gwp/new.html http://www.zdsign.com/gwp/new.css Thank you, Zellie McClelland __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
