Website automatisch centreren

Plaats reactie
flip0505
Starter
Starter
Berichten: 11
Lid geworden op: 08 feb 2007, 09:25

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 ???
Gebruikersavatar
meon
Administrator
Administrator
Berichten: 16609
Lid geworden op: 18 feb 2003, 22:02
Twitter: meon
Locatie: Bree
Uitgedeelde bedankjes: 564 keer
Bedankt: 759 keer
Contacteer:

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:

Code: Selecteer alles

#container {
   margin-left: auto;
   margin-right: auto;
}
ubremoved_983
Elite Poster
Elite Poster
Berichten: 3868
Lid geworden op: 20 maa 2004, 20:10
Uitgedeelde bedankjes: 95 keer
Bedankt: 48 keer

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>

Gebruikersavatar
meon
Administrator
Administrator
Berichten: 16609
Lid geworden op: 18 feb 2003, 22:02
Twitter: meon
Locatie: Bree
Uitgedeelde bedankjes: 564 keer
Bedankt: 759 keer
Contacteer:

Ah ja, mijn ding was enkel voor centreren horizontaal, bij ditch komt daar ook vertikaal bij...
crapiecorn
Elite Poster
Elite Poster
Berichten: 2149
Lid geworden op: 01 feb 2003, 11:58
Uitgedeelde bedankjes: 44 keer
Bedankt: 12 keer

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:

Code: Selecteer alles

#container {
   margin-left: auto;
   margin-right: auto;
}


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.
Gebruikersavatar
meon
Administrator
Administrator
Berichten: 16609
Lid geworden op: 18 feb 2003, 22:02
Twitter: meon
Locatie: Bree
Uitgedeelde bedankjes: 564 keer
Bedankt: 759 keer
Contacteer:

Ik pik even dit van ditCh z'n blog:
Afbeelding(en nu hopen dat ie z'n anti-hotlink-ding daar niet toepast :p)
Dat vat het wel samen :)
ubremoved_983
Elite Poster
Elite Poster
Berichten: 3868
Lid geworden op: 20 maa 2004, 20:10
Uitgedeelde bedankjes: 95 keer
Bedankt: 48 keer

hehe daar staat de anti hotlinking niet aan nee ;)
crapiecorn
Elite Poster
Elite Poster
Berichten: 2149
Lid geworden op: 01 feb 2003, 11:58
Uitgedeelde bedankjes: 44 keer
Bedankt: 12 keer

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.
ubremoved_983
Elite Poster
Elite Poster
Berichten: 3868
Lid geworden op: 20 maa 2004, 20:10
Uitgedeelde bedankjes: 95 keer
Bedankt: 48 keer

crapiecorn schreef:Zo deed ik het vroeger altijd, maar dat is tegenwoordig niet meer zo kosher.


Tableless !!!! :)

http://davespicks.com/essays/notables.html
flt
Elite Poster
Elite Poster
Berichten: 755
Lid geworden op: 08 dec 2005, 17:10
Bedankt: 3 keer

ditCh schreef:
crapiecorn schreef:Zo deed ik het vroeger altijd, maar dat is tegenwoordig niet meer zo kosher.


Tableless !!!! :)

http://davespicks.com/essays/notables.html
.

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, ...
Laatst gewijzigd door flt 20 feb 2007, 14:09, in totaal 1 gewijzigd.
crapiecorn
Elite Poster
Elite Poster
Berichten: 2149
Lid geworden op: 01 feb 2003, 11:58
Uitgedeelde bedankjes: 44 keer
Bedankt: 12 keer

ditCh schreef:
crapiecorn schreef:Zo deed ik het vroeger altijd, maar dat is tegenwoordig niet meer zo kosher.


Tableless !!!! :)

http://davespicks.com/essays/notables.html

Als je zo een pagina maakt kan je beter zorgen dat alles goed weergegeven wordt :-)
Bijlagen
bla.png
(39.27 KiB) 2343 keer gedownload
ubremoved_983
Elite Poster
Elite Poster
Berichten: 3868
Lid geworden op: 20 maa 2004, 20:10
Uitgedeelde bedankjes: 95 keer
Bedankt: 48 keer

Weird ... ( ze is alvast niet door mij gemaakt ) ... maar hier is die pagina valid en wordt die perfect weergegeven ( FF2 & IE7 )
crapiecorn
Elite Poster
Elite Poster
Berichten: 2149
Lid geworden op: 01 feb 2003, 11:58
Uitgedeelde bedankjes: 44 keer
Bedankt: 12 keer

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 :p
Gebruikersavatar
Kemblin
Pro Member
Pro Member
Berichten: 411
Lid geworden op: 18 okt 2003, 16:47
Locatie: Schoten (Antwerpen)
Bedankt: 2 keer

wat is dat toch met al die anti-table mensen tegenwoordig... :p
Fr3aK
Member
Member
Berichten: 72
Lid geworden op: 03 nov 2003, 19:09
Locatie: Rumst

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 :p

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

Het zijn niet de mensen die tegen table-design zijn maar eerder de standaarden ;)
ubremoved_539
Deel van't meubilair
Deel van't meubilair
Berichten: 29849
Lid geworden op: 28 okt 2003, 09:17
Uitgedeelde bedankjes: 446 keer
Bedankt: 1985 keer

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... :roll:
Gebruikersavatar
meon
Administrator
Administrator
Berichten: 16609
Lid geworden op: 18 feb 2003, 22:02
Twitter: meon
Locatie: Bree
Uitgedeelde bedankjes: 564 keer
Bedankt: 759 keer
Contacteer:

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 ;)
Fr3aK
Member
Member
Berichten: 72
Lid geworden op: 03 nov 2003, 19:09
Locatie: Rumst

r2504 schreef:Flauw uitvlucht wat mij betreft... :roll:

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.
Gebruikersavatar
meon
Administrator
Administrator
Berichten: 16609
Lid geworden op: 18 feb 2003, 22:02
Twitter: meon
Locatie: Bree
Uitgedeelde bedankjes: 564 keer
Bedankt: 759 keer
Contacteer:

Fr3aK schreef:Ik doelde erop dat W3C het gebruik van tables ontmoedigt.
Ah? Waar?
ubremoved_983
Elite Poster
Elite Poster
Berichten: 3868
Lid geworden op: 20 maa 2004, 20:10
Uitgedeelde bedankjes: 95 keer
Bedankt: 48 keer

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

;)
Gebruikersavatar
meon
Administrator
Administrator
Berichten: 16609
Lid geworden op: 18 feb 2003, 22:02
Twitter: meon
Locatie: Bree
Uitgedeelde bedankjes: 564 keer
Bedankt: 759 keer
Contacteer:

ditCh schreef:
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

;)

Nee, daar worden tabellen ontmoedigd voor layout-doeleinden. Ik bedoel dus: waar wordt het gebruik van tabellen ontmoedigd door het W3C?
ubremoved_983
Elite Poster
Elite Poster
Berichten: 3868
Lid geworden op: 20 maa 2004, 20:10
Uitgedeelde bedankjes: 95 keer
Bedankt: 48 keer

meon schreef:
ditCh schreef:
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

;)

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 ...
Fr3aK
Member
Member
Berichten: 72
Lid geworden op: 03 nov 2003, 19:09
Locatie: Rumst

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 :)
crapiecorn
Elite Poster
Elite Poster
Berichten: 2149
Lid geworden op: 01 feb 2003, 11:58
Uitgedeelde bedankjes: 44 keer
Bedankt: 12 keer

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

Terug naar “Development”