problemer med <div>, innholdet kommer utenfor ramm

[mikaelandre]

Jeg skal vise noen nyheter slik:

 

<div class="nyhet">
  <h3>Tittel</h3>
  <div class="bilde">
     <img src=...../>
  </div>
  <div class="innhold">
     Masse tekst her
  </div>
</div>

 

jeg vil ha bildet til venstre i ruta, og nyheten til høyre. bruker float: left på .bilde. Det som skjer er at bildet kommer langt under <div class="nyhet">, men det skulle jo holdt seg inni.... da blir alt forskjøvet, og teksten i de forskjellige nyhetene kommeer oppå hverandre, bildene er plassert litt sånn tilfeldig rundt om kring osv. skjønner ingen ting jeg

 

edit: fikk teksten til å bli bra, men hvis bildet er høyere enn teksten vil det forstatt stikke utenfor ramma.

Endret 28. juli 2004 av mikaelandre

[Arve Systad]

legg til <hr> under alt sammen, altså rett før du slutter av "hovedboksen", og style den slik:

 

hr { 
visibility: hidden; 
clear: both;
}

[Haraldson]

en <hr> med clear:both under..?

 

..og: Du trenger ikke en div å ha bildet i.

 

 

Edit: argh... Arve slo meg på målstreken...

Endret 28. juli 2004 av Mr.Berg

[mohuhau]

Enda enklere dersom du ikke skal ha noen skillelinje er jo å sette

clear: both;

på nyhet-klassen.

[Haraldson]

Enda enklere dersom du ikke skal ha noen skillelinje er jo å sette

clear: both;

på nyhet-klassen.

Det blir ikke det samme

 

Han må ha noe under som gjør at ting ikke "detter ut" av boksen, det hjelper lite at det er boksen som har clear:both;

 

Clear:left/right/both betyr forresten at ingen objekter kan floates ved siden av på den aktuelle siden.

 

 

...og han får nødvendigvis ingen skillelinje, om han som arve87 sier legger visibility:hidden.

[Arve Systad]

Enda enklere dersom du ikke skal ha noen skillelinje er jo å sette

clear: both;

på nyhet-klassen.

Vil ikkje hjelpe, fordi nyhetsklassen er "hovedboksen", og med clear:both; på den, så sørger du kun for at ingen flytande element ligger rundt denne, men det kan fremdeles vere trøbbel med flytande elementer INNI boksen. Skjønner?

 

Måten eg gjorde det på er den absolutt tryggaste og beste måten å gjøre det på.

[mikaelandre]

takk for hjelpen!

 

selvfølgelig trneger jeg ikke ha bildet i en <div>, men det tenkte jeg ikke på en gang

 

funka dårlig med clear: both, ble konflikt med en meny på høyre sida, men clear: left; ble helt topp. men er det ikke noe i veien når man må bruke sånne "triks"? skulle ikke ting egentlig ha holdt seg i boksen? er det bare browserne som viser det feil, eller er det sånn det skal være...

[Haraldson]

Er vel ikke noe galt i å bruke en <hr> til dette formålet. Ganske så semantisk korrekt er det også.

[mikaelandre]

jeg har vanskelig for å forstå at det kan være rett å legge til et element og sette det usynlig for å fikse formatieringen på et annet element... men så lenge det funker er jeg fornøyd

[Arve Systad]

jeg har vanskelig for å forstå at det kan være rett å legge til et element og sette det usynlig for å fikse formatieringen på et annet element... men så lenge det funker er jeg fornøyd

http://www.complexspiral.com/publications/containing-floats/ <== Forklaring på heile greia!

[mikaelandre]

aha, da var det jo egentlig ikke så dårlig like vel da.

[mohuhau]

Enda enklere dersom du ikke skal ha noen skillelinje er jo å sette

clear: both;

på nyhet-klassen.

Vil ikkje hjelpe, fordi nyhetsklassen er "hovedboksen", og med clear:both; på den, så sørger du kun for at ingen flytande element ligger rundt denne, men det kan fremdeles vere trøbbel med flytande elementer INNI boksen. Skjønner?

 

Måten eg gjorde det på er den absolutt tryggaste og beste måten å gjøre det på.

Leste litt for fort, og så ikke at han hadde en ramme rundt nyheten-klassen. Så lenge han han ikke har det har man ikke behov for at nyhet-klassen utvides, og bildet kan godt flyte utenpå denne, så lenge du har clear: both; (eventuelt left, right dersom det passer bedre.)

 

