Presentere bilder og tekst med div/css. Hjelp...

[Eirikg89]

Holder på å lage et nytt deisgn til klubbsiden, og denne gangen skal jeg abre bruke divs css og validere koden min. Den forrige siden var helt forferdelig. Hvordan kan jeg få presentert bildene og teksten ved siden av slik som det er her: http://home.no.net/fcna/medlemmene.php ved hjelp av bare css/divs?? Bare de portrettbildene og teksten ved siden av.

For det er vel det beste i dette tilfellet? Ikek tables altså?

Noen som kan lage et lite kodeeksempel?

Endret 2. mars 2005 av Eirikg89

[Steinmann]

hmm

 

<div class="medlemmer">
 <div class="medlem">
   <img ... style="float: left" ... />
   <p> text </p>
 </div>
.
.
.
.
</div>

 

Tror det skal funke,

mulig du må trikse litt.

 

btw: den listen med info er selvfølgelig en definert liste(<dl>)

[funkweb]

HTML:

 

  <div id="picture"><img src="Poppe.jpg"></div>
 <div id="tekst">
   <ul>
     <li>Navn: Christian Poppe</li>
     <li>Født: 04.10.1989</li>
     <li>Rolle i styret: Styreleder</li>
     <li>Hvorfor er han i styret: Intiativtager til FC Nordre Aker. Viser intiativ og gjør masse for klubben. Han står på sitt og skal lede FC Nordre Aker mot toppen.</li>
   </ul>
 </div>

 

CSS:

 

#picture {
position: relative;
width: 250px;
float: left;
}
#tekst {
position: relative;
float: left;
width: 450px;
}
#tekst ul {
list-style: none;
}

 

Har så vidt testet.. trøtt.. la inn denne kommentaren halv 12.. sjekker innom imorra.!!!

[White Fox]

Slettet

Endret 3. mars 2005 av White Fox

[Eirikg89]

Hei, tusen takk for hjelpen.

Det fungerte dessverre ikke.

se her: (Den nye siden jeg skal bruke det på) http://goggen.zapto.org/eirikg89/medlemmene.php

 

Hele greia flyter uttover. Hva er det om er feil i koden. Hvis du lager kodesnutten på nytt, kan du legge inn at bildet og teksten blir litt mer sentrert? Ikke helt ute i kantene.

[Eirikg89]

Jag vet ikke helt, men kan det ha noe å gjøre med at jeg bruker float og relative som gjør at det havner helt flytende uttover. Jeg må få til dette ass...

[mohuhau]

Ser ikke helt hva som er galt der jeg... for stort mellomrom mellom tekst og bilde?

Du trenger ikke position:relative; her, fjern det.

Så setter du width til 200px (det er jo det bredden på bildet dit er).

I tillegg må du legge clear: both; på extra så skal det bli bra. (Må sikkert legge til litt margin eller padding her å der slik at ikke teksten kommer klistret til bildet)

[Eirikg89]

Nå går det helt fint med en. Altså et bilde og tekst ved siden av. men hvis jeg legger flere under hverandre så bare glir det uttover. Hvordan kan jeg få til flere nedover med litt mellomrom?

[Eirikg89]

Jeg må vel legge inn noe margin/padding eller noe, men hvordan? Og vil det fungere?

 

Noen som har noen tips?

[mohuhau]

#picture: padding: 10px; f.eks?

Så legger du en div rundt hver enkelt bilde med tilhørende tekst. Slik f.eks:

<div id="medlem">
 <div id="picture"><img src="Poppe.jpg"></div>
 <ul id="tekst">
   <li>Navn: Christian Poppe</li>
   <li>Født: 04.10.1989</li>
   <li>Rolle i styret: Styreleder</li>
   <li>Hvorfor er han i styret: Intiativtager til FC Nordre Aker. Viser intiativ og gjør masse for klubben. Han står på sitt og skal lede FC Nordre Aker mot toppen.</li>
 </ul>
</div>

 

PS: Det blir enklere dersom du har en link til siden der du prøver deg fram, i stedet for den gamle tabell-suppa som ligger på linken nå...

Endret 5. mars 2005 av mohuhau

[Eirikg89]

Det funket dårlig...

Se her: http://goggen.zapto.org/eirikg89/medlemmene.php

Der jeg tester alt

[mohuhau]

Glemte å si at du måtte ta me clear: both; på .medlem (bra at du så at du måtte bruke class, kopierte bare koden fra litt oppi her og tenkte ikke over at id ikke kan brukes)

 

Ta også å valider siden din, fordi du har en <ul> og en </div> for mye + manglende alt-tager.