Problemer med height ved float

Her kan du stille og svare på spørgsmål omkring CSS
Besvar
kristianc
Begynder
Indlæg:2
Tilmeldt:1. maj 2013, 14:21
Problemer med height ved float

Indlæg af kristianc » 1. maj 2013, 14:27

Hej
Jeg har forsøgt mig med CSS efter jeres fine videoer.
Men jeg har et problemer og det er at min hoved div fx ikke automatisk udvider sig i højden efter hvor mange elementer der er.
Se fx her:
http://www.team-emilie.dk/teamemilie/index.asp

Kode: Vælg alt

body {
 background-image:url('graabg.gif');
}
 
#hoved {
    width: 1000px;
    
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: 0;
    background-color:	White;
    box-shadow: 5px 5px 5px #888888;
    
}
#top {
    width: 1000px;
    height: 103px;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: 0;
    text-align: center;
}

#mellem {
    width: 1000px;
    height: 25px;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: 0;
    text-align: center; 
}

#indledning {
    width: 1000px;   
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: 0;
    text-align: center; 
}

#blog {
    width: 650px;
    height: 600px;
    border-style: solid;
    border-width: 0;
    float: left;
}

#menu {
    width: 320px;
    height: 600px;
    border-style: solid;
    border-width: 0;
    float: right;
    margin-right: 25px;
}

.blogitem {
    width: 600px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: thin;
    border-color: #E0EFFF;
    text-align: center;
    background-color:	White;
		box-shadow: 5px 5px 5px #888888;
}

.menuitem {
    width: 280px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: thin;
    border-color: #E0EFFF;
    text-align: center;
    background-color:	White;
		box-shadow: 5px 5px 5px #888888;
}

h1 {
	font-family: Trebuchet, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: navy;
	padding-top: 12px;
	padding-bottom: 3px;
	padding-left: 10px;
	text-align: left;
}
h2 {
	font-family: Trebuchet, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-style:	italic;
	font-size: 10pt;
	color: navy;
	padding-top: 12px;
	padding-bottom: 3px;
	padding-left: 10px;
	text-align: left;
}
h3 {
	font-family: Georgia, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-style:	italic;
	font-size: 10pt;
	color: #0033FF;
	padding-top: 12px;
	padding-bottom: 3px;
	padding-left: 10px;
	text-align: left;
}

Kode: Vælg alt

<!--#include file="db.inc.asp"-->
<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>.:: Team Emilie ::.</title>
				<LINK REL=stylesheet HREF="CSSFIL.css" TYPE="text/css">
    </head>
    
  	<body>

    <div id="hoved">

			<!--Top div:--> 
    	<div id="top">
    		<img src="logo.jpg" alt="loge">
    	</div>

			<!--Mellem div:--> 
    	<div id="mellem">
    		<img src="ulogo.jpg" alt="mellemrum">
    	</div>
		
			<!--Indledning:--> 
    		<div id="indledning">
    			<h1>Velkommen ombord!</h1>
    			<br>
    			<h2>På denne side kan du læse om oplevelserne med.</h2>
    			<br>
    		</div>
		    
    	<!--Blog div:--> 
    		<div id="blog">
    			<% 
    				strSQL = "SELECT * FROM Blog"
						Set rs = Conn.Execute(strSQL) 
						Do While Not rs.EOF
  				%>	
  				<div class="blogitem">		
  				<h3><%=rs("overskrift")%></h3>
  				</div>	
  				<br>	
  				<%
  					RS.MoveNext
  					Loop
					%>
				</div>

  		<!--Menu div:--> 
    	<div id="menu">
    		<div class="menuitem">
    			Quick links:<br>
    			Speedbådskørekort<br>
    			Farvandsudsigt<br>
    			AIS Storebælt<br>
    			Beregn tid<br>
    		</div>
    		<br>
    		<div class="menuitem">
    			Rekorder:<br>
    				Laks: PR 11kg BR 11kg<br>
    				Torsk: PR 7kg BR 7kg
    		</div>
    		<br>
    				
    		<div class="menuitem">
    			Andre teams:<br>
    				SR Fishing<br>
    				Gadusn<br>
    				Team Terkel
    		</div>
    		<br>
    			    		<div class="menuitem">
    			Andre teams:<br>
    				SR Fishing<br>
    				Gadusn<br>
    				Team Terkel
    		</div>
    		<br>
    			    		<div class="menuitem">
    			Andre teams:<br>
    				SR Fishing<br>
    				Gadusn<br>
    				Team Terkel
    		</div>
    		<br>
    			    		<div class="menuitem">
    			Andre teams:<br>
    				SR Fishing<br>
    				Gadusn<br>
    				Team Terkel
    		</div>
    		<br>
    			    		<div class="menuitem">
    			Andre teams:<br>
    				SR Fishing<br>
    				Gadusn<br>
    				Team Terkel
    		</div>
    		<br>
    		<div >
    			<!--<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/youtube.xml&up_channel=kristianc1975&synd=open&w=320&h=390&title=&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>-->
    		</div>
    	</div>
		</div>
    </body>
	</html>
Hvordan pokker får jeg en "autosize" højde på min side/hoved div?
Top
Brugeravatar
Daniel
Admin
Admin
Indlæg:625
Tilmeldt:14. jun 2011, 09:27
Geografisk sted:Danmark, Fyn, Nørre Aaby
Kontakt:
Kontakt Daniel

Re: Problemer med height ved float

Indlæg af Daniel » 1. maj 2013, 14:57

Hej kristianc.

I dit CSS skal du indsætte følgende.

Kode: Vælg alt

.clear:before,
.clear:after {
	content: "";
	display: table;
}
.clear:after {
	clear: both;
}
.clear {
	zoom: 1;
}
Så skal du give din hoved div class="clear", og så skal du sætte height til auto ved din menu over i højre side, så virker det. :)
Det kan være noget underligt at bruge float i CSS, og ville gerne forklare hvad der sker, men har aldrig rigtig kunne forklare det, men ovenstående kode virker. :)
Top
kristianc
Begynder
Indlæg:2
Tilmeldt:1. maj 2013, 14:21

Re: Problemer med height ved float

Indlæg af kristianc » 1. maj 2013, 15:48

Hej
Tak, det virkede sørme fint.
Jeg har lige 2 spgm:

1. skal hoved div'en se sådan ud:

Kode: Vælg alt

 <div id="hoved" class="clear">
eller

Kode: Vælg alt

 <div class="clear">
Det kan jeg ikke helt gennemskue.

2. på andet forum hvor jeg startede med at poste spgm siges der er at float er beregnet til at lave tekstomløb fx omkring et billede og IKKE til at ligge block elementer ved siden af hinanden. Hvad er jeres mening/holdning til den måde jeg har bygget det op på indtil videre?

På forhånd tak.
Top
Brugeravatar
Daniel
Admin
Admin
Indlæg:625
Tilmeldt:14. jun 2011, 09:27
Geografisk sted:Danmark, Fyn, Nørre Aaby
Kontakt:
Kontakt Daniel

Re: Problemer med height ved float

Indlæg af Daniel » 1. maj 2013, 17:47

1. Den skal være <div id="hoved" class="clear">, du kan have et id, og så mange class du ønsker på et element, og da du har stylet dine divs med id selector, så skal du fortsat have den på. :)
2. Det er korrekt at man også bruger float til at lade indhold som billeder og tekst stå ved siden af hinanden, men den bliver også brugt på den måde som du bruger den på.
Var for nogle måneder siden i praktik ved et webbureau, hvor jeg var med til at lave nogle mindre sider de havde fået ordre på, og så nogle af de store sider de sad og lavede, og de brugte også float. :)
Top
Besvar

Tilbage til "CSS"