[Løst]CSS problem: plassering av sub-bokser i forelder-boks

slemKaffe · 11. september 2008

Jeg har et lite problem her. Er det i det hele tatt mulig å få til noe slikt som dette i CSS uten "absolute positioning":

Tanken er altså å presentere flere sub-bokser inne i en forelder-boks. Videre ønsker jeg at alle sub-boksene skal ligge nede inne i forelder-boksen.

Har prøvd meg litt frem med noe kode, men jeg er nok desverre igen kløpper i CSS. I denne koden blir sub-boksene liggende pent ved siden av hverandre inne i forelder-boksen, men de blir liggende langs toppen og ikke bunnen av forelder-boksen:

<style type="text/css">
.forelderBoks {
background: #ffffff;
border: 4px solid #000000;
width: 500px;
height: 200px;
}
.subBoks {
width: 30px;
border: 4px solid #000000;
float:left;
background: #cccccc;
margin: 5px;
}
</style>

<div class="forelderBox">
<div class="subBoks">
   	<img src="image1.png" />
   	<img src="image1.png" />
       </div>
<div class="subBoks">
   	<img src="image1.png" />
       </div>
</div>

Hvordan kan jeg få sub-boksene til å bli liggende nederst inne i forelder-boksen?

Endret 12. september 2008 av slemKaffe

Haraldson · 11. september 2008

Vertikal justering gir alltid hodebry. I dette tilfellet tror jeg nesten at jeg hadde tatt en spansk en, og byttet ut wrapper-diven med en tabell. Inni tabell-cella kan du nemlig angi vertical-align: bottom; på kolonne-divene.

Endret 12. september 2008 av Haraldson
middle -> bottom

datech · 11. september 2008

Hei

Vet du høyden på innholdet i sub-boksene så bør det vel kunne fungere å bruke noe så enkelt som margin-top. Dette siden du har en høyde på foreldreboksen.

Du kan også kombinere klasser, og da lage klasser for topp-marg. Så slipper du å lage flere subBoks klasser.

Hvis innholdet i sub-boksen var 100px høyde så skulle det vel bli.

.topMargin92 {

margin-top: 92px;

}

For så bruke <div class="subBoks topMargin92">

I stedet for margin: 5px; i din subBoks klasse kan du vel bruke margin: 0 5px;

Haraldson · 11. september 2008

Vel. Hvis han planlegger å fylle kolonnene med tekst og innhold, er som regel definerte høyder en veldig lite holdbar løsning. Da setter man kun grenser for seg selv. Da kan man, som sagt, heller kjøre på med en løsning som jeg skisserte, og få noe som skalerer.

Hadde han visst høydene kunne han for øvrig bare ha posisjonert boksene inni et foreldreelement med angitt høyde.

Utrolig dårlig klasse-navngivning der forresten, datech. Kan jo like godt skrive stilene inline.

datech · 11. september 2008

Vel. Hvis han planlegger å fylle kolonnene med tekst og innhold, er som regel definerte høyder en veldig lite holdbar løsning. Da setter man kun grenser for seg selv. Da kan man, som sagt, heller kjøre på med en løsning som jeg skisserte, og få noe som skalerer.

Hadde han visst høydene kunne han for øvrig bare ha posisjonert boksene inni et foreldreelement med angitt høyde.

Utrolig dårlig klasse-navngivning der forresten, datech. Kan jo like godt skrive stilene inline.

Hei

Nå virket det jo som om det allerede var fastsatt en høyde på foreldreboksen, og da var jo allerede begresningen på plass.

Jeg tolket det dithen at trådstarter ikke ville bruke position..

.topMargin92 burde helt klart hatt annet navn ;-)

PHPdude · 11. september 2008

Jeg har et lite problem her. Er det i det hele tatt mulig å få til noe slikt som dette i CSS uten "absolute positioning":

Ja det er lett å løse dette med CSS på en god måte, lettest tipper jeg det hadde vært å sette display:table-cell og vertical-align:bottom på kolonnene.

Skal du derimot få det til å fungere i IE 6/7 sin tragisk begrensende CSS-støtte fra midten av 90-tallet er det en skikkelig nøtt, ikke akkurat en løsning, men denne kan kanskje hjelpe deg videre:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
* {
padding:0px;
margin:0px;
}
#container {
overflow:auto;
width:90%;
posistion:relative;
border-bottom:2px yellow solid
}
.col {
position:absolute;
bottom:0px;
width:25%;
outline:black solid thin;
}
#c1 {
height:200px;
left:0%;
color:red;
}
#c2 {
height:400px;
left:25%;
color:green;
}
#c3 {
height:500px;
left:50%;
color:blue;
}
#c4 {
height:300px;
left:75%;
color:yellow;
}
</style>
</head>
<body>
<div id="container">
<div id="c1" class="col">COL1</div>
<div id="c2" class="col">COL2</div>
<div id="c3" class="col">COL3</div>
<div id="c4" class="col">COL4</div>
</div>
</body>
</html>

Strengt talt er det absolute positioning, men bare relativt til forelder-boksen.

Vertfall to problemer:

1. Antall kolonner må være hardkodet.

2. Det er bare i bredden at boksen blir brukbart dynamisk, i høyden vil det bare bli rot viss innholdet "koker over".

slemKaffe · 12. september 2008

Tusen takk for all hjelp!

Logg inn

[Løst]CSS problem: plassering av sub-bokser i forelder-boks

Anbefalte innlegg

slemKaffe

Lenke til kommentar

Videoannonse

Haraldson

Lenke til kommentar

datech

Lenke til kommentar

Haraldson

Lenke til kommentar

datech

Lenke til kommentar

PHPdude

Lenke til kommentar

slemKaffe

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer