Hulp gevraagd bij DIV-layout

Door Marcel K op 15-10-2006 16:31

566 views

Ik begin pas met divjes (voorheen gebruikte ik de table-layout) en wil een layout maken die cross-browser is.
De layout heb ik eerst gemaakt in photoshop, kijk maar op http://csstest.2mdesign.nl/mustbe.jpg
Ik ben dus aan het spelen gegaan maar e.e.a. komt niet op de plaats waar ik het zou willen hebben.
http://csstest.2mdesign.nl/index.html >Hier kun je het resultaat zien wat ik tot nu toe gebrouwen heb.
Kan iemand mij met wat hints op de juiste weg helpen svp ?

Kalle P

15-10-2006 16:37

kijk eens naar float.

Google er op float css.

Zo krijg je de div naast elkaar.

edit:

googlen eens op een "2 column layout". je gebruikt 2 kolommen. Kijk eens hoe ze het daar doen, daar leer je van.

Marcel K

15-10-2006 16:46

Tnx Kalle, maar ik gebruik meer kolommen, in de content moeten er 2-3 naast elkaar komen, plus het side-menu dan kom ik op 4.
Sidenews krijg ik ook niet op zijn plaats, en de navbar zou naast het sidemenu moeten staan zoals je in de jpg kunt zien.
Ben al volop bezig geweest, maar het wil niet echt lukken.

Kalle P

15-10-2006 16:58

Daddy zo moet je het niet zien.
Kijk je (verticale menu & nieuws) en (horizontale menu en content). Dat zijn 2 colums. In de rechter column zijn er weer allemaal onder verdeeld. Dat kan je ook weer floaten.

Zolang je dat floaten maar door hebt.

Marcel K

15-10-2006 17:19

Kalle,
Ik begin je door te krijgen denk ik, verbeter me maar als ik het mis heb svp.

Ik moet dus onder de header 2 divs maken, 1 links en 1 rechts.
- In de linker-div plaats ik de sidemenu en de sidenews onder elkaar met een float-left ?

- In de rechter-div plaats ik dan de horizontale navbar en het content-blok

- het content-blok kan ik dan ook weer divjes plaaten.

Als ik het goed heb "grijpt" een floated element naar de div waarin hij zich bevindt ?

Ik ga vanavond eens stoeien met je hint, hartelijk dank zover, is weer een nieuwe zienswijze voor mij ;-)

Kalle P

15-10-2006 17:53

Ja ik denk dat je het snapt alleen ik reageer nog wel ff zodat je het zeker weet,

- In de linker-div plaats ik de sidemenu en de sidenews onder elkaar met een float-left ?

De linker div moet je op float: left; zetten

- In de rechter-div plaats ik dan de horizontale navbar en het content-blok

De rechter-div zet je op float:right;

- het content-blok kan ik dan ook weer divjes plaaten.

klopt

Als ik het goed heb "grijpt" een floated element naar de div waarin hij zich bevindt ?

De div zelf, waar je style aangeeft.

Dus:


<div class="floats">
  <div class="linker_div">
      <!-- hier nog div met menu en nieuws (die niet gefloat)-->
  </div>
  <div class="rechter_div">
      <!-- andere menu en je content-->
  </div>
</div>

css:
.floats{
   width: 100%
   height: 300px;
}
.linker_div{
   width: 200px; /*vaste menu en nieuws breedte*/
   float:left;  
}
.rechter_div{
   float:right;  
}

misschien dat je nog wat met margins moet kloten, maar als je weer vast zit moet je het maar weer melden.

Marcel K

15-10-2006 22:01

Mooi, het principe had ik dus goed begrepen, maar de uitvoering wil niet echt lukken ;-(

Als je het resultaat ziet op http://csstest.2mdesign.nl dan springen de tranen je in de ogen als je het bekijkt met IE, FF en Opera.
In IE ziet het er nog het beste uit..

Wat doe ik in godsnaam fout ?

De source zet ik hier niet neer, de source kun je op bovengenoemde link zo bekijken en ik weet niet welke code's ik moet gebruiken om alles zo mooi in blokjes te krijgen zoals jij hierboven hebt neergezet.
Kan ik daar ergens een uitleg over vinden over te gebruiken code's op phphulp ?

Kalle P

17-10-2006 22:25

Zoals je vroeg in je PM:

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=iso-8859-1" />

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

<title>Untitled Document</title>
</head>

<body>

<div id="container">

	<div id="header">
	
		<h1>Menu</h1>
		
	</div>
	<div class="wrapper">
		<div id="content">	
 			<div id="hor_menu">
			
				<h1>top menu</h1>
				
			</div>
 			<div class="wrapper">	
				 <div id="box_1">
			
					<h1>box 1</h1>
				
				</div>	
				<div id="float_box">
					<div id="box_2">
					
						<h1>box 2</h1>
					
					</div>	
 					<div id="box_3">
					
						<h1>box 3</h1>
										
			    	</div>
				</div>		
			</div>			
		</div>
	</div>
	<div id="ver_menu">
	
		<h1>Menu</h1> 
		
	</div>
	<div id="nieuws">
	
		<h1>Nieuws</h1> 
		
	</div>
	<div id="footer">
	
		<h1>Footer</h1> 
		
	</div>
</div>

</body>
</html>

CSS (sla op als style.css):


/* CSS Document */
html,body {
	margin:0;
	padding:0;
	text-align:center;
	}
	
div#container {
	width:700px;
	margin:0 auto;
	text-align:left;	
	}
	
div#header {
	background:#A77;
	border:dotted;
	position:relative;
	}
	
div#ver_menu {
	float:left;
	width:200px;
	background:#B9CAFF;
	}

div#nieuws {
	float:left;
	clear:left;
	width:200px;
	background:#FF8539;
	}

div#content {
	float:right;
	width:500px;
	background:#bbb;
	}
	
div#content_top {
	width:100%;
	background:#ccc;
	}	

div#box_1 {
	float:left;
	width:33%;
	background:#c44;
	}		

div#float_box {
	float:right;
	width:67%;
	}
	
div#box_2 {
	float:left;
	width:50%;
	background:#ce5;
	}	
	
div#box_3 {
	float:right;
	width:50%;
	background:#d67;
	}	
			
div#footer {
	clear:both;
	width:100%;
	background: #333;
	color: #FFF;
	}

Note: Als je wilt dat de nieuwsdiv meeloopt (de hoogte) van de 3 boxdivjes. Dan kan je daarvoor een JavaScript oplossing voor gebruiken of repeat gebruiken met een plaatje

bv:
de kleur is oranje, dan maak je een plaatje met een oranje pixel van 1 bij 1 die sla je op.

Dan vervang je background: in div#nieuws voor het volgende:

background: background:#FF8539; /* dit staat er nu */

voor:

background:url(pixel.gif) top right repeat;

Kalle.

Marcel K

17-10-2006 22:53

hartelijk dank Kalle ! Ik ga er mee spelen

groeten, Marcel

Marcel K

22-10-2006 21:13

Kalle, ik weet niet of je deze topic nog bijhoudt, maar ik ben nu aan het rommelen met de source zoals hierboven staat. Zie http://csstest.2mdesign.nl

Ik snap even niet waarom bij IE box3 omlaaggeschoven staat en bij FF staat hij goed ?

Iemand anders die de oplossing weet mag ook reageren, schroom niet svp. Alle hulp is welkom ;-)

Robert Deiman

22-10-2006 21:22

Volgens mij moet je de width van box 2 en 3 nog op 33% zetten.

Reageren

Inloggen om te reageren