Beiträge von noeli-A-res

Nabend zusammen,

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

#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;
    }

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

Aaahhhh...

Hiermit

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

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

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

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.

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




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

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

LG, noeli-A-res

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:

#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;
}

Allerdings das Positionieren der Überschrift klappt nicht ...

LG, noeli-A-res

Also ... ich habe es einmal versucht - hier der 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;
}

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

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

Danke erst einmal euch beiden! ... und auch Dir, Laura!

Ich sehe schon, das Thema "Strukturieren mit div" ist wohl ein sehr kontroverses. Einfach und logisch erschien es mir anfangs auch, allerdings wenn es nicht notwendig ist (bzw. semantisch falsch, wie Du schreibst), werde ich es auch nicht einsetzen.

Noch einmal zur Erinnerung: Die Struktur der Index-Seite sollte im Großen und Ganzen so erhalten bleiben, wobei den neuen Kopfbereich eine Grafik füllen soll und das Hauptmenü darunter plaziert wird.

Der HTML-Teil der neuen Index-Seite ist jetzt also fertig. Nun geht es ans "Eingemachte" ... und schon bin ich kläglich am Scheitern!

Ich habe versucht, der Seite eine Breite von 800 px zuzuweisen und sie vertikal zu zentrieren - allerdings ohne Erfolg! :oops: Lediglich die Hintergrundfarbe (zu Testzwecken) funktioniert! Wahrscheinlich ist der Code völlig daneben ... :oops: :oops:

body {
    width:800px;
    vertical-align:middle;
    background-color:yellow;
}

Ihr seht, jetzt bekommt Ihr richtig Arbeit ... obwohl ich versucht habe, es alleine hinzubekommen!

Grummel-Grüße, noeli-A-res

Hallo zusammen - und danke für Eure Beiträge.

Also, ich werde mich wohl für eine feste Breite entscheiden - dabei hatte ich 800 px bereits in die engere Wahl gezogen. Mit er Einheit "em" kann ich nicht so recht etwas anfangen. Dazu fehlt mir wahrscheinlich die logische Vorstellungskraft ... :oops: (Gibts dazu vielleicht auch ein anschauliches Beispiel???)

Die einzelnen Bereiche in div-Container zu packen, war auch meine erste Idee - nur habe ich mich dann eines Besseren belehren lassen und die divs teilweise wieder entfernt ("ul" verhält sich wie "div" ...). Das habe ich doch richtig verstanden, oder?

In der Hoffnung, Eure Geduld nicht zu sehr zu strapazieren ...
LG, noeli-A-res

