PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

Layout maken met divs

Door Harry Hartman op 22-01-2011 12:46 gewijzigd op 22-01-2011 13:01
3.596 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>


Harry Hartman
22-01-2011 21:42 gewijzigd op 22-01-2011 21:43
Milo S op 22/01/2011 21:23:32

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?

OK, omdat ik bijvoorbeeld een letter(setting) gebruik die niet standaard is o.i.d. of het anders wil dan 'normaal'... kijk maar eens in het voorbeeld naar de letters, snap je...

Achter je menu en balk: wanneer je layout hoger is dan je scherm, je het bevenste gedeelte niet meer ziet, die zit achter je browserbalk etc., probeer maar eens.
Wouter J
22-01-2011 21:46
Harry Hartman
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.

Daar heb je een andere centeer techniek voor. Ik zal hem morgen eens opzoeken. Dit werkt ong. hetzelfde, maar zorgt ervoor dat hij niet verdwijnt.
Als je iets alleen horizontaal wilt centeren kun je trouwens beter gewoon margin: 0 auto; gebruiken.
Harry Hartman
22-01-2011 22:19
Wouter J op 22/01/2011 21:46:38

[quote="Harry Hartman"]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.

Daar heb je een andere centeer techniek voor. Ik zal hem morgen eens opzoeken. Dit werkt ong. hetzelfde, maar zorgt ervoor dat hij niet verdwijnt.
Als je iets alleen horizontaal wilt centeren kun je trouwens beter gewoon margin: 0 auto; gebruiken.
[/quote]
Heel graag Wouter, ben benieuwd, weer wat te leren...
Waarom is de wijze van centreren met even een tabel er om heen eigenlijk zo verwerpelijk?
Milo S
22-01-2011 22:21 gewijzigd op 22-01-2011 22:22
@ Harry Hartman: Daar kun je @font-face voor gebruiken, heb je dus niet speciaal afbeeldingen voor nodig.

@ Wouter J: Hier ben ik dan ook wel naar benieuwd, heb het alleen gebruikt voor kleine schermpjes was dus niet op de hoogte van dit nieuws ;P.

En je kan inderdaad zoals wouter zegt als je alleen horizontaal wilt centreren beter het volgende gebruiken:

div.wrapper {
	width: 1000px;
	min-height: 500px;

	overflow: hidden;
	margin: 0px auto;

	float: left;
}
Wouter J
22-01-2011 23:19 gewijzigd op 22-01-2011 23:27
@milo en harry,
Even de link opgezocht:
http://d-graff.de/fricca/center.html

@harry. Tabellen zijn hier niet voor. Tabellen zijn voor het goed weergeven van resultaten en gegevens. Div tags zijn voor het opmaken van een pagina. Want als jij in een auto zit en je wilt eruit gebruik je toch ook niet een hamer? Je gebruikt de deurklink, want die is daarvoor.
Milo S
23-01-2011 09:57
@ Wouter, heb hem even toegevoegd aan me favorieten, altijd handig ;).
Harry Hartman
23-01-2011 11:33
@Wouter, heb de broncode in bewaring, bedankt. :-)

Toevoeging op 23/01/2011 19:55:37:

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 nergens kan vinden is: hoe afbeeldingen tussen de menu knoppen te definiëren.
Eerst dacht ik simpel:

<ul>
        <li> link </li>
        <div> tussen plaatje </div
        <li> link </li>
        <div> etc.
</ul>

maar dat is niet goed in IE...
Moet je dan de lijst laten vervallen of overal <li> of <div> definiëren?
C
Christian Versloot
25-01-2011 18:18
Vraag mezelf ook af waarom je de header opdeelt in drie verschillende stukken, kan je net zo goed een geheel van maken. Scheelt natuurlijk wel wat in de laadtijd.

Reageren

Inloggen om te reageren