Div verticaal & horizontaal centreren probleem - Softwareontwikkeling

zaterdag 3 november 2007 16:16

Acties:

Manisch positief

Topicstarter

Ik probeer een div verticaal en horizontaal te centreren. Opzich gaat dit prima, helaas gaat het niet goed als je je browser klein maakt.
Het venster is precies in het midden, prima dus. maar als je resized blijft hij in principe in het midden en mis je dus een stuk van de bovenkant en linkerkant (omdat het middelpunt echt het middelste puntje in het venster blijft.

Hoe kan ik dit dus oplossen? Ik wil dat hij de div wel altijd helemaal laat zien en dus zodra het te klein wordt met scrollbalken gaat werken... min-height en min-width is geen oplossing omdat IE dat niet ondersteunt.

Ik heb al flink op google gezocht, maar de oplossingen die daaruit kwamen waren óf wat ik nu heb, of een oplossing met tig regels code of niet IE compatible... vandaar mijn topic.

Hier is de code:
style.css

code:

body {
    background-color: #000000;
    background-image: url(images/back.gif);
    background-position: center;
    background-repeat: repeat-x;
    height: 100%;
    margin: 0;
}

div.container {
    width: 1000px;
    height: 630px;
    position: absolute;
    top:50%;
    left: 50%;
    margin-left: -500px;
    margin-top: -315px;
}

index.html

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>---</title>
        <link type="text/css" rel="stylesheet" href="style.css">
        <meta name="keywords" content="Keywords, moeten, nog">
        <meta name="description" content="Description ook">
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

        <meta name="robots" content="all">
        <meta name="revisit-after" content="3 days">
        <meta name="language" content="nl">
        <meta name="rating" content="general">
    </head>
    <body>
        <div class="container">
            <img src="images/logo.png">
        </div>
    </body>
</html>

Alvast bedankt.

Oost west, 127.0.0.1 best!

zaterdag 3 november 2007 23:14

Acties:

Geert.H

Als ik je goed begrijp wil je dat je div in het midden kleiner wordt en scrollbalken krijgt zodra het scherm te klein wordt. Dat is niet mogelijk met CSS, wellicht met javascript.

maandag 5 november 2007 11:55

Acties:

imp4ct

geerttttt schreef op zaterdag 03 november 2007 @ 16:16:
Ik probeer een div verticaal en horizontaal te centreren. Opzich gaat dit prima, helaas gaat het niet goed als je je browser klein maakt.
Het venster is ........

't Is wel duidelijk dat je niet echt de moeite hebt gedaan om even te zoeken op't forum. Voor horizontaal centraliseren van je site dien je gewoon je margin juist in te stellen.

Cascading Stylesheet:

1	margin: 0 auto;

Wel zorgen dat het element waar je dit inplaatst een width heeft. Voor't verticaal centraliseren van de site zou'k zeggen... "zoek eventjes"

[ Voor 60% gewijzigd door imp4ct op 05-11-2007 11:56 ]

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600

maandag 5 november 2007 13:06

Acties:

Blaise

Hoe kan ik dit dus oplossen? Ik wil dat hij de div wel altijd helemaal laat zien en dus zodra het te klein wordt met scrollbalken gaat werken... min-height en min-width is geen oplossing omdat IE dat niet ondersteunt.

Wat je wil kan niet met alleen een div en CSS. Horizontaal kan wel (text-align:center, margin:auto truc), maar verticaal kan dat niet. Verticaal positioneren met CSS is sowieso (nog) niet geweldig.

Het kan wel op een ranzige manier, met javascript of met een tabel.

@ Imp4ct, hierboven: je begrijpt het probleem niet.

maandag 5 november 2007 13:16

Acties:

Fuzzillogic

Cool

Het kan wel, ook in IE, en zelfs zonder scripting. Het geval is dat height in IE6 hetzelfde doet als min-height in moderne browsers. Vervolgens moet je de boel nog in quirks-mode gooien, met alle gezeik vandien...

Doe jezelf een plezier, include het IE7-script van Dean Edwards (hoevaak moet ik nog reclame hiervoor maken?

) en gebruik gewoon CSS2. Voor IE6 is dan uiteraard javascript vereist, maar ja, hoeveel aandacht wil je dat stuk antiek nog geven?...

maandag 5 november 2007 13:20

Acties:

Beekforel

Is eigenlijk geen vis

http://intensivstation.ch/files/templates/temp11.html
Je wilt het zo?

maandag 5 november 2007 13:23

Acties:

50Miles

Waarom niet even een placeholder (div) gebruiken. Grootte: 1 bij 1px. Vervolgens in deze div een div.container maken, waarvan je de margins al goed hebt. (top en left 50%) wel effe verwijderen.

De placeholder div een margin-left van 50% geven en een margin-top 50 of 25%. ( om een of andere reden moest bij mijn site een 25% marge ingesteld worden om centreerd te houden).

Aan mijn posts kunnen geen rechten worden ontleend.

maandag 5 november 2007 13:48

Acties:

Blaise

Fuzzillogic schreef op maandag 05 november 2007 @ 13:16:
Het kan wel, ook in IE, en zelfs zonder scripting. Het geval is dat height in IE6 hetzelfde doet als min-height in moderne browsers. Vervolgens moet je de boel nog in quirks-mode gooien, met alle gezeik vandien...

Ik wist niet dat het wel in quirksmode kon. Ik probeer die situaties altijd te vermijden, tot nu toe met succes.

[ Voor 14% gewijzigd door Blaise op 05-11-2007 14:21 ]

maandag 5 november 2007 15:57

Acties:

Fuzzillogic

Cool

Blaise schreef op maandag 05 november 2007 @ 13:48:
[...]

Ik wist niet dat het wel in quirksmode kon. Ik probeer die situaties altijd te vermijden, tot nu toe met succes.

Ik heb het voor één site gedaan, maar het is meer gedoe dan dat het waard is. Niet alleen moet je IE in quirksmode gooien, de andere browsers moet je met (nog onofficiele) CSS-properties het box-model aanpassen.