Avatar billede mortensf Nybegynder
28. september 2006 - 10:25 Der er 7 kommentarer og
1 løsning

Hjælp til master dokument

Hvordan sørger jeg for at min sidebar følger min content del uden at skal sætte en masse <p></p> ind for at nå niveau? Har prøvet alt. Har vedlagt mit stylesheet:

Se side her:
www.templateuniverse.eu/test/test.html

/* CSS Document */
/*master document*/
body{
margin: 0;
padding: 0;
background-image:url(images/bg.jpg);
background-repeat: repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
}

#Wrap{
width: 740px;
background-color:#ffffff;
}

#PSD_menu{
width: 97%;
padding: 11px;
height: 76px;
border: none;
background-image:url(images/menu.jpg);
}

#header{
background-image:url(images/big-header.jpg);
height:180px;
}

#header2{
background-image:url(images/big-header_product.jpg);
height:180px;
}

#header3{
background-image:url(images/big-header_we_offer.jpg);
height:180px;
}

#content{
width: 495px;
float: left;
height: auto;
background-color: #FFFFFF;
}

#inside_content{
width: 95%;
margin: 10px 10px 10px 10px;
}

#sidebar{
width: 245px;
float: left;
background-color: #CCCCCC;
height: auto;
}

#inside_sidebar{
width: 90%;
margin: 10px 10px 10px 10px;
font-size: 11px;
}

#bottom{
clear:both;
width: 730px;
height: 40px;
font-size: 11px;
padding-left: 10px;
background-image:url(images/bottom_header.jpg);
}

/*generic stuff*/

#specs{
font-size: 10px;
}

h1{
font-family: Trebuchet MS, Tahoma, Verdana;
font-size:20px;
color:#333333;
font-stretch: narrower;
}

h2{
font-family: Trebuchet MS, Tahoma, Verdana;
font-size:15px;
color:#333333;
font-stretch: narrower;
}

/*--menu--*/
Avatar billede notes2c Nybegynder
28. september 2006 - 10:32 #1
Hvad mener du når du siger at din sidebar skal følge content del. Er det teksten inden i som skal flugte.
Avatar billede mortensf Nybegynder
28. september 2006 - 10:39 #2
Nej teksten er som den skal være den holder sig pænt i toppen og flugter teksten i content. Det er den grå farve der skal flugte med content og det gøre den ikke med mindre jeg sætter <p></p> ind til den når niveau.
Avatar billede roenving Novice
28. september 2006 - 11:25 #3
-- uden at have analyseret din css, er det klassiske trick at sætte baggrundsfarven på en omkransende (bagvedliggende !-) div, og sørge for at det udfyldes ved at sætte en 'tom' div med clear:both; efter de andre !o]
Avatar billede mortensf Nybegynder
28. september 2006 - 11:38 #4
Problemet er at jeg har en bagvedliggende div med hvis baggrund og det er:
#Wrap{
width: 740px;
background-color:#ffffff;
}

Min sidebar ser sådan ud: Har forsøgt mig med Height auto men det virker ikke.

#sidebar{
width: 245px;
float: left;
background-color: #CCCCCC;
height: auto;
}

Hvad gør clear:both egentlig?
Avatar billede roenving Novice
28. september 2006 - 11:54 #5
En skitse kunne være:

<div style="width:300px;background-color:#999;">
  <div style="width:198px;background:white;float:left;border:1px solid red;">Indholds-div<br>k<br>k<br>k<br>k<br>k<br>k<br>k<br>k</div>
  <div style="float:left;width:100px;">sidebar</div>
  <div style="line-height:0;font-size:0;height:0;clear:both;overflow:hidden;">clear-div (i praksis usynlig)</div>
</div>

-- den er kun testet med fuldt gyldig doctype, men virker upåklageligt i mine browsere !-)
Avatar billede notes2c Nybegynder
28. september 2006 - 12:40 #6
clear:both bryder igangværende floats både left og right float
Avatar billede mortensf Nybegynder
01. maj 2007 - 16:31 #7
solved
Avatar billede roenving Novice
02. maj 2007 - 10:15 #8
Hvordan ?-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester