Eine Website entsteht... mit Diskussion :)

lauras · 15. März 2010

Zur vertikalen Zentrierung findest du hier was:
http://www.thestyleworks.de/tut-art/centerblock.shtml

Oftmals kann man <body> nicht einfach zentrieren - einfach noch einen div um die kompletten Elemente machen, wenn alles auf einmal positioniert werden soll (damit gruppiert man dann Elemente...)

LG
Laura

noeli-A-res · 16. März 2010

Zitat von "lauras"

...
einfach noch einen div um die kompletten Elemente machen, wenn alles auf einmal positioniert werden soll (damit gruppiert man dann Elemente...)
...

Das war auch meine erste Idee, Laura - nur hatte ich gehofft, es würde auch anders gehen. Danke für den Tipp und den Link ...

Werde jetzt mal mein Glück versuchen mit der Seitenzentrierung und melde mich dann wieder - mit oder ohne Erfolg ...

LG, noeli-A-res

lauras · 16. März 2010

Zitat von "noeli-A-res"

Danke für den Tipp und den Link ...

Werde jetzt mal mein Glück versuchen mit der Seitenzentrierung und melde mich dann wieder - mit oder ohne Erfolg ...

Kein Problem. Ich benutz die Seite häufig, da die Tutorials für mich ziemlich gut sind, die Referenz ist auch immer gut zum Nachschauen

Viel Erfolg

NeoAramis · 16. März 2010

Zitat von "lauras"

Endlich mal jemand der der gleichen Meinung ist wie ich, danke Elroy

Mal im Ernst, warum sollte ein ul, um das kein div ist, das Layout zerschießen, wenn sich beide Tags genau gleich verhalten, falls man es nicht anders einstellt.

Das was hier erzählt wird, ist teilweise großer Quatsch. Vielleicht mal nachdenken oder nachschaun, bevor man hier so unsinnige Behauptungen aufstellt..

Ich habe nie behauptet das diese Methode falsch ist. Mit dieser Methode ist man einfach an sehr einfache Layouts gebunden. Möchte man beispielweise unter der Navigation noch weitere Elemente platzieren, ist man gezwungen einen weiteren Container drumherum zu erstellen. (Beispiel: <a class="postlink" href="http://anver.ch/xhtml">http://anver.ch/xhtml</a>)

Und noch etwas, den letzten Absatz hättest du auch weglassen können. Du als Moderator sowieso...

lauras · 16. März 2010

Zitat von "NeoAramis"

Ich habe nie behauptet das diese Methode falsch ist. Mit dieser Methode ist man einfach an sehr einfache Layouts gebunden. Möchte man beispielweise unter der Navigation noch weitere Elemente platzieren, ist man gezwungen einen weiteren Container drumherum zu erstellen. (Beispiel: <a class="postlink" href="http://anver.ch/xhtml">http://anver.ch/xhtml</a>)

Und noch etwas, den letzten Absatz hättest du auch weglassen können. Du als Moderator sowieso...

Richtig, aber deshalb macht man ja auch erst Inhalt und dann Design

Ich weiß jetzt nicht genau welchen Absatz du meinst und was das mit meinen Tätigkeiten als Moderatorin zu tun hat, aber das gehört hier nicht hin, sowas klärt man bei Bedarf per PN, finde ich.

Gruß
Laura

noeli-A-res · 16. März 2010

Hallo Laura, hallo NeoAramis,

zuerst einmal: Es ist gar nicht so einfach, eine Website zu erstellen "von der Pike auf" quasi. Und jeder hat sicherlich sein eigenes "Konzept" entwickelt, zu einem ansprechenden und funktionalen Ergebnis zu kommen - Standards hin oder her ... viele Wege führen nach Rom, wobei man einige Wege heute sicher nicht mehr gehen sollte. Aber gegen kleine Umwege ist doch sicher nichts einzuwenden.

Mein (hoffentlich nicht zu großer) Anspruch bei der Erstellung dieser Seite ist, eine den heutigen Anforderungen, Maßstäben, Regeln, Erfordernissen ... wie auch immer ... Seite auf die Beine zu stellen und Fehler zu vermeiden bzw. auszuschließen, in der Hoffnung, dass auch andere davon profitieren können. Viel muß ich noch lernen - und nicht zuletzt helfen dabei auch Eure kontroversen Diskussionen!

Dank Euch und liebe Grüße
noeli-A-res

noeli-A-res · 17. März 2010

Also ... ich habe es einmal versucht - hier der Code:

Code

#seitenzentrierung {
    width:800px;
    margin:auto;
    background-color:yellow;  /* nur als Orientierungshilfe */
}




#kopfbereich {
    height:150px;
    background-image:url(grafik/kopf.jpg);
}




h1 {
    color:white;
    font-family:Helvetica,Arial,sans-serif;
    }




#menue {
    height:40px;
    background-color:#006600;
    margin:0;
}




li {
    float:left; /* Menüpunkte nebeneinander anordnen */
    font-family:Helvetica,Arial,sans-serif;
}

Alles anzeigen

Und so schaut es im Browser aus:
[Blockierte Grafik: http://img502.imageshack.us/img502/3216/browservorschau4.jpg]
Also - die Seite ist zentriert und auf 800 px begrenzt, das hat schon mal funktioniert.
Der Kopfbereich schaut auch schon ganz passabel aus - nur der Text müßte noch plaziert werden, da habe ich noch keinen Plan.
Und warum gibt es einen Abstand zwischen Kopf- und Menübereich?

Das erst einmal die ersten Fragen ...
Achso, ist denn der Code ansonsten richtig?

LG, noeli-A-res

starhunter · 17. März 2010

Hallo noeli-A-res,

sieht für den Anfang ganz ordentlich aus.

Zitat

Der Kopfbereich schaut auch schon ganz passabel aus - nur der Text müßte noch plaziert werden, da habe ich noch keinen Plan.

Das geht mit padding und margin z.B

Code

h1
{
  margin-left: 200px;




  /* oder */




  padding-left: 200px;
}

Alles anzeigen

Zitat

Und warum gibt es einen Abstand zwischen Kopf- und Menübereich?

Ist im Standard-Stylesheet des Browsers eingestellt. Am besten ist es alle Abstände erstmal auf Null zu setzen.

Code

*
{
  padding: 0;
  margin: 0;
}

Zitat

Achso, ist denn der Code ansonsten richtig?

So weit ich sehen kann ja, aber frag besser mal den Validator.

Mfg

Starhunter

noeli-A-res · 17. März 2010

Hallo starhunter,

danke für die Tipps.

Zitat von "starhunter"
...
Am besten ist es alle Abstände erstmal auf Null zu setzen.
Code
*
{
  padding: 0;
  margin: 0;
}
...

Das hat prima funktioniert - und so schaut es jetzt im Browser aus:
[Blockierte Grafik: http://img641.imageshack.us/img641/8070/browservorschau5.jpg]

Hier der CSS-Code:

Code

#seitenzentrierung {
    width:800px;
    margin:auto;
    padding:0;
    background-color:yellow;  /* nur als Orientierungshilfe */
}




#kopfbereich {
    height:150px;
    background-image:url(grafik/kopf.jpg);
    margin:0;
    padding:0;
}




h1 {
    color:white;
    font-family:Helvetica,Arial,sans-serif;
    }




#menue {
    height:40px;
    background-color:#006600;
    margin:0;
    padding:0;
}




li {
    float:left; /* Menüpunkte nebeneinander anordnen */
    font-family:Helvetica,Arial,sans-serif;
}

Alles anzeigen

Allerdings das Positionieren der Überschrift klappt nicht ...

LG, noeli-A-res

Elroy · 17. März 2010

Hallo.

Soweit ich das sehen kann ist deine Überschrift richtig positioniert.
Du hast das für deine Überschrift angegeben:

Code

margin:0; 
padding:0;

Stimmt doch soweit oder?

Übrigens dein #kopfbereich und h1 kannst du zusammenfügen das sie beide das gleiche Element ansprechen.

Was mir nicht so gefällt ist die Weite von 800px.
Ich würde eine Weite von 1200px vorschlagen, der leere Rand sieht nicht wirklich gut aus. Die Seite wird auch bei kleineren Viewpoints richtig angezeigt.

Ausserdem hättest du den Tip von starhunter annehmen sollen:

Code

* 
{ 
  padding: 0; 
  margin: 0; 
}

Gruss
Elroy

noeli-A-res · 17. März 2010

Hallo Elroy,

jetzt mal langsam für mich zum mitdenken: Also ich habe in den Kopf- und in den Menü-Bereich jeweils margin und padding mit dem Wert 0 angegeben. Das hat ja dann auch funktioniert.

Allerdings besteht doch der eigentliche "Kopf" aus zwei Teilen - dem sog. "Kopfbereich", wo die Grafik mit 800 x 150 px eingefügt wird, und der Überschrift "h1", die ich positionieren wollte.

Code

#kopfbereich {
    height:150px;
    background-image:url(grafik/kopf.jpg);
    margin:0;
    padding:0;
}




h1 {
    color:white;
    font-family:Helvetica,Arial,sans-serif;
    }

Alles anzeigen

Oder ist das ein Denkfehler? Wie können die Teile denn zusammengefaßt werden? Hm ...

LG, noeli-A-res

lauras · 17. März 2010

Wenn du im #kopfbereich außer der Überschrift und dem Hintergrundbild nichts weiter hast, kannst du das BG-Bild auch h1 zuordnen (ich weiß jetzt nicht, wie das bei dir ist), da h1 selbst als block-Element fungiert.

LG
Laura

noeli-A-res · 17. März 2010

Okay Laura, der Code schaut also jetzt so aus ...

Code

h1 {
    height:150px;
    background-image:url(grafik/kopf.jpg);
    margin:0;
    padding:0;
    color:white;
    font-family:Helvetica,Arial,sans-serif;
    }

... und die Darstellung in der Browseransicht ist in Ordnung - bis auf die Plazierung der eigentlichen Überschrift.
Hier sollte die Überschrift stehen ...
[Blockierte Grafik: http://img143.imageshack.us/img143/4236/berschrift.jpg]

LG, noeli-A-res

lauras · 17. März 2010

Dazu musst du dann wohl wieder mit dem Padding arbeiten (Abstand vom Rahmen zum Text)

Hattest du diese Definition jetzt eingentlich hinzugefügt?

Code

* {
margin: 0;
padding: 0;}

noeli-A-res · 17. März 2010

Aaahhhh...

Hiermit

Code

h1 {
    height:150px;
    background-image:url(grafik/kopf.jpg);
    margin:0;
    padding:0 0 0 350px;
    color:white;
    font-family:Helvetica,Arial,sans-serif;
    }

ist die Überschrift schon mal nach rechts an die richtige Stelle gewandert. Und wie bekomme ich sie jetzt nach unten? Mit "padding:50px 0 0 350px;" schaut es im Browser so aus ...
[Blockierte Grafik: http://img294.imageshack.us/img294/5441/berschrift2.jpg]
Die Überschrift "rutscht" zwar nach unten, aber die Grafik taucht ein zweites Mal auf ... jedenfalls ein Teil davon!!!

LG, noeli-A-res

lauras · 17. März 2010

Schau mal nach in welchen Browsern das der Fall ist. Der IE interpretiert leider tw. das Box-Modell falsch,aber ich weiß nicht mit was du testest.

Elroy · 18. März 2010

Hallo.

Gib deinem backgound mal ein no-repeat das verhindert das sich die Hintergrundgrafik wiederholt.

Ich kann das im Moment allerdings nicht genau testen. Ich werde mich heute abend noch mal melden.

Gruss
Elroy

noeli-A-res · 18. März 2010

Nabend zusammen,

also ich habe jetzt die Styles wie folgt geändert:

Code

#seitenzentrierung {
    width:800px;
    margin:auto;
    padding:0;
    background-color:yellow;  /* nur als Orientierungshilfe */
    }




h1 {
    height:150px;
    background-image:url(grafik/kopf.jpg);
    background-repeat:no-repeat;
    margin:0;
    padding:80px 0 0 350px;
    color:white;
    font-family:Helvetica,Arial,sans-serif;
    }




#menue {
    height:40px;
    background-color:#006600;
    margin:0;
    padding:0;
    }




li {
    float:left; /* Menüpunkte nebeneinander anordnen */
    font-family:Helvetica,Arial,sans-serif;
    }

Alles anzeigen

Die Überschrift im Kopfbereich ist jetzt ungefähr an der richtigen Stelle plaziert und die Grafik wird auch nicht wiederholt - allerdings je tiefer die Überschrift steht, um so größer wird der Abstand zwischen Kopf- und Navigationsbereich ... Ich habe schon hin- und herprobiert, kriege es aber nicht hin *grmpf* Und es schaut im IE genauso aus wie im FF:
[Blockierte Grafik: http://img407.imageshack.us/img407/4417/berschrift3.jpg]

LG, noeli-A-res

starhunter · 18. März 2010

Hallo,

Du hast oben ein padding von 80px und die Grafik scheint 150px hoch zu sein, macht zusammen 230px und so sieht es auch aus.

Mfg

Starhunter

P.S Gibt es irgendwo den ganzen Code zu sehen? Nur mit ein paar Styles ist es schwer sich ein Bild vom ganzen zu machen.

Elroy · 19. März 2010

Hallo.

Du musst Schrift und Hintergrund trennen, im Moment sprichst du mit deiner positionierung sowohl die Schrift als auch den Hintergrund an.

Plaziere den Hintergrund in deiner Seitenzentrierung dann gehts.

Gruss
Elroy

Jetzt mitmachen!

Teilen