Zur Navigation

DIV-Container zentrieren

1 Stefan Christ (Gast)

Hallo zusammen, ich habe eine neue Site begonnen und habe ein Problem beim Layout. Die Site soll aus 3 Teilen bestehen: Headline, Navigation und Content, wie ich es hier bereits begonnen habe:

http://hacktheplanet.ha.funpic.de/

Das Problem ist nun, dass ich alles gerne horizontal zentrieren würde, ich es aber nicht so einfach hinbekomme.

Ich hatte zunächst um alles noch ein DIV, dieses habe ich dann mit margin:auto zentriert, allerdings wurde mir davon abgreaten.

Hat jemand eine Idee?

MFG
Stefan

30.12.2005 19:27

2 Jörg Kruse

Hallo Stefan,

warum wurde dir zu der Lösung mt margin:auto abgeraten? Dies wäre auch ein Weg, den ich probieren würde. Allerdings müsste man diesen DIV für den unverständigen Internet Explorer zusätzlich noch über ein text-align:center im übergeordneten Element zentrieren. In diesem Thread hatten wir das Thema schon mal ausführlicher behandelt:

<div>-Layer in CSS zentrieren

30.12.2005 19:46 | geändert: 30.12.2005 19:47

3 Stefan Christ (Gast)

Hallo Jörg,

ich habe nun nochmals alles so gebaut, wie es anfangs war, nun befindet sich noch ein DIV-Container um alles andere, dieser ist mit margin:auto zentriert. Da es so funktioniert, werde ich es nun auch so lassen.

Danke für die Antwort!

30.12.2005 19:49

4 schimmi

Hallo Stefan,

beim Aufruf deiner des o. g. Links bekomme ich folgende Meldung statt Content angezeigt:

SELECT navigation.target, en_navigation.text FROM navigation INNER JOIN en_navigation ON en_navigation.id = navigation.id WHERE en_navigation.sprache = 'DE' ORDER BY navigation.sortid ASC LIMIT 0 , 30

Gruß
schimmi

31.12.2005 08:20 | geändert: 31.12.2005 08:22

... 5 Jahre und 8 Monate später ...

5 Kim Eliano Pleiß (Gast)

Hallo ich habe ein ähnliches Problem,
ich soll diese Website zentrieren ich hab nur keinen plan wie
ich habe es mit <center>hier den body</center> probiert funtioniert
aber nicht und mit dem div container kenn ich mich zu wenig aus.
html code:


<HTML>
  <HEAD>
		<title>Hallo</title>
		<META NAME="description" CONTENT="Yachten neue gebrauchte Yachten Yachthandel Gebrauchtyachten gebrauchte Motoryachten neue Segelyachten, Gebrauchtyachten.">
		<META NAME="keywords" CONTENT="Yachten, neue yachten, gebrauchte Yachten, Yachthandel, Gebrauchtyachten, Motoryachten, gebrauchte Motoryachten, Segelyachten, neue Segelyachten, Gebrauchtyachten">
		 
		<style type="text/css">.containerDIV {
	        width:100%;
        }
     
	    .subcontainer {
	        width:25%;
	        padding:5px;
	        border:1px solid red;
	        float:left;
        }

		
		.bild1{
			position:absolute;
			left:50px;
			top:0px;
		}
		
		.bild2{
		    position:absolute;
			left:610px;
			top:0px;
		}
		
		.bild3{
		    position:absolute;
			left:10px;
			top:160px;
		}
		
		.bild4{
		    position:absolute;
			left:670px;
			top:1000px;
		}
		
		.Link1{
		    position:absolute;
			left:700px;
			top:120px;
			font-size:20px;
			font-weight:bold;
		}
		
		.Link2{ 
		    position:absolute;
			left:600px;
			top:120px;
			font-size:20px;
			font-weight:bold;
		}
		
		</STYLE>
   </HEAD>

  <body>
  
		 <img class="bild1" src="./images/apfel_1_web1.jpg" />
	     <img class="bild2" src="./images/apfel_1_web2.jpg" />
	     <img class="bild3" src="./images/apfel_1_web3.jpg" />
	     <img class="bild4" src="./images/apfel_1_web4.jpg" />
		 
	 
	     <div class="Link1"><a href="">zu Kontakt</a></div>
		 <div class="Link2"><a href="">zu Bilder</a></div>
		 
		 </div>
		 
  </body>
</HTML>

30.09.2011 11:12

6 Jörg Kruse

"<center>" ist veraltetes HTML aus dem letzten Jahrtausend. Der von mir in Beitrag 2 verlinkte Thread von Anfang 2005 ist allerdings auch nicht mehr der neueste Stand - heute reicht es, ein div mit margin:auto und einer Breitenangabe zu zentrieren

<div style="width:800px; margin:auto">Zentrierter Inhalt</div>

Allerdings sollte hierbei ein strictes Doctype verwendet werden. Eine Doctype-Angabe fehlt bei dir völlig. Siehe hierzu auch:

http://de.selfhtml.org/html/allgemein/grundgeruest.htm

