3 div's på samme linje?

[0lav]

Hei!

 

Jeg har et lite problem på et design jeg holder på med, har lett etter en løsning på nett siden i går men jeg finner ikke noe som hjelper.

 

Problemet er at jeg ikke får 3 div'er på samme linje uten at de f.eks. detter ut av div'en som ligger rundt alle 3 hvis dere skjønner.

 

Koden min er ca. slik:

 

<div id="container">
//En del andre ting her...//
<div id="hoved">
<div id="menu1">
</div>
<div id="content">
</div>
<div id="menu2>
</div>
</div>
</div>

 

Det er menu1, content og menu2 jeg vil ha på samme linje.

Jeg har også en border satt i container som går rundt hele siden, men disse tre kommer utenfor/under denne borderen hvis jeg bruker f.eks. float:left.

 

Jeg har før brukt table til dette, og det går jo kjempe bra, men jeg prøver å gå over til div nå, for det er det som er "best" nå, right? Eller vil dette være lettest å gjøre med table?

 

På forhånd takk for svar!

[LotteN]

du må poste css kodene dine og da ;P

Endret 3. juni 2007 av LotteN

[0lav]

Var på en måte de jeg trengte hjelp til, har ikke gjort så mye annet med CSS kodene enda en å prøve å få de der på en linje.

 

#container{
width:779px;
margin: 0 auto;
  border: 1px solid #000000;

}

#content{
float: left;
width:400px;
padding-left: 10px;
padding-right: 10px;
}

#menu1{
float: left;
}


#hoved{
padding-bottom: 10px;
padding-top: 5px;
}

#menu2{
float: left;
}

[Loomy]

Alle div'ene som skal stå ved siden av hverandre må floates og ha en fast bredde. For å unngå at de flyter under containeren kan du sette inn <br style="clear:both" /> direkte etter den siste av de floatede divene.

[Arve Systad]

http://eg.er.herlig.net/boks_setup.htm

 

Ca sånn, kanskje? Gammalt eksempel, så den ser ikkje vidare fin ut

[0lav]

Hei!

Takk for alle svarene! Skal se gjennom de nå og se om jeg finner ut av det..

[Kim T]

Alle div'ene som skal stå ved siden av hverandre må floates og ha en fast bredde. For å unngå at de flyter under containeren kan du sette inn <br style="clear:both" /> direkte etter den siste av de floatede divene.

8773521[/snapback]

 

Dette er vel ikke helt riktig eller? Mener du fint kan ha en flytende bredde på f.eks div'en som er i midten. Men en fast bredde på de som ligger utenfor.

 

Kim

[Loomy]

Det kommer an på hva du mener med flytende. Hvis du mener bredde i prosent eller em; ja, så lenge det er plass til alle tre divene i containeren skal det gå bra, men jeg ser ikke helt poenget med flytende bredde på midt-elementet når containeren uansett er X pixler. Da er jo den flytende bredden i praksis fast

 

Hvis du mener flytende som i width:auto; vil nok det gå åt skogen siden en divs auto-bredde er 100% av containerelementet. De floatede divene på sidene vil ikke påvirke midt-divens bredde siden de er, ja, floatet og dermed "tatt ut av strukturen".

Endret 4. juni 2007 av Loomy

[Kim T]

Ta f.eks battlefield.no som består av 3 kolonners oppsett. Der er høyre og venstre "fastsatt" og den i midten flytende. Dette fører til at nyhetene blir mer bredere ved høyere oppløsning og motsatt.

 

Jeg skjønner hva du mener loomy. Men mange sider er slik som jeg har gitt et eksempel på.

 

Kim

[Loomy]

Ja, jo sånn ja. Men da er jo containeren flytende og

[Emancipate]

<span> = <div> på samme linje.

[Jakob K]

@tsg1zzn: SPAN er inline, mens DIV er et blokkelement. Hvorvidt blokkelementet er stylet til å stå på linje eller ei skal ikke ha noe anderledes markering (HTML).

