Verkeerde postionering?

donderdag 1 juli 2010 11:03

Acties:

0 Henk 'm!

Topicstarter

Hallo,

Ik heb pas een website gesliced, puur om te oefenen (www.killking.woelmuis.nl).
Ik heb alles (!) absoluut gepositioneerd (omdat ik dan 'z-index' kan gebruiken), maar nu heb ik het probleem dat als ik 1 afbeelding eruit haal, mn hele website schots en scheef door elkaar staat. De hele pagina bestaat uit div's Nu wil ik dat bij mijn volgende website voorkomen en het anders doen.
Alleen.. hoe??

Een stukje CSS uit mijn -verkeerd opgebouwde- website (url):

code:

div#balktext
{
margin: 0;
margin-left: 57px;
margin-top: -5px;
font-size: 15px;
color: #ffffff;
}

div#menutext
{
background: url(images/menutext.png);
width: 579px;
height: 12px;
margin: 0;
position: absolute;
top: 1px;
margin-left: -94px;
z-index: 8;
}

div#loginbg
{
background: url(images/loginbg.png);
width: 228px;
height: 164px;
margin: 0;
position: absolute;
left: 115px;
top: 38px;
z-index: 9;
}

En daarvan het stukje HTML

code:

<div id="balktext">
<h1>Mode voor een <b>maatje</b> meer!</h1>
</div>
<div id="balk2" />
<div id="tussenstreepjes" />
<div id="menutext" />
<div id="mannetje" />
<div id="loginbg" />

Waarschijnlijk ligt het antwoord voor handen, alleen ik kon het zo gauw niet op internet vinden
Gr. Joachim

[ Voor 3% gewijzigd door peaceful_turing op 01-07-2010 11:04 ]

donderdag 1 juli 2010 11:08

Acties:

0 Henk 'm!

macciez

Ik zou als eerste afstappen van alles absolute te positioneren. Waarom wil je perse z-index gebruiken?
Je moet niet in blokken, maar in lagen denken. Lees je maar eens in over floats bijvoorbeeld.

Ook is het onzinnig om voor _alles_ een div te maken, probeer eens na te denken welke divs bij elkaar zouden kunnen horen of waar iets soortgelijks plaats vind. Ik bedoel daarmee, deel je website op. Normaal gesproken heb je een header, een body en een footer. In jouw voorbeeld heb je alleen maar losse div's die elkaar opvolgen

[ Voor 46% gewijzigd door macciez op 01-07-2010 11:10 ]

Do what you love, do it often

donderdag 1 juli 2010 11:22

Acties:

0 Henk 'm!

peaceful_turing

Topicstarter

macciez schreef op donderdag 01 juli 2010 @ 11:08:
Ook is het onzinnig om voor _alles_ een div te maken, probeer eens na te denken welke divs bij elkaar zouden kunnen horen of waar iets soortgelijks plaats vind. Ik bedoel daarmee, deel je website op. Normaal gesproken heb je een header, een body en een footer. In jouw voorbeeld heb je alleen maar losse div's die elkaar opvolgen

Je bedoelt afbeelding samenvoegen?

[ Voor 17% gewijzigd door peaceful_turing op 01-07-2010 11:23 ]

donderdag 1 juli 2010 11:57

Acties:

0 Henk 'm!

mcDavid

Het antwoord ligt inderdaad voor de hand: geen position gebruiken.

Probeer niet te denken in slices. Probeer te denken alsof je een document maakt. Eérst de inhoud op een logische manier opbouwen, en daarna de opmaak in orde maken, waarbij je probeert de HTML zo min mogelijk te wijzigen.

donderdag 1 juli 2010 12:08

Acties:

0 Henk 'm!

peaceful_turing

Topicstarter

mcDavid schreef op donderdag 01 juli 2010 @ 11:57:
Het antwoord ligt inderdaad voor de hand: geen position gebruiken.

Probeer niet te denken in slices. Probeer te denken alsof je een document maakt. Eérst de inhoud op een logische manier opbouwen, en daarna de opmaak in orde maken, waarbij je probeert de HTML zo min mogelijk te wijzigen.

Oke, het zou dus zo kunnen:

HTML:

code:

<body>
<div id=header>
<h1>Welkom</h1>
</div>
<div id=navigatie>
</div>
<div id=content>
</div>
<div id=footer>
</div
</body>

CSS:

code:

div#header
{
width: 100%;
height: 15%;
background: red;
}

div#navigatie
{
width: 20%;
height: 60%;
float: left;
background: green;
}

div#content
{
float: right;
width: 80%;
height: 60%;'
background: white;
}

