[Div] Positie probleem

[Robbie T]

Ik heb een website ontworpen in Photoshop, en deze vervolgens gesliced.
Allemaal prima, geen probleem.
Nu heb ik een div gemaakt, en deze vervolgens de positie absolute meegegeven, plus de coordinaten.

Echter, werkt dit niet met andere resoluties. En wat ik ook probeer, ik krijg het maar niet voor elkaar om het zo te doen dat dit wel werkt.

Hoe kan ik dit oplossen?
De website beslaat niet het hele venster, maar alleen een stuk binnen het venster. (gecentreerd).
Maar zodra ik een positie van de linkerkant in geef, blijft die dit natuurlijk altijd doen, welke resolutie ik ook gebruik. En dan krijg ik de tekst niet meer op de juiste plek. Wat juist wel moet.

Hoe los ik dit op?

[ Voor 37% gewijzigd door Robbie T op 16-02-2008 23:14 ]

[spaceninja]

Ik begrijp je niet helemaal ... heb je een testcase ergens staan, misschien wordt het dan duidelijker.
Weet je zeker dat je wel absolute wil gebruiken en niet relative, als je het allemaal al gecentreerd hebt?

[NiteSpeed]

spaceninja schreef op zaterdag 16 februari 2008 @ 23:20:
Ik begrijp je niet helemaal ... heb je een testcase ergens staan, misschien wordt het dan duidelijker.
Weet je zeker dat je wel absolute wil gebruiken en niet relative, als je het allemaal al gecentreerd hebt?

Ik denk dat hij zo centreert:

#tekst {
left: 400px;
}

Terwijl het zo moet:
#tekst {
margin: 0px auto;
}

[Robbie T]

Ik heb even een snelle paint tekening online gezet.
(Paint FTW ).


De website valt dus binnen het venster.
Het vak waar content staat, daar moet dus de tekst komen.
Maar het moet wel zo gebeuren dat het ook weer op de juiste plek komt te staan na verandering van de resolutie.

De tekst is groter dan het content vak, dus vandaar dat een div mij het meest handig leek, met de overflow op auto.

[NiteSpeed]

Hoe je het ook wend of keert. Je moet NIET met absolute gaan werken. Sterker nog. Positionering via x en y waardes werken bijna altijd fout als je niet weet wat je doet. Kijk even wat ik hierboven heb gezet in de code. Dat is precies wat je moet doen om je content vlak gecentreerd te krijgen.

html
head
body
div id=content
div id=tekst

en dan:

#content {
margin: 30 px auto 0px auto;
width: 570px;
height: 450px;
}

#tekst {
margin: 30px;
overflow: auto;
}

Daar moet je al een heeeeeeeeeeeeel eind mee kunnen komen.

[Robbie T]

NiteSpeed thx voor je respons.
Maar ik heb het ontwerp in photoshop gemaakt, en daardoor is bijvoorbeeld het menu een andere image dan het content vak.

Dan zou ik dus alle images ook in een div moeten zetten, als ik het goed begrijp?

Noob-mode: Heb nog niet zo heel vaak met div gewerkt, vandaar!

[spaceninja]

Als je de website in het midden wilt krijgen is 't het meest handige om met een wrapper/container te gaan werken. Je maakt een div (de container/ wrapper) aan die je door middel van css in het midden positioneert, en daarin zet je de div met de banner, het menu en de content etc. De wrapper houd de andere daardoor in het midden

Je kunt een div centreren via css door het volgende er aan toe te voegen(dit hoeft dus alleen bij de wrapper, breedte is gelijk aan de max breedte van je website) :

width: 800px;
margin: 0 auto;

Je kan ook even googlen op centreren van divs, is veel over te vinden en misschien vind je ergens al een layout die je kan gebruiken voor die van jou.

[ Voor 4% gewijzigd door spaceninja op 17-02-2008 02:46 . Reden: ogen zijn moe :/ ]

[f.v.b]

Als je position: absolute wilt gebruiken binnen een pagina die gecentreerd is, dan moet je position: relative zetten op het gecentreerde deel.

Cascading Stylesheet:

#site
{
  width: 800px;
  margin: 0 auto;
  position: relative;
}

#content
{
  position: absolute;
  top: 40px;
  left: 100px;
}

[Robbie T]

Goed. heb het inmiddels voor elkaar!
Heb een div om de hele website gezet met deze css:

Cascading Stylesheet:

 #website{
position: absolute;
top: 50%;
left: 50%;
height: 567px;
width: 778px;
margin: -283.5px 0 0 -389px;
border: 1px solid #000;

en hierin vervolgens een div gezet, met positie absolute.
En nu werkt het wel.

[MuisM4t]

Ik zou oppassen met position:absolute

Als je straks iets toevoegt/wijzigt kun je rare dingen krijgen.

M.i. is het beter met floats en margins te werken , als dat niet gaat met position:relative.