Gå til innhold

Posisjonering av div'er

Garanti

Anbefalte innlegg

Garanti

Garanti

Skrevet
Skrevet

Hei, har et lite problem med posisjonering av ulike div'er i CSS:

<html>
<head>
<style type="text/css">
.holder{
background-color: #FFF000;
width: 300px;}

.fatty{
background-color: #AA0000;
margin: 5px;
float:left;
width: 200px;
height: 300px;}

.bottombar{
margin: 30px 5px 5px 5px;
background-color: #33FFFF;}
</style>
</head>
<body>
<div class="holder">
<div class="fatty">
</div>
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 
<div class="bottombar">
oh, lol
</div>
</div>
</body>
</html>

 

Har prøvd med ulike position's på 'fatty' og 'bottombar', uten at det gjorde saken noe bedre.

Forslag? Ønsket er altså at 'bottombar' skal ligge nederst, og ikke bak/over/delvis over 'fatty'. Slik ser det ut nå:

post-112482-1205945521_thumb.png

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Rasks

Rasks

Skrevet
Skrevet

Jeg vet ikke om dette er den aller beste måten å gjøre det på.

<html>
<head>
<style type="text/css">
.holder{
background-color: #FFF000;
width: 300px;}

.fatty{
background-color: #AA0000;
margin: 5px;
float:left;
width: 200px;
height: 300px;}

.bottombar{
float:left;
margin: 30px 5px 5px 5px;
background-color: #33FFFF;}

.clear {
clear:both;
}

</style>
</head>
<body>
<div class="holder">
<div class="fatty">
</div>
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 

<div class="clear"></div>
<div class="bottombar">
oh, lol
</div>
</div>
</body>
</html>

Lenke til kommentar
Garanti

Garanti

Skrevet
  • Forfatter
Skrevet (endret)

Nei, det virker fortsatt ikke. Om det er usikkert, jeg ønsker at det skal se slik ut:

EDIT: jeg ønsker forresten ikke å definere høyden på holder, bare så det er sagt. Innholdet er variabelt.

post-112482-1205952383_thumb.png

Endret av Garanti
Lenke til kommentar
funkyboy

funkyboy

Skrevet
Skrevet (endret)

Hei!

 

Det du strengt tatt bør gjøre, er å ha tre containere inni din hovedcontainer (.holder). Dette for å unngå at teksten til høyre legger seg under .fatty om denne er lengre enn .fatty. De to første containerne fastsetter du med bredde, float og clear. I tillegg setter du clear: both; på bottom- baren.

 

Altså (kun opptegnet):

 

<CONTAINER>

 

<FATTY>

float: left;

clear: none;

</FATTY>

 

<HØYRE>

float: right;

clear: none;

</HØYRE>

 

<BOTTOMBAR>

float: left;

clear: both;

</BOTTOMBAR>

 

Sett inn f.eks. <br style="clear: both;" />  her. Dette gir nettleseren(e) beskjed om at innholdsfeltet skal strekke seg helt hit. Du forsikrer deg samtidig om at bakgrunn (farge/ bilde) også repeteres hele veien.

 

</CONTAINER>

 

Edit: <br style="clear: both;" />  for å "sikre" containeren.

Endret av funkyboy
Lenke til kommentar
funkyboy

funkyboy

Skrevet
Skrevet (endret)
Hmm, dette begynner å bli komplisert, det er snakk om et blogginnlegg der 'fatty' er et bilde som har udefinert bredde og høyde. Det er sikkert like freit å bruke table til dette.

 

Neida;

 

 

<html>
<head>
<style type="text/css">

* {
margin: 0;
padding: 0;
}

.holder {
background-color: #FFF000;
width: 300px;
}

.fatty {
background-color: #AA0000;
margin: 5px;
float: left;
clear: none;
width: 200px;
height: 300px;
}

.hoyre {
width: 80px;
float: right;
margin-right: 5px;
}

.bottombar {
float: left;
clear: both;
width: 290px;
margin-top: 30px;
margin-left: 5px;
margin-bottom: 5px;
background-color: #33FFFF;
}

.clear {
clear: both;
}

</style>
</head>
<body>
<div class="holder">

 <div class="fatty">
 Bilde her 
 </div><!-- /.fatty -->

 <div class="hoyre">
 <p>Tekst her</p>
 </div><!-- /.hoyre -->

 <div class="bottombar">
 oh, lol
 </div><!-- /.bottombar -->

 <br class="clear" /> 

</div>
</body>

 

Edit: Mulig du må justere <br class="clear" />  i forhold til slik du vil ha footeren, men denne koden skal i utgangspunktet fungere likt i alle browsere.

Endret av funkyboy
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...