[XHTML] Div height 100% - Softwareontwikkeling

donderdag 20 november 2003 20:44

Acties:

Topicstarter

Ik ben bezig met een site waarbij ik een "vlak" in het midden van het scherm wil hebben. Nu is dit geen probleem met een <center> zou je denken, maar nu wil ik die div ook nog 100% hoog hebben. Dit gaat fout, mijn div wordt vervolgens niet gecentreerd. Ik maak gebruik van een voorbeeld op http://www.webmasterworld.com/forum83/200.htm voor een height = 100%. Hoe kan ik dit _wel_ realiseren?

donderdag 20 november 2003 20:46

Acties:

Verwijderd

Het html en body element beiden een hoogte van 100% geven, het html of het body element de property text-align: center; meegeven, en de betreffende div 100% hoog maken, een vaste breedte opgeven, text-align: left; meegeven, linker en rechter marge op auto zetten.

Ofwel: gewoon creatief met CSS.

[ Voor 6% gewijzigd door Verwijderd op 20-11-2003 20:47 ]

donderdag 20 november 2003 20:49

Acties:

Clay

cookie erbij?

ik doe dat text align stukje meestal met:

Cascading Stylesheet:

body {
    text-align:center;
}

* { 
    text-align:left; 
}

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

donderdag 20 november 2003 20:54

Acties:

dream0r

Topicstarter

Cheatah, ik speel inderdaad met CSS, maar als je al een tijdje met iets bezig bent en ook op google gezocht hebt is resultaat soms leuk. Maar het wil nog steeds niet lukken:

code:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > 
<head>
<title>Test</title>
<style type="text/css" media="screen">
html
{
    height: 100%;
}

body
{
    text-align: center;
    margin: 0; 
    padding: 0; 
    background-color: #C2D4A2;
    height: 100%;
}

* { 
    text-align:left; 
}


#site
{
    left: auto;
    right: auto;
    height: 100%;
    width: 700px;
    background-color: #FFF7D7;
    position: absolute;
    
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
  <div id="site">
   hoi
  </div>
</body>
</html>

Waar ga ik de fout in ?

donderdag 20 november 2003 20:55

Acties:

akakiwi

I believe in the ruling class.

Ik weet dat veel mensen tegen tables zijn, maar wat is er mis met:

HTML:

<table height='100%' width='100%' cellpadding='0' cellspacing='0' border='0'>
<tr><td vAlign='middle' Align='center'>
    Doe dit maar lekker als tekst in het midden van je scherm.
</td></tr>
</table>

edit:

Zet anders met DOM de hoogte van je DIV op de hoogte van het scherm in pixels, dat werkt ook altijd goed.

[ Voor 52% gewijzigd door akakiwi op 20-11-2003 20:56 . Reden: Extra info ]

| Life is a game (and games are fun) | homepage |

donderdag 20 november 2003 20:56

Acties:

dream0r

Topicstarter

akakiwi schreef op 20 november 2003 @ 20:55:
Ik weet dat veel mensen tegen tables zijn, maar wat is er mis met:
HTML:
1
2
3
4
5
<table height='100%' width='100%' cellpadding='0' cellspacing='0' border='0'>
<tr><td vAlign='middle' Align='center'>
    Doe dit maar lekker als tekst in het midden van je scherm.
</td></tr>
</table>

Mijn bedoeling is om nu een layout te maken gebaseerd op het css boxmodel, niet op tables.

[ Voor 15% gewijzigd door dream0r op 20-11-2003 20:57 ]

donderdag 20 november 2003 20:58

Acties:

akakiwi

I believe in the ruling class.

Skizzik schreef op 20 november 2003 @ 20:56:
[...]

Mijn bedoeling om nu een layout te maken gebaseerd op het css boxmodel, niet op tables.

Dan zou je het dus idd moet DOM moeten doen.

var iHoogte = screen.availHeight;
document.getElementById('site').style.height = iHoogte + 'px';

Hiermee een beetje gaan klooien.

| Life is a game (and games are fun) | homepage |

donderdag 20 november 2003 21:01

Acties:

MAZZA

Barbie is er weer!

HTML:

#site {
  position:absolute;
  left:50%;
  margin-left: -350px;
  width: 700px;
  background-color: #FFF7D7;
  top: 50%;
}

Dat aligned hem iig in het midden...

[ Voor 8% gewijzigd door MAZZA op 20-11-2003 21:02 ]

donderdag 20 november 2003 21:03

Acties:

Clay

cookie erbij?

margin:auto voor de gecentreerde div is genoeg, hij hoeft ook niet absolute. gewoon normaal met een width, height:100%, en margin:auto.

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

donderdag 20 november 2003 21:04

Acties:

saviour

MAZZA, dat werkt bij mij niet in Mozilla 1.5 (ik was er toevallig net mee bezig).

margin-left: auto;
margin-right: auto;

Werkt wel juist bij mij, maar ik geloof weer niet onder IE 5.5 of lager

edit:
Clay was me voor, met iets minder code

[ Voor 13% gewijzigd door saviour op 20-11-2003 21:05 ]

donderdag 20 november 2003 21:05

Acties:

dream0r

Topicstarter

Clay schreef op 20 november 2003 @ 21:03:
margin:auto voor de gecentreerde div is genoeg, hij hoeft ook niet absolute. gewoon normaal met een width, height:100%, en margin:auto.

Als ik die position niet absolute meegeef dan is de height niet 100% meer, en jouw stukje code werkt niet.

saviour schreef op 20 november 2003 @ 21:04:
MAZZA, dat werkt bij mij niet in Mozilla 1.5 (ik was er toevallig net mee bezig).

margin-left: auto;
margin-right: auto;

Werkt wel juist bij mij, maar ik geloof weer niet onder IE 5.5 of lager

edit:
Clay was me voor, met iets minder code

Dank je, het schijnt te werken nu

code:

html
{
    height: 100%;
}

body
{
    text-align: center;
    margin: 0; 
    padding: 0; 
    background-color: #C2D4A2;
    height: 100%;
}

* { 
    text-align:left; 
}


#site
{
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    width: 700px;
    background-color: #FFF7D7;  
}

[ Voor 53% gewijzigd door dream0r op 21-11-2003 15:14 ]

donderdag 20 november 2003 21:08

Acties:

Clay

cookie erbij?

het is de combinatie van margin:auto; en text-align:center. Samen werkt dat Voor IE5 tot en met 6 in quirk en in strict mode.

[edit]

Je hebt nu wel een <?xml?> en doctype, maar IE zit nu alsnog in quirksmode, omdat ie de doctype als eerste in html wil. nu heb je dus die text-align:center nodig. terwijl die wel zou werken met alleen die margin:auto; als je die <?xml?> weghaalt.

[ Voor 55% gewijzigd door Clay op 20-11-2003 21:11 ]

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

donderdag 20 november 2003 21:09

Acties:

MAZZA

Barbie is er weer!

Clay schreef op 20 november 2003 @ 21:08:
het is de combinatie van margin:auto; en text-align:center. Samen werkt dat Voor IE5 tot en met 6 in quirk en in strict mode.

Ah ik zie het ja

Stuk makkelijker idd..

donderdag 20 november 2003 21:44

Acties:

Verwijderd

Okay, een tijd geleden heb ik een site-je gemaakt voor een spel wat ik overdreven veel speel. Hun eigen site is www.camelotherald.com, en mijn re-design staat op www.mobdb.com/daoc/site/ - dit is geen sitecheck, dus ik hoef echt niet te weten hoe mooi of hoe lelijk je het vind.. maar ik heb wel een vraag

Die boxjes die je ziet, zijn nu gemaakt in tabellen. Zoals je kunt zien heb ik 4 hoeken (logisch) en tussen die hoeken een rand, opgevuld met een background image. In het midden heb ik gewoon een background kleur opgegeven.

