css forståelse: html>body #ting {

[Laat]

Jeg sitter å prøver å lære meg css som virker supert.

Men en ting jeg ikke skjønner er hva html>body brukes til.

html>body #ting { height:39px; }

#ting { height:39px;}

Hva er forskjellen, og hvordan brukse de?

[Jernlov]

body er hele dokumentet.

#ting er en div som heter ting i html (<div id="ting"></div>)

 

så kan du ha forskjellige farger osv på de, les om ting du kan gjøre på HTML DOG

Endret 22. juli 2005 av skate4life

[Steinmann]

Missforsto bra der ja skate

 

Det kalles selectors kan lese om det hos w3c

 

Den du har der fungerer som en "hack" om jeg ikke husker feil.

Men gennerelt betyr ">" direct child.

 

Veldig fint å kunne, trengs ikke så ofte, men når du først trenger det sparer det deg mye jobb

 

EDIT: Det den du har gjør(om du hadde endret litt på tallene) er å gi IE en verdi, og kompetente nettlesere en annen. Mulig det er IE5 el no, husker ikke 100%

Endret 22. juli 2005 av orsus

[Arve Systad]

Det andre eksempelet ditt vil kun ordne på et element med ID #ting som er "under" body, som er eit direkte "child-element" til html.

 

E > F

Matches any F element that is a child of an element E.

[Jernlov]

:S

[Mads-b]

EY! fin tråd. EN ting jeg har lurt på en stund.

 

Hva er forskjellen på

 

body>p .erp {
\\kode
}

 

og

 

body p .erp {
\\kode
}

 

?

[Steinmann]

Hadde du lest på den siden jeg ga hadde du skjønt det

 

> betyr at elementet ligger direkte under.

Så den føste vil bare gjelde om p er direkte child, så ligger den i en div(eller annet element) vil den ikke gjelde.

Den andre gjelder derimot uansett

 

Svarer vel arve før meg nå

 

edit: Whoho

Edit2: Fin artikkel

Endret 22. juli 2005 av orsus

[Arve Systad]

Du hadde litt dumme eksempel, eg skal gi deg to betre:

 

#hoved>div p {}

 

Vil påvirke alle P element som er kvar som helst innafor eit div-element, der det nevnte div-elementet må vere en direkte "child" av eit element med ID #hoved.

 

#hoved div p {}

 

Påverkar fortsatt p-lement kvar som helst innanfor eit gitt div-element, men denne gongen må ikkje div-elementet vere direkte "child" ("rett innanfor" eller "neste element" om du vil) av #hoved.

 

<div id="hoved">
<div>
<p>Tekst</p>
</div>
</div>

 

Eksempelet over vil bli påverka av begge.

 

<div id="hoved">
<div>
<div>
<p>Tekst</p>
</div>
</div>
</div>

 

I eksempelet over vil kun metode 2 virke, fordi "div p" ikkje er "child" av #hoved.

 

Var det godt nok forklart?

[_Paulsen_]

Var det godt nok forklart?

Slettes ikke dårlig forklart

[Laat]

begynner å forstå... men er ennå ikke helt stød.

html>body #ting { verdier }

vil det påvirke alle ting med id = "ting" som ligger direkte under body?

 

se på denne siden: http://www.glish.com/css/7.asp

hvorfor er det i stylen at:

	#banner {
 background:#fff;
 height:40px;
 border-top:1px solid #000;
 border-right:1px solid #000;
 border-left:1px solid #000;
 voice-family: "\"}\"";
 voice-family: inherit;
 height:39px;
 }
html>body #banner {
 height:39px;
 }

kunne man ikke bare droppe "html>body #banner {}"-delen? Jeg ser jo at det ikke går når jeg tester det, men skjønner ikke hvorfor det ikke går.

[mohuhau]

begynner å forstå... men er ennå ikke helt stød.

html>body #ting { verdier }

vil det påvirke alle ting med id = "ting" som ligger direkte under body?

Nei, denne vil påvirke alle elementer som ligger under body, i tillegg til at body skal ligge direkte under html (noe body alltid gjør)

Denne har altså samme betydning som #ting { verdir }, med et viktig unntak: Bare nettlesere som støtter css2-selektoren > vil sette disse verdiene. IE støtter ikke css2-selektoren >, og vil dermed hopper over denne blokken.

se på denne siden: http://www.glish.com/css/7.asp

hvorfor er det i stylen at:

	#banner {
 background:#fff;
 height:40px; /* Her settes høyden til 40px */
 border-top:1px solid #000;
 border-right:1px solid #000;
 border-left:1px solid #000;
 voice-family: "\"}\""; /* Denne koden gjør at IE5 tror at #banner blir avsluttet */
 voice-family: inherit; /* Gjennopretter voice-family fra body */
 height:39px; */ Høyden settes til 39px for nettlesere som korrekt fortsetter etter  voice-family: "\"}\""; */
 }
html>body #banner {
 height:39px; */ Høyden settes til 39px for nettlesere som støter  css2 selektorer, men som lider av samme bug som IE 5 (voice-family: "\"}\"") Så vidt jeg vet gjelder dette bare Opera 5, så det burde ikke lenger være nødvendig å ta med denne, men etter  "\"}\"" vil IE5 la være å lese neste kodeblokk, altså må du ha kode her som ikke IE5 trenger. Dersom du vil kan du altså bytte ut denne siste koden med bare en tom blokk, slik f.eks: #banner { } */
 } /*Denne kodeblokken har også som oppgave å nulle ut 

kunne man ikke bare droppe "html>body #banner {}"-delen? Jeg ser jo at det ikke går når jeg tester det, men skjønner ikke hvorfor det ikke går.

Les komentarene jeg har skrevet i koden.

 

Som du sikkert nå forstår lager IE mange store problemer for oss som koder nettsider, og mye av den nyttige funksjonaliteten i css2 blir bare brukt for å komme rundt IEs mange feil og mangler