[CSS] Div verticaal gecentreerd - Softwareontwikkeling

dinsdag 24 december 2002 13:39

Acties:

smoking2000

DPC-Crew

dpkg-reconfigure reality

Topicstarter

Via google en GoT search kon ik het antwoord op mijn vraag niet vinden, dus open ik hier toch maar een topic.

Ik zit met het probleem om een tekstblok verticaal te centreren. Als het tekstvak altijd de zelfde hoogte had, had het geen probleem geweest, alleen dat is hier niet het geval.

Situatie:
De site bestaat uit frames, een linker en een rechter, en in het rechterframe staat de content. Deze content moet dus verticaal gecentreerd worden.
Met vertical-align: middle; en/of top: 50%; bottom: 50%; wil dit niet lukken. Ook als ik een div om de content heen zet en deze heigth: 100%; meegeef en dan voor de content aangeef deze verticaal te centreren wil dit niet lukken.

Wat is de beste manier om dit op te lossen zonder te moeten scripten?

stylesheet:

code:

body { 
   font-family: Helvetica, Arial, Sans-Serif;
   background-color: #151C5A; 
}
.bodymenu { 
   background: #FE660D; 
   font-family: Helvetica, Arial, Sans-Seriff; 
}
.bodycontent { 
   background: #181c5b; 
   font-family: Helvetica, Arial, Sans-Seriff; 
   height: 100%;
}

.logo { 
   position: absolute; 
   left: 0%; 
   bottom: 0%; 
   margin: 0%; 
   z-index: 0; 
}
.content { 
   position: absolute; 
   top: 5%; 
   left: 5%; 
   maxwidth: 90%; 
   width: 90%; 
   z-index: 1; 
   background: #151C5A; 
   color: #FFFFFF; 
   font-size: 16;
}

html pagina:

code:

<html>
<head>
    <title>Log-in</title>
    <link rel="stylesheet" type="text/css" href="blaat.css"/>
</head>

<body>

    <div class="content">
    Login for the demo as well as the real thing.
    </div>

    <div class="logo">
           [img]"img/logo.jpg"[/img]
        </div>

</body>
</html>

| [Folding@Home] Announce: Client monitor voor Linux (fci) | fci-1.8.4 | Fatal Error Group |

dinsdag 24 december 2002 13:56

Acties:

Hangloozz

{ @$%&# }

zoiets? :

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>vert centr</title>
    <style type="text/css">
    
    body{
        margin: 0px;
        display:block;
        height:100%;
    }
    
    #mijnDiv{
        position:absolute;
        top:50%;
        left:300px;
        width: 300px;
        height:400px;
        margin-top:-200px;
        text-align:top;
        border: 1px solid #000000;
    }
    </style>
</head>

<body>
<div id="mijnDiv">bla</div>


</body>
</html>

www.jurgroessen.nl

dinsdag 24 december 2002 13:58

Acties:

Bosmonster

*zucht*

Hangloozz schreef op 24 December 2002 @ 13:56:
zoiets? :
[...]

Met vertical-align: middle; en/of top: 50%; bottom: 50%; wil dit niet lukken.

Ik moet eerlijk zeggen dat ik alignment in CSS ook nog nooit goed werkende heb gekregen..

dinsdag 24 december 2002 13:59

Acties:

smoking2000

DPC-Crew

dpkg-reconfigure reality

Topicstarter

dat zou kunnen als het textblok op de verschillende pagina's een zelfde hoogte had. Dit is niet het geval, mijn voorbeeld is een heel korte tekst, maar er zijn ook pagina met veel langerestukken tekst dus een vast hoogte gaat denk ik niet lukken.

| [Folding@Home] Announce: Client monitor voor Linux (fci) | fci-1.8.4 | Fatal Error Group |

dinsdag 24 december 2002 14:20

Acties:

Hangloozz

{ @$%&# }

Bosmonster schreef op 24 december 2002 @ 13:58:

[...]

[...]

Ik moet eerlijk zeggen dat ik alignment in CSS ook nog nooit goed werkende heb gekregen..

mietje...

maar ik had dus idd ff niet goed gelezen..
Je wilt dus uitgaan van de axis van het textblok?
hmmz, dat wil denk niet zo lukken nee..

www.jurgroessen.nl

dinsdag 24 december 2002 14:34

Acties:

smoking2000

DPC-Crew

dpkg-reconfigure reality

Topicstarter

Yep, met een tabelletje en deze valign="middle" meegeven werkt ook wel, maar ik wil het graag in css

[ Voor 7% gewijzigd door smoking2000 op 24-12-2002 16:42 ]

| [Folding@Home] Announce: Client monitor voor Linux (fci) | fci-1.8.4 | Fatal Error Group |

dinsdag 24 december 2002 16:14

Acties:

Verwijderd

valign=center ??
knap dat dat werkt, hoort valign="middle" te zijn of align="center"

dinsdag 24 december 2002 16:16

Acties:

André

Analytics dude

vertical-align: middle;

Maar dat werkt niet altijd perfect.

dinsdag 24 december 2002 16:37

Acties:

Verwijderd

Yogho schreef op 24 December 2002 @ 16:16:
vertical-align: middle;

Maar dat werkt niet altijd perfect.

dat werkt altijd perfect, als je 'em maar gebruikt zoals het hoort

http://www.w3.org/TR/REC-...ml#propdef-vertical-align

dinsdag 24 december 2002 16:42

Acties:

smoking2000

DPC-Crew

dpkg-reconfigure reality

Topicstarter

Verwijderd schreef op 24 december 2002 @ 16:14:
valign=center ??
knap dat dat werkt, hoort valign="middle" te zijn of align="center"

Je hebt helemaal gelijk, voortaan beter lezen wat ik typ want dit slaat idd nergens op

| [Folding@Home] Announce: Client monitor voor Linux (fci) | fci-1.8.4 | Fatal Error Group |

dinsdag 24 december 2002 23:01

Acties:

Bosmonster

*zucht*

Verwijderd schreef op 24 december 2002 @ 16:37:
[...]

dat werkt altijd perfect, als je 'em maar gebruikt zoals het hoort

http://www.w3.org/TR/REC-...ml#propdef-vertical-align

Ik heb vanalles geprobeerd een tijdje terug, maar niks leek te werken.. Ik wilde bijvoorbeeld gewoon 2 div's in elkaar waarvan de middelste zowel verticaal als horizontaal gecentreerd was... Maar hij leek m'n CSS wel te negeren..

Geef eens een voorbeeld hoe ik bovenstaande wel kan bereiken? Ben erg benieuwd namelijk.

woensdag 5 mei 2004 15:30

Acties:

Verwijderd

Ontzettend oud topic, maar ik kom hier dus ook niet uit.
Iemand enig idee om een div te centreren op een pagina??

Ik heb de volgende code:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="all">
body{
    height:     100%;
    width:      100%;
    padding:    0px;
    margin:     0px;
}
#browser{
    position:           absolute; 
    width:              100%; 
    height:             100%; 
    left:               0%; 
    top:                0%; 
    background-color:   #006600;
    vertical-align:     middle;
}
#container{
    position:           relative;
    width:              300px;
    height:             200px;
    left:               auto;
    right:              auto;
    border:             1px solid #ffffff;
    background-color:   #66CC33;
}
</style>
</head>

<body>
<div id="browser">
 <div id="container">&nbsp;</div>
</div>
</body>
</html>

Deze werkt dus niet

Ik weet dat je het met een table kunt oplossen, maar dat wil ik dus niet!

woensdag 5 mei 2004 15:34

Acties:

Verwijderd

Inderdaad oud, maar voila. Dat doet wel ongeveer wat je wil denk ik.

woensdag 5 mei 2004 15:36

Acties:

Verwijderd

En 'vertical-align' zou je in principe wel kunnen gebruiken, maar dan moet de DIV een 'display' value hebben van 'table-cell' (ja inderdaad, Internet Explorer).

(Nu hij toch gekickt is kan dit er wel bij.)

woensdag 5 mei 2004 15:41

Acties:

Verwijderd

of kijk op www.handleidinghtml.nl daar staat ook een uitgebreide handleiding voor CSS met voorbeelden

woensdag 5 mei 2004 16:22

Acties:

Clay

cookie erbij?

vind dit persoonlijk net iets mooier dan left:50%; met negatieve margin, dan loopt je content iig niet links het beeld uit als je breedte te smal wordt. is een combo van centreren met margin auto (en textalign fix voor ie5.x) en de % met -margin truuk.

code:

body,html {
    height:100%;
    padding:0;
    margin:0;
    text-align:center;
}
    * {text-align:left;}

#gecentreerdDingID {
    position:relative;
    margin:-200px auto;
    width:700px;
    height:400px;
    background:#f0f0f0;
    top:50%;
}

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

woensdag 5 mei 2004 16:31

Acties:

BtM909

Watch out Guys...

Clay schreef op 05 mei 2004 @ 16:22:

code:

body,html {
    height:100%;
    padding:0;
    margin:0;
    text-align:center;
}
    * {text-align:left;}

Waarom eigenlijk ook aan html die eigenschappen toewijzen

[ Voor 23% gewijzigd door BtM909 op 05-05-2004 16:31 ]

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.

woensdag 5 mei 2004 17:13

Acties:

JeromeB

woei

BtM909 schreef op 05 mei 2004 @ 16:31:
[...]

Waarom eigenlijk ook aan html die eigenschappen toewijzen

Omdat die eigenschappen per browser nog wel eens verschillen. De padding en margin staan meestal standaard niet op 0 (dit kan problemen geven met het box-model als je gebruik maakt van height 100%). Daarnaast is de hoogte niet altijd standaard 100%.

nog een handige link:
http://www.quirksmode.org/css/100percheight.html

PC load letter? What the fuck does that mean?

woensdag 5 mei 2004 17:22

Acties:

BtM909

Watch out Guys...

JeromeB schreef op 05 mei 2004 @ 17:13:
[...]

Omdat die eigenschappen per browser nog wel eens verschillen. De padding en margin staan meestal standaard niet op 0 (dit kan problemen geven met het box-model als je gebruik maakt van height 100%). Daarnaast is de hoogte niet altijd standaard 100%.

nog een handige link:
http://www.quirksmode.org/css/100percheight.html

Wist helemaal niet dat Mozilla daarover nekte. Weer wat geleerd

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.

woensdag 5 mei 2004 18:57

Acties:

Verwijderd

BtM909 schreef op 05 mei 2004 @ 17:22:
[...]

Wist helemaal niet dat Mozilla daarover nekte. Weer wat geleerd

Mozilla nekt niet, maar volgt de standaarden. Net zoals Opera en Safari.

donderdag 6 mei 2004 00:22

Acties:

AkaXakA

Just Kidding...

http://www.hicksdesign.co...tering_with_css/index.php

uitgelegd op //hicksdesign

em

http://intensivstation.ch/css/template.php

template 11 (in het duits ja, maar het gaat om de css)

[ Voor 34% gewijzigd door AkaXakA op 06-05-2004 00:38 ]

http://www.akaxaka.tk/ - "Knowledge is power. Power corrupts. Study hard, be evil." - 4 Jaar GoT en nog steeds niet evil: er moet een verband zijn...

donderdag 21 april 2005 11:59

Acties:

Verwijderd

Clay schreef op woensdag 05 mei 2004 @ 16:22:
vind dit persoonlijk net iets mooier dan left:50%; met negatieve margin, dan loopt je content iig niet links het beeld uit als je breedte te smal wordt. is een combo van centreren met margin auto (en textalign fix voor ie5.x) en de % met -margin truuk.

[code][..]

Clay, deze code werkt niet in Safari <=1.3 (nieuwste op dit moment). De 50% methode werkt wel. Dacht dat dit wel een kickje waard was?