zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Zentrieren und aneinander reihen (XHTML, CSS)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.03.2008, 14:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.03.2008
Beiträge: 7
blue Dragoon befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.03.2008, 14:30
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Hi,

mach um alles ein div (#wrapper), gib ihm eine feste Breite und zentriere diesen mit:
Code:
#wrapper  {
    width:56em;
    margin: 0 auto;
    }
Gruß
Klaus
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.03.2008, 14:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.03.2008
Beiträge: 7
blue Dragoon befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von hubspe Beitrag anzeigen
Hi,

mach um alles ein div (#wrapper), gib ihm eine feste Breite und zentriere diesen mit:
Code:
#wrapper  {
    width:56em;
    margin: 0 auto;
    }
Gruß
Klaus
sorry aber ich verstehe nicht ganz was du meinst, soll ich um den ganz inhalt ein div erstellen das habe ich doch schon gemacht <div id="index"> meinst du das. Was bedeutet wrapper und wie gebe ich eine feste Breite?

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 15:01 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 03.03.2008, 15:03
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Hi,

Zitat:
Zitat von blue Dragoon Beitrag anzeigen
sorry aber ich verstehe nicht ganz was du meinst, soll ich um den ganz inhalt ein div erstellen das habe ich doch schon gemacht <div id="index"> meinst du das. Was bedeutet wrapper und wie gebe ich eine feste Breite?

thx
Code:
#index  {
    width:56em;
    margin: 0 auto;
    }
so könnte es in deinem Fall aussehen.
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
Mit Zitat antworten
  #5 (permalink)  
Alt 03.03.2008, 16:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.03.2008
Beiträge: 7
blue Dragoon befindet sich auf einem aufstrebenden Ast
Standard

ich kan irgendwie den hintergrund nicht schwarz färben nur das layout also die navi, header usw geht.
Mit Zitat antworten
  #6 (permalink)  
Alt 03.03.2008, 17:50
Benutzerbild von paracelsus
be simple
XHTMLforum-Kenner
 
Registriert seit: 16.07.2007
Ort: Bruck an der Mur - Austria, einige meinen am "Anus Mundi"
Beiträge: 4.786
paracelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nett
Standard

im css:
body{background-color: #000000;}
Mit Zitat antworten
  #7 (permalink)  
Alt 03.03.2008, 18:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.03.2008
Beiträge: 7
blue Dragoon befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von paracelsus Beitrag anzeigen
im css:
body{background-color: #000000;}
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>
Mit Zitat antworten
  #8 (permalink)  
Alt 03.03.2008, 19:09
Benutzerbild von paracelsus
be simple
XHTMLforum-Kenner
 
Registriert seit: 16.07.2007
Ort: Bruck an der Mur - Austria, einige meinen am "Anus Mundi"
Beiträge: 4.786
paracelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nett
Standard

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>
Das rote schmeiss raus, das blaue schreib dazu.

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 &amp; notieren.
Zitat:
The ampersand ("&") is a special character in HTML. It marks the beginning of a entity, like "&nbsp" for a non-breaking space.

In XHTML, a entity must also end with a semicolon (";"). For example "&nbsp;"

Because this is so, any time a literal ampersand appears in a document, it needs to be written as a character entity, "&amp;". Ampersands commonly appear in the query string of a URL, and need to be expressed as an entity there.

Geändert von paracelsus (03.03.2008 um 19:12 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 04.03.2008, 01:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.03.2008
Beiträge: 7
blue Dragoon befindet sich auf einem aufstrebenden Ast
Standard

dane für die hilfe hat geklapt, wen ich noch andere Fragen habe soll ich Sie in diesen Thread posten oder mus ich dan einen neuen erstellen.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 04.03.2008, 09:26
Benutzerbild von paracelsus
be simple
XHTMLforum-Kenner
 
Registriert seit: 16.07.2007
Ort: Bruck an der Mur - Austria, einige meinen am "Anus Mundi"
Beiträge: 4.786
paracelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nett
Standard

Zitat:
Zitat von blue Dragoon Beitrag anzeigen
dane für die hilfe hat geklapt, wen ich noch andere Fragen habe soll ich Sie in diesen Thread posten oder mus ich dan einen neuen erstellen.
Wenn das Problem mit dieser Frage hier zu tun hat - dann hier.
Sonst ist es besser einen neuen Thread zu eröffnen - da viele mit der Suchfunktion arbeiten und die Antworten dann besser finden.

Gruß
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 12:25
Suche Coder mit xhtml und css Kentnissen für einen Auftrag clypse (X)HTML 4 24.03.2008 21:13
Infoposter zu CSS und XHTML kadees Ressourcen 6 03.12.2007 13:58
Tabelle mit CSS zentrieren to.ni CSS 8 27.02.2004 10:33
Probleme mit XHTML und CSS Design un dem IE 5.0/5.5 plubird CSS 1 19.02.2004 21:01


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:51 Uhr.