Float krijg ik niet gecleared?

Breaky623 · 30 okt 2010

Nou ik float een plaatje .. en in de volgende div staat een clear, maar toch rekt de div niet mee uit..

Hieronder een screen en de codes..

op de screen heb k wel de foto's en tekst even weggemarkt..

http://img545.imageshack.us/img545/7977/92653628.png

HTML:

<div class="content_mid">
            	<img src="images/test.jpg" width="150" height="200" class="img"/>
            	<p>BLABLA TEKST</p>

            </div>
            
            <div class="content_bottom">
            
           	</div>

Code:

.img {
	margin-left: 10px;
	float: right;	
}
.content_mid {
	padding-left: 20px;
	padding-right: 20px;
	width: 860px;
	background: url(../images/content_bottom_2.png) #000 bottom no-repeat;	
}

.content_bottom {
	clear: both;
	width: 900px;
	height: 15px;
	background: url(../images/content_bottom_1.png);	
}

visha · 30 okt 2010

hoogte instelle

Code:

.content_mid {

    height: 200px;

bij mijn pic was 200 px genoeg.

Breaky623 · 31 okt 2010

Dus ik moet gewoon een hoogte toekennen

ik ga het proberen en kijken of het lukt.

iig bedankt voor je moeite.

Breaky623 · 31 okt 2010

Oke, mooi voor een noodoplossing. Maar als het plaatje weer groter wordt dan krijg ik hetzelfde probleem. Normaal heb ik dit nooit enzo? Kan zijn dat het helemaal ergens andrs aanlicht?

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/bgstretcher.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/bgstretcher.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
	//  Initialize Backgound Stretcher
	$(document).bgStretcher({
	images: ['images/background.jpg'], imageWidth: 2000, imageHeight: 1400
	});
	});
</script>
<title>JWZ</title>
</head>

<body>
	
    <div class="login"><a href="#" class="login"></a></div>
	<div class="container">
    
    	<div class="header">
       	</div>
       	
        <div class="menu">
        	<ul>
            	<li><a href="#" class="menu_home"></a></li>
                <li><a href="#" class="menu_info"></a></li>
                <li><a href="#" class="menu_results"></a></li>
                <li><a href="#" class="menu_members"></a></li>
                <li><a href="#" class="menu_contact"></a></li>
            </ul>
        </div>
        
       	<div class="content">
       		<div class="content_top">
            	<h1>Title</h1>
                <h2>Wednesday 13 October 2010</h2>
            </div>
            <div class="content_mid">
            	<img src="images/test.jpg" width="150" height="200" class="img"/>
            	<p>TEKST</p>
            </div>
            <div class="content_bottom">
           	</div>
       	</div>
        
        <div class="blocks">
        	<div class="block_photo"></div>
            <div class="block_video"></div>
            <div class="block_nextstop"></div>
        </div>
        
        <div class="footer">
        </div>
    
    </div>

</body>
</html>

Code:

body {
	color: #FFF;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;	
}

h1 {
	font-size: 12px;
	color: #f8d108;	
}

h2 {
	font-size: 10px;
	color: #999;
	font-weight: 100;	
}

p {
	margin: 0;
	padding: 0;	
}

.img {
	margin-left: 10px;
	float: right;	
}

.container {
	z-index: 2;
	position: relative;
	width: 900px;
	margin: auto;	
}

.header {
	width: 900px;
	height: 200px;
	background: url(../images/header.png);	
}

.menu {
	margin-top: 20px;
	width: 900px;
	height: 24px;
}

.menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu li {
	float: left;	
}

.menu_home {
	display: block;
	width: 81px;
	height: 27px;
	background: url(../images/menu_home.png) no-repeat;	
	border-bottom: #f8d108 solid 7px;
}

.menu_info {
	margin-left: 40px;
	display: block;
	width: 67px;
	height: 27px;
	background: url(../images/menu_info.png) no-repeat;		
}

.menu_results {
	margin-left: 40px;
	display: block;
	width: 135px;
	height: 27px;
	background: url(../images/menu_results.png) no-repeat;		
}

.menu_members {
	margin-left: 40px;
	display: block;
	width: 144px;
	height: 27px;
	background: url(../images/menu_members.png) no-repeat;		
}

.menu_contact {
	margin-left: 40px;
	display: block;
	width: 139px;
	height: 27px;
	background: url(../images/menu_contact.png) no-repeat;		
}

.content {
	margin-top: 20px;
	width: 900px;	
}

.content_top {
	padding-top: 20px;
	padding-left: 20px;
	width: 880px;
	height: 57px;
	background:url(../images/content_top.png);	
}

.content_mid {
	padding-left: 20px;
	padding-right: 20px;
	width: 860px;
	height: 200px;
	background: url(../images/content_bottom_2.png) #000 bottom no-repeat;	
}

.content_bottom {
	clear: both;
	width: 900px;
	height: 15px;
	background: url(../images/content_bottom_1.png);	
}

.blocks {
	margin-top: 20px;
	width: 900px;
	height: 125px;	
}

.block_nextstop {
	margin-right: 40px;
	float: right;
	width: 200px;
	height: 125px;
	background: url(../images/block_nextstop.png);	
}

.block_video {
	margin-right: 40px;
	float: right;
	width: 200px;
	height: 125px;
	background: url(../images/block_video.png);	
}

.block_photo {
	float: right;
	width: 200px;
	height: 125px;
	background: url(../images/block_photo.png);	
}

.footer {
	margin-top: 20px;
	width: 900px;
	height: 100px;
	background: url(../images/footer.png);	
}

.login {
	display: block;
	z-index: 2;
	right: 0;
	bottom: 0;
	position: fixed;
	width: 30px;
	height: 30px;
	background: url(../images/login.png);	
}

visha · 31 okt 2010

hey,
kheb ff je script gebruikt van de eerste post want ik zag dat je bij de laatste allemaal plaatjes had en andere dingen zoals jquery enz...(is dan handig als je het zip en upload)
maarre dit is de werkende code

in het blauw en dikgedrukt zijn de code waar je op moet letten of wat ik er voor je nieuw bijgeschreven heb. Het was wel ff zoeken voor mij.
ik had het al een keer eerder gedaan maar kwam zelf in de knoop dat ik de hoogte probeerde in te stellen terwijl je de css attribuut moet aanpassen

.
kneem aan dat je hiermee je huidige pagina wel editen.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
[B][COLOR="Navy"]function autoresize()
{
	var picSize = document.getElementById('pic1').clientHeight + "px";
	
	document.getElementById('content_mid').style.height = picSize;
}[/COLOR][/B]

</script>

<style type="text/css">
.img {
	margin-left: 10px;
	float: right;	
}
.content_mid {
	padding-left: 20px;
	padding-right: 20px;
	width: 860px;
	xbackground: url(../images/content_bottom_2.png) #000 bottom no-repeat;	
	background-color:red;
	[B][COLOR="Navy"]height:20px;[/COLOR][/B]
}

.content_bottom {
	clear: both;
	width: 900px;
	height: 15px;
	xbackground: url(../images/content_bottom_1.png);
	background-color:blue;	
}
</style>



</head>

[COLOR="Navy"][B]<body onload="autoresize()">[/B][/COLOR]
<div [B][COLOR="Navy"]id="content_mid"[/COLOR][/B] class="content_mid">
                <img [B][COLOR="Navy"]id="pic1"[/COLOR][/B] src="l_ded11ff7042f4dba93a1e53601edea5c.jpg" width="150" height="200" class="img"/>
                <p>BLABLA TEKST</p>
 
            </div>
            
            <div class="content_bottom">
            
            </div>


</body>
</html>

Breaky623 · 31 okt 2010

Erg bedankt voor de reactie, ik ga het morgen uitproberen. Maar normaal gesproken moet het ook auto. vergroten in de css.. tenminste ik heb het altijd gedaan. maar nu lukt het me niet.. dus morgen ga ik ook even mijn website's vergelijken.. maar het moet toch in principe alleen met CSS kunnen.. misschien heb ik de divjes in html wel niet in de goede volgorde staan of iets dergelijks. Ga ik morgen even kijken. maar iig bedankt

visha · 31 okt 2010

is goed.
laat maar weten of het gelukt is

Float krijg ik niet gecleared?

Breaky623

Gebruiker

visha

Terugkerende gebruiker

Bijlagen

Breaky623

Gebruiker

Breaky623

Gebruiker

visha

Terugkerende gebruiker

Breaky623

Gebruiker

visha

Terugkerende gebruiker

Nieuwste berichten

Wij waarderen jouw privacy