|
|||
Zentrieren und aneinander reihen (XHTML, CSS)
Hi @ all
Habe mich jetzt in XHTML und CSS eingelesen und möchte jetzt ne Page machen und schon ist hier meine erste Hürde. Ich möchte die ganze Homepage Zentriert haben und da ich noch Header, Content und Navi nebeneinander positionieren möchte ist es für mich zu kompliziert zu verstehen wie deswegen brauche ich eure hilfe. Habe hier mal ein schnellese Layout gemacht zur Versändnis: ImageShack - Hosting :: vorlageak5.jpg Hier noch mein Queltext: Code:
<!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" /> <meta name="language" content="de" /> <meta name="robots" content="index,follow" /> <title>Baby-Jen Homepage</title> <!-- CSS Seiten Layout --> <style type="text/css"> body { color:white; background-color:#000000; font-family:arial, helvetica, sans-serif; font-size:75%; line-height:0.5em; } </style> </head> <body> <div id="index"> <div id="header"> <!-- Logo baby-jen.de.vu --> <img src="img/head_7.jpg" alt="baby-jen Logo" width="580" height="275" border="0" /> </div> <div id="inhalt"> <!-- begrüsungstext --> <p>Hope everything is allright</p> <p>I mean cool</p> <p>To tell u a lil bit about me</p> <p>Ive got a rule</p> <p>"U have to gimme an entry"</p> <p>aight</p> <p>So thats all</p> <p>if u wanna know more</p> <p>just gimme a call</p> <p>at my page</p> <hr align="left" width="500" size="1" /> <p class="Stil1">Hier findet ihr reichlich Stoff von selbstgemachten Videos,</p> <p class="Stil1">sowie eigene Tracks & Bilder einfach reinziehen.</p> </div> <div id="navigation"> <!-- Navigation --> <p><a href="index.html" title="Startseite" class="navi-link">Home</a></p> <p><a href="pix.html" title="Bilder" class="navi-link">Pix</a></p> <p><a href="video.html" title="Video" class="navi-link">Video</a></p> <p><a href="music.html" title="Music" class="navi-link">Music</a></p> <p><a href="about-me.html" title="über mich" class="navi-link">About Me</a></p> <p><a href="g-book.html" title="Gäste Buch" class="navi-link">G-Book</a></p> <p><a href="links.html" title="Links" class="navi-link">Links</a></p> </div> <div id="fusszeile"> <!-- Fußzeile --> </div> </div> </body> </html> |
Sponsored Links |
Sponsored Links |
|
|||
Zitat:
thx Edit: habs jetzt doch verstanden was du meinst tausend dank es sieht genauso aus wie ich es wollte. Wie hast du width ausgerechent und das mit margin auto verstehe ich auch nicht ganz. Wie bekomme ich das jetzt hin das die navi rechts vom logo aus erscheint und leicht nach unten versetzt wie auf dem Layout. Geändert von blue Dragoon (03.03.2008 um 16:01 Uhr) |
|
||||
Hi,
Zitat:
Code:
#index { width:56em; margin: 0 auto; } Breite = width, du kannst natürlich die 56em gegen z.B. 800px austauschen. Diese CSS-Anweisung gehört normal in die externe CSS-Datei die im Kopf (<head>) deines Dokuments eingebunden wird. Gruß Klaus
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus |
|
|||
habe ich versucht aber es klappt nicht hier der Quelcode:
Code:
<!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" /> <meta name="language" content="de" /> <meta name="robots" content="index,follow" /> <title>Baby-Jen Homepage</title> <!-- CSS Seiten Layout --> <style type="text/css"> #body { background-color:#000000; color:white; font-family:arial, helvetica, sans-serif; font-size:75%; line-height:0.5em; } #header { width:580px; margin: 0 auto; } #inhalt { width:580px; margin: 0 auto; } #navigation{ width:150px; margin: 0 auto; color:white; background-color:#000000; font-size:75%; line-height:0.5em; } #fusszeile { width:580px; color:white; background-color:#000000; font-size:75%; line-height:0.5em; } </style> </head> <body> body { background-color:black; } <div id="body" bg-color="black"> <div id="header"> <div align="center"> <!-- Logo baby-jen.de.vu --> <img src="Bilder/baby-jen-logo.jpg" alt="baby-jen Logo" title="baby-jen logo" width="580" height="275" border="0" /></div> </div> <div id="inhalt"> <!-- begrüsungstext --> <p>Hope everything is allright</p> <p>I mean cool</p> <p>To tell u a lil bit about me</p> <p>Ive got a rule</p> <p>"U have to gimme an entry"</p> <p>aight</p> <p>So thats all</p> <p>if u wanna know more</p> <p>just gimme a call</p> <p>at my page</p> <hr align="left" width="500" size="1" /> <p class="Stil1">Hier findet ihr reichlich Stoff von selbstgemachten Videos,</p> <p class="Stil1">sowie eigene Tracks & Bilder einfach reinziehen.</p> </div> <div id="navigation"> <!-- Navigation --> <p><a href="index.html" title="Startseite" class="navi-link">Home</a></p> <p><a href="pix.html" title="Bilder" class="navi-link">Pix</a></p> <p><a href="video.html" title="Video" class="navi-link">Video</a></p> <p><a href="music.html" title="Music" class="navi-link">Music</a></p> <p><a href="about-me.html" title="über mich" class="navi-link">About Me</a></p> <p><a href="g-book.html" title="Gäste Buch" class="navi-link">G-Book</a></p> <p><a href="links.html" title="Links" class="navi-link">Links</a></p> </div> <div id="fusszeile"> <!-- Fußzeile --> </div> </div> </body> </html> |
|
||||
eiei
Code:
<!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" /> <meta name="language" content="de" /> <meta name="robots" content="index,follow" /> <title>Baby-Jen Homepage</title> <!-- CSS Seiten Layout --> <style type="text/css"> body {background-color:#000000;} #body { background-color:#000000; color:white; font-family:arial, helvetica, sans-serif; font-size:75%; line-height:0.5em; } #header { width:580px; margin: 0 auto; } #inhalt { width:580px; margin: 0 auto; } #navigation{ width:150px; margin: 0 auto; color:white; background-color:#000000; font-size:75%; line-height:0.5em; } #fusszeile { width:580px; color:white; background-color:#000000; font-size:75%; line-height:0.5em; } </style> </head> <body> body { background-color:black; } <div id="body" bg-color="black"> <div id="header"> <div align="center"> <!-- Logo baby-jen.de.vu --> <img src="Bilder/baby-jen-logo.jpg" alt="baby-jen Logo" title="baby-jen logo" width="580" height="275" border="0" /></div> </div> <div id="inhalt"> <!-- begrüsungstext --> <p>Hope everything is allright</p> <p>I mean cool</p> <p>To tell u a lil bit about me</p> <p>Ive got a rule</p> <p>"U have to gimme an entry"</p> <p>aight</p> <p>So thats all</p> <p>if u wanna know more</p> <p>just gimme a call</p> <p>at my page</p> <hr align="left" width="500" size="1" /> <p class="Stil1">Hier findet ihr reichlich Stoff von selbstgemachten Videos,</p> <p class="Stil1">sowie eigene Tracks & Bilder einfach reinziehen.</p> </div> <div id="navigation"> <!-- Navigation --> <p><a href="index.html" title="Startseite" class="navi-link">Home</a></p> <p><a href="pix.html" title="Bilder" class="navi-link">Pix</a></p> <p><a href="video.html" title="Video" class="navi-link">Video</a></p> <p><a href="music.html" title="Music" class="navi-link">Music</a></p> <p><a href="about-me.html" title="über mich" class="navi-link">About Me</a></p> <p><a href="g-book.html" title="Gäste Buch" class="navi-link">G-Book</a></p> <p><a href="links.html" title="Links" class="navi-link">Links</a></p> </div> <div id="fusszeile"> <!-- Fußzeile --> </div> </div> </body> </html> nenn deinen #body anders, dieser Name ist für ein html Element vorgesehen, geht zwar, aber sollte übersichtlicherweise anders benannt werden, da dieser div ein Bestandteil von body ist. Html Elemente brauchen kein # vor dem Selector (dem namen) CSS Anweisungen müssen im head notiert sein, noch besser in enem externen CSS. Gruß EDIT:// Du verwendest im Quelltext '&' das soltest DU als & notieren. Zitat:
Geändert von paracelsus (03.03.2008 um 20:12 Uhr) |
|
||||
Zitat:
Sonst ist es besser einen neuen Thread zu eröffnen - da viele mit der Suchfunktion arbeiten und die Antworten dann besser finden. Gruß |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Redesign für Steiner Cycling Team | pkipper | Site- und Layoutcheck | 11 | 09.02.2011 13:25 |
Suche Coder mit xhtml und css Kentnissen für einen Auftrag | clypse | (X)HTML | 4 | 24.03.2008 22:13 |
Infoposter zu CSS und XHTML | kadees | Ressourcen | 6 | 03.12.2007 14:58 |
Tabelle mit CSS zentrieren | to.ni | CSS | 8 | 27.02.2004 11:33 |
Probleme mit XHTML und CSS Design un dem IE 5.0/5.5 | plubird | CSS | 1 | 19.02.2004 22:01 |