Til å begynne med trodde jeg også du mente at <hr> skulle være etter nyhet-klassen (som etter min mening ville vært mest sematisk korrekt, uten at det har så altfor mye å si her ), og da ville det blitt det samme som å ha clear: both; på nyhet-klassen.

Dersom du fremdeles mener det ikke vil bli det samme, håper jeg du tar deg tid til å vise meg et eksempel e.l. slik at jeg kan forstå når problemer kan oppstå

 

Så litt (enda mer?) flisespikkeri til trådstarter og til alle andre som lider av at alt skal puttes inn i div-er:

Du trenger helt sikkert ikke en egen div rundt bildet, du kan bare sette class="bilde" på img taggen og fjerne diven rundt bildet helt. Det er også godt mulig du kan klare deg uten diven med klassen innhold. For et eksempel kan du se hvordan jeg har gjort det på denne siden: http://ibsenart.mine.nu/?side=filmer.

 

Edit: fikset link.

Endret 29. juli 2004 av mohuhau

[Haraldson]

Han må nok ha diver i dette tilfellet, for å "wrappe" hver nyhet sammen.

 

Og ja; <hr> skal være etter hver <div class="nyhet">. Les hele tråden en gang til?

[mohuhau]

Han må nok ha diver i dette tilfellet, for å "wrappe" hver nyhet sammen.

Jeg mener ikke at han skal fjerne alle divene, bare de som er inni <div class="nyhet">. Nå har ikke jeg sett designet hans så jeg vet jo ikke sikkert om disse divene kanskje er nødvendige, men utifra det han har forklart virker de overflødige for meg.

 

Og ja; <hr> skal være etter hver <div class="nyhet">. Les hele tråden en gang til?

Slik som jeg forstod arve87 (vel, dvs etter at jeg hadde lest gjennom tråden eg gang til før jeg skrev mitt forrige innlegg) skulle <hr> være før nyhet-diven avsluttes, altså slik:

div class="nyhet"><img src="bilde.jpg" alt="Eksempel"><p><hr></div>

og ikke slik:

<div class="nyhet"><img src="bilde.jpg" alt="Eksempel"><p></div><hr>

[Haraldson]

legg til <hr> under alt sammen, altså rett før du slutter av "hovedboksen" (...)

Slik jeg forsto det, skulle <hr> legges til nederst i diven all teksten er i, altså #main eller hva han kaller den.

 

Selvfølgelig, han må jo ha en <hr> under hver <div class="nyhet">

[mikaelandre]

jeg gjorde det slik (og det funka):

 

<div class="nyhet">

<h4>tittel</h4>

<img .... />

<div class="innhold">

tekst

</div>

<hr />

</div>

 

med .nyhet img {float: left;} og .nyhet hr {clear: left; visibility: hidden; }

 

hadde sikert ikke trengt <div> rundt innholdet, men det var for å formatere teksten. siden jeg ikke har anna tekst i boksen så kan jo den kuttes ut.

[Haraldson]

jeg gjorde det slik (og det funka):

 

<div class="nyhet">
 <h4>tittel</h4>
 <img .... />
 <div class="innhold">
   tekst
 </div>
 <hr />
</div>

Sånn kan du ikke gjøre det. Du kan ikke starte tag 1, starte tag 2, slutte tag 1 og slutte tag 2.

 

Det må skje sånn: 1-2-2-1

[mohuhau]

jeg gjorde det slik (og det funka):

 

<div class="nyhet">
 <h4>tittel</h4>
 <img .... />
 <div class="innhold">
   tekst
 </div>
 <hr />
</div>

Sånn kan du ikke gjøre det. Du kan ikke starte tag 1, starte tag 2, slutte tag 1 og slutte tag 2.

 

Det må skje sånn: 1-2-2-1

Det er da sånn han har gjort det også

Han har startet og avsluttet alle taggene på en gyldig måte.

[Haraldson]

Vet ikke helt hva jeg tenkte på...

 

mikaelandre: Hvordan blir det om du legger <hr> bak diven? Ut av nysgjerrighet, liksom

[mikaelandre]

<hr> utafor diven funka ikke, ble akkurat som om den ikke var der.

 

edit: det vil si, ikke akkurat. bildene stakk utafor, men neste innlegg kom ikke før etter bildet, så det ble ikke kollisjon mellom de, men ramma rundt innleggene gikk rett gjennom bildene.

Endret 30. juli 2004 av mikaelandre