Layout maken met divs

Door Harry Hartman op 22-01-2011 12:46 gewijzigd op 22-01-2011 13:01

3.597 views

Beste mensen,

Voor het eerst heb ik een layout gemaakt met divs, voorheen altijd met tabellen.
Om de kunst van divs te leren heb ik diverse forum berichten en andere sites gelezen en dit zo goed mogelijk in praktijk gebracht.

Willen jullie dit eens bekijken. Is dit de juiste manier?
Het menu wordt met knoppen van plaatjes en nog niet uitgewerkt met onClick etc.

Alvast bedankt voor de opmerkingen.

Een voorbeeld: Kijk hier.

CSS:



body {
	background: #000000;
	min-width: 1059px;
}
#clear {
	clear: both;
}
#container-layout { 
  	width: 1059; 
	height:838; 
	text-align: left;
}
#container-header {
	background: #000;
	width: 1059px;
	height: 251px;
}
#container-menu {
	background: #000;
	width: 1059px;
	height: 25px;
}
#container-main {
	background: #000;
	width: 1059px;
	height: 562px;
}
.header-top1 {
	width: 517px;
	background-image: url(grfx/background/website1_top_1_517x251.jpg);
}
.header-top2 {
	width: 306px;
	background-image: url(grfx/background/website1_top_2_306x251.jpg);
}
.header-top3 {
	width: 236px;
	background-image: url(grfx/background/website1_top_3_236x251.jpg);
}
.header-top1, .header-top2, .header-top3 {
	height: 251px;
	float: left;
}
.menu-spacerstart {
	width: 20px;
	background-image: url(grfx/background/website1_menu_1_20x25.jpg);
}
.menu-spacer1 {
	width: 27px;
	background-image: url(grfx/background/website1_menu_3_27x25.jpg);
}
.menu-spacer2 {
	width: 28px;
	background-image: url(grfx/background/website1_menu_11_28x25.jpg);
}
.menu-spacereind {
	width: 39px;
	background-image: url(grfx/background/website1_menu_17_39x25.jpg);
}
.menu-spacerstart, .menu-spacer1, .menu-spacer2, .menu-spacereind {
	height: 25px;
	float: left;
}
.menu-home {
	width: 80px;
	background-image: url(grfx/background/website1_menu_2_80x25.jpg);
}
.menu-fotos {
	width: 91px;
	background-image: url(grfx/background/website1_menu_4_91x25.jpg);
}
.menu-nieuws {
	width: 103px;
	background-image: url(grfx/background/website1_menu_6_103x25.jpg);
}
.menu-biografie {
	width: 134px;
	background-image: url(grfx/background/website1_menu_8_134x25.jpg);
}
.menu-muziek {
	width: 97px;
	background-image: url(grfx/background/website1_menu_10_97x25.jpg);
}
.menu-reageer {
	width: 111px;
	background-image: url(grfx/background/website1_menu_12_111x25.jpg);
}
.menu-contact {
	width: 111px;
	background-image: url(grfx/background/website1_menu_14_111x25.jpg);
}
.menu-links {
	width: 82px;
	background-image: url(grfx/background/website1_menu_16_82x25.jpg);
}
.menu-home, .menu-fotos, .menu-nieuws, .menu-biografie, .menu-muziek, .menu-reageer, .menu-contact, .menu-links {
	height: 25px;
	float: left;
}
.main {
	width: 1059px;
	height: 562px;
	background-image: url(grfx/background/website1_main_1_1059x562.jpg);
}

PAGINA:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Rock BoTToM Zwolle</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen"/>
</head>

<body>
  
<!-- centrale plaatsing in bruikbaar deel scherm -->
<table height="100%" width="100%">
<tr valign="middle"><td align="center">
<div id="container-layout">

<div id="container-header">

	<div class="header-top1"></div>
	<div class="header-top2"></div>
	<div class="header-top3"></div>
	<div id="clear"></div>
	
</div>
<div id="container-menu">

	<div class="menu-spacerstart"></div>
	<div class="menu-home"></div>
	<div class="menu-spacer1"></div>
	<div class="menu-fotos"></div>
	<div class="menu-spacer1"></div>
	<div class="menu-nieuws"></div>
	<div class="menu-spacer1"></div>
	<div class="menu-biografie"></div>
	<div class="menu-spacer1"></div>
	<div class="menu-muziek"></div>
	<div class="menu-spacer2"></div>
	<div class="menu-reageer"></div>
	<div class="menu-spacer1"></div>
	<div class="menu-contact"></div>
	<div class="menu-spacer2"></div>
	<div class="menu-links"></div>
	<div class="menu-spacereind"></div>	

</div>
<div id="container-main">

	<div class="main"></div>

</div>

<!-- centrale plaatsing in bruikbaar deel scherm -->
</div>
</td></tr>
</table>

</body>
</html>

Milo S

22-01-2011 13:23 gewijzigd op 22-01-2011 13:48

Ehm nee het is niet helemaal de juiste manier ...

Zo hoort een menu bijvoorbeeld in een ongeordende lijst.
Voorbeeld:


<ul class="menu">
	<li><a href="">Sample</a></li>
	<li><a href="">Sample</a></li>
	<li><a href="">Sample</a></li>
	<li><a href="">Sample</a></li>
</ul>

Centreren doe je gewoon met html en css, geen tabellen voor nodig.
Voorbeeld:


<div class="wrapper">
	Hier je header, menu, content en footer
</div>

<style>
div.wrapper {
	width: 1000px;
	height: 1000px;

	position: absolute;
	top: 50%;
	left: 50%;
	
	margin: 0 auto;
	margin-left: -50px;
	margin-top: -50px;

	background-color: #FF0000;
}
</style>

Hopelijk kan je hier wat mee! Het zijn wel maar voorbeeld code's dus je zult ze aan je eigen stijl moeten aanpassen.
Wel tof dat je divs met css wilt leren ipv tables ;).

Gr,

Bas IJzelendoorn

22-01-2011 13:38 gewijzigd op 22-01-2011 13:38

Milo S op 22/01/2011 13:23:20

[code=Voorbeeld:]
<ul class="menu">
<li><a href="">Sample</a></li>
<li><a href="">Sample</a></li>
<li><a href="">Sample</a></li>
<li><a href="">Sample</a></li>
</ul>
[/code]

Moet je het wel goed voor doen ;) </ul> was niet goed afgesloten.

Milo S

22-01-2011 13:48

Haha typ foutje ;), zal het even veranderen...

Harry Hartman

22-01-2011 17:20 gewijzigd op 22-01-2011 17:27

Milo S op 22/01/2011 13:23:20

Centreren doe je gewoon met html en css, geen tabellen voor nodig.
Voorbeeld:
<div class="wrapper">
	Hier je header, menu, content en footer
</div>

<style>
div.wrapper {
	width: 1000px;
	height: 1000px;

	position: absolute;
	top: 50%;
	left: 50%;
	
	margin: 0 auto;
	margin-left: -50px;
	margin-top: -50px;

	background-color: #FF0000;
}
</style>
Hopelijk kan je hier wat mee! Het zijn wel maar voorbeeld code's dus je zult ze aan je eigen stijl moeten aanpassen.
Wel tof dat je divs met css wilt leren ipv tables ;).

Gr,

Uhm, in mijn chrome staat het op deze wijze niet in het midden hoor...
[edit] Oh, zie het al: margin: -50px moet -500px zijn.
Maaaar: het werkt niet als de layout groter is dan je scherm hoogte, dan verdwijnt de boven kant achter je menu en balk...[/edit]
En bedankt voor de tip omtrent menu, zal daar eens goed na kijken... al doende leert men...

Justin S

22-01-2011 17:23

Het moet ipv -50px, -500px zijn, dat is de helft van 1000...

Harry Hartman

22-01-2011 17:28 gewijzigd op 22-01-2011 20:35

Justin Streuper op 22/01/2011 17:23:42

Het moet ipv -50px, -500px zijn, dat is de helft van 1000...

Ja, ik zag het net.
Maaaar: het werkt niet als de layout groter is dan je scherm hoogte, dan verdwijnt de boven kant achter je menu en balk... vandaar dat ik standaard deze centreer techniek gebruik.

Jurrian Nijland

22-01-2011 20:18

Offtopic
Aan de site te zien; eindelijk een Zwollenaar hier? =D Ben ik ook eens niet de enige.

Harry Hartman

22-01-2011 20:54 gewijzigd op 22-01-2011 20:57

Offtopic: de wereld is klein... Ik zit in Hoonhorst, vlakbij dus...

Milo S op 22/01/2011 13:23:20

Ehm nee het is niet helemaal de juiste manier ...

Zo hoort een menu bijvoorbeeld in een ongeordende lijst.
Voorbeeld:
<ul class="menu">
	<li><a href="">Sample</a></li>
	<li><a href="">Sample</a></li>
	<li><a href="">Sample</a></li>
	<li><a href="">Sample</a></li>
</ul>

Wat ik mij afvraag: gebruik je deze wijze <ul> en <li> ook als je een menu met knoppen van afbeeldingen wilt maken i.p.v. tekst op achtergrond?

Milo S

22-01-2011 21:23

Ja ook dan zou ik dat zo doen, maar waarom zou je dat willen?
En hoe bedoel je dat hij achter je menu en balk verdwijnt?

Jurrian Nijland

22-01-2011 21:28

Harry Hartman op 22/01/2011 20:54:42

Offtopic: de wereld is klein... Ik zit in Hoonhorst, vlakbij dus...

Offtopic; dat is inderdaad dichtbij! =O

Reageren

Inloggen om te reageren