Lay-out - Forum

Vincent

14-01-2007 20:14

Ik begrijp er geen bal van(van wat jij bedoelt).

Wouter

14-01-2007 20:15

reageer dn op mij lay-out

ik bedoel je kan toch mooie design hebben hoe maak je die dan ?? hoe maak je daaar je site op

V

Vincent

14-01-2007 20:18

gewoon in stukjes verdelen..
en dan via css in elkaar zetten..
begrijp je dat?

W

Wouter

14-01-2007 20:18

Ne nu begrijp ik jou niet meer

V

Vincent

14-01-2007 20:23

Zie dit:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="nl" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>absoluut positioneren van html elementen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css" media="screen">
body, html{
margin: 0;
font-size: 90%;
font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif;
color: #999;
}

#header{
position: absolute;
top: 5px;
left: 5px;
width: 750px;
height: 100px;
border: 1px solid #F60;
text-align: center;
}

#nav_container{
position: absolute;
top: 110px;
left: 5px;
width: 150px;
height: 300px;
border: 1px solid #F60;
text-align: center;
}

#content{
position: absolute;
top: 110px;
left: 160px;
width: 450px;
height: 300px;
border: 1px solid #F60;
text-align: center;
overflow: auto;
}

#news{
position: absolute;
top: 110px;
left: 615px;
width: 140px;
height: 300px;
border: 1px solid #F60;
text-align: center;
}

#footer{
position: absolute;
top: 415px;
left: 5px;
width: 750px;
height: 60px;
border: 1px solid #F60;
text-align: center;
}

#back{
position: absolute;
top: 500px;
left: 5px;
width: 750px;
height: 30px;
}
</style>
</head>

<body>

<div id="header">header</div>
<div id="nav_container">nav_container</div>

<div id="content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="news">news</div>
<div id="footer">footer</div>
<div id="back"><p><a href="javascript:history.back(-1);"><img src="../_img/terug_naar_pagina.gif" alt="terug naar de vorige pagina" border="0" width="208" height="38" /></a></p>
</div>

</body>
</html>

Lijkt op de jouwe.. Je veranderd de grote van de div's.
Jou plaatjes verdeeld je in stukjes. Die stukjes zet je als achtergrond in de div's en klaar is wouter.

Begrijp je dit?

V

Vincent

14-01-2007 20:30

En trouwens hoe maak je je pagina zo gecodeerd?
ÿØÿà enzo?

[edit]
Sorry, edit vergeten:S
[/edit]

S

Stefan

14-01-2007 21:49

Ik zou zeggen, download eerst eens de trial van Photoshop en ga daar een beetje mee klooien. Dan kun je de slice-tool gebruiken om je website te laten coderen, en als je er DAN aan toe bent, kun je zelf HTML en PHP en CSS leren! ;)

D

Danny K

14-01-2007 22:45

Vincent schreef op 14.01.2007 20:30
En trouwens hoe maak je je pagina zo gecodeerd?
ÿØÿà enzo?

[edit]
Sorry, edit vergeten:S
[/edit]

Misschien is het de afbeelding wel.. Als je snapt wat ik bedoel..

Willem Jan Z

15-01-2007 01:39

Stefan schreef op 14.01.2007 21:49
Ik zou zeggen, download eerst eens de trial van Photoshop en ga daar een beetje mee klooien. Dan kun je de slice-tool gebruiken om je website te laten coderen, en als je er DAN aan toe bent, kun je zelf HTML en PHP en CSS leren! ;)

Vind je het heel erg als mijn sites nooit uit photoshop voortkomen?
Meestal alleen de headerimage, en soms de achtergrond (blokje van 10x10 oid met diagonale lijn), en soms ook een fader achtergrond voor een balkje (is plaatje van 20x1px oid..
Naar mijn mening kan een website die gesliced is nooit snel en erg gebruiksvriendelijk worden (vooral voor de programmeur zelf niet, elke keer zoeken naar wat waar moet komen. Photoshop gebruikt div's net als tabellen, wat heb je er dan aan :S)

@Wouter:
Ik vind je layout echt niet mooi. Zo te zien is het in paint gemaakt, wat het al niet mooi maakt, maar ook al ging het je alleen om de indeling, vormen en kleuren, dan vind ik hem alsnog niet mooi. Te druk omdat je teveel vakken op 1 stukje propt, maar tegelijkertijd te kaal omdat je maar 1 vorm en 2 kleuren gebruikt.

R

Robert Deiman

15-01-2007 09:24

Ik ben het eens met WJ. Je kan wel een bepaalde layout bedenken in Photoshop, maar het uitwerken ervan is beste door een indeling te maken in DIVS en dan zelf eventuele en alleen de nodige afbeeldingen voor achtergronden in te stellen.

En dan weet je zelf ook nog eens precies hoe je layout in elkaar zit en wat waar moet komen. Dat scheelt je een heleboel zoek en prutswerk en het laad veel sneller dan een geslicede layout!