/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Navbar med float'ede links
Fra : Jørgen Farum Jensen


Dato : 01-02-11 15:39

Jeg har følgende CSS-kode til menupunkterne i en
navigations-bjælke:

#nav ul li { display: inline; }
#nav ul li a {display:block; *float: left;*
font-size:12px; line-height:100%; font-weight:bold;
padding: 5px 15px; background-color: #663408;
color: #fff; text-decoration: none;
border-right: 1px solid #fff; }

Det, der efter min opfattelse *mangler*
i dette er en width på a-elementet. Som jeg
husker det *skal* et float'et element have
en bredde. Hvis et floatet element ikke har
en bredde, skal det skrumpe så elementet netop
kan rumme indholdet. Det gør det så, hvorved
menupunktet får den bredde der skabes af menu-
punktets tekst og padding.

Sagen er, at 1) det virker i alle de browsere
jeg kan teste i, inkl. IE7 og 2) selvom teksten
i linket har mellemrum (to eller flere ord).

Jeg har en svag erindring om tidligere
diskussioner om dette, men hører gerne
om nogen ved noget konkret om dette.
Best Practice eller Bad Practice?


--
Jørgen Farum Jensen
http://webdesign101.dk
..

 
 
Karl Erik Christense~ (01-02-2011)
Kommentar
Fra : Karl Erik Christense~


Dato : 01-02-11 16:48

On 01-02-2011 15:39, Jørgen Farum Jensen wrote:
> Jeg har følgende CSS-kode til menupunkterne i en navigations-bjælke:
>
> #nav ul li { display: inline; }
> #nav ul li a {display:block; *float: left;*
> font-size:12px; line-height:100%; font-weight:bold;
> padding: 5px 15px; background-color: #663408;
> color: #fff; text-decoration: none;
> border-right: 1px solid #fff; }
>
> Det, der efter min opfattelse *mangler*
> i dette er en width på a-elementet. Som jeg
> husker det *skal* et float'et element have
> en bredde. Hvis et floatet element ikke har
> en bredde, skal det skrumpe så elementet netop
> kan rumme indholdet. Det gør det så, hvorved
> menupunktet får den bredde der skabes af menu-
> punktets tekst og padding.
>
> Sagen er, at 1) det virker i alle de browsere
> jeg kan teste i, inkl. IE7 og 2) selvom teksten
> i linket har mellemrum (to eller flere ord).
>
> Jeg har en svag erindring om tidligere
> diskussioner om dette, men hører gerne
> om nogen ved noget konkret om dette.
> Best Practice eller Bad Practice?
>
>

Do floated items need a width?

You should always set a width on floated items (except if applied
directly to an image - which has implicit width). W3C's Cascading Style
Sheets, level 2, CSS2 Specifications states:

"A floated box must have an explicit width..."

If no width is set, the results can be unpredictable. Theoretically, a
floated element with an undefined width should shrink to the widest
element within it. This could be a word, a sentence or even a single
character - and results can vary from browser to browser.

Karl Erik.

--
http://dmwebdesign.dk - DM i Webdesign
http://www.tyveri-check.dk - Snyd tyven før han snyder dig!
http://webdesign.ranunkelvej.com - Artikler om webdesign


Karl Erik Christense~ (01-02-2011)
Kommentar
Fra : Karl Erik Christense~


Dato : 01-02-11 16:55

On 01-02-2011 16:48, Karl Erik Christensen wrote:

> Do floated items need a width?
>
> You should always set a width on floated items (except if applied
> directly to an image - which has implicit width). W3C's Cascading Style
> Sheets, level 2, CSS2 Specifications states:
>
> "A floated box must have an explicit width..."
>
> If no width is set, the results can be unpredictable. Theoretically, a
> floated element with an undefined width should shrink to the widest
> element within it. This could be a word, a sentence or even a single
> character - and results can vary from browser to browser.
>
> Karl Erik.
>

Jeg vil så alligevel mene, at netop i en menu hvor punkterne af gode
grunde næppe er lige brede, kan man undlade at sætte bredden. Den effekt
man opnår herved, vil jeg anse for den ønskede.

Karl Erik.

--
http://dmwebdesign.dk - DM i Webdesign
http://www.tyveri-check.dk - Snyd tyven før han snyder dig!
http://webdesign.ranunkelvej.com - Artikler om webdesign


Søg
Reklame
Statistik
Spørgsmål : 177558
Tips : 31968
Nyheder : 719565
Indlæg : 6408926
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste