[CSS] positioneren met gecentreerde pagina's - Softwareontwikkeling

donderdag 10 november 2005 17:03

Acties:

Topicstarter

Ik werk met onderstaande code:

code:

<html>
<body style="margin-top:0px; background-color:#fff;">
<div align="center">
<table style="width:990px; height:598px; overflow:hidden; background-color:#ff0;">
<tr>
<td valign="top">

<div style="z-index:1; top:39px; left:144px; position:relative; width:210px; height:69px; background-color:pink;">blok 1</div>
<div style="z-index:1; top:108px; left:30px; position:relative; width:173; height:313px; background-color:green;">blok 2</div>

</td>
</tr>
</table>
</div>
</body>
</html>

Mijn bedoeling is dus dat mijn tabel gecentreerd moet zijn. Alle div's binnenin wil ik positioneren met relatieve waardes (anders centreren ze niet mee). Maar nu snap ik niet waarom blok 2 niet direct onder blok 1 komt te liggen. Dit zit 'm wrs in de relatieve waardes.
Hoe krijg ik dit toch voor elkaar zonder daarbij gebruik te maken met andere x/y coordinaten en zonder gesjoemel met javascript?

donderdag 10 november 2005 17:05

Acties:

BasieP

omdat je bij div1 zegt 'left:144px' en bij die andere 'left:30px'
lijkt me vrij logish

of bedoel je vertical gab tussen de twee divs?
dit komt omdat de divs relatieve posititionereing te maken heeft met het laatste element
dus de 'top' property van de tweede div is dus 'vanaf' de onderkant van de eerste div

niet(zoals jij denkt) vanaf het bovenliggende element (<td> in jouw geval)

door bij allebij de divs dezelfde 'top' waarde neer te zetten zou het werken, maar het is netter om ipv 'top' in de eerste div, margin-top te gebruiken, dan kan je de tweede div standaard laten.

trouwens snap ik dit geval niet dat je een table gebruikt, deze kan je ook gewoon vervangen door een div

[ Voor 163% gewijzigd door BasieP op 10-11-2005 17:14 ]

This message was sent on 100% recyclable electrons.

donderdag 10 november 2005 17:19

Acties:

miniK0bo

gebruik style="margin: 0 auto 0 auto;" om te centreren
verkorte versie: style="margin:0 auto;"

donderdag 10 november 2005 17:25

Acties:

BasieP

miniK0bo schreef op donderdag 10 november 2005 @ 17:19:
gebruik style="margin: 0 auto 0 auto;" om te centreren
verkorte versie: style="margin:0 auto;"

ipv de table dus, zo kan je een div laten centreren

This message was sent on 100% recyclable electrons.

donderdag 10 november 2005 17:30

Acties:

osado

Topicstarter

dank voor de snelle reacties....stiekem werkte een collega van me aan hetzelfde euvel en kwam met een oplossing. Hierbij kun je wél absolute waardes gebruiken :):

code:

<html>
<head>
    
<style>
body { margin: 0px; padding: 0px; }
div#container { position: relative; margin: 0 auto; width: 980px; height: 100%; border-left: solid 1px #ddd; border-right: solid 1px #ddd; text-align: left; background-color: #f4f8ff; }
table#tblContainer { width: 100%; height: 100%; }
td#tdContainer { text-align: center; }
        
div#div1    { position: absolute; z-index: 102; left:  50px; top: 20px; width: 120px; height: 110px; border: solid 1px red;  background-color: #e0e0f0; overflow: hidden; }
div#div2    { position: absolute; z-index: 101; left:  80px; top: 28px; width: 200px; height: 150px; border: solid 1px blue; background-color: #f0f0e0; overflow: hidden; }
</style>
</head>
<body>

        <table id="tblContainer" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td id="tdContainer">
        
                <div id="container">
                
                    <div id="div1">
                        test test test test test test <br>
                        test test test test test test <br>
                        test test test test test test <br>
                    </div>
                    
                    <div id="div2">
                        test test test test test test test test<br>
                        test test test test test test test test<br>
                        test test test test test test test test<br>
                        test test test test test test test test<br>
                        test test test test test test test test<br>
                        test test test test test test test test<br>
                        test test test test test test test test<br>
                        test test test test test test test test<br>
                        test test test test test test test test<br>
                    </div>
                
                </div>
                
            </td>
        </tr>
        </table>
        
    </body>
</html>

Misschien hebben jullie hier nog opmerkingen of eventueel kunnen jullie het zelf ook gebruiken

donderdag 10 november 2005 17:33

Acties:

BtM909

Watch out Guys...

Hoop het niet... Voor dit soort werk zijn tabellen absoluut niet bedoeld. Wellicht je verdiepen in goed HTML gebruik?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

donderdag 10 november 2005 18:50

Acties:

Boelie-Boelie

Ik zou het zo doen: http://maxdesign.com.au/presentation/center/
En naast verdiepen in goed HTML-gebruik zou ik ook verdiepen in goed CSS-gebruik aanraden. Zie bijv. de links als je zoekt op de woorden "best practices" css (bijv. die van Mezzoblue, Macromedia en 456 Berea Street).

Cogito ergo dubito

donderdag 10 november 2005 23:44

Acties:

Verwijderd

Als je een pagina wilt centreren in het midden, dus ook verticaal, dan zit er niks anders op dan een tabel te gebruiken. De css style tag om verticaal te centreren bestaat helaas niet echt (CSS3 ofzoiets, het positioneren van een pagina is poep)
Die text-align center vind ik smerig, je kan IE in strict mode zetten zodat alles hetzelfde wordt geinterpreteerd als in FireFox, dit is wel zo handig

Voorbeeld van een simpele site:
http://www.botsrasverhuizingen.nl/verhuizingen.html

linkje naar centreren:
http://www.quirksmode.org/css/centering.html

[ Voor 12% gewijzigd door Verwijderd op 10-11-2005 23:45 ]

vrijdag 11 november 2005 00:39

Acties:

Boelie-Boelie

Verticaal centreren kan wel degelijk zonder tabel:
www.wpdfd.com/editorial/thebox/deadcentre2.html
http://css-discuss.incutio.com/?page=CenteringBlockElement (zie lijst met links onderaan pagina)

[ Voor 25% gewijzigd door Boelie-Boelie op 11-11-2005 00:40 ]

Cogito ergo dubito

vrijdag 11 november 2005 04:14

Acties:

x-man

Proud newbie!

Drie manieren van Centeren Design:

code:

Div#container {
margin-left: auto;
margin-right: auto;
width: 168px;

Nadeel: geen support ervoor van browserversies lager dan IE6

Tweede manier:

code:

body{
text-align: center;
}
#container {
margin-left: auto;
margin-right: auto;
border: 1px solid red;
width: 168px;
text-align: left
}

Nadeel: allen nogsteeds niet perfect en nogsteeds een hack. Hoewel betere resultaten in verschillende browsers.

Beste manier:

code:

#container{
background: #ffc url(plaatje.jpg) repeat-y center;
position: absolute;
left: 50%;
width: 760px;
margin-left: -380px;
}

Voordeel: Geen hack. Hoewel dit niet de methode is met de meeste voorkeur, heeft het wel de meeste browser ondersteuning. (zelfs Netscape Navigator 4.X) En negatieve margins gebruiken is iets wat heel gebruikelijk is. Ik hoop dat je hier wat aan hebt?

Better a newbie in one hand then ten wannabe-hacker-scriptkiddies on your server.

vrijdag 11 november 2005 09:11

Acties:

Verwijderd

Een groot minpunt van de negatieve margins is dat een deel van de site verdwijnt als je deze verkleint. Daarom gaat mijn voorkeur toch uit naar een table. Bij grote sites is het wel van belang dat je de hele pagina kan zien, ook in lage resoluties.

Als je http://www.wpdfd.com/editorial/thebox/deadcentre2.html heel klein maakt dan verdwijnt de linker bovenhoek waar je niet meer kan komen.

vrijdag 11 november 2005 09:24

Acties:

crisp

Devver

Pixelated

x-man schreef op vrijdag 11 november 2005 @ 04:14:
Beste manier:
[...]

Nee, zie o.a. de opmerking van Par0xysm over het wegvallen van content bij een verkleind venster. Daarbij heeft een in-flow oplossing imho altijd de voorkeur boven absolute positioning. Zeker als je deze manier wilt gebruiken voor verticale centrering - oudere versies van o.a. Mozilla en Konqueror kunnen daar niet goed mee overweg.
En who cares about NN4?
Als je methode 2 een 'hack' vind, stop dan de benodigde styles voor IE < 6 gewoon in een aparte stylesheet die je dmv conditional comments inlaadt.

Intentionally left blank