Layout maken met divs

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Harry Hartman

Harry Hartman

22/01/2011 12:46:26
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!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>


Topic verplaatst naar andere categorie.[/modedit]
Gewijzigd op 22/01/2011 13:01:43 door Harry Hartman
 
PHP hulp

PHP hulp

31/12/2024 07:51:13
 
Milo S

Milo S

22/01/2011 13:23:20
Quote Anchor link
Ehm nee het is niet helemaal de juiste manier ...

Zo hoort een menu bijvoorbeeld in een ongeordende lijst.
Voorbeeld:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
<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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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,
Gewijzigd op 22/01/2011 13:48:18 door Milo S
 
Bas IJzelendoorn

Bas IJzelendoorn

22/01/2011 13:38:13
Quote Anchor link
Milo S op 22/01/2011 13:23:20:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
<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>



Moet je het wel goed voor doen ;) </ul> was niet goed afgesloten.
Gewijzigd op 22/01/2011 13:38:31 door Bas IJzelendoorn
 
Milo S

Milo S

22/01/2011 13:48:05
Quote Anchor link
Haha typ foutje ;), zal het even veranderen...
 
Harry Hartman

Harry Hartman

22/01/2011 17:20:42
Quote Anchor link
Milo S op 22/01/2011 13:23:20:
Centreren doe je gewoon met html en css, geen tabellen voor nodig.
Voorbeeld:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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...

En bedankt voor de tip omtrent menu, zal daar eens goed na kijken... al doende leert men...
Gewijzigd op 22/01/2011 17:27:10 door Harry Hartman
 
Justin S

Justin S

22/01/2011 17:23:42
Quote Anchor link
Het moet ipv -50px, -500px zijn, dat is de helft van 1000...
 
Harry Hartman

Harry Hartman

22/01/2011 17:28:07
Quote Anchor link
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.
Gewijzigd op 22/01/2011 20:35:48 door Harry Hartman
 
Jurrian Nijland

Jurrian Nijland

22/01/2011 20:18:21
Quote Anchor link

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

Harry Hartman

22/01/2011 20:54:42
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
<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?
Gewijzigd op 22/01/2011 20:57:15 door Harry Hartman
 
Milo S

Milo S

22/01/2011 21:23:32
Quote Anchor link
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

Jurrian Nijland

22/01/2011 21:28:47
Quote Anchor link
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
 
Harry Hartman

Harry Hartman

22/01/2011 21:42:45
Quote Anchor link
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.
Gewijzigd op 22/01/2011 21:43:41 door Harry Hartman
 
Wouter J

Wouter J

22/01/2011 21:46:38
Quote Anchor link
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

Harry Hartman

22/01/2011 22:19:46
Quote Anchor link
Wouter J op 22/01/2011 21:46:38:
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.

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

Milo S

22/01/2011 22:21:58
Quote Anchor link
@ 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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
div.wrapper {
    width: 1000px;
    min-height: 500px;

    overflow: hidden;
    margin: 0px auto;

    float: left;
}
Gewijzigd op 22/01/2011 22:22:57 door Milo S
 
Wouter J

Wouter J

22/01/2011 23:19:52
Quote Anchor link
@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.
Gewijzigd op 22/01/2011 23:27:47 door Wouter J
 
Milo S

Milo S

23/01/2011 09:57:46
Quote Anchor link
@ Wouter, heb hem even toegevoegd aan me favorieten, altijd handig ;).
 
Harry Hartman

Harry Hartman

23/01/2011 11:33:58
Quote Anchor link
@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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
<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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
<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?
 
Christian Versloot

Christian Versloot

25/01/2011 18:18:22
Quote Anchor link
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.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.