Eine Website entsteht... mit Diskussion :)

  • "lauras" schrieb:

    ...
    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

  • "noeli-A-res" schrieb:


    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 :)

  • "lauras" schrieb:

    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: <!-- m --><a class="postlink" href="http://anver.ch/xhtml">http://anver.ch/xhtml</a><!-- m -->)


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

  • &quot;NeoAramis&quot; schrieb:

    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: <!-- m --><a class="postlink" href="http://anver.ch/xhtml">http://anver.ch/xhtml</a><!-- m -->)


    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

  • 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

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


    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

  • 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


    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
    1. *
    2. {
    3. padding: 0;
    4. margin: 0;
    5. }


    Zitat

    Achso, ist denn der Code ansonsten richtig?


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


    Mfg


    Starhunter

  • Hallo starhunter,


    danke für die Tipps.


    &quot;starhunter&quot; schrieb:

    ...
    Am besten ist es alle Abstände erstmal auf Null zu setzen.

    Code
    1. *
    2. {
    3. padding: 0;
    4. margin: 0;
    5. }


    ...


    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:


    Allerdings das Positionieren der Überschrift klappt nicht ... :(


    LG, noeli-A-res

  • Hallo.


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


    Code
    1. margin:0;
    2. 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
    1. *
    2. {
    3. padding: 0;
    4. margin: 0;
    5. }


    Gruss
    Elroy

  • 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.


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


    LG, noeli-A-res

  • 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

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


    Hattest du diese Definition jetzt eingentlich hinzugefügt?

    Code
    1. * {
    2. margin: 0;
    3. padding: 0;}
  • Aaahhhh...


    Hiermit

    Code
    1. h1 {
    2. height:150px;
    3. background-image:url(grafik/kopf.jpg);
    4. margin:0;
    5. padding:0 0 0 350px;
    6. color:white;
    7. font-family:Helvetica,Arial,sans-serif;
    8. }

    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

  • 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.

  • 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

  • Nabend zusammen,


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


    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

  • 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.

  • 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