Ein Bild mit der Grundstruktur gibt es schon in dem anderen Thread - wenn Du das meinst:
[Blockierte Grafik: http://img109.imageshack.us/img109/8803/struktur.jpg]

Und hier habe ich versucht, die Struktur mal "zu füllen":
[Blockierte Grafik: http://img130.imageshack.us/img130/6010/aufbau.jpg]

LG, noeli-A-res

Danke für Deine ausführliche und anschauliche Antwort.

Das mit der Angabe der Breite habe ich jetzt verstanden - ich werde also dann auch eine relative Breite in Prozent angeben (... warum 100,01 %?? ...).

Klasse "Anschauungsmaterial" übrigens auch die Seite von Basiii ... dann hoffe ich mal, dass ich es auch so oder ähnlich hinbekomme.

Als nächstes werde ich wohl dann versuchen, die Seite zu strukturieren - sprich die einzelnen Teile an die richtige Position zu bekommen, oder?

LG, noeli-A-res

Hi timtim,

könntest Du mir denn sagen, was für eine feste Seitenbreite spricht - oder anders herum, warum die meisten zu einer variablen Seitenbreite raten würden? - quasi als Entscheidungshilfe für mich ... oder kann ich das auch später noch gefahrlos ändern?

Soooo ...........
Wenn ich Euch richtig verstanden habe, folgt jetzt der CSS-Teil - wobei ich noch immer überrascht bin, wie kurz der HTML-Teil jetzt ist. Im Moment kann ich mir noch immer nicht so recht vorstellen, dass jetzt nur noch CSS zum Zuge kommt ... hm, ich bin gespannt.

Erste Frage an Euch:
Macht es Sinn, eine feste Breite für die Seite festzulegen? Und wenn ja, welche Breite ist sinnvoll bzw. heute gebräuchlich?

Würde das in CSS dann z.B. so ausschauen?

body {
      width:800px;
  }

LG, noeli-A-res

Hallo,
mit Eurer Hilfe steht jetzt der HTML-Teil der Index-Seite. Er schaut wirklich sehr minimalistisch aus!
Hier der Code innerhalb der body-Tags:

<body>




  <!-- Inhalt Kopfbereich -->
  <h1 id="kopfbereich">
    Die MerMax-Seite
  </h1>




  <!-- Inhalt Menü -->
  <ul id="menue">
    <li><a href="mermax.html">Mer &amp; Max</a></li>
    <li><a href="haushof.html">Haus &amp; Hof</a></li>
    <li><a href="waldfeld.html">Wald &amp; Feld</a></li>
    <li><a href="hundwolf.html">Hund &amp; Wolf</a></li>
    <li><a href="reisenevents.html">Reisen &amp; Events</a></li>
  <br />
    <li><a href="impressum.html">Impressum</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
    <li><a href="">G&auml;stebuch</a></li>
    <li><a href="index.html">Start</a></li>
  </ul>




  <!-- Inhalt News -->
  <div id="news">
    <h3>
      N.E.W.S.
    </h3>
      <p>
      Das ist neu hier:
      </p>
  </div>




  <!-- Inhalt Textbereich -->
  <div id="textbereich">
    <h2>
      THEMEN&Uuml;BERSICHT
    </h2>
      <p>
        <a href="mermax.html">Mer &amp; Max</a><br />
        Wer oder was steckt dahinter - Eine kurze Vorstellung
      </p>
      <p>
        <a href="haushof.html">Haus &amp; Hof</a><br />
        Das Zuhause von Mer &amp; Max
      </p>
      <p>
        <a href="waldfeld.html">Wald &amp; Feld</a><br />
        Das unmittelbare Drumherum
      </p>
      <p>
        <a href="hundwolf.html">Hund &amp; Wolf</a><br />
        Ares und Noelia - wilde Hunde oder zahme W&ouml;lfe?
      </p>
      <p>
        <a href="reisenevents.html">Reisen &amp; Events</a><br />
        Wo es uns alle schon einmal hinverschl&auml;gt!
      </p>
  </div>




  <!-- Inhalt Fußbereich -->
  <p id="fussbereich">
    &copy; 2010 by MerMax
    <a href="mailto:mermax@mermax.de">mermax@mermax.de</a>
  </p>




</body>

Und hier die Browservorschau:
[Blockierte Grafik: http://img638.imageshack.us/img638/5544/browservorschau3.jpg]

Nun bin ich mal echt gespannt, wie sich mit Hilfe von CSS die Seite gestalten lässt.

LG, noeli-A-res

Zitat von "timtim"

... Nein, das ohne die <li> ist nicht ok, aber diese punkte können nacher durch das CSS entfernt werden. ...

Zitat von &quot;Elroy&quot;

... 1. Wie schon timtim gesagt hat: Zeichne dein Menü als Liste aus. ...

Okay, ist geändert. Allerdings stehen jetzt die Menüpunkte in der Browseransicht untereinander. Eigentlich sollten Sie nebeneinander stehen ...

<!-- Inhalt Menü -->
  <ul id="menue">
    <li><a href="mermax.html">Mer &amp; Max</a></li>
    <li><a href="haushof.html">Haus &amp; Hof</a></li>
    <li><a href="waldfeld.html">Wald &amp; Feld</a></li>
    <li><a href="hundwolf.html">Hund &amp; Wolf</a></li>
    <li><a href="reisenevents.html">Reisen &amp; Events</a></li>
  <br />
    <li><a href="impressum.html">Impressum</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
    <li><a href="">G&auml;stebuch</a></li>
    <li><a href="index.html">Start</a></li>
  </ul>

Zitat von &quot;Elroy&quot;

... 2. In deinem Untermenü hast du immer noch Text den du nicht ausgezeichnet hast. ...

Diesen Bereich habe ich geändert in "News", da es ja auf der Startseite eigentlich gar kein "Untermenü" gibt. Der Code schaut jetzt so aus. Ich hoffe mal, das ist jetzt richtig so:

<!-- Inhalt News -->
  <div id="news">
    <h3>
      N.E.W.S.
    </h3>
      <p>
      Das ist neu hier:
      </p>
  </div>

Zitat von &quot;Elroy&quot;

... 3. Dein Fussbereich braucht eigentlich kein div ein <p> würde genügen. Falls du das div beibehälst (was semantisch nicht richtig ist) zeichne bitte den Text in deinem Fussbereich aus. ...

Warum braucht der Fußbereich kein div? Sollte der Code so ausschauen?

<!-- Inhalt Fußbereich -->
  <p id="fussbereich">
    &copy; 2010 by MerMax
    <a href="mailto:mermax@mermax.de">mermax@mermax.de</a>
  </p>

Zitat von &quot;Elroy&quot;

... 4. Warum setzt du dein <h3> vor dein <h2>? ...

Ähm - weil ich die Überschrift "Themenübersicht" im eigentlichen Inhaltsbereich für höherwertig halte als die Überschrift "News" - ist das ein Denkfehler?

Danke für Eure Geduld und Hilfe
LG, noeli-A-res

Danke erst einmal für die Tipps.

Den Code habe ich jetzt an zwei Stellen so verändert:

<!-- Inhalt Kopfbereich -->
  <h1 id="kopfbereich">
    Die MerMax-Seite
  </h1>




  <!-- Inhalt Menü -->
  <ul id="menue">
    <a href="mermax.html">Mer &amp; Max</a>
    <a href="haushof.html">Haus &amp; Hof</a>
    <a href="waldfeld.html">Wald &amp; Feld</a>
    <a href="hundwolf.html">Hund &amp; Wolf</a>
    <a href="reisenevents.html">Reisen &amp; Events</a>
  <br />
    <a href="impressum.html">Impressum</a>
    <a href="kontakt.html">Kontakt</a>
    <a href="">G&auml;stebuch</a>
    <a href="index.html">Start</a>
  </ul>

Also - im Kopfbereich das "div" entfernt, das Menü bzw. die Links in eine Liste gepackt, allerdings ohne Aufzählungspunkte. Ich hoffe, das ist okay ...

Ist das eigentlich alles an "HTML"? Der Rest wird über "CSS" erledigt? Hm ...

Als nächsten Schritt habe ich die Bereiche in div-Container gepackt. So schaut der Code jetzt aus (verkürzt):

...
  <body>




  <!-- Inhalt Kopfbereich -->
  <div id="kopfbereich">[/color]
    <h1>
      Die MerMax-Seite
    </h1>
  </div>




  <!-- Inhalt Menü -->
  <div id="menue">
    <a href="mermax.html">Mer &amp; Max</a>
    ...
    <a href="index.html">Start</a>
  </div>




  <!-- Inhalt Untermenü -->
  <div id="untermenue">
    <h3>
      N.E.W.S.
    </h3>
    Das ist neu hier:
  </div>




  <!-- Inhalt Textbereich -->
  <div id="textbereich">
    <h2>
      THEMEN&Uuml;BERSICHT
    </h2>
      <p>
        <a href="mermax.html">Mer &amp; Max</a><br />
        Wer oder was steckt dahinter - Eine kurze Vorstellung
      ...
      <p>
        <a href="reisenevents.html">Reisen &amp; Events</a><br />
        Wo es uns alle schon einmal hinverschl&auml;gt!
      </p>
  </div>




  <!-- Inhalt Fußbereich -->
  <div id="fussbereich">
    &copy; 2010 by MerMax
    <a href="mailto:mermax@mermax.de">mermax@mermax.de</a>
  </div>




</body>

Die Darstellung im Browser-Fenster hat sich dadurch nicht verändert.

Zitat von &quot;timtim&quot;

... Wenn ich nicht weis was ich so schreiben oder proggen soll. Dann schreib ich hier ins forum, und versuch leute zu finden denen man helfen kann.

Ha! Guuuuute Idee!!!

Die allgemeine Lustlosigkeit liegt vielleicht darin begründet, dass es einfach nicht Frühling werden will! Ich bin dieses weisse Zeugs da draussen leid!!!!!! :cry:

Hallo Laura, hallo timtim, hallo an alle!

Zuerst einmal: Eine klasse Idee, dieses Thema zu trennen! So bleibt die eigentliche Entstehung der Seite übersichtlich und meine Fragen kann ich hier an den Mann (oder die Frau) bringen.

Danke Euch beiden für die Unterstützung und Hilfe.

Wenn ich Euch richtig verstanden habe, werde ich also als nächstes die einzelnen Bereiche in die sogenannten "div"-Container packen - auch die Steuerung im oberen Bereich, denn die ist ja im eigentlichen Sinne keine Aufzählung bzw. Liste, oder?