css - problemer med højder i CSS - Udvikleren.dk - Programmering, webdesign og grafik

Tags: css

Bruger #16670 @ 22.08.13 22:53

Hej

Jeg vil gerne have lidt hjælp og forklaring til, hvorfor mine <div></div> ikke vil tage height efter indholdet på min side

CSS kode

 * { 
   margin: 0;
   padding: 0;
   
 }
 
 div {
     
     border-color: #FF0000;
     border-width: 1px;
     border-style: solid;
     
 }
 
 #container {
         
     margin-left: auto;
     margin-right: auto;
     width: 990px;
     background-image: url(../images/bg4.gif);
 /*    height: 600px;*/
 }
 
 #top {
     
     width: 790px;
     margin-left: 200px;
     float: left;
 }
 
 #menu {
     
     width: 150px;
     margin-left: 50px;
     margin-right: 790px;
     float: left;
 }
 
 #indhold {
     
     width: 780px;
     margin-left: 200px;
     margin-right: 10px;
     float: left;
     margin-bottom: 10px;
 }
 
 #bund {
     
     background-image: url('../images/changbaishan.jpg'); /* image size 500x333 */
     background-repeat: no-repeat;
     width: 500px;
     /*height: 333px;*/
     margin-left: 345px;
     float: left;
 }

Problemerne jeg har er med: #container og #bund

Problemet med #container er at den ikke vil tage højde efter indholdet i den

Problemet med #bund er at den ikke vil tage højde efter baggrundsbilledet.

Jeg synes selv selv det hele ser rigtigt ud, men jeg MÅ have overset noget åbenlyst !

7 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 1 karma

Sorter efter stemmer Sorter efter dato

Bruger #16605 @ 23.08.13 22:42

Dit problem er et meget almindeligt problem i hjemmeside verdenen. Det kan løses meget simpelt ved at tilføje et element med "clear:both;" efter alle dine elementer som flyder til venstre (eller til højre). Normalt tænker jeg på dette som en bjælke som holder siden nede.

Lad os sige din kode så sådan her ud:

HTML kode

 <div id="container">
     <!-- Begge kasser flyder mod venstre via float:left; -->
     <div id="kasse">
         <p>Hej</p>
     </div>
     
     <div id="kasse">
         <p>Hej</p>
     </div>
 </div>

Så tilføjer du bare en div efter det sidste kasse-element, som har stylen clear:both; altså sådan her:

HTML kode

 <div id="container">
     <!-- Begge kasser flyder mod venstre via float:left; -->
     <div id="kasse">
         <p>Hej</p>
     </div>
     
     <div id="kasse">
         <p>Hej</p>
     </div>
     
     <div style="clear:both;">
     </div>
 </div>

Hvis jeg forstod problemet korrekt, kan det løses på denne måde i hvert fald

Bruger #17215 @ 22.08.13 23:20

408

Den med baggrundbilledet er fordi at det faktisk reelt set ikke er noget "indhold", fordi det ikke er et image, men et baggrundsbillede. Derfor er der ikke noget indhold i din bund som får den til at fylde det som baggrundsbilledet.
Sæt derfor en højde på.

Din #container
har du vel smidt en masse indhold ind i?

Bruger #16670 @ 23.08.13 00:23

Den med baggrundbilledet er fordi at det faktisk reelt set ikke er noget "indhold", fordi det ikke er et image, men et baggrundsbillede. Derfor er der ikke noget indhold i din bund som får den til at fylde det som baggrundsbilledet.
Sæt derfor en højde på.

Din #container
har du vel smidt en masse indhold ind i?

Ja, den indeholder faktisk alle alt indhold på siden, men den kan åbenbart ikke "se" de and <div>'er !

HTML kode

 <!doctype html>
 
 <html>
 
 <head>
 
     <title>Opgave 12.1</title>
     
 
      
      <link rel="stylesheet" type="text/css" href="css/opg12-6.css" />
      
      
 </head>
 
 <body>
     <div id="container"> container
         <div id="top">Sidehoved</div> 
         <div id="menu">
             <a href="#">Link</a>
             <a href="#">Link</a>
         </div><!-- menu END -->
         <div id="indhold">
             
        
         
             <h1>Vulkaner</h1>
             <p>En <strong id="green_color">vulkan</strong> er et sted hvor <em class="red_font">magma</em> eller varm smeltet sten fra den indre jord n&aring;r overfladen. Det kan ske voldsomt i en massiv <em class="red_font">supersonisk</em> eksplosion eller mere roligt som en klistret, langsomt flydende lava.</p>
             <p><span class="capital_letters">Vulkaner har v&aelig;ret en del af klodens historie l&aelig;nge f&oslash;r mennesket.</span><br /> Sammenlignet med mennesket som kun har eksisteret i 4 millioner &aring;r har vulkaner eksisteret i over 4 milliarder &aring;r. Tror jeg nok. Jeg kan ikke helt huske det. </p>
         
 
         
             
         </div><!-- indhold END -->
         <div id="bund">sidefod</div>
     </div><!-- container END -->
 </body>
 
 </html>

Jeg mener også at huske, at alt virkede efter hensigten indtil jeg begyndte på at lave #indhold og #bund

Jeg har lavet en højde til #bund (efter din anbefaling) og nu kan hele billedet ses, men der er stadig problemer med #container