div#footer
{
height: 25%;
background: blue;
width: 100%;
clear: both;
}

h1
{
padding-left: 3px;
}

De HTML is opgebouwd uit: header; navigatie; content en een footer.
Deze worden met float gepositioneerd, en dan worden daarin weer divs/tekst gepositioneert met padding/margin.

Dan zou dat moeten kunnen?

donderdag 1 juli 2010 12:33

Acties:

0 Henk 'm!

mcDavid

Het kan op 10000 manieren, en dit is daar één van. Maar ik denk dat dit inderdaad wel een goeie basis is om vanuit te gaan.

Alleen een height in %, dat vind ik een beetje eng... Maar daar kom je vanzelf wel achter, wat handig is en wat niet.

Vergeet natuurlijk niet om je website te testen in verschillende browsers en verschillende schermgroottes.

donderdag 1 juli 2010 12:40

Acties:

0 Henk 'm!

peaceful_turing

Topicstarter

mcDavid schreef op donderdag 01 juli 2010 @ 12:33:
Vergeet natuurlijk niet om je website te testen in verschillende browsers en verschillende schermgroottes.

Al mn websites tot nu toe zijn nog 100% valide, maar omdat ik een gratis webhoster heb, voegt hij wat codes voor reclame toe, waardoor de website opeens niet meer valide is. Dit is overigens een tijdelijke oplossing, en die site is niet voor commerciële doeleinden maar gewoon om te experimenteren

donderdag 1 juli 2010 12:43

Acties:

0 Henk 'm!

macciez

Daarmee zou ik eerst mee aan de slag gaan en dan proberen zoveel mogelijk (mogelijke) problemen op te lossen door zelf eens goed na te denken; wat wil ik hier en hoe logisch is dat? Dan kom je met oa. tutorials van het internet en gerichte probleemstellingen hier heel ver

Do what you love, do it often

donderdag 1 juli 2010 13:28

Acties:

0 Henk 'm!

peaceful_turing

Topicstarter

En hoe doe je het als je opeenvolgende lagen hebt, dus lagen onder elkaar.
Die hoef je toch geen float mee te geven (er is geen 'float: bottom' ofzo)?

Als je geen div in bijv. de header div hebt, staan de lagen netjes onder elkaar, maar als je er wel een div in plaatst, verdwijnt de header div plotseling

[ Voor 34% gewijzigd door peaceful_turing op 01-07-2010 13:30 ]

donderdag 1 juli 2010 13:49

Acties:

0 Henk 'm!

mcDavid

divs op het zelfde niveau gaan automatisch onder elkaar staan.

Zet eens tekst in je divs en geef ze een achtergrondkleurtje. Dan zie je wat je doet.

donderdag 1 juli 2010 14:36

Acties:

0 Henk 'm!

amahusu

taking over the world!

killking463 schreef op donderdag 01 juli 2010 @ 13:28:
En hoe doe je het als je opeenvolgende lagen hebt, dus lagen onder elkaar.
Die hoef je toch geen float mee te geven (er is geen 'float: bottom' ofzo)?

Als je geen div in bijv. de header div hebt, staan de lagen netjes onder elkaar, maar als je er wel een div in plaatst, verdwijnt de header div plotseling

hoe plaats je die div dan in je header? Het kan ook gewoon zijn dat je ergens een vergeten bent een div of ander element goed af te suiten.

Always Outnumbered, Never Outgunned // Some people feel the rain, others just get wet

donderdag 1 juli 2010 14:38

Acties:

0 Henk 'm!

peaceful_turing

Topicstarter

mcDavid schreef op donderdag 01 juli 2010 @ 13:49:
divs op het zelfde niveau gaan automatisch onder elkaar staan.

Zet eens tekst in je divs en geef ze een achtergrondkleurtje. Dan zie je wat je doet.

Als ik maar genoeg <br>'s onder elkaar zet, komt die balk vanzelf naar beneden, maar dat is natuurlijk niet hoe het moet

klik hier voor de link
Dat is het resultaat, en die gradient bovenaan staat er dus in plaats van een groene header van 200px hoog.

HTML:

code:

<body>
<div id="header">
         <div id="hgradient" />
</div>
<div id="content">
         <div id="jsbalk">
          </div>
</div>
<div id="footer">
</div>
</body>

CSS:

code:

div#header
{
width: 1000px;
height: 200px;
background: green;
}

div#jsbalk
{
height:142px;
width: 100%;
background: orange;
}

div#content
{
width: 1000px;
height: 634px;
background: black;
}

div#footer
{
width: 1000px;
height: 166px;
background: blue;
}

div#hgradient
{
background: url(images/hgradient.png) repeat-x;
width: 1000px;
height: 35px;
}

[ Voor 50% gewijzigd door peaceful_turing op 01-07-2010 14:47 ]

donderdag 1 juli 2010 14:47

Acties:

0 Henk 'm!

amahusu

taking over the world!

Wat wil je nou precies? Je zegt in de openingspost dat je hele site schots en scheef staat, mensen geven je goede tips en vervolgens begin je over een balk die onderaan moet staan

wees eens wat specifieker dan kunnen we je ook beter en makkelijker helpen

edit: dat betekent overigens niet dat we nu elk deel van je site goed voor je gaan positioneren

[ Voor 16% gewijzigd door amahusu op 01-07-2010 14:50 ]

Always Outnumbered, Never Outgunned // Some people feel the rain, others just get wet

donderdag 1 juli 2010 14:49

Acties:

0 Henk 'm!

peaceful_turing

Topicstarter

amahusu schreef op donderdag 01 juli 2010 @ 14:47:
Wat wil je nou precies? Je zegt in de openingspost dat je hele site schots en scheef staat, mensen geven je goede tips en vervolgens begin je over een balk die onderaan moet staan

wees eens wat specifieker dan kunnen we je ook beter en makkelijker helpen

Nou, ik heb dus mijn vorige site (killking.woelmuis.nl) volledig verprusts (qua opbouw), nu ben ik dus met een nieuwe bezig, en nu stuit ik tegen dat probleem

donderdag 1 juli 2010 14:54

Acties:

0 Henk 'm!

amahusu

taking over the world!

Alright, ik probeer het te snappen:

je hebt dus een eigen site (killking.woelmuis.nl), die mislukt is doordat je divs niet goed gepositioneerd waren en nu ben je opnieuw begonnen en loop je tegen hetzelfde probleem aan?

Dus je probleem is dat je niet weet hoe je divs moet positioneren in pagina? Ik zou dan eens beginnen met het lezen van wat documentatie over css en div layouts, zoals bijvoorbeeld hier.

dat is mn eerste hit op google trouwens als ik zoek op div layout en daarin staat volgens mij precies beschreven hoe jij je site opgebouwd wilt hebben..

Always Outnumbered, Never Outgunned // Some people feel the rain, others just get wet

donderdag 1 juli 2010 14:59

Acties:

0 Henk 'm!

peaceful_turing

Topicstarter

amahusu schreef op donderdag 01 juli 2010 @ 14:54:
dat is mn eerste hit op google trouwens als ik zoek op div layout en daarin staat volgens mij precies beschreven hoe jij je site opgebouwd wilt hebben..

Ik zei in het 1e bericht:
'Waarschijnlijk ligt het antwoord voor handen, alleen ik kon het zo gauw niet op internet vinden'.
Ik wist zo gauw niet hoe/waarop ik moest zoeken

, als je me die link daarna had gegeven was ik klaar geweest

donderdag 1 juli 2010 15:02

Acties:

0 Henk 'm!

amahusu

taking over the world!

je mag ook gewoon bedankt zeggen en de volgende keer beter zoeken (en nadenken over wat je nou precies wilt en aan het doen bent

)

Always Outnumbered, Never Outgunned // Some people feel the rain, others just get wet

donderdag 1 juli 2010 15:05

Acties:

0 Henk 'm!

peaceful_turing

Topicstarter

amahusu schreef op donderdag 01 juli 2010 @ 15:02:
je mag ook gewoon bedankt zeggen en de volgende keer beter zoeken (en nadenken over wat je nou precies wilt en aan het doen bent )

Hierbij hartelijk bedankt voor alle moeite

donderdag 1 juli 2010 15:49

Acties:

0 Henk 'm!

mcDavid

killking463 schreef op donderdag 01 juli 2010 @ 14:38:
[...]

Als ik maar genoeg <br>'s onder elkaar zet, komt die balk vanzelf naar beneden, maar dat is natuurlijk niet hoe het moet

klik hier voor de link
Dat is het resultaat, en die gradient bovenaan staat er dus in plaats van een groene header van 200px hoog.

HTML:
code:
1
2
3
4
5
6
7
8
9
10
11
<body>
<div id="header">
         <div id="hgradient" /> <=========================
</div>
<div id="content">
         <div id="jsbalk">
          </div>
</div>
<div id="footer">
</div>
</body>

Als je 'm even door de w3 validator had gehaald, of met firebug beken, had je gelijk gezien dat dat niet de manier is om een div af te sluiten.

vrijdag 2 juli 2010 10:21

Acties:

0 Henk 'm!

peaceful_turing

Topicstarter

mcDavid schreef op donderdag 01 juli 2010 @ 15:49:
[...]

Als je 'm even door de w3 validator had gehaald, of met firebug beken, had je gelijk gezien dat dat niet de manier is om een div af te sluiten.

Met XHTML 1.0 is dat WEL een mogelijkheid, en dat is gewoon valide.
Als je de URL checkt, krijg je idd een niet valide site te zien, maar dat komt omdat mijn webhoster er een zinnetje aan toevoegt waardoor hij opeens niet valide is (en zelfs niet eens gecheckt kan worden).

vrijdag 2 juli 2010 10:35

Acties:

0 Henk 'm!

mcDavid

killking463 schreef op vrijdag 02 juli 2010 @ 10:21:
[...]

Met XHTML 1.0 is dat WEL een mogelijkheid, en dat is gewoon valide.
Als je de URL checkt, krijg je idd een niet valide site te zien, maar dat komt omdat mijn webhoster er een zinnetje aan toevoegt waardoor hij opeens niet valide is (en zelfs niet eens gecheckt kan worden).

En als je met firebug kijkt hoe je browser het rendert, zie je dat die de tag NIET afsluit. Hoe valide het ook zou zijn. Sowieso, je verstuurt de site als text/html, om hem als XHTML te laten renderen zou je 'm als application/xml moeten versturen. En dat wil je niet want dan gaat IE over zijn nek.

vrijdag 2 juli 2010 11:04

Acties:

0 Henk 'm!

peaceful_turing

Topicstarter

mcDavid schreef op vrijdag 02 juli 2010 @ 10:35:
[...]

En als je met firebug kijkt hoe je browser het rendert, zie je dat die de tag NIET afsluit. Hoe valide het ook zou zijn. Sowieso, je verstuurt de site als text/html, om hem als XHTML te laten renderen zou je 'm als application/xml moeten versturen. En dat wil je niet want dan gaat IE over zijn nek.

Bedankt voor je opmerking

. Wat heb ik toch weer een verschrikkelijke hekel aan IE

vrijdag 2 juli 2010 11:58

Acties:

0 Henk 'm!

amahusu

taking over the world!

killking463 schreef op vrijdag 02 juli 2010 @ 10:21:
[...]

Met XHTML 1.0 is dat WEL een mogelijkheid, en dat is gewoon valide.
Als je de URL checkt, krijg je idd een niet valide site te zien, maar dat komt omdat mijn webhoster er een zinnetje aan toevoegt waardoor hij opeens niet valide is (en zelfs niet eens gecheckt kan worden).

dus al je vorige sites heb je op die manier opgebouwd

vind je het dan gek dat niets het doet? Overigens, neem zelf gewoon een hostingpakket, hoeft niet meer dan een 20 euro per jaar oid te kosten en heb je geen last van rare toevoegingen.

en begin niet over w3c valid als je eigenlijk niet eens weet wat je valideert

Always Outnumbered, Never Outgunned // Some people feel the rain, others just get wet

vrijdag 2 juli 2010 15:52

Acties:

0 Henk 'm!

peaceful_turing

Topicstarter

amahusu schreef op vrijdag 02 juli 2010 @ 11:58:
[...]

dus al je vorige sites heb je op die manier opgebouwd vind je het dan gek dat niets het doet? Overigens, neem zelf gewoon een hostingpakket, hoeft niet meer dan een 20 euro per jaar oid te kosten en heb je geen last van rare toevoegingen.

en begin niet over w3c valid als je eigenlijk niet eens weet wat je valideert

Ten eerste, ik heb maar 1 site gebouwd, dus AL mn sites... ik ben nog maar net begonnen

.
Ten tweede weet ik wel wat ik valideer, maar jullie hebben niks anders dan de index.html van die URL..
Kijk maar is met FireBug, en dan de 99e regel geloof ik, als je die weg zou halen, dan isie 100% valide..
of snap ik nou niet goed wat je bedoeld

vrijdag 2 juli 2010 15:56

Acties:

0 Henk 'm!

peaceful_turing

Topicstarter

amahusu schreef op vrijdag 02 juli 2010 @ 11:58:
[...]

dus al je vorige sites heb je op die manier opgebouwd vind je het dan gek dat niets het doet?

Ik heb nog maar 1 site gebouwd.. ik ben ook maar een amateur.. ik dacht, hij is redelijk gelukt (dan heb ik het over http://www.killking.woelmuis.nl) , met Cufon enzo.. maarja ik vind dat dit geen onvergeefbare fouten zijn.. fouten zijn er tenslotte om van te leren

Pagina: 1

Reageer

Onderwerpen