[CSS] Positioning horror - Softwareontwikkeling

zondag 31 december 2006 13:03

Acties:

Topicstarter

Hallo iedereen,

Ik ben bezig met een website, en heb nu wat problemen met de positioning.Dit wil ik uiteindelijk bereiken:

Linkje

Nu heb ik dit dus al voor elkaar, maar: Hij is nu niet scaleable, en de css is bucht.

Het probleem is eigenlijk zo:
De hele zooi is gecenterd dmv een extra container om de hele website heen. De top van de header is absolute vastgesteld op 5px. De bottom van de footer is ook vastgesteld op 5px, absolute; De top van het menu is ook absolute vastgesteld, zodat ie mooi onder de header uitkomt. Maar nu komt het: de content moet behalve de top, ook de left ingesteld worden. De top moet echter absolute, net zoals bij het menu. Left echter, moet relative, omdat het hele zootje gecenterd wordt. De height van menu en content moet zichzelf trouwens ook automatisch aanpassen (door behalve de top, ook de bottom in te stellen), dus eigenlijk moet content ook absolute gepositioneerd worden.

Ik hoop dat het een beetje duidelijk is. Vragen mag natuurlijk altijd (graag zelf)
Alvast bedankt

Beetje inactief... maar toch best aanwezig :)

zondag 31 december 2006 13:24

Acties:

mithras

Alvast 1 tip: laat dat scalable gebeuren. Het is onhandig en werkt niet lekker. Na dat gezegd te hebben, kan je volgens mij best alle positionering overhoop gooien. Gewoon zoiets:

HTML:

<div id="container">
  <div id="header"><img></div>
  <div id="content">Lorem Ipsum</div>
  <div id="menu">link1 link2 etc</div>
</div>

Cascading Stylesheet:

#container{
  width: 800px;
  margin: 0 auto 0 auto;
  overflow: hidden;
}
#header{
  width: 100% /* of 800px */
  height: 200px;
}
#content{
  width: 600px;
  float: right;
}
#menu{
  width: 200px;
  float: left;
}

Lekker floaten, en dat breng je allemaal netjes terug door in je container een overflow: hidden toe te passen. Zo kan je daaronder nog je copyright zetten als je dat wil. Verder is dit veel flexibeler. Zolang je geen pixelperfect oplossing wil, werkt dit altijd. Positionering hoef je zo niet toe te passen. Wil je wat ruimtes tussen je elementen, kan je met je margins & paddings spelen

Wil je dat beide elementen (menu en content) even lang lijken, moet je maar zoeken op faux columns, dat is de manier om het visueel zo te laten lijken

[ Voor 7% gewijzigd door mithras op 31-12-2006 13:25 ]

zondag 31 december 2006 13:26

Acties:

Pendaco

Vogon Poetry FTW!

Zou je miss wat van je code (html + css) kunnen plaatsen?

Ik denk dat je hiervoor beter met floats kunt werken. Als je die container namelijk mbv css centreerd en je vervolgens de blokken daarbinnen absoluut gaat positioneren haal je die blokken uit de flow en heeft die container <div> geen nut meer.

snel voorbeeldje;

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>pagina mbv floats</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
    margin: 0px;
    padding: 0px;
}
p {
    margin: 0px;
    padding: 0px;
}
#container {
    margin-right: auto;
    margin-left: auto;
    height: auto;
    width: 600px;
    margin-top: 5px;
}
#header {
    background-color: #FFFFCC;
    height: 100px;
    width: 600px;
    float: left;
}
#menu {
    background-color: #FFCCCC;
    height: 400px;
    width: 200px;
    float: left;
}
#content {
    background-color: #FFCC99;
    height: 400px;
    width: 400px;
    float: left;
}
#footer {
    background-color: #FF9966;
    height: 50px;
    width: 600px;
    float: left;
}

-->
</style>
</head>

<body>

<div id="container">
<div id="header"><p>header</p></div>
<div id="menu"><p>menu</p></div>
<div id="content"><p>content</p></div>
<div id="footer"><p>footer</p></div>
</div>

</body>
</html>

zondag 31 december 2006 13:35

Acties:

mithras

Pendaco schreef op zondag 31 december 2006 @ 13:26:
Zou je miss wat van je code (html + css) kunnen plaatsen?

Ik denk dat je hiervoor beter met floats kunt werken. Als je die container namelijk mbv css centreerd en je vervolgens de blokken daarbinnen absoluut gaat positioneren haal je die blokken uit de flow en heeft die container <div> geen nut meer.

[knip code]

Wat jij nu doet is alles achter elkaar floaten zodat sommige blokken automatisch op een nieuwe regel vallen. Netter is imho alleen de float toe te passen wanneer dat nodig is (op de menu & content). Dan kan je ook je content hoger in je html zetten dan je menu. Hierdoor wordt je site weer beter geïndexeerd

Verder kan je als je een margin-right én margin-left én margin-top gebruikt beter gewoon "margin" gebruiken. En waarom zet je op je body en paragraph gelijk margin/padding 0? Je kan btw ook 0 gebruiken ipv 0px. 0em = 0px = 0% = 0

zondag 31 december 2006 13:38

Acties:

ceesietopc

Topicstarter

Sorry mensen: Centeren en scalen is eigenlijk wel echt nodig IMO.
Is er behalve een container nog een andere manier om je hele pagina te centreren?

Beetje inactief... maar toch best aanwezig :)

zondag 31 december 2006 13:42

Acties:

Pendaco

Vogon Poetry FTW!

mithras86 schreef op zondag 31 december 2006 @ 13:35:
Dan kan je ook je content hoger in je html zetten dan je menu. Hierdoor wordt je site weer beter geïndexeerd

Daar moet ik het bewijs nog van zien

Verder kan je als je een margin-right én margin-left én margin-top gebruikt beter gewoon "margin" gebruiken.

true maar wellicht wat onduidelijk voor de TS

En waarom zet je op je body en paragraph gelijk margin/padding 0? Je kan btw ook 0 gebruiken ipv 0px. 0em = 0px = 0% = 0

Het laatste heb je gelijk in, snel voorbeeldje he

Een 0 margin op de body en paragraph omdat IE dat weer eens anders interpreteert, padding is eigenlijk niet nodig.

zondag 31 december 2006 13:45

Acties:

Urk

ceesietopc schreef op zondag 31 december 2006 @ 13:38:
Sorry mensen: Centeren en scalen is eigenlijk wel echt nodig IMO.
Is er behalve een container nog een andere manier om je hele pagina te centreren?

Centreren van de hoofdcontainer doe ik altijd zo:

Cascading Stylesheet:

1	#body_container {position: absolute; width: 900px; left: 50%; margin: 20px 0px 0px -450px;}

zondag 31 december 2006 13:49

Acties:

BasieP

Urk schreef op zondag 31 december 2006 @ 13:45:
[...]

Centreren van de hoofdcontainer doe ik altijd zo:
Cascading Stylesheet:
1
#body_container {position: absolute; width: 900px; left: 50%; margin: 20px 0px 0px -450px;}

de ranzige manier...

de nette manier is dit:

Cascading Stylesheet:

div#container {
  margin-left: auto;
  margin-right: auto;
}

@TS, tuurlijk kan je je pagina ook anders centreren (zonder container), maar dat is gewoon vragen om problemen, een container heeft geen negatieve bijeffecten, en ik raad je aan daar toch gebruik van te maken

This message was sent on 100% recyclable electrons.

zondag 31 december 2006 14:00

Acties:

mithras

ceesietopc schreef op zondag 31 december 2006 @ 13:38:
Sorry mensen: Centeren en scalen is eigenlijk wel echt nodig IMO.
Is er behalve een container nog een andere manier om je hele pagina te centreren?

Centreren was al voor je gedaan. Wil je toch echt naar een scalable website moet je alles van pixels naar procenten omzetten

offtopic:
Maar als je kijkt naar professionele websites, zie je dat daar de content altijd een vast breedte heeft. Dit is niet alleen prettiger met lezen, maar geeft je meer zekerheid wat waar komt te staan

Pendaco schreef op zondag 31 december 2006 @ 13:42:
[...]

Daar moet ik het bewijs nog van zien

Google indexeert een pagina van boven naar beneden. Ik heb het gelezen in [SEO] Tips & Trucs, maar met 1000+ posts ga ik het nu niet voor je zoeken

zondag 31 december 2006 15:37

Acties:

ceesietopc

Topicstarter

Ow, ik ben niet echt duidelijk geweest: De breedte hoeft niet te scalen, alleen de hoogte.

Beetje inactief... maar toch best aanwezig :)