Bruger #17215 @ 23.08.13 09:16

408

Har du overvejet at det er på grund af dine float:left? Din container har ikke float på, og er derfor ikke helt renderet på samme måde.

Indlæg senest redigeret d. 23.08.2013 09:16 af Bruger #17215

Bruger #16670 @ 23.08.13 14:13

Har du overvejet at det er på grund af dine float:left? Din container har ikke float på, og er derfor ikke helt renderet på samme måde.

Hej

Da, jeg læste dit svar var min første tanke; hvis jeg sætter en float: left; på #container, så vil den jo flyde til venstre ! ! ! - hvilket den jo ikke skal gøre, da den jo er centreret vertikalt på siden ved brug af margin-left: auto; og margin-right: auto;

Jeg prøvede dog alligevel, at gøre som du skrev og resultatet var præcis som jeg forudså: #container flød til venstre og samtidig, så foldede den sig ud.

Da jeg læste dit forrige indlæg:

Den med baggrundbilledet er fordi at det faktisk reelt set ikke er noget "indhold", fordi det ikke er et image, men et baggrundsbillede. Derfor er der ikke noget indhold i din bund som får den til at fylde det som baggrundsbilledet.
Sæt derfor en højde på.

gik jeg ind og sov på det alt imens jeg grublede over en løsning. Jeg kom frem til, at jeg ville hente billedet via index.html (så er det vel ikke et baggrundsbillede mere ?) og på den måde skabe noget indhold i #bund.

Jeg gjorde som beskrevet, men resultatet er stadig det samme: <div>'en er stadig klappet sammen !

Da, mit forsøg med at hente billedet via index.html heller ikke resulterede i det ønskede resultat, så er jeg selv helt løbet tør for idéer.

Bruger #17215 @ 23.08.13 14:28

408

Problemet med dine floats er at så snart du sætter dem til at have float så "hopper de ud af" #container div fordi de ikke længere renderes sammen med de "normale" div elementer på siden.

Det er fordi float-elementer er der ikke taget hensyn til når der beregnes højde for de overliggende elementer (parents), hvis det overliggende element's overflow er sat til visible. Default er overflow altid sat til visible, medmindre du har udspecificeret andet.
Dette er de regler der er gældende fra CSS2 specifikationen.

Prøv at sætte "overflow: auto" (bedste løsning) eller "overflow: hidden" på din #container. Så tages indholdet med som en del af beregning af højden.
Alternativt kan du selv sætte den til noget fra start (height, min-height, max-height), men dette vil ikke have en betydning hvis indholdet ændrer sig.

Den før omtalte (bedste løsning) kan dog have problemer i IE7, og kan derfor have behov for at benytte løsningen der kommer herefter.

Eventuelt læs op på clear: both fordi dette er en udfordring du vil støde på når du arbejder med float, og derfor skal kende omtalte løsning.

Denne løsning vil også kunne hjælpe dig ved at du indsætter en "spacer" efter dine float elementer.
<div class="spacer" style="clear: both;"></div>
Problemet med denne er den har ikke nogen semantisk værdi ud over at være en css-hack til dit layout.
Dette kan faktisk erstattes af style="display: inline-block".

Mener faktisk også du kan løse det hvis du sætter #container til "position: absolute", eller "position: fixed", men kan ikke præcist huske det.

Håber det løser det for dig

Indlæg senest redigeret d. 23.08.2013 14:33 af Bruger #17215

Bruger #16670 @ 25.08.13 14:56

Dit problem er et meget almindeligt problem i hjemmeside verdenen. Det kan løses meget simpelt ved at tilføje et element med "clear:both;" efter alle dine elementer som flyder til venstre (eller til højre). Normalt tænker jeg på dette som en bjælke som holder siden nede.

Lad os sige din kode så sådan her ud:
HTML kode
 <div id="container">
     
     <div id="kasse">
         <p>Hej</p>
     </div>
     
     <div id="kasse">
         <p>Hej</p>
     </div>
 </div>
Så tilføjer du bare en div efter det sidste kasse-element, som har stylen clear:both; altså sådan her:
HTML kode
 <div id="container">
     
     <div id="kasse">
         <p>Hej</p>
     </div>
     
     <div id="kasse">
         <p>Hej</p>
     </div>
     
     <div style="clear:both;">
     </div>
 </div>
Hvis jeg forstod problemet korrekt, kan det løses på denne måde i hvert fald .

Hej Emil

Tak for din løsning - den virker jo !

Jeg fornemmer, at dit forslag til løsning af problemet, sikkert var din første indskydelse (ja, det ved jeg ikke en sk!d om det rent faktisk forholder sig sådan !) og derfor vil jeg gerne spørge dig om der måske var en anden løsning ?

Lad os nu sige at jeg havde til opgave, at re-designe udseendet af en eksisterende webside, men ikke måtte tilføje nyt HTML til websiden, så ville din løsning ikke være gangbar !

Jeg undre mig også over, at problemet tilsyneladende kun opstår når #bund er inkluderet - hvis jeg disabler den, så klapper #container <div>'en ikke sammen.

Hvilket for mig til at formode, at fejlen må ligge hos den spade/klovn/CSS-coder wanna be, som sidder foran skærm og tastatur (dvs. mig

)

problemer med højder i CSS

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler