div's positioneren m.b.v float

Dsganoen · 11 aug 2009

Beste helpmij'ers.

Ik heb een probleem waar ik niet uit kom.

Het gaat om het volgende:
Ik heb een layout dat er ruw gezien zo uit ziet: voorbeeld

Ik heb bij de div's van de "container", "navigatie" en "extra" een probleem.
Ik heb de div's een background image gegeven dat mooi fadet van licht grijs naar wit.
Maar ik heb ook een ronding voor de onderkant van elke div. Dat is 1 plaatje dat 6px hoog is en dan de volle breedte van de div.

Nu is het probleem:

Als ik de rondingen wil onder alle div's, dan betekent dit dat ik een extra div moet maken voor de ronding.
Je krijgt dan:
div container
div container footer
div navigatie
div navigatie footer
div extra
div extra footer

Het probleem is dat als ik dan float: left doe bij div container + div container footer en natuurlijk float: right bij de div's van "navigatie" en "extra".

Het probleem is dan: "navigatie" en 'extra" komen niet rechts te staan van de "container".
de "navigatie" div komt wel rechts van de "container footer" div, maar hij komt niet rechts te staan van de "container" div.

Ter verduidelijking een plaatje: voorbeeld(met alleen de div "navigatie" nog)

dit is de code die er achter zit:

Code:

#containeraligner{
	width: 900px;
	margin-top: 22px;
	margin-left: auto;
	margin-right: auto;	
}
	#content{
			width: 613px;
			min-height:  114px;
			background-color: white;
			background-image: url('/image/content/background.gif');
			background-position: top left;
			background-repeat: repeat-x;
			border-top: 1px solid #bebebe;
			border-left: 1px solid #bebebe;
			border-right: 1px solid #bebebe;
			float: left;
			}
		#bottom-content{
				background-image: url('/image/content/bottom1.gif');
				height: 6px;
				width: 615px;
				clear: left;
				float: left;
			}
#nav{
			width: 271px;
			min-height:  114px;
			margin-left: 12px;
			background-color: white;
			background-image: url('/image/content/background.gif');
			background-position: top left;
			background-repeat: repeat-x;
			border-top: 1px solid #bebebe;
			border-left: 1px solid #bebebe;
			border-right: 1px solid #bebebe;
			float: right;
	}
		.bottom-combined{
			
			background-image: url('/image/content/bottom2.gif');
			height: 6px;
			width: 273px;
			clear: right;
			float: right;
		}
#ads{
			width: 271px;
			min-height:  114px;
			margin-top: 16px;
			margin-left: 12px;
			background-color: white;
			background-image: url('/image/content/background.gif');
			background-position: top left;
			background-repeat: repeat-x;
			border-top: 1px solid #bebebe;
			border-left: 1px solid #bebebe;
			border-right: 1px solid #bebebe;
			float: right;
	}

met bijbehorende html:

HTML:

	<div id="containeraligner">
		<div id="content">
		Test<br />
		Test<br />
		Test<br />
		Test<br />
		Test<br />
		Test<br />
		Test<br />
		Test<br />
		Test<br />
		Test<br />
		</div><div id="bottom-content"></div>
		<!-- CONTENT -->
		<div id="nav">
		Test111<br />
		Test<br />
		Test<br />
		Test<br />
		Test<br />
		Test<br />
		Test<br />
		Test<br />
		Test<br />
		</div><div class="bottom-combined"></div>
</div>

Ik heb het vermoeden dat de float die rechts is niet kan omgaan met de 2 div's die left gefloat zijn. Kan iemand mij verder helpen?

Gr,

csshunter · 11 aug 2009

Hoi Daniel,
Ik zou eens proberen de <div id="bottom-content"></div> binnen de <div id="content"></div> te zetten, in plaats van erachteraan, en dan de { clear-left; float: left; } uit de #bottom-content slopen.
Plus hetzelfde voor de <div class="bottom-combined"> (binnen de #nav, en ook daar de clear en float weghalen).
Wat gebeurt er dan?

Succes!
CSS-hunter

Dsganoen · 11 aug 2009

Bedankt voor je reactie csshunter, maar er is dan het volgende probleem:

Omdat de div's een border hebben aan weerszijden, heb ik in mijn berekeningen de div's 2px minder breed gemaakt zodat hij MET borders erbij de goede breedte krijgt. Het plaatje dat ik gebruik voor de footers, is vergeleken met de container, navigatie en extra div, 2 pixels breder. Als ik nu de footer in de container zet, dan staat hij niet helemaal gelijk kwa border. Dit valt natuurlijk op te lossen met margin-left: -1px;, maar dan is er nog een ander probleem. Omdat mijn achtergrond van de site niet compleet wit is en er een dikke scanlines door heen lopen, moet de achtergrond van de "rondingen in de footer" doorzichtig zijn. Als ik de footer in de container zet, dan rekt de container mee waardoor ik het "rondheid van de footer" effect niet meer krijg. voorbeeld: http://img36.imageshack.us/img36/8417/voorbeeld2.gif

Gr,

csshunter · 11 aug 2009

rond hoekjes probleem oplosbaar

Hoi Daniel,
Aha - I see! Je wilt de border-lijntjes links-rechts niet dwars door de transparante ronde hoekjes krijgen.
Dat is op te lossen door binnen je <div id="content"></div> eerst nog een <div id="inside"></div> te zetten waar je dan de tekst enz. in zet.
De borders links-rechts sloop je uit de #content, en voeg je toe aan de nieuwe #inside. Dan houden de borders op precies boven het plaatje met de ronde hoekjes.
Ik heb nog het volgende:

Leesvoer: NL artikel Flexibele Ronde Hoeken, geschikt voor transparante hoekjes (in tegenstelling tot vele andere oplossingen op internet).
Kijkvoer: Flexibele Hoeken Speeltuin.

Lukt het niet, dan geef je maar een brul. Succes!
CSShunter

Poppoll · 11 aug 2009

Dit zou het moeten doen:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <title>Untitled XHTML Document</title>
<style type="text/css">
 #containeraligner{
	width: 900px;
	padding-top: 22px;
	margin: 0 auto;
	}
#contentleft{float:left; width:615px}
#contentright{float:right;width:273px}
	#content{
			width: 613px;
			min-height:  114px;
			background-color: white;
			background-image: url('/image/content/background.gif');
			background-position: top left;
			background-repeat: repeat-x;
			border-top: 1px solid #bebebe;
			border-left: 1px solid #bebebe;
			border-right: 1px solid #bebebe;
			float: left;
			}
		#bottom-content{
				background-image: url('/image/content/bottom1.gif');
				height: 6px;
				width: 615px;
				float: left;
				
			}
#nav{
			width: 271px;
			min-height:  114px;
			margin-left: 12px;
			background-color: white;
			background-image: url('/image/content/background.gif');
			background-position: top left;
			background-repeat: repeat-x;
			border-top: 1px solid #bebebe;
			border-left: 1px solid #bebebe;
			border-right: 1px solid #bebebe;
			float: right;
	}
		.bottom-combined{
			
			background-image: url('/image/content/bottom2.gif');
			height: 6px;
			width: 273px;
			float: right;
			
		}

.clear {clear:both} 
#footer{border:1px solid #c00;height:50px;margin-top:10px}	
</style> 
</head>
<body>
<div id="containeraligner">
		<div id="contentleft">
        <div id="content">
        Test<br />
        Test<br />
        Test<br />
        Test<br />
        Test<br />
        Test<br />
        Test<br />
        Test<br />
        Test<br />
        Test<br />
        </div>
		<div id="bottom-content"></div>
		</div>
        
		<div id="contentright">
        <div id="nav">
        Test111<br />
        Test<br />
        Test<br />
        Test<br />
        Test<br />
        Test<br />
        Test<br />
        Test<br />
        Test<br />
        </div>
		<div class="bottom-combined"></div>
		</div>
		<div class="clear"></div>
		<div id="footer">footer inhoud</div>
</div>
</body>
</html>

PP

Dsganoen · 11 aug 2009

Wouw, gelijk 2 antwoorden. Ik vind ze allebei goed bedacht. Ik weet nog niet welke ik ga gebruiken, maar ik denk dat ze allebei wel moeten werken. Ik zal het morgen uitproberen en ik 'geef een brul' als het niet werkt ;D.

Bedankt voor de goede hulp alvast,

Dsganoen · 12 aug 2009

Ik heb beide manieren uitgeprobeerd en wil beiden bedanken. Maar er was wel een klein probleempje met de manier van csshunter, maar dat kan ik niet afschuiven aan hem omdat ik een beetje informatie te weinig gaf. De manier van poppoll werkte wel aangezien ik de opbouw meer hetzelfde kon laten en dat daarom geen conflicten gaf.

Beiden zeer bedankt!

Gr,

Lechuque · 14 aug 2009

Hoi misschien een tip, je gebruik apparte regels voor border bvb border-right,border-left enz.
en een waarde erachter,je zou dit ook allemaal in 1 declaration kunnen zetten.
Er zijn nu heel goede css boeken in full color te krijgen en niet zo duur.
Ik ben een half jaar geleden begonnen met css en binnen 2 weken wist ik bijna alles wat er te weten valt op css gebied (nadat ik wat geoevend had met een zelfgemaakte site)

Als je naar een voorbeeld wilt kijken van site van mij een vriend,
(hij designed en ik xhtml en css) kijk dan even hier naar:

http://www.seawave.nl/

Verder is het makkelijk om "web developper tool" van firefox te instaleren
dan kan je helemaal zien hoe sites zijn opgebouwd vb divs,tables maar ook de css en html
e.d ,heel uitgebreid.
Mocht je deze tool al hebben dan heb ik dus voor niets getyped.

Groetjes Mark

CSS - http://www.seawave.nl/

* Collapse All
* Expand All

http://www.seawave.nl/
http://www.seawave.nl/main.css

@charset "utf-8";
/* CSS Document */
h2, h3, h4, h5 {
font-weight: normal;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
}

h2 {
color: #fff;
font-size: 20px;
}

h3 {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#184689;
font-size: 12px;
line-height: 19px;
}

h4 {
color: #fff;
font-size: 20px;
display: inline;
}

h5 {
color: #184689;
font-size: 16px;
display: inline;
}
#nav li a:link{color:#e68700;}
#nav li a:visited{color:#e68700;}
#nav li a:hover{color:white;}

html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr,a{
margin:0;
padding:0;
border:0;
border-collapse:separate;
border-spacing:0;
text-decoration:none;
}
#header{
background:url('images/banner.jpg') no-repeat center;
position:relative;
left:0;
width:100%;
height:183px;
z-index:inherit;
}
body{
background-position: 0 30px;
background-image: url('images/bg_repeat.jpg');
background-repeat: repeat-x;
background-color: #6ebfe6;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #747474;
padding: 0;
height: 100%;
}

#logo{
width:258px;
height:109px;
background:transparent url('images/logo.png');
position:relative;
margin: 0;
padding: 0;
border: none;
/* change the values of top and left to adjust the position of the logo*/
top:-170px;
left: 5px;
}
#menu{
background:transparent;
position:relative;
width:800px;
height:40px;
margin:0 auto;
z-index:5;
padding:5px;
}
ul#nav{
position: absolute;
top:10px;
left:30px;
list-style:none;
}
#nav li{
float:left;
width:auto;
margin-right:120px;
font: bold 9px/26px 'Tahoma', Arial, Verdana, Sans-serif;
}

#main{
background:transparent;
position:relative;
width:800px;
margin:0 auto;
z-index:5;
padding:5px;
}
#slogan{
background:transparent;
position:relative;
width:800px;
height:100%;
margin:0 auto;
z-index:5;
padding:5px;
}
#holder{
background:transparent;
position:relative;
width:800px;
height:100%;
margin:0 auto;
z-index:5;
padding:5px;
}
#leftB{
float:left;
background:transparent;
position: relative;
width:380px;
height:100%;
}
#colR{
float:left;
background:transparent;
position: relative;
width:350px;
height:100%;
margin:0 auto;
}
#rightB{
float:right;
background:transparent;
position: relative;
width:400px;
height:100%;
margin:0;
}
#footer{
position: relative;
float:left;
clear:both;
width:100%;
margin-top:0px;
height:424px;
background:url('images/footerG.jpg') no-repeat center bottom;
text-align:center;
}

#galleryHolder{
width: 100%;
margin:0 auto;
}
#insideGalleryHolder{
background:transparent;
width:900px;
height:210px;
float:left;
display:inline;
}
.galleryImageHolder{
background:transparent;
float:left;
display:inline;
width:400px;
}
.galleryDescriptionHolder{
background:transparent;
float:left;
display:inline;
width:350px;
}
#rightGalleryButton{
position:absolute;
top:150px;
left:750px;
}
.galleryJS{
position:relative;
overflow:hidden;
visibility: visible;
left:0px;
z-index:2;
}
.galleryJS ul{
position:relative;
left:-2440px;
list-style-type:none;
margin:0;
padding:0;
z-index:1;
}
.galleryJS h2{margin:10px 0 0 10px;}
.galleryJS ul li{
overflow:hidden;
float:left;
width:738px;
height:210px;
}
#fotos{
float:left;
width:auto;
list-style-type:none;
}
#fotos li img{margin-bottom:15px;}
#leftB h2,#rightB h2{margin-top:20px;}

#collum{
float:left;
width:150px;
height:50px;
border-bottom:1px solid white;
padding-top:5px;
}
#collumH{
float:left;
width:150px;
height:70px;
border-bottom:1px solid white;
padding-top:5px;
}
#table{
height:300px;
}
#leftB li,#rightB li{
margin-left:20px;
color:#fff;
}
#credits{
text-align:center;
clear:both;
height:20px;
}
#photoL{
float:left;
background:transparent;
position: relative;
width:270px;
margin:0 auto;

}
#photoR{
float:left;
background:transparent;
position: relative;
width:527px;
height:100%;
margin:0 auto;
}
#photoC{
float:left;
background:transparent;
position: relative;
width:260px;
height:381px;
margin:0 auto;
margin-bottom:15px;
}

Dsganoen · 14 aug 2009

Hey Lechuque.
Bedankt voor je info.

Kan je alles in 1 declaratie dan? Ik denk het niet aangezien ik maar aan 3 kanten een border heb en niet aan 4 kanten, waardoor ik niet de algemene regel: "border: 1px solid #000000" gebruiken kan. Ik denk dat ik ongeveer ook wel alles op het gebied van css weet. Aangezien ik wilde weten wat anderen over deze "issue" dachten, heb ik mijn vraag hier gepost.

De webdeveloper toolbar is natuurlijk een must voor "ons" en natuurlijk is Firebug niet te vergeten.

Groet,

csshunter · 14 aug 2009

Voor de border-eigenschappen kan je als volgt de verkorte notatie gebruiken:

Code:

#borderShorthand {
	border: solid #BEBEBE;
	border-width: 0 1px 1px 1px;
}

Kijk maar.
De hele css-specificatie staat hier.

CSS-hunter

Dsganoen · 14 aug 2009

Oke, goed om te weten!
Gr,

Lechuque · 3 sep 2009

T spijt me dat ik zo laat reageer maar GRAAG GEDAAN i.i.g. DOEI

div's positioneren m.b.v float

Dsganoen

Gebruiker

csshunter

Meubilair

Dsganoen

Gebruiker

csshunter

Meubilair

Poppoll

Gebruiker

Dsganoen

Gebruiker

Dsganoen

Gebruiker

Lechuque

Gebruiker

Dsganoen

Gebruiker

csshunter

Meubilair

Dsganoen

Gebruiker

Lechuque

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy