• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Div-Container in der Mitte ansiedeln ... Wie?

S

SN-Moderator

Neues Mitglied
Hi Freunde,
ich heute schon zum zweiten Mal ...

Diesmal mit der Frage, wie ich meine Div-Container mittig einbringen kann. Die Website bleibt SmartNews.de - Tech, Specs & More .
Die Struktur des HTML-Codes sieht so aus:

--> Mainpage ( Mainpage hat eine breite von 100%)
--> Header (Breite: 1000px)
--> Banner
--> Bar (SocialBar)
--> Content (Breite: 1000px)
--> Article
--> Gadgets
--> Impressum (Impressum ist auch 100% breit)

Seit ich die Mainpage und das Impressum auf 100 % gestellt habe ist der Impressum-Container zwar breit genug, doch der Rest ist seit dem linksbündig.

Hier mein CSS-Code:
Code: 
body { 	background-image: url("../img/trivia/Background.png");
	background-attachment: none;
	text-align: center;
}


#Mainpage {
	margin: 0 auto;
	width: 100%;
	text-align: center;
}


#Header {
	width: 1000px;
}


#Banner {
	background-image: url("../img/trivia/JellyBeans.png");
	width: 650px;
	height: 150px;
	float: left;




/*	border-radius: 15px;
	-o-border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px; */
}


#Banner h1 {
	font-weight: bold;
	font-size: 50px;
	color: white;
}


#Banner h2 {
	font-weight: bold;
	font-size: 24px;
	color: white;
	
	position: relative;
	bottom: 30px;
}


#Bar {
	float: right;
	width: 340px;
	height: 150px;
	background: yellow;


/*	border-radius: 15px;
	-o-border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px; */
}


#clearen {
  clear: both;
}


#Content {
	width: 1000px;
}


#Articles {
	background: red;
	width: 640px;
	height: 800px;
	float: left;
	margin-top: 10px;
	
/*	border-radius: 15px;
	-o-border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px; */
}


#Gadget01 {
	background: yellow;
	width: 350px;
	height: 200px;
	float: right;
	margin-top: 10px;
}


#Gadget02 {
	background: yellow;
	width: 350px;
	height: 200px;
	float: right;
	margin-top: 10px;
}


#Gadget03 {
	background: yellow;
	width: 350px;
	height: 200px;
	float: right;
	margin-top: 10px;
}


#Impressum {
	width: 100%;
	height: 220px;
	background: grey;
	margin-top: 30px;
	text-align: center;
	
/*	border-radius: 15px;
	-o-border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px; */
}

Wie zentriere ich die restlichen Div-Container ?
 
Ist ja mal cool der Link. Habe mir die Seite sofort als Lesezeichen gespiechert, doch das löst leider noch nicht mein Problem. Meine Seite ist immer noch linksbündig.
 
Ich weiß nicht wieso er da so rummeckert ...
Jeder Browser versteht die Seite perfekt und eure Seite, die ihr mir verlinkt habt, regt sich über ">" auf.

Außerdem geht es hier nicht um die Fehler in meiner Seite, schließlich ist sie noch LANGE nicht fertig, sondern darum, dass meine Seite fälschlicherweise linksbündig ist.

Ich weiß (Blablabla), dass man seinen Code pflegen muss, doch ich eröffne Mittags ein Thema hier, damit ich Hilfe bekomme, und werde mit meinen Fehlern zu bombadiert. Das ist echt SCH**ße, was ihr hier macht.

Tut mir sehr leid, dass ich das nun so sagen musste, aber ich bin heute mit meiner Homepage noch nicht sehr weit gekommen.
Könnte mir jetzt bitte einer von euch erfahreneren Programmierern helfen.
 
Das Analyseergebnis deines HTML-Codes hier
[Invalid] Markup Validation of http://smartnews-blog.bplaced.net/ - W3C Markup Validator
stammt nicht von uns, auch ist es nicht unsere Seite. Es ist vom W3C, der Organisation die die HTML-Regeln entwirft und vorgibt. Und an diese Regeln hat man sich zu halten, wenn man eine saubere Seite erstellen möchte.

Das deine Seite mit diesem leicht fehlerhaften HTML-Code aus deiner Sicht richtig angezeigt wird, heißt nicht, dass es bei anderen auch der Fall ist. Du musst für nach W3C-Regeln validen HTML-Code sorgen, denn sonst passiert genau das was Du nun hast: die Darstellung ist seltsam.

Wenn Du die Angaben vom Validator liest, musst auch auch verstehen was sie bedeuten. Das ">" wird z.B. angemeckert, weil das <img>-Element von dir nicht mit /> geschlossen wurde. Das ist jedoch notwendig, wenn Du (wie von Dir angegeben) XHTML als HTML-Standard verwendest.
Weiter unten sind noch kaufmännische Unds angemeckert. Das liegt daran, dass man in HTML diese Zeichen maskieren muss. Also statt

Code: 
&

muss man

HTML: 
&amp;

schreiben.

Das alles sind aber im Vergleich zu dem letzten Fehler nur "Schönheitsoperationen". Viel gravierender ist nämlich das hier:

end tag for "ul" omitted, but OMITTAG NO was specified
Zum Vergrößern anklicken....

Für dich übersetzt:

End-Tag für ul wurde erwartet, aber nicht gefunden
Zum Vergrößern anklicken....

Heißt: deine <ul>-Liste ist kaputt, weil Du ein </ul> am Ende vergessen hast oder es falsch positioniert hast. Und das könnte durchaus ein Grund für eine Fehldarstellung sein. Das Wort "könnte" deutet bereits an, dass es nicht so sein muss. Aber die Beseitigung dieses Fehlers würde dir (und uns) helfen die danach evtl. noch vorhandene Linksbündigkeit der Seite zu untersuchen.
 
SN-Moderator schrieb:
Ich weiß nicht wieso er da so rummeckert ...

Tut mir sehr leid, dass ich das nun so sagen musste, aber ich bin heute mit meiner Homepage noch nicht sehr weit gekommen.
Könnte mir jetzt bitte einer von euch erfahreneren Programmierern helfen.
Zum Vergrößern anklicken....

Kein Problem. Ist es das, was dir vorschwebt? ;)

65y0iv.png
 
Ja, aber wie hast du das hingekriegt. Allerdings sehe ich auf dem Bild den untersten grauen Impressum-Container nicht, ist der denn auch 100 % Breit. Wenn ja, dann wäre es nett, wenn du mir gleich eine zweite Frage beantworten würdest:

Ich will den Div-Container (Impressum) zwar 100 % breit haben, doch trotzdem kleine Ränder links, recht und unten haben. Also eigentlich doch keine 100 %, aber muss ich das dann einfach nur mit margin machen?
 
Ich habe dazu lediglich im Firebug einige margin:auto hinzugefügt und ein paar floats geändert. Das ist aber noch kein richtiger Fix und würde im IE 7/8 wahrscheinlich nicht funktionieren. Wenn du das Problem lösen willst, musst du - wie bereits erwähnt - erst einmal deinen Code validieren und die Bedeutung von float:left und float:right verstehen. Den Erwerb von Grundlagenkenntnissen kann dir das Forum nicht abnehmen. Suchst du hingegen fertigen Code, steht dafür die Jobbörse zur Verfügung,
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben