Gå til innhold

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

slemKaffe

Av slemKaffe
i Programmering og webutvikling

Anbefalte innlegg

slemKaffe

slemKaffe

Skrevet
Skrevet (endret)

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

greie1.png

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 av slemKaffe
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
datech

datech

Skrevet
Skrevet

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;

Lenke til kommentar
Haraldson

Haraldson

Skrevet
Skrevet

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. :)

Lenke til kommentar
datech

datech

Skrevet
Skrevet
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 ;-)

Lenke til kommentar
PHPdude

PHPdude

Skrevet
Skrevet
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".

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...