Noob braucht Hilfe zu 2 Spalten Layout

NeoFight · 26 Juli 2009

Mahlzeit
Also vorab: Ich bin absoluter Newbie in der HTML oder CSS Scene, aber, ich sage mal, jeder hat klein angefangen.
Also ich bin gerade dabei mir eine Seite aufzubauen.
Das ist meine aktuelle:
Die Seite für Computer Neulinge Windows Einsteiger Hilfe
Diese möchte ich aber nun, verständlicher Weise, profiessioneller aussehen lassen. Das habe ich mit einem 2 Spalten Layout vor.
Das Problem nur: Jedes was ich finde und benutze kriege ich nicht meinen Wünschen nach zum laufen.
Mit diesen Templates versuche ich es gerade:
CSS Page Template - 2 Column Flexible
bzw.
CSS Templates, Free CSS Website Templates, SSI-Developer.net

Habe mal den unnützen Kram rausgeschmissen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="XHTML namespace">
<head>
<title>CSS Page Template - 2 Column Flexible</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<meta name="Robots" content="NOINDEX" />
<link rel="stylesheet" type="text/css"
href="2c-flex-layout.css" />

</head>
<body>

<div id="lh-col">
</div>


<div id="rh-col"><br />
</div>

</body>
</html>

Soo. Nun würde ich gerne die kleinere Spalte mit den Links belegen. Und dafür auch ein Hintergrundbild benutzen aber das kriege ich schon nicht hin. Egal wechen Befehl ich benutze.
Ich hätte noch 1000 anderer Fragen, aber ich möchte erstmal eins nachdem anderen.
Wer mi helfen kann, kann mich auch gerne per ICQ anschreiben: 489-229-478.

Neo

Bernhard · 26 Juli 2009

NeoFight schrieb:
Mahlzeit
Also vorab: Ich bin absoluter Newbie in der HTML oder CSS Scene, aber, ich sage mal, jeder hat klein angefangen.
Also ich bin gerade dabei mir eine Seite aufzubauen.
Das ist meine aktuelle:
Die Seite für Computer Neulinge Windows Einsteiger Hilfe
Diese möchte ich aber nun, verständlicher Weise, professioneller aussehen lassen. Das habe ich mit einem 2 Spalten Layout vor.
Das Problem nur: Jedes was ich finde und benutze kriege ich nicht meinen Wünschen nach zum laufen.
Mit diesen Templates versuche ich es gerade:
CSS Page Template - 2 Column Flexible
bzw.
CSS Templates, Free CSS Website Templates, SSI-Developer.net

Habe mal den unnützen Kram rausgeschmissen:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]"> <html xmlns="[URL="http://www.w3.org/1999/xhtml"]XHTML namespace[/URL]"> <head> <title>CSS Page Template - 2 Column Flexible</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="Robots" content="NOINDEX" /> <link rel="stylesheet" type="text/css" href="2c-flex-layout.css" /> </head> <body>  <div id="lh-col"> </div>   <div id="rh-col"><br /> </div>  </body> </html>

Soo. Nun würde ich gerne die kleinere Spalte mit den Links belegen. Und dafür auch ein Hintergrundbild benutzen aber das kriege ich schon nicht hin. Egal welchen Befehl ich benutze.
Ich hätte noch 1000 anderer Fragen, aber ich möchte erstmal eins nachdem anderen.
Wer mi helfen kann, kann mich auch gerne per ICQ anschreiben: 489-229-478.

Neo

Hallo Neo,

damit hast Du ein Grundgerüst (das noch nicht ganz perfekt ist, aber dazu sagt Efchen
sicher noch mehr...;-) ) - dann geht's jetzt mit der Navigation und den Inhalten los...

Das div für die Navigation brauchst Du vermutlich nicht...
Eine Navigation ist eine Auflistung von Links, daher verwendest Du da eine ungeordnete Liste:

Code:

<ul id="navigation">
    <li><a href="#">Linktext</a></li>
    <li><a href="#">Linktext</a></li>
    <li><a href="#">Linktext</a></li>
    <li><a href="#">Linktext</a></li>
    <li><a href="#">Linktext</a></li>
</ul>

Wenn dann alle Inhalte drin sind, geht's mit CSS an's Aussehen, dazu findest Du viel auf css4you.

Viel Erfolg
Bernhard

NeoFight · 27 Juli 2009

Super schnelle Antwort.
Also die Inhalte habe ich doch im Prinzip schon?!
Habe diese ja schon auf der anderen Seite: Die Seite für Computer Neulinge Windows Einsteiger Hilfe
Da sind ja schon meine Inhalte:
Index of /Windows XP Installation
Hier sind nochmal alle einzelnen Dateien, ich hoffe ihr klaut mir nichts xD.
Auf jeden Fall wollte ich die "Tutorial.html" als Navigation nehmen. Und dann die Links davon um rechten bzw. linken Fenster anzeigen lassen.

Neo

Efchen · 27 Juli 2009

NeoFight schrieb:
Also vorab: Ich bin absoluter Newbie in der HTML oder CSS Scene, aber, ich sage mal, jeder hat klein angefangen.

Klar. Und deswegen ist es jetzt noch an der richtigen Zeit, aufzuklären, wozu HTML und CSS eigentlich da sind.
HTML ist nur zur logischen Auszeichnung des Inhalts (= Semantik)
CSS ist nur für das Layout.

Wenn Du also eine Layout-Frage hast, kann das nicht mit HTML gelöst werden, müsste also auch eigentlich ins CSS-Forum.

Aber da Du noch erhebliche Schwächen im Bereich HTML hast, ist das Posting hier trotzdem gut aufgehoben.

Das ist meine aktuelle:
Die Seite für Computer Neulinge Windows Einsteiger Hilfe

Das ist insofern schonmal positiv, als dass Du kein Tabellenlayout und keine Frames verwendet hast. Du hast eine ziemlich anständige Semantik in Deiner Seite. Alle Achtung. Das schafft manch einer, der behauptet, er kann HTML, so nicht.

Es sind noch ein paar Syntaxfehler drin, welche sagt Dir der The W3C Markup Validation Service und Du hast ein h5, obwohl Du kein h2, h3 und h4 hast, das ist unlogisch, Dein h5 muss also ein h2 sein. Du hast da auch noch ein paar LIsten von Links, die Du nicht ausgezeichnet hast. Da solltest Du auch eine Liste draus machen.

Diese möchte ich aber nun, verständlicher Weise, profiessioneller aussehen lassen. Das habe ich mit einem 2 Spalten Layout vor.

Das ist dann Sache von CSS, Stichwort "float".

<div id="lh-col">
</div>


<div id="rh-col"><br />
</div>

Grauenvoll.
Wie bei einem Template nicht anders zu erwarten, ist HTML hier eher schlecht angewendet, aber ohne Inhalt geht das auch nicht besser. Wenn Du Deinen Inhalt reinbringst, dann solltest Du darauf achten, die <div>s womöglich wegfallen zu lassen, denn die sind nur dazu da, mehrere Elemente zu gruppieren.
Außerdem würde ich die nicht "links" und "rechts" nennen, denn wenn Du das irgendwann mal ändern willst, hast Du den Salat. Das fällt unter "Trennung von Inhalt und Layout", wobei wir wieder bei Deinem bisherigen Versuch sind: Du verwendest viele Attribute, die für Layout gedacht sind. Sowas sollte komplett aus dem HTML-Code verschwinden und nur über CSS gemacht werden.

Egal wechen Befehl ich benutze.

Befehle gibts nur in Programmiersprachen. HTML und CSS sind beides keine solchen, kennen daher auch keine Befehle.

Ich hätte noch 1000 anderer Fragen, aber ich möchte erstmal eins nachdem anderen.

Das ist gut. Aber ich würde mit dem Inhalt anfangen, diesen semantisch sinnvoll mit HTML auszeichnen und erst dann das Layout machen. Das ist einfacher fürs Gesamtverständnis.

Noob braucht Hilfe zu 2 Spalten Layout

NeoFight

Neues Mitglied

Bernhard

Neues Mitglied

NeoFight

Neues Mitglied

Efchen

Guest

Neueste Beiträge