Hele site centreren

Status
Niet open voor verdere reacties.
W

wim 73

Gebruiker
Lid geworden
28 mrt 2009
Berichten
24
Goedeavond,

Ik heb deze site gemaakt, maar zit met een probleempje waar ik echt niet uitkom.
http://www.cinderellastaarten.nl
De site staat nl in zijn geheel links van het scherm, en ik wil deze graag naar het midden hebben.
Nu heb ik de container al op relative gezet, en de verschillende divs ook, maar dan gaat wel de container naar het midden, maar de rest van de site blijft staan...
wat doe ik verkeerd, zou iemand mij dit kunnen vertellen?

:confused:
 
Hoi Wim,
Ai! Ik zie dat Dreamweaver je verleid heeft om overal #apDiv's van te maken. Foei DW!!! - Dat is makkelijk arrangeren op de ontwerp-pagina, en dan lijkt alles goed te gaan, maar ...
  • Een #apDiv is een <div> met een AP = een Absolute Positie.
  • Een {position:absolute} betekent: neergezet met een vast aantal pixels (horizontaal en verticaal) gerekend vanaf de linkerbovenhoek van de pagina.
  • Maar bij een andere resolutie moet het aantal pixels vanaf de linkerkant anders worden om de site te blijven centreren.
  • Dus het gaat alleen goed op de resolutie waarop je de pagina ontworpen hebt,
    en het kan bij AP's gewoon nooit lukken om een site bij elke resolutie gecentreerd te hebben. :confused:
Wat er moet gebeuren:
  • De hele pagina opnieuw opbouwen ... maar dan met andere css en zonder absolute posities van de onderdelen.
  • Linkerkolom, middenkolom en rechterkolom kan je bv. maken met behulp van "floats" = drijvende elementen, die je tegen elkaar aan kunt laten drijven.
  • Het makkelijkst is om de pagina een vaste breedte te geven, bv. 990px.
  • Daarna is het centreren heel eenvoudig door die vaste breedte te koppelen aan de <body>, en daarbij op te geven dat de linker- en rechtermarge "auto"(matisch) moet zijn.
    Code: 
    body { 
    width: 990px; 
    margin: 0 auto; 
    ... 
    }
  • Nu wordt de naast de pagina-breedte overblijvende ruimte automatisch eerlijk verdeeld tussen links en rechts:
    en de pagina staat bij elke resolutie altijd gecentreerd, omdat alle andere elementen binnen de <body> zitten. :)
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Dank je wel voor je antwoord, maar is dit de enige manier?
Want in principe zou dit betekenen dat ik de gehele site opnieuw moet gaan make, klopt dit...
 
dit de enige manier?
Klik om te vergroten...
Ja, niet echt een vrolijk bericht: ik ben bang van wel...
Maar ik denk dat er een pleister op de wonde is:
  • Als ik het zo bekijk hebben alle <div>'s een eigen ID (#apDiv1, #apDiv2, #container, #header, enz.).
  • Als alle pagina's dezelfde ID's hebben voor dezelfde onderdelen, hoeven de pagina's zelf niet aangepast te worden.
  • Dan hoeft er alleen een algemeen stylesheet met nieuwe css te komen (in plaats van de styles in de <head> van de pagina's).
Waarbij door de vingers gezien wordt dat een element met een id="apDiv1" in de nieuwe css helemaal geen apDiv is, maar een gewone relatieve div. ;)
 
Laatst bewerkt:
Website centreren

Morgen CSS-Hunter,
ik zit met het zelfde probleem. (http://www.fkersten.nl) Ook voor mij geldt het dat ik mijn hele site overnieuw moet maken. Zonde van al dat werk. Ik heb mijn site met behulp van Peter Kasselaar (boek) gemaakt. Moet nu maar uitzoeken hoe ik het alleen in div. kan maken. Mocht ik tegen problemen aanlopen, mag ik hier om hulp komen vragen? Dank bij voorbaat.
Groet, Frans Kersten. :evil::o
 
centreren

Heb ik geprobeerd, maar geen resultaat. Ben bang dat toch alles overnieuw moet. Bdw, dank voor reactie
groet,Frans K.
 
Ik heb even snel hier lokaal de website iets aangepast in mijn scherm om te testen.

Als je in je code kijkt

zet je onder <body> het volgende:

<div id="container" style="position: relative;">
en helemaal onderaan de pagina net boven de regel </body> zet je
</div>

Dit is niet de netste code omdat style="" blabla erin staat dat los ik liever op in een css bestand, maar de code van de website is toch al redelijk verpest door dreamweaver en dit is dan de snelste en makkelijkste oplossing.

In Firefox centreert hij hem netjes heb andere browsers niet getest.

Ik hoop dat je hier iets aan hebt!
 
Hoi Frans,
Ben bang dat toch alles overnieuw moet.
Klik om te vergroten...
Klopt helemaal: ook elementen met absolute positionering binnen een tabel blijven hun absolute positie houden.
Maar niet bang zijn! ;)
Met het wippen van de AP's uit het stylesheet kom je gelukkig al een heel eind.
Wat overblijft, is dat het menu nog niet lekker draait: gaat wel goed in Internet Explorer (IE7 getest), maar niet goed in de browsers Firefox, Chrome, Opera en Safari:

frans-menu-ff.png

Met een beetje rommelen in de css valt dat ook op te lossen.
En tenslotte moet de html nog even nagelopen worden (er zitten wat dubbele dingen in, de teller zit in de <head> i.p.v. in de <body>, en nog wat dingsigheidjes).

Maar dan heb je als plaatsvervangende css:
En je hebt een pagina die gecentreerd staat in alle browsers bij alle resoluties, en die ook het menu toonbaar toont in alle browsers (en ook valid html is):
:)
Met vriendelijke groet,
CSShunter
_____________
PS: Mooie foto's: geduldwerk!
Bv. deze:
frans-foto-vb.png
Dat verzin je toch niet!

[edit]Ah, kruispost met grumbkow. Zelfs van Dreamweaver-persterijtjes valt met css wat te maken. :D[/edit]
 
Laatst bewerkt:
Fk2 zei:
Morgen CSS-Hunter,
ik zit met het zelfde probleem. (http://www.fkersten.nl) Ook voor mij geldt het dat ik mijn hele site overnieuw moet maken. Zonde van al dat werk. Ik heb mijn site met behulp van Peter Kasselaar (boek) gemaakt. Moet nu maar uitzoeken hoe ik het alleen in div. kan maken. Mocht ik tegen problemen aanlopen, mag ik hier om hulp komen vragen? Dank bij voorbaat.
Groet, Frans Kersten. :evil::o
Klik om te vergroten...


Ook jou probleem is op deze manier op te lossen.
Nogmaals heel netjes is het niet, maar het staat in het midden.

Maak je code als volgt.

Zoek op <body> en zet hier de volgende regel onder
<div style="position: relative; width: 1150px; margin: 0 auto;" id="container">
dit wordt dan
<body>
<div style="position: relative; width: 1150px; margin: 0 auto;" id="container">

Zet net boven </body>(helemaal onderaan) een </div>

Dit wordt dan
</body>
</div>

Nu zou de website gecentreerd moeten zijn.

en net boven </body>
 
Website centreren

Onvoorstelbaar maar het is gelukt.:d Weet niet hoe ik jullie allen moet bedanken. Een pilsje zou hier eigenlijk wel op zijn plaats zijn. Virtueel dan maar.
Groet en nogmaals dank, Frans
 
Fk2 zei:
Onvoorstelbaar maar het is gelukt.:d Weet niet hoe ik jullie allen moet bedanken. Een pilsje zou hier eigenlijk wel op zijn plaats zijn. Virtueel dan maar.
Groet en nogmaals dank, Frans
Klik om te vergroten...

Fijn dat het is gelukt!
 
Nieuwe Dreamweaversite alleen in DIV

Hoi Grumkow,
ik ben zoals je ziet ook in de val van DW gevlogen door alles in APdiv te maken. Bovendien heb ik ook gemerkt dat er (door onkunde) dubbelle dingen in voorkomen die ik er maar niet uitkrijg. Graag zou ik nu een hele nieuwe site willen opbouwen maar dan alleen in DIV. In één keer ook over een goede site beschikken zoals jullie die hebben. ( gebrek aan IT is mijn grootste handicap). Zou ik van jou en de andere moderators wat hulp en aanwijzingen kunnen krijgen om dit te realiseren? Mijn dank hiervoor zal dan zo lang als een reis om de wereld zijn. Zie reactie met volverwachting tegemoet.
Groet, Frans
 
Fk2 zei:
Hoi Grumkow,
ik ben zoals je ziet ook in de val van DW gevlogen door alles in APdiv te maken. Bovendien heb ik ook gemerkt dat er (door onkunde) dubbelle dingen in voorkomen die ik er maar niet uitkrijg. Graag zou ik nu een hele nieuwe site willen opbouwen maar dan alleen in DIV. In één keer ook over een goede site beschikken zoals jullie die hebben. ( gebrek aan IT is mijn grootste handicap). Zou ik van jou en de andere moderators wat hulp en aanwijzingen kunnen krijgen om dit te realiseren? Mijn dank hiervoor zal dan zo lang als een reis om de wereld zijn. Zie reactie met volverwachting tegemoet.
Groet, Frans
Klik om te vergroten...

Ik zal je een PM Sturen met daarin mijn emailadres.
Deze kan je toevoegen op msn of mij daarop mailen en dan zal ik je met de HTML en CSS code proberen te helpen etc :)

p.s. Ik mag geen PM's versturen dus je kan mailen op info@jebble.nl
Deze komt bij mijn prive mail binnen en dan zal ik je vanaf daar verder helpen.
 
Dreamweaver

Hoi Grumbkow, je bent een kanjer.
Dank en groet, Frans
 
Hoi Frans,
Graag zou ik nu een hele nieuwe site willen opbouwen maar dan alleen in DIV. In één keer ook over een goede site beschikken
Klik om te vergroten...
Als je mijn voorbeeld-html en bijbehorend css-bestand uit reactie #9 gebruikt (downloaden en inplakken/aanlinken in Dreamweaver), heb je al het raamwerk om een alleen uit div's opgebouwde site te krijgen. :) *)
  • De (meeste) galerie-pagina's zijn al klaar, daar hoeft niets aan te gebeuren.
  • De andere pagina's zijn in wezen hetzelfde als het voorbeeld; die hoef je alleen maar vol te laten lopen met teksten en illustraties.
  • Daarvoor kan misschien wat aanvullende css nodig zijn, maar dat zal niet zo veel zijn.
Ik denk dat de klus wel te overzien is!

Met vriendelijke groet,
CSShunter
___________
*) Kijk maar in de broncode:
HTML: 
<body class="MenuBarItemSubmenuHover">
...
teller-script-spul
...
<div id="Menu">
	<ul id="MenuBar1" class="MenuBarHorizontal">
		<li><a href="index.html" title="Home">Home</a></li>
		<li><a href="gastenboek.html">Gastenboek</a></li>

		<li><a class="MenuBarItemSubmenu" href="#">Galleries</a>
			<ul>
				<li><a class="MenuBarItemSubmenu" href="#">Vogels</a>
					<ul>
						<li><a href="Watervogels/index.html">Watervogels</a></li>
						<li><a href="Zangvogels/index.html">Zangvogels</a></li>
						<li><a href="Roofvogels/index.html">Roofvogels</a></li>
					</ul>
				</li>
				<li><a href="Edelherten/index.html">Edelherten</a></li>
				<li><a href="#" class="MenuBarItemSubmenu">Natuur</a>
					<ul>
						<li><a href="Bloemen/index.html">Bloemen</a></li>
						<li><a href="paddenstoelen.html">Paddenstoelen</a></li>
						<li><a href="Landschappen/index.html">Landschappen</a></li>
						<li><a href="straatfotografie.html">Straatfotografie</a></li>
					</ul>
				</li>
				<li><a href="Zoogdieren/index.html">Zoogdieren</a></li>
			</ul>
		</li>

		<li><a href="links.html">Links</a></li>
		<li><a href="biografie.html">Biografie</a></li>
		<li><a href="weblog.html">Weblog</a></li>
		<li><a href="contact.html">Contact</a></li>
	</ul>
</div>

<div id="Header">
	<img src="foto's/nieuwe header.jpg" width="450" height="50" alt="header" />
</div>

<div id="Inhoud"><!-- InstanceBeginEditable name="inhoud" -->
	<img 
		src="foto's/ap2.jpg" width="300" height="279" alt="foto aap1" /><img 
		src="foto's/ap1.jpg" width="300" height="233" alt="foto aap2" /><img 
		src="foto's/ap3.jpg" width="300" height="275" alt="foto aap3" />
	
	<p><a target="_blank" href="http://ranglijst.natuur-wereld.be/">
		<img src="http://ranglijst.natuur-wereld.be/button.php?u=Fk2" 
		alt="Natuur en wereld Toplijst" /></a>
		<a target="_blank" href="http://www.topsiteguide.net/top.asp?site=FOTOBLOGSLIJST">
		<img src="http://www.topsiteguide.com/reg.asp?site=FOTOBLOGSLIJST&amp;account=217296&amp;ban=E"
		alt="FOTOBLOGSLIJST www.fkersten.nl" width="100" height="24" /></a><br />
		<strong><a target="_blank" href="http://www.topsiteguide.net/top.asp?site=FOTOBLOGSLIJST">FOTOBLOGSLIJST</a></strong>
	</p>
	
	<p>copyright 2011 © franskersten</p>

<!-- InstanceEndEditable -->
</div>

<script type="text/javascript">
	<!--
	var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
	//-->
</script>

</body>
<!-- InstanceEnd -->
</html>
 
Laatst bewerkt:
Nieuwe website

Hoi csshunter, allereerst dank voor reactie. Ik ga het proberen. Laat van mij horen hoe ik gevorderd ben. Groetjes en nogmaals dank, Frans
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan