Re: [WSG] background image on a horizontal list.
Lennart,
Using display:inline will cancel out the width of the element and make it as wide
as the text inside of it,
what i tend to do when creating horizontal menu's is
#menu-UL { margin : 0px ; padding : 0px ; }
#menu-UL li { margin : 0px ; padding : 0px ; float : left ; }
#menu-UL li a { width : 100px ; background : #99cc00 ; padding : 5px ; }
Hope that help's fella
Mark Harwood
--
phunky.co.uk / zinkmedia.co.uk / xhtmlandcss.co.uk
**
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] background image on a horizontal list.
Hi Lennart,
From your CSS, you could apply the width:100px to the #navlist li ID and
use float:left instead of display:inline.
Hope this helps.
- Regnard Raquedan
mobile: 639192907711
ym: rkraquedan @ yahoo.com
msn: rkraquedan @ hotmail.com
web: http://regnard.raquedan.com
Original Message:
-
From: Lennart Fylling [EMAIL PROTECTED]
Date: Wed, 1 Sep 2004 10:56:37 +0200
To: [EMAIL PROTECTED]
Subject: [WSG] background image on a horizontal list.
Hello there!!
I've been a member here for some time, and now I will see if I as well can
get some help from you :)
First of all, I'm a beginner so don't shoot me!!
The problem:
On my webpage, I've created an unordered horizontal list for my main
navigation, where I use some homemade buttons as background (link,
visited,hover active).
I've made those buttons 100px wide, but in the browsers I've tested them out
the hole background image is not visual .
It's a horizontal list, so I have used :{ display: inline; width: 100px;} in
the css, but the {with: 100px;}
declaration, doesn't seem to have any effect at all.
When I use {display:block; width: 100px; } it does'nt seem to be a problem
(other then the list transform in to a vertical list).
Here is the layout:
http://lennart-fylling.com
Here you can see how the buttons really look's like:
http://lennart-fylling.com/utkast2.php
I hope here are some experts in this area, who can make may day much better.
I hope you understand both my problem and my school english :)
--
Lennart Fylling
Aalesund
Norway
http://lennart-fylling.com
**
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
mail2web - Check your email from the web at
http://mail2web.com/ .
**
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] background image on a horizontal list.
Hi Lennart - welcome.
Your buttons are only visible for the width of the word used for your
links, plus its padding - so a bigger (wider) word reveals more of your
button. Try this:
#navlist li {
list-style: none;
margin: 4px;
float: left;
}
#navlist li a {
display: block;
...etc }
That way the button is always fully visible - but if your linked text
is longer than 100px, it will extend outside of the button...
By the way, I noticed you tried to 'open up' your buttons with spaces
in the code:
lia href=#About/a/li
That won't work; the browser ignores whitespace. Adding non-breaking
spaces (nbsp;) would work, but it's not the best way to fix the
problem!
Oh, and your English is fine - better than my Norewgian (which is zero)!
Hope that helps.
Nick
___
Omnivision. Websight.
http://www.omnivision.com.au/
On Wednesday, Sep 1, 2004, at 18:56 Australia/Sydney, Lennart Fylling
wrote:
Hello there!!
I've been a member here for some time, and now I will see if I as well
can
get some help from you :)
First of all, I'm a beginner so don't shoot me!!
The problem:
On my webpage, I've created an unordered horizontal list for my main
navigation, where I use some homemade buttons as background (link,
visited,hover active).
I've made those buttons 100px wide, but in the browsers I've tested
them out
the hole background image is not visual .
It's a horizontal list, so I have used :{ display: inline; width:
100px;} in
the css, but the {with: 100px;}
declaration, doesn't seem to have any effect at all.
When I use {display:block; width: 100px; } it does'nt seem to be a
problem
(other then the list transform in to a vertical list).
Here is the layout:
http://lennart-fylling.com
Here you can see how the buttons really look's like:
http://lennart-fylling.com/utkast2.php
I hope here are some experts in this area, who can make may day much
better.
I hope you understand both my problem and my school english :)
--
Lennart Fylling
Aalesund
Norway
http://lennart-fylling.com
**
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] background image on a horizontal list.
Mark Harwood WebMail wrote: Least your sorted now! you got about 4/5 emails all given the same advise :D Yes, but the advises I've got helped me out, so with a bit testing and failing, I'm finally getting somewhere. I'm far from finished, but you can se the result of my list here http://lennart-fylling.com/ , need to do some more positioning before I'm 100% satisfied. -- Lennart Fylling Aalesund Norway http://lennart-fylling.com/ ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
