[CSS/XHTML] Vertical-align - Softwareontwikkeling

donderdag 16 september 2004 17:39

Acties:

Topicstarter

Het volgende probleem: ik probeer een horizontaal uitgerekte balk (groter dan het scherm) verticaal te centreren.

Misschien is dit al eerder langs gekomen, maar het lukt me gewoon met geen mogelijkheid om het ding gecentreerd te krijgen. Tenminste, niet in XHTML 1.0 Transitional. Ik heb het al met margins, tables (

) en what not geprobeerd, werkt allemaal niet.

Dit is mijn standaard code:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test valign</title>
<style>
body {
    background-color: #000;
    padding: 0px;
    margin: 0px;
}
#container {
    background-color: #FFF;
    height: 500px;
    width: 2000px;
}

</style>
</head>

<body>
<div id="container"></div>
</body>
</html>

Wat moet ik dus toevoegen zodat die witte balk in het midden blijft? Heeft iemand dezelfde vage design ideeën als ik gehad ooit en weet die persoon hier een oplossing voor? Thx alvast.

offtopic:
Moge er een horde homosexuele gevangenen neervallen op degene die dit KLOTE CSS interpretatie-systeem bedacht heeft. Dank u...

[ Voor 21% gewijzigd door BlueAce op 16-09-2004 17:41 ]

donderdag 16 september 2004 17:41

Acties:

Verwijderd

http://annevankesteren.nl/test/templates/center-hv ?

'vertical-align' is een property voor tekst, niet voor blokjes.

donderdag 16 september 2004 17:42

Acties:

Bram77

Edit: werkt idd niet. Ff knutselen met javascript. Het kan wel....zo terug

[ Voor 96% gewijzigd door Bram77 op 16-09-2004 17:44 ]

donderdag 16 september 2004 17:58

Acties:

Bram77

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test valign</title>
<style>
body {
    background-color: #000;
    padding: 0px;
    margin: 0px;
}
#container {
    background-color: #FFF;
    height: 500px;
    width: 2000px;
    position:absolute;
    top:0px;
}

</style>
</head>

<body onLoad="vAlign()">

<SCRIPT language="Javascript">
 function vAlign(){
  var bodyHeight = document.body.clientHeight;
  var containerHeight = document.getElementById('container').offsetHeight;
  var topClearence = (bodyHeight-containerHeight)/2;
  document.getElementById('container').style.pixelTop=topClearence;
 }
</SCRIPT>

<div id="container"></div>

</body>
</html>

Zou moeten werken naar mijn beste weten. Ik heb nog een beta versie van IE 6.01. Misschien dat daar om de "document.body.clientHeight" 0 teruggeeft?

[ Voor 14% gewijzigd door Bram77 op 16-09-2004 18:00 ]

donderdag 16 september 2004 18:02

Acties:

crisp

Devver

Pixelated

Cascading Stylesheet:

#container {
    background-color: #FFF;
    height: 500px;
    width: 2000px;
    position:absolute;
    top: 50%;
    margin-top: -250px;
}

Intentionally left blank

donderdag 16 september 2004 18:05

Acties:

Bram77

Verrek zeg

donderdag 16 september 2004 18:36

Acties:

Zoefff

❤ 

Ik heb ook wel eens een voorbeeldje gemaakt, waarin ik het ook duidelijk probeer uit te leggen

http://zoefff.gotdns.com/divcenter.htm

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

donderdag 16 september 2004 19:41

Acties:

BlueAce

Topicstarter

crisp schreef op 16 september 2004 @ 18:02:

Cascading Stylesheet:

#container {
    background-color: #FFF;
    height: 500px;
    width: 2000px;
    position:absolute;
    top: 50%;
    margin-top: -250px;
}

Gvd zeg, geloof het of niet maar: dat had ik geprobeerd, alleen dan zonder de margin. Nu werkt het in ieder geval perfect.

Er staat me bij dat je me wel eens eerder geholpen hebt? Many thx nogmaals

donderdag 16 september 2004 20:25

Acties:

BtM909

Watch out Guys...

BlueAce schreef op 16 september 2004 @ 19:41:
[...]

Gvd zeg, geloof het of niet maar: dat had ik geprobeerd, alleen dan zonder de margin. Nu werkt het in ieder geval perfect.

Er staat me bij dat je me wel eens eerder geholpen hebt? Many thx nogmaals

Als je al gaat bedanken doe dat dan vooral aan [rml]Anne in "[ CSS/XHTML] Vertical-align"[/rml]

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.

vrijdag 17 september 2004 20:16

Acties:

BlueAce

Topicstarter

Gelukkig ben ik niet helemaal achterlijk en weet ik dondersgoed dat vertical-align niet werkt, vind je ook niet?

Het ging niet om het element maar om het EFFECT vertical-align.

Of bedoel je de link die gegeven werd? Want daar werd ik namelijk geen wijs uit(had de link namelijk al voor deze thread gezien). Crisps antwoord vond ik het meest duidelijk, en heb die dus gebruikt, daarom.

[ Voor 70% gewijzigd door BlueAce op 17-09-2004 20:20 ]

vrijdag 17 september 2004 23:07

Acties:

AkaXakA

Just Kidding...

Voor al je plaatsing troubles:

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

Of de wat betere bekende in het engels (niet dat het uitmaakt voor beide sites):

Little Boxes

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...

maandag 20 september 2004 11:04

Acties:

BtM909

Watch out Guys...

BlueAce schreef op 17 september 2004 @ 20:16:
Gelukkig ben ik niet helemaal achterlijk en weet ik dondersgoed dat vertical-align niet werkt, vind je ook niet? Het ging niet om het element maar om het EFFECT vertical-align.

Ik geef een link naar een post in dit topic en vertel toch niks over jouw kennis en kunde

Of bedoel je de link die gegeven werd? Want daar werd ik namelijk geen wijs uit(had de link namelijk al voor deze thread gezien). Crisps antwoord vond ik het meest duidelijk, en heb die dus gebruikt, daarom.

eeh ja, daar staat precies hetzelfde in (in de broncode, that is)

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.

Pagina: 1

Reageer