Website verticaal en horizontaal centreren
Horizontaal centreren lukt me wel.
De oplossing moet browser onafhankelijk zijn.
Als het browserscherm verkleint wordt mag de bovenzijde en linkerzijde van de website niet buiten het beeld komen.
Wie weet hier een oplossing voor , via google is het me nog niet gelukt.
John
Gewijzigd op 01/01/1970 01:00:00 door John zijlstra
height: 100%
Dit is echt simpel je wilt gewoon je site in het scherm laten dat hij altijd het scherm vult tot beneden ;)
Gewoon de 100% doen,
mocht je een header hebben en een content daar onder word de content 100%
Je moet alleen een beetje logisch nadenken :)
mvg
wouter schreef op 29.12.2007 13:42:
Dit is echt simpel je wilt gewoon je site in het scherm laten dat hij altijd het scherm vult tot beneden ;)
Maar das dus schermvullend. En als ie midden op het scherm iets wilt hebben? Dan gaat dat toch niet?
Misschien is dit wat je zoekt.
http://www.dtp-aus.com/tables.htm
<center>
Zet je opmaakcode erin
</center>
dus bijv
<center>
<table border="0" cellpadding="0" cellspacing="0" width="1000" background="webpage_images/header.png">
<tr>
<td valign="middle" align="right" width="301" height="160"></td>
<td valign="middle" align="right" width="524" height="160"></td>
<td valign="middle" align="right" width="125" height="160"></td>
<td valign="middle" align="right" width="50" height="160"></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="1000">
<tr>
<td valign="middle" align="right" width="310" height="25" bgcolor="#00FF66"></td>
<td valign="middle" align="right" width="515" height="25" bgcolor="#990000"></td>
<td valign="middle" align="right" width="175" height="25" bgcolor="#CC6666"></td>
</tr>
</table>
</center>
Gewijzigd op 01/01/1970 01:00:00 door Carel
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<table width="100%" height="100%">
<tr>
<td align="center" valign="center">
hier je tekst
</td>
</tr>
</table>
<tr>
<td align="center" valign="center">
hier je tekst
</td>
</tr>
</table>
Gewijzigd op 01/01/1970 01:00:00 door marc
Deze doet precies wat ik bedooel : http://www.pmob.co.uk/temp/vertical-align6.htm
Ik kan het alleen niet testen in FireFox .
Wie weet of deze ook in FireFox werkt.
Verder is de <center> tag deprecated.
John, jah, hij werkt in Firefox, daarom heb ik hem ook gepost :-).
Alleen in opera doet ie nogal lastig..... Grrr...
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Centered Element</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0}
/* mac hide \*/
html,body{height:100%;width:100%;}
/* end hide */
body {
background-color: #cccccc;
text-align:center;
min-height:468px;/* for good browsers*/
min-width:552px;/* for good browsers*/
}
#outer{
height:100%;
width:100%;
display:table;
vertical-align:middle;
}
#container {
text-align: center;
position:relative;
vertical-align:middle;
display:table-cell;
height: 468px;
}
#inner {
width: 552px;
background:red;
height: 468px;
text-align: center;
margin-left:auto;
margin-right:auto;
border:1px solid #000;
}
</style>
<!--[if IE ]>
<style type="text/css">
#container{top:50%}
#inner{top:-50%;position:relative;}
</style>
<![endif]-->
</head>
<body>
<div id="outer">
<div id="container">
<div id="inner">
<h1>Centered Vertical and Horizontal</h1>
</div>
</div>
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Centered Element</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0}
/* mac hide \*/
html,body{height:100%;width:100%;}
/* end hide */
body {
background-color: #cccccc;
text-align:center;
min-height:468px;/* for good browsers*/
min-width:552px;/* for good browsers*/
}
#outer{
height:100%;
width:100%;
display:table;
vertical-align:middle;
}
#container {
text-align: center;
position:relative;
vertical-align:middle;
display:table-cell;
height: 468px;
}
#inner {
width: 552px;
background:red;
height: 468px;
text-align: center;
margin-left:auto;
margin-right:auto;
border:1px solid #000;
}
</style>
<!--[if IE ]>
<style type="text/css">
#container{top:50%}
#inner{top:-50%;position:relative;}
</style>
<![endif]-->
</head>
<body>
<div id="outer">
<div id="container">
<div id="inner">
<h1>Centered Vertical and Horizontal</h1>
</div>
</div>
</div>
</body>
</html>
print screentje
http://img411.imageshack.us/my.php?image=10139608ph6.jpg
Hou er rekening me bij het maken van websites er een groot verschil is tussen IE7 en Firefox. Firefox accepteert ook foute codes. Beste is als je het in eerste instantie maak voor IE7, maar eigenlijk moet je beide tegelijk coderen. Neem die link die ik je gegeven heb door. Staan goede tips in:
http://www.dtp-aus.com/tables.htm
CSS is beter, maar ook iets lastiger als je het nog nooit gedaan hebt.
Veel succes ermee en Graag gedaan.
Jeej ben ik met je eens alleen, CSS is een beetje lastig als beginner waar table weer betrekkelijk eenvoudig is. Wellicht dat jij een link hebt waar CSS op eenvoudige wijze wordt uitgelegd
Gewijzigd op 01/01/1970 01:00:00 door Carel
sitemasters.be ook en er zijn wel veel meer website die bestaan uit tabellen maar op zich heb je gelijk jeej:p
John
Voorbeeld: een div horizontaal en verticaal centreren
Quote:
Ja dag, jij bent lekker. IE is toch echt de browser die zich niet aan de webstandaards houdt hoor, Firefox doet dat wel!Firefox accepteert ook foute codes. Beste is als je het in eerste instantie maak voor IE7,
Hoewel het met IE7 al een stuk verbeterd is, begin je in eerste instantie altijd met het bouwen van je website in Firefox. Als daarin alles goed is, ga je je code pas aanpassen zodat het in de verschillende versies van IE er ook goed uitziet.
Als je website er in Firefox namelijk goed uitziet, heb je over het algemeen deze zekerheid dat dat ook zo is in Opera, Safari en meeste andere browsers...
Prima oplossing , maar helaas voldoet hij niet aan onderstaande eis:
Als het browserscherm verkleint wordt mag de bovenzijde en linkerzijde van de website niet buiten het beeld komen.
Weet jij daar een oplossing voor ?
John
Gewijzigd op 01/01/1970 01:00:00 door john zijlstra
Ik persoonlijk zou helemaal gek geworden zijn als ik mijn gehele code daarna op 20 verschillende locaties achteraf moet gaan aanpassen vanwege IE7. Als je het ontwerpt voor IE7 doet hij het zeker in Firefox....dat is eigenlijk mijn punt, aangezien firefox idd beter is en makkelijker is voor het maken van een website.
Is firefox beter jah. En idd houden zij zich wel aan internationale standaard en wilt Microsoft kennelijk een eigen standaard hanteren. Maar feit is nog wel dat het merendeel van computergebruikers IE gebruiken. Daar is wel verandering aan het komen in met Firefox die in mijn ogen ook vele malen beter is.
Gewijzigd op 01/01/1970 01:00:00 door Carel
john schreef op 29.12.2007 14:41:
Jan , dat is toevallig ik heb net naar dat voorbeeld van jou gezocht , maar kon het niet meer vinden .
Prima oplossing , maar helaas voldoet hij niet aan onderstaande eis:
Als het browserscherm verkleint wordt mag de bovenzijde en linkerzijde van de website niet buiten het beeld komen.
Weet jij daar een oplossing voor ?
John
Prima oplossing , maar helaas voldoet hij niet aan onderstaande eis:
Als het browserscherm verkleint wordt mag de bovenzijde en linkerzijde van de website niet buiten het beeld komen.
Weet jij daar een oplossing voor ?
John
Je kunt percentages gebruiken ipv pixels. Dus bv 10% ipv 10 100px ofzo