Layout mit Tabellen

[Xethon]

Hi,

ich mache gerade eine Homepage für einen Bekannten und wollte die Seite so mit Tabellen aufbauen:

Kriege das nicht hin, dass die Navi- und Content-Tabelle nebeneinander sind. Ist das überhaupt sinnvoll mit Tabellen zu machen? Ghet es besser? Wenn ja, wie?
Soll später so werden, dass man auf nen Link in der Navi klickt und der dazugehörige Inhalt im Content erscheint.

 

[xXxPeterPanxXx]

ich würde es nicht mit einer tabelle machen. das hat man vor 15 jahren gemacht aber heute gibt es css. ich glaube das mit link ddas der inhalt angeziegt wird, dafür brauchst du glaube ich javscript.

 

[Xethon]

und wie könnte das Layout, das ich mir vorstelle mit css aussehen? Bräuchte mal nen kleines Beispiel.

 

[Lenchen]

html:

<h1 id="header"><img src="banner.jpg"></h1>
<ul id="navigation">
 <li><a href="link1">Link1</a></li>
 <li><a href="link2">Link2</a></li>
</ul>
<div id="content">
<p>
bliblablub bla blubblub sdg aertg arzt artgecrftg ae5rtz  s5rzt 
</p>
<p>
lkfjgp jpw+ol qptoip
</p>
</div>

css:

ul#navigation {
                     float:left;
                     margin:0;
                     padding:0;
                     }
ul#navigation li {
                       list-style:none;
                      }

 

[Xethon]

Verstehe das nicht ganz. Brauche das ein bisschen einfacher erklärt :(

 

[_Thor_]

Was daran verstehst du denn nicht?

Kennst du die Verwendeten Tags nicht?

Weißt du nicht, wie das Layout zustande kommen soll?

Wie das CSS mit dem HTML zusammen arbeitet?

 

[Xethon]

Hab noch nicht so viele Erfahrungen mit CSS.
Wie kriege ich denn die 3 Boxen hin, die ich mit Inhalt füllen will (Rahmen, Hintergrundfarbe, etc.)?

 

[_Thor_]

Also der grundlegende unterschied beim Umstieg von Tabellenlayout zu CSS ist, dass es im ersten Schritt nicht um das Layout geht, sondern um die korrekte Auszeichnung deines Inhalten. Dafür brauchst du keinen Browser, der Blick in den Quellcode reicht.

Zeichne eine Überschrift als solche aus (<h1> - <h6>), Listen und Menüs als <ul>, <ol> oder <dl>, Textabsätze als <p>, tabellarische Daten als <table>, Eingabefelder gehören in ein <fieldset> und werden mit einem <label> beschriftet usw.

Wenn du das hast, wird das, was du im Browser siehst, vermutlich überhaupt nicht so aussehen, wie du es dir vorstellst. Das ist aber kein Problem, denn dann fängt das CSS ja erst an.

Jetzt kannst du deinen Elementen Klassen und ID's geben, über die du dann im CSS die Eigenschaften setzen kannst, die du möchtest.

Ein Beispiel:

<h1>Ueberschrift erster Ordnung</h1>
<ul id="navigation">
  <li>Listenelement</li>
  <li>Listenelement</li>
  <li>Listenelement</li>
  <li>Listenelement</li>
</ul>
<ul>
  <li>Listenelement</li>
  <li>Listenelement</li>
  <li>Listenelement</li>
  <li>Listenelement</li>
</ul>
<p class="improtant">kursiver Text</p>
<p>normaler Text</p>
 <p class="improtant">wieder kursiver Text</p>

Wenn du jetzt möchtest, dass alle Überschriften erster Ordnung fett dargestellt werden schreibst du

h1 {font-weight: bold;} //spricht alle Überschriften erster Ordnung an

Soll die Navigation z.B. rote Schrift haben, die anderen Listen aber nicht, machst du das so

ul#navigation {color: #f00;} //spricht nur Listen mit der ID navigation an

Soll der erste und dritte Textabsatz kursiv dargestellt werden und einen Rahmen bekommen, machst du das so

p.important {font-style: italic; border: 1px solid black;} // spricht alle Textabsätze mit der Klasse important an

Einen Überblick über die Möglichkeiten des CSS findest du hier CSS 4 You - The Finest in Stylesheets

Wichtig ist, dass du verstehst, dass HTML nichts mit dem Layout zu tun hat und du die Tags nicht nach ihrem Aussehen im Browser wählen darfst, sondern danach, was deinen Inhalt am besten beschreibt.

 

[Xethon]

Vielen Dank für deine super Erklärung. Habs jetzt verstanden. Die Seite ist echt gut.
Werd mich jetzt mal an die Homepage machen ;)

 

[Xethon]

So, hat alles gut geklappt nur ein Problem habe ich. Werde mal versuchen es so gut es geht zu erklären.
Und zwar habe ich links eine Navigation. Für die einzelnen Zeilen will ich jeweils einen anderen Button als Hintergrundbild haben. Wenn ich jedoch in der Navi ein Hintergrundbild bestimme ist das in jeder Zeile. Ich will aber in jeder Zeile ein anderes Hintergrundbild haben. Wie mache ich das am besten?
Hoffe ihr versteht mein Problem.

 

[ingoS]

Da musst du jedem <li> oder jedem <a> eine Klasse mitgeben, also z.B.:

<li class="erster"><a href="bla">Bla</a></li>
<li class="zweiter"><a href="blub">Blub</a></li>
<li class="dritter"><a href="ploing">Ploing</a></li>
usw...

Dann kannst du in CSS schreiben:

.erster {
background: url(1.jpg);
}

.zweiter {
background: url(2.jpg);
}

usw...

Wenn es das nicht war, was du meintest, dann wären ein Code-Ausschnitt und/oder ein Link nicht schlecht.

 

[xXxPeterPanxXx]

dann machst du im html code dies:

<ul>
<li class="ersterbutton">
Startseite
</li>
<li class="zweiterbutton">
Kontakt
</li>
</ul>

im css code:
li.ersterbutton {
----------
}
li.zweiterbutton {
----------
}
hoffe du hast das verstanden.