website horizontaal centreren

herbanus · 7 apr 2009

Ik heb een website gemaakt zonder 'table' en zonder frames! Onder sommige resoluties van het beeldscherm is mijn website niet gecentreerd, hoe kan ik dit gemakkelijk doen. Ik werk momenteel met left:..px etc omdat ik ook werk met links in mijn afbeelding waarbij er een handje komt zodat je kan doorklikken (weet niet juist hoe dit noemt)
kan iemand mij helpen om te centreren. Mijn website: www.depilsjaars.be
alvast héél dikke merci

ErikBooy007 · 7 apr 2009

Hoezo geen frames?

PHP:

<frameset rows="0,*" cols="*" frameborder="NO" border="0" framespacing="0">
  <frame src="bovenbalk.htm" name="topFrame" scrolling="NO" noresize >
  <frameset rows="*" cols="0,*" framespacing="0" frameborder="NO" border="0">
    <frame src="zijbalk.htm" name="leftFrame" scrolling="NO" noresize>

  <frame src="home.htm" name="mainFrame">

  </frameset>
</frameset>

Maar als je een div wilt centreren, kun je het volgende doen:

PHP:

// HTML
<div id="watdanook"></div>

// CSS
#watdanook{
  margin: auto;
}

Mocht het float-property van belang zijn, dan kun je vaak beter:

PHP:

// CSS
#watdanook{
  position: absolute;
  left: 50%;
  margin-left: -200px;
}

waarbij je voor -200px een min (-) + de helft van de breedte van je div moet invullen.

Wat dit doet, het zet de div de helft van de breedte van het parent-element naar rechts. Dan staat de linkerrand van je div dus in het midden van je parent. Daarom moet je hem nog de helft van de breedte naar links verplaatsen.

NB als dit niet precies doet wat het moet doen (ik heb het al een tijdje niet meer gebruikt), dan kun je proberen om de values van left en margin-left eens om te wisselen.

herbanus · 7 apr 2009

Okéé ik heb dus wel frames

was het efkes vergeten. Ben nog maar een beginner
Heel het boeltje zou met die code dus moeten worden gecentreerd?
Waar zet ik dit dan precies in bv. de code van het homeblad:

body {

background-attachment: fixed;
background-image: url(pics/achtergrond.jpg);
background-repeat: no-repeat;
background-position: center center;
}

-->
</style></head>

<div style="position:absolute; visibility:visible; left:230px; top:10px; width:81px; height:29px; z-index:9"><img src="pics/bovenbalk.jpg" width="860" height="150" STYLE="border: solid 2px #0000FF;"></div>

<body onLoad="MM_preloadImage('nieuws.jpg','depilsjaars.jpg','media.jpg','playlist.jpg','history.jpg','kalender.jpg','gastenboek.jpg','contact.jpg','links.jpg')">
<div id="Layer1" style="position:absolute; visibility:visible; left:230px; top:177px; width:150px; height:70px; z-index:1"><a href="nieuws.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/nieuws.jpg" name="nieuws" width="170" height="45" border="0"></a></div>
<div id="Layer2" style="position:absolute; visibility:visible; left:230px; top:232px; width:89px; height:33px; z-index:2"><a href="depilsjaars.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/depilsjaars.jpg" name="biografie" width="170" height="45" border="0"></a></div>
<div id="Layer3" style="position:absolute; visibility:visible; left:230px; top:288px; width:99px; height:34px; z-index:3"><a href="media.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/media.jpg" name="bandleden" width="170" height="45" border="0"></a></div>
<div id="Layer4" style="position:absolute; visibility:visible; left:230px; top:343px; width:77px; height:31px; z-index:4"><a href="playlist.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/playlist.jpg"name="clubcafé" width="170" height="45" border="0"></a></div>
<div id="Layer5" style="position:absolute; visibility:visible; left:230px; top:398px; width:68px; height:30px; z-index:5"><a href="history.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/history.jpg" name="Image10" width="170" height="45" border="0"></a></div>
<div id="Layer6" style="position:absolute; visibility:visible; left:230px; top:453px; width:10px; height:25px; z-index:6"><a href="kalender.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/kalender.jpg" name="media" width="170" height="45" border="0"></a></div>
<div id="Layer7" style="position:absolute; visibility:visible; left:230px; top:508px; width:67px; height:32px; z-index:7"><a href="gastenboek.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/gastenboek.jpg" name="repertoire" width="170" height="45" border="0"></a></div>
<div id="Layer8" style="position:absolute; visibility:visible; left:230px; top:563px; width:77px; height:31px; z-index:8"><a href="contact.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/contact.jpg"name="events" width="170" height="45" border="0"></a></div>
<div id="Layer9" style="position:absolute; visibility:visible; left:230px; top:620px; width:81px; height:29px; z-index:9"><a href="magazine.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/magazine.jpg" name="magazine" width="170" height="45" border="0"></a></div>

<div style="position:absolute; visibility:visible; left:420px; top:176px; width:81px; height:29px; z-index:9"><img src="pics/home.jpg" width="670" height="484" STYLE="border: solid 2px #0000FF;"></div>

</body>

</html>

ErikBooy007 · 7 apr 2009

Ik heb niet eerder met frames gewerkt, dus dat zou ik niet weten.

Als dat de code is van een pagina in je frame, dan zou je met css alleen de inhoud in dat frame kunnen centreren, niet in de viewport van de browser.

herbanus · 7 apr 2009

Okéé ik ga het eens proberen, bedankt voor de hulp alvast:thumb:

herbanus · 7 apr 2009

Heb nog eens rondgezocht op het internet en heb er nu dit van gemaakt, maar hij centreert nog steeds niet. Wat zou er mis zijn aan de code?

<style type="text/css">

</style></head>

<div id="container">

<div style="position:absolute; visibility:visible; left:230px; top:10px; width:81px; height:29px; z-index:9"><img src="pics/bovenbalk.jpg" width="860" height="150" STYLE="border: solid 2px #0000FF;"></div>

<body onLoad="MM_preloadImages('nieuws.jpg','depilsjaars.jpg','media.jpg','playlist.jpg','history.jpg','kalender.jpg','gastenboek.jpg','contact.jpg','links.jpg')">

<div id="Layer1" style="position:absolute; visibility:visible; left:230px; top:177px; width:150px; height:70px; z-index:1"><a href="nieuws.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/nieuws.jpg" name="nieuws" width="170" height="45" border="0"></a></div>
<div id="Layer2" style="position:absolute; visibility:visible; left:230px; top:232px; width:89px; height:33px; z-index:2"><a href="depilsjaars.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/depilsjaars.jpg" name="biografie" width="170" height="45" border="0"></a></div>
<div id="Layer3" style="position:absolute; visibility:visible; left:230px; top:288px; width:99px; height:34px; z-index:3"><a href="media.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/media.jpg" name="bandleden" width="170" height="45" border="0"></a></div>
<div id="Layer4" style="position:absolute; visibility:visible; left:230px; top:343px; width:77px; height:31px; z-index:4"><a href="playlist.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/playlist.jpg"name="clubcafé" width="170" height="45" border="0"></a></div>
<div id="Layer5" style="position:absolute; visibility:visible; left:230px; top:398px; width:68px; height:30px; z-index:5"><a href="history.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/history.jpg" name="Image10" width="170" height="45" border="0"></a></div>
<div id="Layer6" style="position:absolute; visibility:visible; left:230px; top:453px; width:10px; height:25px; z-index:6"><a href="kalender.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/kalender.jpg" name="media" width="170" height="45" border="0"></a></div>
<div id="Layer7" style="position:absolute; visibility:visible; left:230px; top:508px; width:67px; height:32px; z-index:7"><a href="gastenboek.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/gastenboek.jpg" name="repertoire" width="170" height="45" border="0"></a></div>
<div id="Layer8" style="position:absolute; visibility:visible; left:230px; top:563px; width:77px; height:31px; z-index:8"><a href="contact.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/contact.jpg"name="events" width="170" height="45" border="0"></a></div>
<div id="Layer9" style="position:absolute; visibility:visible; left:230px; top:620px; width:81px; height:29px; z-index:9"><a href="magazine.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/magazine.jpg" name="magazine" width="170" height="45" border="0"></a></div>

<div style="position:absolute; visibility:visible; left:420px; top:176px; width:81px; height:29px; z-index:9"><img src="pics/home.jpg" width="670" height="484" STYLE="border: solid 2px #0000FF;"></div>

</div>
</body>

</html>

ErikBooy007 · 7 apr 2009

Ik vond dit op een ander forum:

Hoe ik het altijd doe:

Rename je index.html naar index2.html, en maak een 'empty.html' aan met daarin alleen een body background="FFFFFF"

Maak dan een nieuwe index.html en paste daarin dit:

<html>

<head>

<title>Jouw titel</title>

</head>

<frameset cols="*,450,*" border=0 frameSpacing=0>
<frame src="empty.html" name="empty" noresize scrolling="no" frameborder=no marginHeight=0 marginWidth=0 topmargin="0" leftmargin="0">
<frame src="index2.html" name="index" noresize scrolling="no" frameborder=no marginHeight=0 marginWidth=0 topmargin="0" leftmargin="0">
<frame src="empty.html" name="empty" noresize scrolling="no" frameborder=no marginHeight=0 marginWidth=0 topmargin="0" leftmargin="0">
</frameset>

