#1 25. Oktober 2010 Zuletzt von einem Moderator bearbeitet: 14. April 2017 Website immer Mittig Hey Leute, Website sieht bei mir prima aus und alles. Bin jetzt in der Firma und hab hier eben ein Breibildbildschrim. Wie setzte ich jetzt die ganze Website mittig? + Multi-Zitat Zitieren
#2 25. Oktober 2010 AW: Website immer Mittig Schau dir mal das hier an: CSS Layout Generator | CSS Creator Mit diesem CSS Layout Generator kannst du deine Grundstruktur erzeugen. + Multi-Zitat Zitieren
#3 25. Oktober 2010 AW: Website immer Mittig Gib dem Container in dem der Inhalt lieg folgenden CSS Wert: margin: auto; + Multi-Zitat Zitieren
#4 25. Oktober 2010 AW: Website immer Mittig Funktioniert nicht. Ich hab auch schon versucht mit allen Div's auf 50% zu gehen und wenn ich das so sehe passen die 50% gar nicht. Die teile sind überall wo anders, und alle eher auf der rechten seite. + Multi-Zitat Zitieren
#5 25. Oktober 2010 AW: Website immer Mittig Das würde mich nicht wundern, vor allem wenn du das mit einem Margin links gehandhabt hast. Dann fangen die erst bei 50% der Seite an ... Wie das in deinem Bild allerdings funktioniert weiß ich auch nicht - das sieht ja eher linkslastig aus. Gruß, gen + Multi-Zitat Zitieren
#6 25. Oktober 2010 AW: Website immer Mittig Würd euch das weiter helfen wenn ich euch den kompletten Quellcode gebe? + Multi-Zitat Zitieren
#7 25. Oktober 2010 AW: Website immer Mittig Gib zumindest mal das CSS und markier die wichtigen DIV Elemente. Gruß, gen + Multi-Zitat Zitieren
#8 25. Oktober 2010 AW: Website immer Mittig HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Rallystreifen-Hamburg.de</title> <style type="text/css"> <!-- body {background-color:#c4c2c2;} .bg {position:absolute; left:200px; top:50px;} .rally {position:absolute; left:280px; top:100px;} .bynato {position:absolute; left:400px; top:710px; border:0;} .bynato img { border:0px; } .streifen { background-image: url(Images/streifen.jpg); background-repeat: repeat-y; position: absolute; height: 818px; width: 500px; top: 0px; left:530px;} .streifen2 { background-image: url(Images/streifen.jpg); background-repeat: repeat-y; position: absolute; height: 818px; width: 500px; top: 0px; left:640px;} .porsche {position:absolute; left:300px; top:180px;} .mini {position:absolute; left:520px; top:180px;} .mustang {position:absolute; left:740px; top:180px;} .trenn1 {position:absolute; top:160px; left:300px; width:650px;} .trenn2 {position:absolute; top:325px; left:300px; width:650px;} .context {position:absolute; left:300px; top:350px; height:320px; width:645px;} .porsche2 {position:absolute; top:0px; left:445px;} .porsche3 {position:absolute; top:160px; left:0px;} .p1 {text-align:right;} a:link {border::medium;} a:visited {border:medium;} a:hover {border:medium;} a:active {border:medium;} --> </style> </head> <body> <div class="streifen"></div> <div class="streifen2"></div> <div class="rally"> <img src="Images/Rallystreifen-head.png" /></div> <div class="bg"><img src="Images/Background.png" /></div> <div class="trenn1"><hr /></div> <div class="trenn2"><hr /></div> <div class="porsche"> <img src="Images/Porsche.jpg" /></div> <div class="mini"> <img src="Images/Mini.jpg" /></div> <div class="mustang"> <img src="Images/Mustang.jpg" /></div> <div class="bynato"> <a href="http://www.nato-oliv.de"> <img src="Images/bynato.png" /> </a></div> <div class="context"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean<br /> commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus<br /> et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,<br /> ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa<br /> quis enim. Donec pede justo, fringilla vel, aliquet nec,<br /> vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,<br /> venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. <div class="porsche2"><img src="Images/Porsche2.jpg" /></div> <div class="porsche3"><img src="Images/Porsche3.jpg" /></div> <br /> <br /> <p class="p1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean<br /> commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus<br /> et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,<br /> ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa<br /> quis enim. Donec pede justo, fringilla vel, aliquet nec,<br /> vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,<br /> venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p> </div> </body> </html> + Multi-Zitat Zitieren
#9 25. Oktober 2010 AW: Website immer Mittig Naja, so wie ich das verstehe hast du jedes Element einzeln an eine bestimmte Position gesetzt. Das ist nicht nur mühselig sondern auch natürlich nicht flexibel. Pack doch mal alles außer dem Hintergrund in ein div-element und ordne die Elemente darin an statt jedes einzeln zu positionieren. Dann verwende für das div-Element die "margin"-property um es an die richtige Stelle zu setzen (zB margin:0 auto; um es auf 50% horizontal zu bringen und oben keinen Abstand zu lassen ... je nachdem wie du es willst eben). Das sollte dann funktionieren. Falls es dann noch nicht geht kannst du ja nochmal nachfragen. Gruß, gen + Multi-Zitat Zitieren