---

Jeg har fulgt retningslinierne på www.alistapart.com og endt op med at
menuen på www.vih.dk nu er lavet som en liste. Det virker sådan set godt
nok. Tidligere havde jeg lavet den sorte baggrund omkrint 22px højt og
når man kørte musen henover havde jeg en :hovereffekt, der gjorde at
baggrunden på menupunktet skiftede.

Jeg vil gerne have menuen til at være højere igen, men har problem med,
at hele højden ikke skifter farve ved :hover.

Håber der er nogen, der har et bud på, hvordan jeg får hele området til
at skifte.

Igen efter råd fra alistapart.com er mit stylesheet her delt op i to:
layout.css og markup.css:

layout.css
----------

#topmenu {
   position: absolute;
   top: 83px;
   left: 0px;
   
   margin: 0px;
   padding:0;
   width: 100%;

   /*
   Dette gør det sorte som det var før, men så passer :hover-effekten ikke!
   padding-top: 4px;
   padding-bottom: 4px;
   line-height: 22px;
   */
}

#topmenu ul {
   margin-left: 0;
   padding-left: 0;
   display: inline;
   }
   
#topmenu ul li {
   margin-left: 0;
   padding: 6px 6px;
   list-style: none;
   display: inline;
}


markup.css
----------

#topmenu {
   background: black none;
   color: white;
}

#topmenu ul {
   margin: 0;
   padding: 0;
   display: inline;
   }

#topmenu ul li {
   margin: 0;
   list-style: disc url(none);
   display: inline;
   }
/*
html>body #topmenu li a {
width: auto;
}
*/

#topmenu a
{   
   font-size: 80%;
   font-weight: bold;

   color: white;
/* padding:3px 5px 3px 5px; */
   background: transparent none;
   text-decoration: none;
}

#topmenu a:hover, #topmenu a:focus {
   background: #AC866D none;
   color: white;
}



--
Lars
www.fodboldenslegestue.dk   www.larsolesen.dk
www.discimport.dk      www.vih.dk

---

Lars Olesen wrote:
> Jeg har fulgt retningslinierne på www.alistapart.com og endt op med at
> menuen på www.vih.dk nu er lavet som en liste. Det virker sådan set godt
> nok. Tidligere havde jeg lavet den sorte baggrund omkrint 22px højt og
> når man kørte musen henover havde jeg en :hovereffekt, der gjorde at
> baggrunden på menupunktet skiftede.
>
> Jeg vil gerne have menuen til at være højere igen, men har problem med,
> at hele højden ikke skifter farve ved :hover.
>
> Håber der er nogen, der har et bud på, hvordan jeg får hele området til
> at skifte.

[Snip 2 stylesheets]

Hej Lars

Jeg ville ikke sætte højden direkte på menuen, da det kan give problemer ved en smal side bredde.

ALA's artikel viser fint hvordan man kan lave en horisontal _inline_ liste, men jeg ville nu
fortrække en horisontal _float'et_ liste.

http://css.maxdesign.com.au/floatutorial/index.htm

Hvis du følger "Tutorial 6. Floating inline list items", kan du ved hjælp af padding'en på
ul#navlist li a _indirekte_ bestemme højden.

Hintzmann c",)

---

> http://css.maxdesign.com.au/floatutorial/index.htm

En rigtig god tutorial. Nu er det blevet bedre. Hvordan får jeg så
teksten til at stå i midten.

/lars

--
Lars
www.fodboldenslegestue.dk   www.larsolesen.dk
www.discimport.dk      www.vih.dk

---

Lars Olesen wrote:

>> http://css.maxdesign.com.au/floatutorial/index.htm
>
>
> En rigtig god tutorial. Nu er det blevet bedre. Hvordan får jeg så
> teksten til at stå i midten.
>

Du sætter lige meget padding i toppen som i bunden. ex.
padding: .2em 1em .2em 1em;

Hvor første .2em er padding i toppen og anden .2em er padding i bunden.

Padding går med uret rundt således:
padding: {top} {right} {bottom} {left};

Hintzmann c",)

---

> Padding går med uret rundt således:
> padding: {top} {right} {bottom} {left};

Selvfølgelig. Det havde jeg egentlig også gjort, men jeg testede i
Mozilla, og der ser det ikke ud som om det er helt præcist i midten. I
IE er det imidlertid perfekt.

Mange tak for hjælpen, og ikke mindst for det rigtig gode link. Så kan
man jo blive endnu klogere :)

--
Lars
www.fodboldenslegestue.dk   www.larsolesen.dk
www.discimport.dk      www.vih.dk

---

Lars Olesen wrote:

>> Padding går med uret rundt således:
>> padding: {top} {right} {bottom} {left};
>
>
> Selvfølgelig. Det havde jeg egentlig også gjort, men jeg testede i
> Mozilla, og der ser det ikke ud som om det er helt præcist i midten. I
> IE er det imidlertid perfekt.
>

Det er fordi du i http://www.vih.dk/css/layout.css i stylen "#topmenu ul li a" har sat "height:
22px;" ... det var jo det jeg skrev at du _ikke_ skulle gøre

_Generelt_ set vil jeg sige at man aldrig skal sætte height.

> Mange tak for hjælpen, og ikke mindst for det rigtig gode link. Så kan
> man jo blive endnu klogere :)
>

Det er jo altid rart

Hintzmann c",)

---

> Det er fordi du i http://www.vih.dk/css/layout.css i stylen "#topmenu ul
> li a" har sat "height: 22px;" ... det var jo det jeg skrev at du _ikke_
> skulle gøre
>
> _Generelt_ set vil jeg sige at man aldrig skal sætte height.

Damn, så havde jeg alligevel overset den. Tak for din opmærksomhed.

/lars

--
Lars
www.fodboldenslegestue.dk   www.larsolesen.dk
www.discimport.dk      www.vih.dk

---

> _Generelt_ set vil jeg sige at man aldrig skal sætte height.

Hvorfor ikke? Hvis man fx har et billede som er 100px højt og denne
højde skal definere hvor højt et element skal være?

/lars

--
Lars
www.fodboldenslegestue.dk   www.larsolesen.dk
www.discimport.dk      www.vih.dk

---

Lars Olesen wrote:

>> _Generelt_ set vil jeg sige at man aldrig skal sætte height.
>
>
> Hvorfor ikke? Hvis man fx har et billede som er 100px højt og denne
> højde skal definere hvor højt et element skal være?
>

Selvfølgelig kan der være undtagelser, men...

Generelt mener jeg at indholdet bør bestemme højden på et element ... ikke omvendt, hvor
elementet begrænser indholdets højde.

Da jeg gik fra at lave fastfrosset layouts til flydende layout, fandt jeg ud af at bla. height
var total unødvendigt.

Det er yderst sjældent at jeg bruger height.

Hintzmann c",)

---

> Selvfølgelig kan der være undtagelser, men...

Et problem med stylesheets kunne være, at man har en topbar, som er en
eller anden højde, men hvis man ikke definerer den, kan man ikke helt
fortælle hvor høj. Så skal man have smidt et contentarea nedenunder, men
hvis man ikke ved hvor højt det øverste er, kan man vel ikke gøre det.

Det gør sig fx gældende i det layout der foreslås her:

http://www.html.dk/artikler/00043/

> Generelt mener jeg at indholdet bør bestemme højden på et element ...
> ikke omvendt, hvor elementet begrænser indholdets højde.

Jeg er helt enig, men gør ovenstående sig ikke gældende?

> Da jeg gik fra at lave fastfrosset layouts til flydende layout, fandt
> jeg ud af at bla. height var total unødvendigt.

Det flydende layout er også målet for mig.

/lars

--
Lars
www.fodboldenslegestue.dk   www.larsolesen.dk
www.discimport.dk      www.vih.dk

---

Lars Olesen wrote:

>> Selvfølgelig kan der være undtagelser, men...
>
>
> Et problem med stylesheets kunne være, at man har en topbar, som er en
> eller anden højde, men hvis man ikke definerer den, kan man ikke helt
> fortælle hvor høj. Så skal man have smidt et contentarea nedenunder, men
> hvis man ikke ved hvor højt det øverste er, kan man vel ikke gøre det.
>

Jeg er ikke helt med, men ...
hvis man har en header/top, lader man indholdet af den bestemme højden.

> Det gør sig fx gældende i det layout der foreslås her:
>
> http://www.html.dk/artikler/00043/

Artiklen "Drop tabeller til layout" benytter sig ikke af flydende layout.

>
>> Generelt mener jeg at indholdet bør bestemme højden på et element ...
>> ikke omvendt, hvor elementet begrænser indholdets højde.
>
>
> Jeg er helt enig, men gør ovenstående sig ikke gældende?

Ikke ved flydende layouts.

>
>> Da jeg gik fra at lave fastfrosset layouts til flydende layout, fandt
>> jeg ud af at bla. height var total unødvendigt.
>
>
> Det flydende layout er også målet for mig.
>

Det er godt hvis du tænker flydende... "Fluid Thinking"
http://www.digital-web.com/columns/keepitsimple/keepitsimple_2002-09.shtml

Hintzmann c",)

---

Lars Olesen wrote:

>
> Selvfølgelig. Det havde jeg egentlig også gjort, men jeg testede i
> Mozilla, og der ser det ikke ud som om det er helt præcist i midten. I
> IE er det imidlertid perfekt.
>

Forøvrigt ...

Hvis du ønsker at din side skal se ens ud i de forskellige browsere, så skal du sørge for at
siden tricker standard mode. Og det gør din side ikke. IE viser den i quirks mode.

Du kan læse mere om at tricke standard mode her:
http://www.hut.fi/~hsivonen/doctype.html

Jeg har lavet en favelet der kontrollere om den aktuelle side i en browser vises i standard
eller quirks mode. (Se posten fra 23-09-2003)
http://www.hintzmann.dk

Og så vil jeg også anbefale dig at bruge XHTML1.0 strict i stedet for XHTML1.1

Hintzmann c",)

---

> Hvis du ønsker at din side skal se ens ud i de forskellige browsere, så
> skal du sørge for at siden tricker standard mode. Og det gør din side
> ikke. IE viser den i quirks mode.

Det gør jeg naturligvis :)

> Du kan læse mere om at tricke standard mode her:
> http://www.hut.fi/~hsivonen/doctype.html

Ok havde hørt en smule om det, men troede egentlig, at når jeg havde sat
et url efter, så var man i standard-mode.

> Og så vil jeg også anbefale dig at bruge XHTML1.0 strict i stedet for
> XHTML1.1

Hvorfor? Jeg ved godt, at min side endnu ikke helt understøtter XHTML
1.1, men jeg er lige gået fra XHTML 1.0 Transitional, og er ved at
omprogrammere. Er det fordi at man ikke med XHTML 1.1 endnu kan sikre
standard-mode?


--
Lars
www.fodboldenslegestue.dk   www.larsolesen.dk
www.discimport.dk      www.vih.dk

---

Lars Olesen wrote:

>
> Hvorfor? Jeg ved godt, at min side endnu ikke helt understøtter XHTML
> 1.1, men jeg er lige gået fra XHTML 1.0 Transitional, og er ved at
> omprogrammere.

For det første er ændringerne fra XHTML1.0 Strict til XHTML1.1 minimale.
http://www.w3.org/TR/xhtml11/changes.html#a_changes

Det eneste nye i XHTML1.1 er RUBY og det bruges kun til nogle forskellige skriftsprog i østen.
http://www.w3.org/TR/2001/REC-ruby-20010531/
Så det kommer du nok aldrig til at bruge


For det andet bør XHTML1.1 serveres med MIME-typen "application/xhtml+xml" og ikke som
almindelig "text/html"
http://www.w3.org/TR/xhtml-media-types/

Men ... verdens mest udbredte browser Internet Explorer forstår ikke "application/xhtml+xml".

Heldigvis kan man benytte XHTML1.0 strict's bagudkompatible metode, hvor man godt må servere
siden med MIME-typen "text/html" (default for en server).
http://www.w3.org/TR/xhtml1/#guidelines

Hvis du er interesseret, så har WaSP spurgt W3C om "Serving XHTML with the Right MIME Type".
http://www.webstandards.org/learn/askw3c/sep2003.html


> Er det fordi at man ikke med XHTML 1.1 endnu kan sikre
> standard-mode?
>
>

Nej... Doctype-sniffing, som bruges af browseren til at beslutte om en side skal vises i
standard eller quirks mode, er kun gældende for dokumenter af MIME-typen "text/html".
Og da XHTML1.1 bør serveres som "application/xhtml+xml" har standard og quirks mode ingen betydning.

Hintzmann c",)

---

Jeg har ændret en lille smule på mit stylesheet, så det skulle være mere
flydende layout, og så der er en mere logisk opstilling af mine div-tags
hver for sig. Nu har jeg imidlertid fået lidt problemer med, hvordan det
vises i Mozilla, Opera og IE. Det vises forskelligt. I Opera går
topbaren ikke helt ud til siden. I IE starter resten af teksten først,
når højrebaren slutter (undtagen overskriften). I Mozilla viser den ikke
baggrundsfarve på menubaren, hvilket naturligvis har nogle lidt
mærkelige konsekvenser, når det er hvid tekst på sort baggrund -
:hover-effekten findes imidlertid.

Er der nogen der kan se, hvad der skulle være forkert i stylesheets på:

www.vih.dk/css/layout.css
www.vih.dk/css/screen.css


--
Lars
www.fodboldenslegestue.dk   www.larsolesen.dk
www.discimport.dk      www.vih.dk

---

Lars Olesen skrev:

> Ok havde hørt en smule om det, men troede egentlig, at når jeg
> havde sat et url efter, så var man i standard-mode.

IE har det særlige problem at den kun læser en doctype hvis det er
det første den støder på. Derfor vil en eventuel xml-erklæring få
IE til at opføre sig som om der slet ikke var nogen
doctypeerklæring (og dermed gå i quirks mode). 0


> Hvorfor? Jeg ved godt, at min side endnu ikke helt
> understøtter XHTML 1.1, men jeg er lige gået fra XHTML 1.0
> Transitional, og er ved at omprogrammere. Er det fordi at man
> ikke med XHTML 1.1 endnu kan sikre standard-mode?

XHTML 1.1 bør sendes med mimetypen application/xhtml+xml - den
mimetype forstår IE bare ikke. XHTML 1.0 bør sådan set også leveres
med denne mimetype, men her er det også o.k. at benytte text/html
som forstås af alle browsere.

Prøv at se artiklen her: <http://www.w3.org/TR/xhtml-media-types/>
- evt. blot oversigten i punkt 3.5
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

---

Lars Olesen skrev:

> Er der nogen der kan se, hvad der skulle være forkert i
> stylesheets på:
>
> www.vih.dk/css/layout.css
> www.vih.dk/css/screen.css

Hvilken html-side kommer fejlen på? Det er noget lettere at
fejlfinde hvis man kan se hvordan du bruger css-arkene.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

---

>>www.vih.dk/css/layout.css
>>www.vih.dk/css/screen.css
>
> Hvilken html-side kommer fejlen på? Det er noget lettere at
> fejlfinde hvis man kan se hvordan du bruger css-arkene.

Naturligvis. Det var en tanketorsk :) Den er på www.vih.dk



--
Lars
www.fodboldenslegestue.dk   www.larsolesen.dk
www.discimport.dk      www.vih.dk