[Emancipate]

@tsg1zzn: SPAN er inline, mens DIV er et blokkelement.

Akkurat det jeg sa...

 

Hvorvidt blokkelementet er stylet til å stå på linje eller ei skal ikke ha noe anderledes markering (HTML).

display: block betyr jo bare at elementet IKKE skal stå på samme linje. Hvis du setter display: inline blir det på samme linje, men ikke lenger et blokkelement.

[Jakob K]

@tsg1zzn: SPAN er inline, mens DIV er et blokkelement.

Akkurat det jeg sa...

8790914[/snapback]

Mulig jeg misforstod deg, men poenget mitt var hovedsakelig skillet mellom utseende og innhold/markering. At om noe er på linje eller ikke ikke har noe med HTML-dokumentet å gjøre, det fikser man med CSS. Skal noe være i en SPAN er det ikke fordi det skal stå stilt opp på rekke bare, men fordi det skal være inline i et annet, overordnet element.

 

Hvorvidt blokkelementet er stylet til å stå på linje eller ei skal ikke ha noe anderledes markering (HTML).

display: block betyr jo bare at elementet IKKE skal stå på samme linje. Hvis du setter display: inline blir det på samme linje, men ikke lenger et blokkelement.

8790914[/snapback]

Du kan jo få elementer stylet med display: block; til å stå på linje, så lenge de også har angitt bredde og float: left;. Inline og block er jo ikke på linje og under hverandre, men inline og blokk, akkurat som det heter. Inline blir det jo som en bokstav på en linje, mens blokk vil det jo oppføre seg som en boks, hvilket ofte er det man vil.

[Emancipate]

@tsg1zzn: SPAN er inline, mens DIV er et blokkelement.

Akkurat det jeg sa...

8790914[/snapback]

Mulig jeg misforstod deg, men poenget mitt var hovedsakelig skillet mellom utseende og innhold/markering.

8793070[/snapback]

Da blir det riktigere å bruke en span her.

[Jakob K]

Mulig jeg misforstod deg, men poenget mitt var hovedsakelig skillet mellom utseende og innhold/markering.

8793070[/snapback]

Da blir det riktigere å bruke en span her.

8796662[/snapback]

Så du mener dette er mer riktig, med andre ord:

<div id="container">
//En del andre ting her...//
<div id="hoved">
<span id="menu1">
</span>
<span id="content">
</span>
<span id="menu2">
</span>
</div>
</div>

 

Jeg mener fortsatt det burde vært tre DIVs der, med float: left; og bredde.

[hjahre]

Her er et eksempel på åssen man kan gjøre ddet med css

Klikk for å se/fjerne innholdet nedenfor

body {
font:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}

#left-menu {
margin: 0.5em 0.5em 1em;

width:20em;

float:left;

border:#FF0000 1px solid;

text-align:left;

}

#content {
margin:1em 22em 1em;

border:#FF00FF 1px solid;

text-align:justify;

float:none;
}

#right-menu {
margin: 0.5em 0.5em 1em;

width:20em;

float:right;

border:#00FF00 1px solid;

text-align:right;
}

 

Da er det bare å bruke div's hvis du vil

Det eneste jeg ikke har fått til er at meny-kolonnene er like lange som hoved-diven hvis den er lenger enn meny-kolonnene. Noen som veit åssen man får til det?

Men håper dette svaret hjelper litt

[Emancipate]

Ah, leste ikke, sorry. Han skal bruke div. Jeg trodde han ville ha flere menyelementer på samme linje (altså, menu1 er det første valget, content er det andre valget, menu2 er det tredje valget osv...).

 

Men han vil jo ha tre kolonner, ikke en linje, så såklart div.

[Jakob K]

Men han vil jo ha tre kolonner, ikke en linje, så såklart div.

8797650[/snapback]

Da er vi enige.