</html>

Zo zet je frames binnen frames...
Je moet zelf even weten hoe breed je je site wilt hebben, hierboven wordt ie 450 pixels breed... (zie frameset cols)

Laat maar even weten of het werkt

Greetz Bas

Bron: http://www.flashfiles.nl/forum/topic.asp?topic_id=41138

herbanus · 7 apr 2009

met het aanmaken van nieuwe index etc lukt het niet,

heb nu die code in css en dat schijnt te lukken, alleen staat mijn site nu helemaal langs onder rechts. Nuja ik zoek wat verder, dan vindt ik het misschien

herbanus · 7 apr 2009

body {
background-attachment: fixed;
background-image: url(pics/achtergrond.jpg);
background-repeat: no-repeat;
background-position: center center;
text-align: center;}

#container {

position: absolute;
left: 50%;
top: 50%;
height: 400px;
width: 700px;
margin-top: -200px;
margin-left: -350px;
}

-->
</style></head>

Johantrax · 8 apr 2009

#container {
width: 800px;
margin: 0 auto;
}

werkt perfect.. alleen moet je wel correcte html schrijven. Alle inhoud komt binnen de body-tags, een div-element daarbuiten KAN NIET!

pas je html dus even aan zodat je iets in deze zin krijgt:

HTML:

<DOCTYPE ....[afhankelijk van je htmlversie]>
<html>
<head>
[hetzelfde van wat er nu instaat]
</head>

<body>
<div id="container">
[al de rest van je pagina]
</div>
</body>
</html>

ErikBooy007 · 8 apr 2009

Die oplossing had ik ook gegeven, maar werkt het ook met een frameset?

M.a.w. mag je een frameset in een div plaatsen?

Johantrax · 8 apr 2009

Neen, je mag geen frameset in een div plaatsen, zelfs niet in een body (framset en body werken exclusive op elkaar).

Als je de site even goed bekijkt, merk je dat de frameset die daar staat bijna nutteloos is. Het bovenste en linkerframe hebben respectievelijk een hoogte van 0 en een breedte van 0, en zijn dus 'onzichtbaar'. Tevens zijn de pagina's die in deze frames moeten ingeladen worden niet aanwezig op de server.
Wat je ziet is dus enkel home.htm, en als je die apart opent, zie je dat deze ook 'verschoven' is.
De gegeven html/css-combinatie moet dus ook in home.htm toegepast worden.

herbanus · 8 apr 2009

dus als ik het goed versta, zou het moeten lukken.

idd de zijbalk en hoofdbalk zitten iedere keer in mijn aparte htm documentjes in gewerkt in
de body. er staan ook geen div buiten de body tags.

ik moet dus in ieder html bestandje (uitgenomen mijn index) deze css html combinatie maken en dan zou het moeten lukken?

herbanus · 8 apr 2009

Het lukt me echt niet, ik heb nu volgende code voor mijn home.htm volgens alle forums op internet zou het moeten lukken, maar bij mij niet echt natuurlijk

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>De Pilsjaars Coverband</title>
<style type="text/css">

</style></head>
<body>

<div id="container">

<div style="position:absolute; visibility:visible; left:230px; top:10px; width:81px; height:29px; z-index:9"><img src="pics/bovenbalk.jpg" width="860" height="150" STYLE="border: solid 2px #0000FF;"></div>

<div style="position:absolute; visibility:visible; left:230px; top:177px; width:150px; height:70px; "><a href="nieuws.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/nieuws.jpg" name="nieuws" width="170" height="45" border="0"></a></div>
<div style="position:absolute; visibility:visible; left:230px; top:232px; width:89px; height:33px; "><a href="depilsjaars.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/depilsjaars.jpg" name="biografie" width="170" height="45" border="0"></a></div>
<div style="position:absolute; visibility:visible; left:230px; top:288px; width:99px; height:34px; "><a href="media.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/media.jpg" name="bandleden" width="170" height="45" border="0"></a></div>
<div style="position:absolute; visibility:visible; left:230px; top:343px; width:77px; height:31px; "><a href="playlist.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/playlist.jpg"name="clubcafé" width="170" height="45" border="0"></a></div>
<div style="position:absolute; visibility:visible; left:230px; top:398px; width:68px; height:30px; "><a href="history.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/history.jpg" name="history" width="170" height="45" border="0"></a></div>
<div style="position:absolute; visibility:visible; left:230px; top:453px; width:10px; height:25px; "><a href="kalender.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/kalender.jpg" name="media" width="170" height="45" border="0"></a></div>
<div style="position:absolute; visibility:visible; left:230px; top:508px; width:67px; height:32px; "><a href="gastenboek.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/gastenboek.jpg" name="repertoire" width="170" height="45" border="0"></a></div>
<div style="position:absolute; visibility:visible; left:230px; top:563px; width:77px; height:31px; "><a href="contact.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/contact.jpg"name="events" width="170" height="45" border="0"></a></div>
<div style="position:absolute; visibility:visible; left:230px; top:620px; width:81px; height:29px; "><a href="magazine.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/magazine.jpg" name="magazine" width="170" height="45" border="0"></a></div>

<div style="position:absolute; visibility:visible; left:420px; top:176px; width:81px; height:29px; z-index:9"><img src="pics/home.jpg" width="670" height="484" STYLE="border: solid 2px #0000FF;"></div>

</div>
</body>

</html>

Johantrax · 8 apr 2009

aha.. er zit inderdaad nog een 'probleem' in je centreren.
Alle divisions (op container na), maken gebruik van position: absolute; waardoor ze niet meer in de normale flow van je pagina zitten. En de opgegeven positie voor al je divisions (behalve de container) is 230px van de linkerrand af, wat aangegeven wordt door left: 230px;
Als je overal deze position:absolute; en left:230px; weghaalt zullen we al iets dichter bij de oplossing komen, maar hoogst waarschijnlijk nog niet helemaal..

herbanus · 8 apr 2009

ja heb dat allemaal gedaan, maar het staat nu wel een beetje allemaal door elkaar en niet echt in het midden

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>De Pilsjaars Coverband</title>
<style type="text/css">

</style></head>
<body>

<div id="container">

<div style=" visibility:visible; top:10px; width:81px; height:29px; "><img src="pics/bovenbalk.jpg" width="860" height="150" STYLE="border: solid 2px #0000FF;"></div>

<div style=" visibility:visible; top:177px; width:150px; height:70px; "><a href="nieuws.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/nieuws.jpg" name="nieuws" width="170" height="45" border="0"></a></div>
<div style=" visibility:visible; top:232px; width:89px; height:33px; "><a href="depilsjaars.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/depilsjaars.jpg" name="depilsjaars" width="170" height="45" border="0"></a></div>
<div style=" visibility:visible; top:288px; width:99px; height:34px; "><a href="media.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/media.jpg" name="media" width="170" height="45" border="0"></a></div>
<div style=" visibility:visible; top:343px; width:77px; height:31px; "><a href="playlist.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/playlist.jpg"name="playlist" width="170" height="45" border="0"></a></div>
<div style=" visibility:visible; top:398px; width:68px; height:30px; "><a href="history.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/history.jpg" name="history" width="170" height="45" border="0"></a></div>
<div style=" visibility:visible; top:453px; width:10px; height:25px; "><a href="kalender.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/kalender.jpg" name="kalender" width="170" height="45" border="0"></a></div>
<div style=" visibility:visible; top:508px; width:67px; height:32px; "><a href="gastenboek.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/gastenboek.jpg" name="gastenboek" width="170" height="45" border="0"></a></div>
<div style=" visibility:visible; top:563px; width:77px; height:31px; "><a href="contact.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/contact.jpg"name="contact" width="170" height="45" border="0"></a></div>
<div style=" visibility:visible; top:620px; width:81px; height:29px; "><a href="magazine.htm" onMouseOut="MM_swapImgRestore()"><img src="pics/magazine.jpg" name="magazine" width="170" height="45" border="0"></a></div>

<div style=" visibility:visible; top:176px; width:81px; height:29px; "><img src="pics/home.jpg" width="670" height="484" STYLE="border: solid 2px #0000FF;"></div>

</div>
</body>

</html>

herbanus · 9 apr 2009

mijn probleem is opgelost, heb gewerkt met tabellen en niet met css

website horizontaal centreren

herbanus

Gebruiker

ErikBooy007

Terugkerende gebruiker

herbanus

Gebruiker

ErikBooy007

Terugkerende gebruiker

herbanus

Gebruiker

herbanus

Gebruiker

ErikBooy007

Terugkerende gebruiker

herbanus

Gebruiker

herbanus

Gebruiker

Johantrax

Terugkerende gebruiker

ErikBooy007

Terugkerende gebruiker

Johantrax

Terugkerende gebruiker

herbanus

Gebruiker

herbanus

Gebruiker

Johantrax

Terugkerende gebruiker

herbanus

Gebruiker

herbanus

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy