CSS Homepage Layout

[pineapplefreak]

Hallo alle zusammen. Ich habe vor meine Homepage ein bisschen zu gestalten.
Hier mal das grobe Layout:

http://www.imagebanana.com/view/eadbbztp/Homepage.png

Ja, ich weiß, es erinnert an den CB Look. Aber das ist nicht gewollt, die Farbkombination passt einfach sehr gut.

Jetzt meine Frage:
Ich saß jetzt ein bisschen an CSS und hab nichts verstanden. Tutorials finde ich hier eher sinnfrei, da ich die Sprache weder richtig lernen will, und 2. finde ich in den Tuts immer irgendwie unpassende Sachen, die ich gar nicht brauche. Jetzt meine Frage:
Kann mir da wer helfen? Es dürfte ja nicht allzu viel sein. Vielleicht hat ja einer eine Idee, wie ich diese Seite hinbekomme

 

[Boedefeld]

Ja, ich weiß, es erinnert an den CB Look. Aber das ist nicht gewollt, die Farbkombination passt einfach sehr gut.

YMMD

Tipps kann ich dir jetzt keine geben.
Denn das beste, was du machen kannst ist: Rumprobieren und dabei die "Sprache" zu lernen.
Wenn du HTML kannst, dann ist CSS für kleinere Sachen (wie dein Layout) das kleinste Übel, das schafft man mit ein bisschen Aufwand sehr schnell.

Schau dir dazu am besten mal www.css4you.de an.

Gruß

 

[Kausalat]

Hast du denn überhaupt HTML-Kenntnisse? Wie dem auch sei, um eigens eine Website den eigenen Wünschen anzupassen, brauchst du beide Auszeichungssprachen — oder eine entsprechend fertige Designvorlage.

 

[ZenTao]

Kann auch sehr hilfreich sein: http://www.ohne-css.gehts-gar.net/

 

[JustGee]

http://jendryschik.de/wsdev/einfuehrung/

Dort gibt es weiter unter "Die Kochbar":

Vielleicht hilft dir dieser Teil schon mal etwas am verstehen und für weitere Fragen kannst du dort ja auch nachlesen.

Das finde ich für Einsteiger recht nett und gut beschrieben.

 

[Tumbleweed]

Wenn du das nicht lernen willst, dann solltest du ein CMS verwenden und ein passendes Template suchen/modifizieren/erstellen. Andernfalls wirst du vermutlich die Lust auf deine Homepage verlieren, bevor überhaupt das grundlegende Layout geschrieben ist. Das Layout ist übrigens ziemlich 08/15, das findest du im Netz mit fertigem Code. Aber wie gesagt, ich rate in deinem Fall eher zu einem CMS.

 

[pineapplefreak]

Ich weiß, dass es sehr schlicht ist, ist ja auch eher eine kleine Übungsseite, um einfach mal zu testen, wie mir das so liegt.

Ich hab HTML Kenntnisse... mehr oder weniger zumindest

Hat jemand von euch eine Idee wie ich das machen könnte? Ich hab einfach keine Idee zum Grundaufbau. Soll es eine große Tabelle mit 1. Spalte, 3 Zeilen und sehr dickem Rand werden? Oder wie sonst könnte ich diese "Boxen" erstellen? Hat jemand eine Bezeichnung dafür?

 

[Tumbleweed]

Tabellen verwendet man nicht für Layouts. Du verwendest stattdessen divs oder besser die neuen entsprechenden HTML 5 Tags.

 

[Tion1392]

Naja, bei den html5 tags sollte man immer mit bedenken, dass noch viele mit älteren Browsern fahren, die das noch nicht so wirklich unterstützden. ich würde nen Design mit divs machen.

 

[Daaron]

Die modernen Tags wie <aside>, <article> und <section> sind abwärtskompatibel. Gib ihnen ein "display:block" mit, schon verhalten sie sich auch bei uralten Holzbrowsern korrekt. Selbst die neuen Input-Types sind abwärtskompatibel. Da kommt n Fallback auf type="text".

 

[pineapplefreak]

Die HTML Tags sind jetzt aber kein CSS? Oder wie soll ich das verstehen?

 

[Kausalat]

Nein, HTML ist nicht CSS . Die HTML-Tags lassen sich aber per CSS mit Styles versehen.

 

[T. Smith]

Die modernen Tags wie <aside>, <article> und <section> sind abwärtskompatibel. Gib ihnen ein "display:block" mit, schon verhalten sie sich auch bei uralten Holzbrowsern korrekt. Selbst die neuen Input-Types sind abwärtskompatibel. Da kommt n Fallback auf type="text".

Stimmt leider nicht, der IE hat bis einschließlich Version 8 massive Probleme mit unbekannten Elementen und produziert einen kaputten Dokumentbaum.

 

[Daaron]

konnte ich bisher nicht verifizieren...

Außerdem: Kein Mitleid für solche Technologiebremsen... Wenns nach mir gänge hätte jede Seite ne 400x400px große Warnmeldung, wenn man sie ohne HTML5/CSS3-fähigem Browser betritt.

 

[pineapplefreak]

Ok. Ich hab nochmal rumprobiert. Aber das problem ist, dass ich keine Ahnung habe wie ich das machen könnte. Die Umsetzung wäre dann vlt. weniger das Problem. Wie würdet ihr diese "Boxen" gestalten?

 

[Kausalat]

Beispielsweise könnte die grobe Struktur mit HTML-5-Tags folgendermaßen aufgebaut sein:

<!DOCTYPE html>

<html lang="de-DE">

<head>

       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Meine Website</title>

</head>

<body>

   <header>
      <h1><a href="#">Meine Website</a></h1>
   </header>

   <nav>
      <ul>
         <li><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
      </ul>
   </nav>

   <article>
      <h2>Titel des Artikels</h2>
      <p>Absatz</p>
      <p>Absatz</p>
   </article>

   <footer>
      <p>Copyright 2012 blablabla</p>
      <p><a href="#">Impressum</a></p>
   </footer>

</body>

</html>

Fehlt nur noch eine CSS-Datei .

Für weitere Tags und Inspirationen sei dir SelfHTML5 empfohlen.

 

[pineapplefreak]

Die HTML Datei hab ich fast schon fertig... mir geht es um das CSS.
Das Problem ist einfach, das es 100e verschiedene Sachen gibt, die man mit CSS machen kann. Und es gibt bestimmt ein schönes tutorial für dieses Problem. Aber ich finds nicht...

 

[Kausalat]

Vielleicht ist dies ein für dich hilfreiches CSS-Tutorial ...

Ansonsten könntest du dein "Problem" etwas genauer schildern. An sich ist deine Vorlage mit einigen wenigen CSS-Regeln realisierbar, es sei denn, du hast etwas Bestimmtes vor und weißt nicht, wie du es realisieren kannst.

 

[pineapplefreak]

Also, ich hab erste Erfolge
Ich habs immerhin geschafft, dieses Boxen Modell halbwegs ordentlich einzubringen.
Aber jetzt hab ich das problem, dass Listen nicht mit in diese Box eingearbeitet werden...
siehe hier:

<style type="text/css">
body {background-color: #9ADFEB;}
p {
margin: 100px 40px 10px 70px;
background-color: #EBF0BC
}
</style>

das ist im Head.
jetzt ist weiter unten unter <p></p> etwas Text und dann eine Liste mit

blabla blaa
<br>

<ul>
<li>aaa....bbb....ccc...</li>
</ul>

Jetzt ist aber nur der Text eingerückt und mit gelbem Hintergrund. Die liste wird gar nicht beachtet... obwohl beides von dem p eingerahmt wird...

 

[Kausalat]

Du solltest dir erst einmal anschauen, welche HTML-Tags verschachtelt werden dürfen und welche nicht. <p> und <ul> sind beides Blockelemente, die beide nicht miteinander verwurschtelt werden dürfen.

Das heißt im Klartext:

<p>Text</p>
<ul>
<li>Aufzählung</li>
</ul>
<p>Weiterer Text</p>

<br> solltest du vermeiden, da ein Zeilenumbruch im Grunde keinen wirklichen Nutzen darstellt. Dafür gibt's <p>.