Div layer blijft niet gecentreerd - Softwareontwikkeling

maandag 15 maart 2004 18:17

Acties:

Verwijderd

Topicstarter

Ik wil het volgende bereiken.
Ik gebruik een container layer waar alles in geplaatst wordt.
Ik wil bovenin en onderin een layer hebben.
De onderste layer wil ik echter zo krijgen dat ie altijd onderin blijft staan, ook als de resolutie veranderd of de grootte van het browserscherm veranderd.
Als ik voor de onderste layer "position: absolute" gebruik, lukt dit ook, alleen wordt ie heel vreemd niet in het midden van de container geplaatst.

zie Hier

dit is de code die erbij hoort:

HTML:

<html>
<head>
<style type="text/css">
div.container {
  background-color: #999999;
}
div.top {
  background-color: blue;
  width: 750px;
  height: 75px;
  top: 0px;
}
div.bottom {
  position: absolute;
  background-color: blue;
  height: 75px;
  width: 750px;
  bottom: 0px;
}
</style>
</head>

<body>
<div class="container" align="center">

<div class="top">
Titel Homepage
</div>

<div class="bottom">
Bottom
</div>

</div>
</body>
</html>

Iemand idee wat ik fout doe of hoe probleem op te lossen?

[ Voor 10% gewijzigd door Verwijderd op 15-03-2004 18:18 ]

maandag 15 maart 2004 18:24

Acties:

djluc

Position absolute mag weg.

maandag 15 maart 2004 18:25

Acties:

CrashOne

oOoOoOoOoOoOoOoOoOo

align="center" zou ik sowieso niet gebruiken...

Ik zou gewoon binnen css zorgen dat je content gecentreert word.

Huur mij in als freelance SEO consultant!

maandag 15 maart 2004 18:32

Acties:

Ruzor

Off with his head man

code:

 #Layer1 {
    position:           absolute;
    width:              50px;
    height:             50px;
    left:               50%;
    top:                50%;
    background-color:   #ffffff;
    margin-left:        -25px;
    margin-top:         -25px
}

Misschien dat je hier iets aan hebt, met deze blijft Layer 1 altijd in het midden (ook als je resized en met een andere resolutie).

[ Voor 165% gewijzigd door Ruzor op 15-03-2004 18:42 ]

[This is what you get when you mess with us]

maandag 15 maart 2004 18:49

Acties:

Verwijderd

Topicstarter

djluc schreef op 15 maart 2004 @ 18:24:
Position absolute mag weg.

Dan plaatst ie de bottom layer niet onderaan de pagina..

CrashOne schreef op 15 maart 2004 @ 18:25:
align="center" zou ik sowieso niet gebruiken...

Ik zou gewoon binnen css zorgen dat je content gecentreert word.

Enig idee hoe ik dit kan doen? enige manier die ik kan bedenken is alles in de container te centreren, maar dan krijg ik zelfde probleem weer.

maandag 15 maart 2004 18:54

Acties:

Verwijderd

Topicstarter

Ruzor schreef op 15 maart 2004 @ 18:32:
code:
1
2
3
4
5
6
7
8
9
10
 #Layer1 {
    position:           absolute;
    width:              50px;
    height:             50px;
    left:               50%;
    top:                50%;
    background-color:   #ffffff;
    margin-left:        -25px;
    margin-top:         -25px
}
Misschien dat je hier iets aan hebt, met deze blijft Layer 1 altijd in het midden (ook als je resized en met een andere resolutie).

Dit werkt bij een kleine layer van 50px, maar als ik een layer van 750px wil dan start ie op de helft en rekt verder 750px uit naar rechts

maandag 15 maart 2004 18:57

Acties:

CrashOne

oOoOoOoOoOoOoOoOoOo

Dan pas je de marings aan, maar dit is niet de juiste manier om te centeren, bij lagere resoluties verwijnt er een gedeelte uit beeld waar je niet meer bij kan.

Probeer eens wat met het volgende: body{text-align:center;}layer{position:relative;text-align:left;width:250px;}

Huur mij in als freelance SEO consultant!

maandag 15 maart 2004 19:07

Acties:

crisp

Devver

Pixelated

zo werkt 'ie:

HTML:

<html>
<head>
<title>centreren</title>
<style type="text/css">

html {
    background-color: #999999;
}
body {
    margin: 0px;
    padding: 0px;
    overflow: auto;
    height: 100%;
}

div#outercontainer {
    height: 100%;
    text-align: center;
}
body>div#outercontainer {
    height: auto;
    min-height: 100%;
}

div#container {
    position: relative;
    width: 750px;
    height: 100%;
    margin: 0px auto;
}

div#top {
    width: 100%;
    height: 75px;
    background-color: blue;
}

div#bottom {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 75px;
    background-color: blue;
}
</style>
</head>

<body>

<div id="outercontainer">

  <div id="container">

    <div id="top">
      Titel Homepage
    </div>

    <div id="bottom">
      Bottom
    </div>

  </div>

</div>

</body>
</html>

Intentionally left blank

maandag 15 maart 2004 20:56

Acties:

Bonno

crisp schreef op 15 maart 2004 @ 19:07:
zo werkt 'ie:

<knip code>

Crisp, zo werkt het op zich wel, maar ik was het voor mezelf ook gelijk gaan gebruiken omdat ik nog zoek naar een goede oplossing voor copyright (oid) onder elke pagina, maar ik kom er maar niet achter hoe dit te doen is. En ook met jouw code heb je een probleem wanneer de tekst erg lang is, want die loopt door na de 'footer'.
zie hier voor een voorbeeld van wat ik bedoel
Ik ben ervan overtuigd dat dit mogelijk moet zijn maar ik kom er niet uit hoe, want met een relative komt die div helemaal bovenaan staan.

maandag 15 maart 2004 21:03

Acties:

DeadMetal

Ik ben nog helemaal nieuw op het gebied van positionering met DIV en CSS maar wil het graag leren. Welke bron kan ik het beste gebruiken om dit te leren? Zijn er enkele goede (beginners) sites hierover?

En ik hoorde dat je beter id in plaats van class kan gebruiken en dan # in de CSS. Is dat waar?

Overigens zie ik in de code staan 'width = 750' voor de top-div. Waar dient dat voor? In mijn browser is hij namelijk niet 750 pixels breed, maar 100% van m'n beeldscherm.
/edit: ah ik zie het al, die regel heeft hij verwijderd.

[ Voor 49% gewijzigd door DeadMetal op 15-03-2004 21:07 ]

maandag 15 maart 2004 21:12

Acties:

Bonno

Ik heb gewoon besloten mijn eigen site meer style en content gescheiden te houden dus, dan is het simpelweg een kwestie van beginnen en als je tegen problemen loopt opzoeken op http://www.w3.org/TR/REC-CSS2/.
En natuurlijk veel op andere site's in de broncode kijken. En dit soort topics in de gaten houden. In dat stukje code wat Crisp poste zie je al snel wat welke actie doet zonder dat het onduidelijk wordt door de content van een site. Probeer deze code maar eens zelf uit (als dat mag van Crisp, maar daar ga ik wel van uit

) en maak wat wijzigingen en zie wat er gebeurt.

edit:

id gebruik je wanneer een instantie eenmalig voorkomt en een class wanneer het vaker voorkomt. Ook wordt id meestal gebruikt voor de positionering van grote delen, en class is vaak bij kleine delen van je tekst (bijv een deel van de tekst rechts uitlijnen en een ander deel links). Ik weet niet of dit geheel correct is, maar dit hanteer ik meestal

.
Die width van 750px weet ik eigenlijk ook niet precies, ik merkte wel dat het in dit geval een nadeel geeft wanneer je je venster smal maakt: de tekst blijft niet in het midden gecentreerd staan, Als je dat wel wilt maak je van deze "width: 100%;" dan is het wel okay

[ Voor 37% gewijzigd door Bonno op 15-03-2004 21:19 ]

maandag 15 maart 2004 22:21

Acties:

crisp

Devver

Pixelated

inderdaad; je kan de truuk herhalen voor de containerdiv en er een padding aan toevoegen:

Cascading Stylesheet:

div#container {
    position: relative;
    width: 750px;
    height: 100%;
    margin: 0px auto;
    padding-bottom: 75px;
}
div#outercontainer>div#container {
    height: auto;
    min-height: 100%;
}

Intentionally left blank

Pagina: 1

Reageer