Pagina 1 van 1
Website automatisch centreren
Geplaatst: 20 feb 2007, 10:42
door flip0505
Hallo,
ik heb een website gemaakt in dreamweaver maar ik zou willen dat deze automatisch zich centreerd bij het openen van internet explorer. De website is opgebouwd met layers en tabellen. Iemand een idee ???
Geplaatst: 20 feb 2007, 10:50
door meon
In principe doe je dat door rondom je hele layout een <div> te zetten, bijvoorbeeld <div id="container">
en dan via CSS je marges links en rechts op 'auto' zetten:
Geplaatst: 20 feb 2007, 10:56
door ubremoved_983
Ik doe het zo:
( het te centreren gedeelte is 444 x 206 px )
Code: Selecteer alles
CSS:
body {
margin: 0px;
}
#wrapping
{
position: absolute;
top: 50%;
left: 0px;
width: 100%;
}
#center{
margin-left: -222px;
position: absolute;
top: -103px;
left: 50%;
width: 444px;
height: 206px;
}
HTML
<body>
<div id="wrapping">
<div id="center">
<img src="spoon.png" alt="f*** yeah" />
</div>
</div>
</body>
Geplaatst: 20 feb 2007, 11:14
door meon
Ah ja, mijn ding was enkel voor centreren horizontaal, bij ditch komt daar ook vertikaal bij...
Geplaatst: 20 feb 2007, 12:32
door crapiecorn
meon schreef:In principe doe je dat door rondom je hele layout een <div> te zetten, bijvoorbeeld <div id="container">
en dan via CSS je marges links en rechts op 'auto' zetten:
Is toch een kortere manier voor ? margin:0 auto ?
Ik heb gisteren ook nog redelijk mijn hoofd gebroken over vertical alignen, als je 1 parent en 1 child hebt valt het nog mee, maar als je een stuk of 5 geneste dividers hebt is het een heel anders verhaal. Als vertical-align: dezelfde werking had in een div als in een td zou het iedereen een pak werk besparen.
Geplaatst: 20 feb 2007, 12:38
door meon
Ik pik even dit van ditCh z'n blog:

(en nu hopen dat ie z'n anti-hotlink-ding daar niet toepast

)
Dat vat het wel samen

Geplaatst: 20 feb 2007, 12:40
door ubremoved_983
hehe daar staat de anti hotlinking niet aan nee

Geplaatst: 20 feb 2007, 13:50
door crapiecorn
Zo deed ik het vroeger altijd, maar dat is tegenwoordig niet meer zo kosher.
Code: Selecteer alles
<table width="100%" height="100%" align="center">
<tr>
<td align="center" valign="middle">bla</td>
</tr>
</table>
Kon je wel bijna zeker van zijn dat het werkte.
Geplaatst: 20 feb 2007, 13:56
door ubremoved_983
crapiecorn schreef:Zo deed ik het vroeger altijd, maar dat is tegenwoordig niet meer zo kosher.
Tableless !!!!
http://davespicks.com/essays/notables.html
Geplaatst: 20 feb 2007, 14:03
door flt
.
Gewoon ff de content bekeken en daar ontbreekt toch de belangrijkste reden?
Tables zijn voor tabulaire data en niet voor layout 'punt' ?
EDIT: het ergste is dan mensen die trots zijn op het feit dat ze geen tables meer gebruiken maar wel meerdere divs... Met 1 div kom je toe en dan is eventueel om te centreren. De rest kan je doen met p's, h1's, ...
Geplaatst: 20 feb 2007, 14:05
door crapiecorn
Als je zo een pagina maakt kan je beter zorgen dat alles goed weergegeven wordt

Geplaatst: 20 feb 2007, 14:23
door ubremoved_983
Weird ... ( ze is alvast niet door mij gemaakt ) ... maar hier is die pagina valid en wordt die perfect weergegeven ( FF2 & IE7 )
Geplaatst: 20 feb 2007, 14:27
door crapiecorn
Heeft met resolutie te maken, als ik die maximaliseer heb ik ook geen probleem, maar als je die wat verkleint naar een 800 pixels begint het. Zijn dingen waardat je op moet letten

Geplaatst: 20 feb 2007, 14:36
door Kemblin
wat is dat toch met al die anti-table mensen tegenwoordig...

Geplaatst: 20 feb 2007, 14:40
door Fr3aK
crapiecorn schreef:Heeft met resolutie te maken, als ik die maximaliseer heb ik ook geen probleem, maar als je die wat verkleint naar een 800 pixels begint het. Zijn dingen waardat je op moet letten

Het doelpubliek van die website is webdesigners en naar mijn weten zijn er nog maar weinig die aan zo'n lage resolutie werken...
Kemblin schreef:wat is dat toch met al die anti-table mensen tegenwoordig...

Het zijn niet de mensen die tegen table-design zijn maar eerder de standaarden

Geplaatst: 20 feb 2007, 14:54
door ubremoved_539
Fr3aK schreef:Het doelpubliek van die website is webdesigners en naar mijn weten zijn er nog maar weinig die aan zo'n lage resolutie werken...
Flauw uitvlucht wat mij betreft...

Geplaatst: 20 feb 2007, 14:55
door meon
Fr3aK schreef:Het zijn niet de mensen die tegen table-design zijn maar eerder de standaarden

Daar hebt ge het verkeerd; uw zin impliceert dat <table> niet standaard zou zijn, maar daar zeg je iets fundamenteel fout. De échte reden is dat een table-element semantisch niet gebruikt mag worden voor layout.
Het heeft dus niks met standaarden te maken, maar met semantiek

Geplaatst: 20 feb 2007, 16:03
door Fr3aK
r2504 schreef:Flauw uitvlucht wat mij betreft...

Lego is ook niet gemaakt voor de derde leeftijd, als je een website maakt voor webdesigners moet je geen rekening gaan houden met een totaal ander doelpubliek.
meon schreef:Daar hebt ge het verkeerd; uw zin impliceert dat table niet standaard zou zijn, maar daar zeg je iets fundamenteel fout. De échte reden is dat een table-element semantisch niet gebruikt mag worden voor layout.
Het heeft dus niks met standaarden te maken, maar met semantiek

Ik doelde erop dat W3C het gebruik van tables ontmoedigt.
Geplaatst: 20 feb 2007, 16:50
door meon
Fr3aK schreef:Ik doelde erop dat W3C het gebruik van tables ontmoedigt.
Ah? Waar?
Geplaatst: 20 feb 2007, 16:51
door ubremoved_983
meon schreef:Fr3aK schreef:Ik doelde erop dat W3C het gebruik van tables ontmoedigt.
Ah? Waar?
Hier al bv.:
http://www.w3.org/2002/03/csslayout-howto

Geplaatst: 20 feb 2007, 16:53
door meon
Nee, daar worden tabellen ontmoedigd voor layout-doeleinden. Ik bedoel dus: waar wordt het gebruik van tabellen ontmoedigd door het W3C?
Geplaatst: 20 feb 2007, 16:54
door ubremoved_983
meon schreef:
Nee, daar worden tabellen ontmoedigd voor layout-doeleinden. Ik bedoel dus: waar wordt het gebruik van tabellen ontmoedigd door het W3C?
Ik denk wel dat hij bedoelt dat tables ontmoedigd worden voor layout doeleinden ...
Geplaatst: 21 feb 2007, 22:45
door Fr3aK
ditCh schreef:Ik denk wel dat hij bedoelt dat tables ontmoedigd worden voor layout doeleinden ...
True!
Meon, ik ben heus geen leek als het op webdesign aankomt hoor, kheb mij gewoon verkeerd verwoord

Geplaatst: 22 feb 2007, 02:07
door crapiecorn
follow up vraagje : Hoe een object (bv een img) vertikaal centreren in een div als je de hoogte van het object niet op voorhand weet ?
bv je hebt een box van 100px op 100, hier komt een thumbimage in die nooit groter is dan 100x100, voor zover ik het bekeken heb is dit onmogelijk vertikaal te centreren.