[CSS] Div gepositioneerd onderaan de pagina - Softwareontwikkeling

vrijdag 21 april 2006 18:46

Acties:

Topicstarter

Mijn doel is één afbeelding als achtergrond te gebruiken, maar deze afbeelding moet (het liefst zonder marge!) aan de onderkant van de pagina beginnen, en in het midden staan. De rest er om heen mag/moet zwart zijn.

Gedaan krijg ik het echter niet. Het volgende heb ik geprobeerd:

Een div met oa

code:

1	margin-bottom: 0px;

, maar hij zet hem niet onderaan neer. Ook met een

code:

1	background-postion: bottom center;

werkt het niet; ook niet als ik 'm uit de CSS haal (niet dat dat verschil zou behoren te maken, maar ok).

Toen bedacht ik een 'relative' div te maken die gecentreerd staat, en daarin een absolute div met een marge van 0 aan de onderkant, maar het wilt maar niet werken! (De div 'main' ín de div 'achtergrond').

Wat ik nu heb:

code:

html,body {
    margin: 0px;
    margin-bottom: 0px;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    background-color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    text-align: left;
}

#achtergrond {
    position: relative;
    margin: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    border: #000000 solid 0px;
    min-height: 100%;
    height: 100%;
    width: 640px;
}

#main {
    position: absolute;
    margin-bottom: 0%;
    margin-left:auto;
    margin-right:auto;
    padding: 0px;
    height: 600px;
    width: 640px;
}

Met deze structuur:

code:

<div id="achtergrond"> 
  <div id="main"> 
  [img]"../plaatjes/bosrand1024.jpg">
[/img] 
  <?php include("menu.inc.php");?>
  </div>
  </div>
</div>

Om de één of andere reden willen FF en IE iets niet enkel aan de onderkant kwijt. Hoe moet dit wél?

vrijdag 21 april 2006 19:21

Acties:

Verwijderd

[ Voor 101% gewijzigd door Verwijderd op 22-04-2006 12:20 ]

vrijdag 21 april 2006 20:30

Acties:

JHS

Splitting the thaum.

Voor (absolute) positioning moet je volgens mij dan ook niet margin-bottom gebruiken, maar bottom: 0;

DM!

vrijdag 21 april 2006 20:46

Acties:

YouKnow

Topicstarter

Hmm, met bottom:0 werkt 't inderdaad! Tenminste... gedeeltelijk! In IE wordt de div wel onderaan neergezet (op 3 pixels oid na), maar niet in het midden neergezet. In FF wordt 't nu zó laag neergezet, dat ik zelfs iets naar beneden moeten scrollen?

Waarom dit gebeurt in FF is een raadsel. Ook zie ik niet waarom IE hem niet gecentreerd weergeeft, wat gek dit zeg..

De CSS is dan zo:

code:

/* CSS Document */

* commented backslash hack \*/ 
html, body {
  height: 100%;
 } 
/* end hack */

html,body {
    margin: 0px;
    margin-bottom: 0px;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    background-color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    text-align: left;
}

#achtergrond {
    position: relative;
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    border: #000000 solid 0px;
    min-height: 100%;
    height: 100%;
    width: 640px;
}

#main {
    position: absolute;
    bottom: 0;
    margin-left:auto;
    margin-right:auto;
    padding: 0px;
    height: 600px;
    width: 640px;
}

a:link { 
 color: #000000;
 font-weight: normal;
 text-decoration: underline;
 }

a:visited { 
 color: #000000;
 font-weight: normal;
 text-decoration: underline;
 }

a:hover { 
 color: #FF0000;
 font-weight: normal;
 text-decoration: underline;
 }

En als index.php

code:

<body>
<div id="achtergrond"> 
<div id="main"> 
[img]"../plaatjes/bosrand1024.jpg">
<div[/img] 
<?php include("menu.inc.php");?>
</div>
<div id="Layer2" style="position:absolute; left:250px; top:210px; width:200px; height:309px; z-index:1"> 
Blaat, blaat</div>
</div>
</div>
</body>

vrijdag 21 april 2006 20:53

Acties:

killercow

eth0

ik ken heel de property bottom niet, die je aan je achtergrond div geeft, maar waarom geef je die achtergrond image niet gewoon aan de body tag?

daarnast heb je nergens aangegeven dat het plaatje in #main in het midden moet staan van die div,.

Ik denk trouwens ook niet dat margin:0px auto; nog zal werken op een relative gepositioneerd element.

de 3 pixels ruimte zouden trouwens best in de gepostioneerde div kunnen zitten in de vorm van een lege regel ofzo. gooi er om te testen eens wat borders omheen?

openkat.nl al gezien?

vrijdag 21 april 2006 21:05

Acties:

YouKnow

Topicstarter

Het plaatje is even breed als #main; en omdat die in 't midden zou staan (toch? zit nl. in #achtergrond, en die is gecentreerd), dus ben er van uit gegaan dat het in het midden zou komen aangezien #main is gecentreerd door margin-left: auto; en margin-right: auto;. Sterker nog, haal ik dit weg, is het ook in FF niet meer gecentreerd. In FF werkt 't, in IE niet. Echter, een

code:

1	[img]"../plaatjes/bosrand1024.jpg"[/img]

lost 't voor IE nog niet op.

Met borders komt 't nog niet in de buurt van de 'ondergrens'.

vrijdag 21 april 2006 21:35

Acties:

killercow

eth0

probeer eens dit in ie:

align="center"

centre bestaat niet, veelal kun je dit soort vage dingen heerlijk testen met A: borders, B de web-developper toolbar in firefox, en C: xhtml/css validators van w3c.

en zo?

HTML:

<html>
<head>
<style type="text/css">
html,body {
   margin:0px;
   padding: 0px;
   background-color: #000000;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #FFFFFF;
}

#achtergrond {
        margin:0px auto;
        padding: 0px;
    border: #ff0000 solid 1px;
    min-height: 100%;
    height: 100%;
    width: 640px;
    background-image:url(http://tweakers.net/g/if/2/btm.gif);
    background-position:bottom center;
    background-repeat:no-repeat;
}

#main {
    position: absolute;
    bottom: 0;
    margin-left:auto;
    margin-right:auto;
    padding: 0px;
    height: 600px;
    width: 640px;
}

a:link { 
 color: #000000;
 font-weight: normal;
 text-decoration: underline;
 }

a:visited { 
 color: #000000;
 font-weight: normal;
 text-decoration: underline;
 }

a:hover { 
 color: #FF0000;
 font-weight: normal;
 text-decoration: underline;
 }
</style>
</head>
<body>
<div id="achtergrond"> 
<div id="main"> 
<div id="menuutje"> 
</div>
<div id="Layer2" style="position:absolute; left:250px; top:210px; width:200px; height:309px; z-index:1"> 
Blaat, blaat</div>
</div>
</div>
</body>
</html>

[ Voor 75% gewijzigd door killercow op 21-04-2006 21:45 ]

openkat.nl al gezien?

vrijdag 21 april 2006 21:40

Acties:

YouKnow

Topicstarter

Je hebt helemaal gelijk, wat 'n stomme tikfout! Het echter goed neergezet haalt 't nog steeds niets uit..

[ Voor 42% gewijzigd door YouKnow op 21-04-2006 21:40 ]

zaterdag 22 april 2006 01:31

Acties:

Boelie-Boelie

Zoiets?

Cascading Stylesheet:

1
2
3

html, body {height: 100%; margin: 0; padding: 0;}
body {text-align: center;}
#wrap {height: 100%; width: 760px; margin: 0 auto; background: url(foto.ext) no-repeat bottom center; text-align: left;}

HTML:

<!DOCTYPE  HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>[CSS] Div gepositioneerd onderaan de pagina</title>
</head>
<body>
<div id="wrap">
</div>
</body>
</html>

Zie ook www.quirksmode.org/css/100percheight.html

Cogito ergo dubito

zaterdag 22 april 2006 11:37

Acties:

YouKnow

Topicstarter

Nou, hiermee werkt het in ieder geval, tnx!

zaterdag 22 april 2006 12:47

Acties:

YouKnow

Topicstarter

De achtergrond is nu goed gepositioneerd. Het moeilijke nu blijkt om een div zo te centreren dat die over 'n balkje heenvalt waar het menu in moet komen.

Ik heb:

code:

#menu {
    position:relative;
    width:186px;
    height:26px;
    z-index:1;
    align:center;
    font-color:#FFFFFF;
    left: 338px;
    bottom: -411px;
}

in de css,

in de html:

code:

<body>
    <div id="wrap">
        <div id="menu"> 
        <?php include("menu.inc.php");?>
        </div>
    </div>
</body>

Opzich wordt 't met de huidige code goed in FF weergegeven op 1400x1050, maar in IE wordt de div zo'n 40 px hoger geplaatst. Op 1024x768 in IE staat het weer wél goed..

Doordat er vanaf onderen wordt opgebouwd en de ruimte aan de bovenkant afhankelijk van de resolutie anders kan zijn, is het volgens mijn geen goed idee dit met een top: ??px te doen, want dat wordt 't echt een zootje..

zaterdag 22 april 2006 23:42

Acties:

Boelie-Boelie

Je wilt een div op een precieze plek neerzetten, een plek die altijd dezelfde afstand tot de onderkant behoudt? Met een 'position:relative' op de #wrap en een 'position:absolute' op #menu moet je #menu kunnen positioneren (bijv. bottom: 400px; left: 200px).
www.stopdesign.com/articles/absolute/

Btw, z-index is bijna nooit nodig en 'align' is geen CSS-eigenschap.

Cogito ergo dubito

Pagina: 1

Reageer