Ich würde HTML-Tags übrigens grundsätzlich kleinschreiben, also <html> statt <HTML>, zumindest Groß- und Kleinschreibung nicht mischen, wie das bei dir der Fall ist!

Zurück zur Zentrierung:

Diese wird grundsätzlich nicht funktionieren, wenn du die Seitenelemente absolut positionierst:

        .bild1{
            position:absolute;
            left:50px;
            top:0px;
        }

Dadurch richtest du sie nicht an einem übergeordneten (zentrierten) Conainer aus, sondern an den Anzeigebereich des Browsers - sie lösen sich damit gewissermaßen aus dem Eltern-Container

30.09.2011 11:43 | geändert: 30.09.2011 11:44

7 Kim Eliano Pleiß (Gast)

gilt das : <div style="width:800px; margin:auto">

auch für die bilder weil ich muss ja die ganze seite zentrieren oder muss ich die bilder in div einbetten?

30.09.2011 11:59

8 Kim Eliano Pleiß (Gast)

was müsste ich den bei position hinschreiben oder soll ich das weglassen

30.09.2011 12:03

9 Kim Eliano Pleiß (Gast)

ok ich hab meinen html text geändert

jetzt ist die Webseite zwar in der mitte aber 1 bild und die beiden links sind verrutscht

html code:

<html>
  <head>
		<title>Hallo</title>
		<META NAME="description" CONTENT="Yachten neue gebrauchte Yachten Yachthandel Gebrauchtyachten gebrauchte Motoryachten neue Segelyachten, Gebrauchtyachten.">
		<META NAME="keywords" CONTENT="Yachten, neue yachten, gebrauchte Yachten, Yachthandel, Gebrauchtyachten, Motoryachten, gebrauchte Motoryachten, Segelyachten, neue Segelyachten, Gebrauchtyachten">
		 
		<style type="text/css">
		
		.bild1{
			left:50px;
			top:0px;
		}
		
		.bild2{
			left:610px;
			top:0px;
		}
		
		.bild3{
			left:10px;
			top:160px;
		}
		
		.bild4{
			left:670px;
			top:1000px;
		}
		
		.Link1{
			left:700px;
			top:120px;
			font-size:20px;
			font-weight:bold;
		}
		
		.Link2{ 
			left:600px;
			top:120px;
			font-size:20px;
			font-weight:bold;
		}
		
		</style>
   </head>

  <body>
  
         <div style="width:800px; margin:auto">
  
		 <img class="bild1" src="./images/apfel_1_web1.jpg" />
	     <img class="bild2" src="./images/apfel_1_web2.jpg" />
	     <img class="bild3" src="./images/apfel_1_web3.jpg" />
	     <img class="bild4" src="./images/apfel_1_web4.jpg" />
		 
	 
	     <div class="Link1"><a href="">zu Kontakt</a></div>
		 <div class="Link2"><a href="">zu Bilder</a></div>
		 
		 </div>
		 
  </body>
</html>

30.09.2011 12:08

10 Kim Eliano Pleiß (Gast)

Erstmal danke ich habe das mal so geregelt das ich die wieder per hand ausgerichtet habe.

html code jetzt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
		<title>Hallo</title>
		<META NAME="description" CONTENT="Yachten neue gebrauchte Yachten Yachthandel Gebrauchtyachten gebrauchte Motoryachten neue Segelyachten, Gebrauchtyachten.">
		<META NAME="keywords" CONTENT="Yachten, neue yachten, gebrauchte Yachten, Yachthandel, Gebrauchtyachten, Motoryachten, gebrauchte Motoryachten, Segelyachten, neue Segelyachten, Gebrauchtyachten">
		 
		<style type="text/css">
		
		.bild1{
			left:50px;
			top:0px;
		}
		
		.bild2{
			left:610px;
			top:0px;
		}
		
		.bild3{
			left:10px;
			top:160px;
		}
		
		.bild4{
		    position:absolute;
			left:1200px;
			top:950px;
		}
		
		.Link1{
		    position:absolute;
			left:1200px;
			top:100px;
			font-size:20px;
			font-weight:bold;
		}
		
		.Link2{ 
		    position:absolute;
			left:1100px;
			top:100px;
			font-size:20px;
			font-weight:bold;
		}
		
		</style>
   </head>

  <body>
  
         <div style=" width:800px; margin:auto">
  
		 <img class="bild1" src="./images/apfel_1_web1.jpg" />
	     <img class="bild2" src="./images/apfel_1_web2.jpg" />
	     <img class="bild3" src="./images/apfel_1_web3.jpg" />
	     <img class="bild4" src="./images/apfel_1_web4.jpg" />
		 
	     </div>
	 
	     <div class="Link1"><a href="file:///C:/Users/User/Desktop/Homepage%20Test/Kotakt.html">zu Kontakt</a></div>
		 <div class="Link2"><a href="file:///C:/Users/User/Desktop/Homepage%20Test/Bilder.html">zu Bilder</a></div>
		 
		 
		 
  </body>
</html>

30.09.2011 12:30