Mijn boek over "layers instead of tables" is onderweg, maar zou iemand me kunnen vertellen HOE ik nu zo'n box voorelkaar krijg met layers?

Let er op dat ik die boxjes als aparte ASP subprocedures wil wegschrijven, zodat ik niet constant opnieuw een nieuwe CSS moet aanmaken ofzoiets.. goede reusable code dus.

Iemand een idee?

edit:
ik wil dus gewoon de site XHTML1.0 strict maken, met goede CSS erachter, echt een modelsite, omdat ik die originele site zat ben

[ Voor 9% gewijzigd door Verwijderd op 20-11-2003 21:45 ]

donderdag 20 november 2003 22:22

Acties:

Clay

cookie erbij?

als die boxen vaste breedte hebben kan dat met een background, en 2 images voor boven en onder. als de hoekjes los moeten kan je hier ff kijken, die lossen het vrij geniaal op:
http://www.vertexwerks.com/tests/sidebox/

dat is ook echt _te_ toevallig dat ik die net vandaag vond.

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

donderdag 20 november 2003 22:30

Acties:

Verwijderd

Clay schreef op 20 november 2003 @ 22:22:
als die boxen vaste breedte hebben kan dat met een background, en 2 images voor boven en onder. als de hoekjes los moeten kan je hier ff kijken, die lossen het vrij geniaal op:
http://www.vertexwerks.com/tests/sidebox/

dat is ook echt _te_ toevallig dat ik die net vandaag vond.

De bedoeling is inderdaad dat die table gewoon resizable is, dus zowel in de breedte als in de hoogte. Wat ze op die site doen bevalt me eigenlijk niet.. het is wel slim enzo, maar.. het moet toch ook anders (lees: beter, mooier) kunnen dan dat?

Ik ben al zover (met mijn hoekjes gedoe) dat in ieder geval de bovenkant er goed in zit (resizable and all), nu de onderkant nog eventjes en de twee zijkanten. Ik hoop dat het me lukt

edit

Ik zie ook dat die methode tekort schiet als je transparante hoeken gebruikt. Zoals het nu is, onderlapt (nieuw woord?

) de image rechtsonder de image rechtsboven, bijvoorbeeld. Dus als ik een achtergrond foto/image heb in mijn site, zal daar iets niet mooi zijn

[ Voor 15% gewijzigd door Verwijderd op 20-11-2003 23:04 ]

vrijdag 21 november 2003 13:18

Acties:

Verwijderd

Clay, had jij toevallig nog ideeën? I'm running out

vrijdag 21 november 2003 13:22

Acties:

Verwijderd

body {

text-align:center;

}
div {
height: 100%;
}
margin-bottom: 0px;
margin-top: 0px;
paddin-top:0px;
paggin-bottom:0px;

what;s the problem?

vrijdag 21 november 2003 15:13

Acties:

dream0r

Topicstarter

Verwijderd schreef op 21 november 2003 @ 13:22:
body {

text-align:center;

}
div {
height: 100%;
}
margin-bottom: 0px;
margin-top: 0px;
paddin-top:0px;
paggin-bottom:0px;

what;s the problem?

Zoals ik al heb aangegeven, ik heb de oplossing al gevonden die een paar posts hierboven genoemd is. Verder klopt jouw code niet want "paggin-bottom" bestaat niet.

[ Voor 3% gewijzigd door dream0r op 21-11-2003 15:14 ]

vrijdag 21 november 2003 16:29

Acties:

Clay

cookie erbij?

Verwijderd schreef op 21 november 2003 @ 13:18:
Clay, had jij toevallig nog ideeën? I'm running out

naja als je 4 hoeken hebt heb je 4 elementen nodig om backgrounds in alle hoeken te positioneren, een andere manier kan ik zo snel niet bedenken als het helemaal scalable meot zijn. Een manier om de hoeken zelf vrij te houden zodat transparante gif's niet over elkaar heen gaan schuiven is dan idd wel errug handig ja

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