Tabelle Angängerfrage

[patrick227]

Hallo,
ich schreibe jetzt meine erste Webseite, die sollte so aufgebaut sein:

Meine Frage, wie gehe ich hier vor, soll ich für jede Zeile einen <table> erstellen oder insgesamt nur einen <table> und die Zeilen mit <tr>'s? Hierbei hatte ich wenig Erfolg.
Ich habe mich auch auf selfHTML etwas eingelesen, ist es nun besser die Tabellen in der CSS zu formatieren?

lg Patrick

 

[thuemmy]

Hallo Patrick,

Meine Frage, wie gehe ich hier vor, soll ich für jede Zeile einen <table> erstellen

Nein, sollst Du nicht, denn Tabellen sind nur für tabellarische Daten gedacht und sollte nicht für Design-Zwecke genutzt werden.

Mit HTML gibst Du dem Inhalt der Website eine Bedeutung:

• <h1>....<h6> für Überschriften
• <p> für Absätze
• <address> für Adressdaten
• <table> für tabellarische Daten
• usw.

Die Gesaltung und das Layout werden mit CSS gemacht. Tabellen und Frames hat man noch zu einer Zeit genutzt, als es noch keine anderen Möglichkeiten (CSS) des Designs gab.

Stichpunkt CSS: Layout ohne Tabellen bietet Dir einen ersten Überblick.

Gruß thuemmy

 

[prm]

google mal nach dreispaltigem CSS-Layout.
Dein Aufbau wäre folgender:

Logo (img) linksgefloatet
h1 für titel
zwei ul-Listen für die Navi
Drei div's linksgefloatet
clearen
Footer

Evtl. noch einen wrapper als Hülle für eine Gesamtbreite und Zentrierung.
Dazu brauchst du keine Tabellen.

 

[patrick227]

Hallo thuemmy,
vielen Dank, ich verstehe ist ja viel einfacher!
jetzt stehen alle Elemente untereinander, damit ich zb Logo und Titel nebeneinander bekommen verwende ich:

position:absolute;
left:..px; top:..px; width:.px; height:..px;

Ist dies grundsätzlich richtig?

lg Patrick

EDIT: @PRM Danke werde ich machen!

EDIT2: ok das mit position:absolute war Blödsinn ich muss mich noch genauer einlesen..

 

[prm]

Verzichte auf position: absolute. Das brauchst du dazu nicht.
Wenn zwei Elemente nebeneinander sollen, dann nimm float.
float: Elemente umfließen lassen: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

 

[patrick227]

Würde die Html Datei für mein Beispiel so stimmen?
​

<div id="layout_wrapper">

<!-- Header -->
<div id="layout_head">
    <div id="logo">logo</div>
    <div id="titel">titel</div>
</div>
    
<!-- Menüelemente -->
<div id="layout_menu">
    
    <div id="layout_menu1">
        <ul>
            <li><p>MENU1</p></li>
            <li><p>MENU2</p></li>
            <li><p>MENU3</p></li>
            <li><p>MENU4</p></li>
        </ul>
        <div class="clearer">&nbsp;</div>
    </div>
    
    <div id="layout_menu2">
        <ul>
            <li><p>menu1</p></li>
            <li><p>menu1</p></li>
            <li><p>menu1</p></li>
            <li><p>menu1</p></li>
        </ul>
        <div class="clearer">&nbsp;</div>
    </div>
    
</div>
    
<!-- Hauptbereich -->
<div id="layout_main">
    <div id="main" class="right">1</div>
    <div id="banner1" class="left">1</div>
    <div id="banner2" class="left">2</div>
</div>

<!-- Fußzeile -->
<div id="layout_main">
    <p>Fußzeile</p>
</div>
    
</div>

 

[xXxPeterPanxXx]

Nein, aber der Anfang ist nicht schlecht.

du verwendest zu viele <div>'s, die meisten kannst du durch andere Html Tags ersetzen.

Wieso macht du z.B ein div um dein Titel? Es reicht ein h1-h6.

 

[patrick227]

Nein, aber der Anfang ist nicht schlecht.

du verwendest zu viele <div>'s, die meisten kannst du durch andere Html Tags ersetzen.

Wieso macht du z.B ein div um dein Titel? Es reicht ein h1-h6.

Achso verstehe, dann soll ich also nur div's verwenden wenn sich die Fornatierung grundlegend ändert?

 

[_Thor_]

Achso verstehe, dann soll ich also nur div's verwenden wenn sich die Fornatierung grundlegend ändert?

Nein, <div>'s verwendet man nur, um mehrere Elemente zu gruppieren, um sie gemeinsam zu formatieren, für den Inhalt verwendest du die Tags, die deinen Inhalt am sinnvollsten beschreiben.

 

[patrick227]

Danke! Ich bin schon relativ weit gekommen, nur bekomme ich die Menüs nicht hin, andere unschöne Formfehler werden wahrscheinlich auch noch im Code sein, ich bin über jeden Tipp dankbar!

Die Hintergrundfarbe sollte über die ganze Zeile gehen, momentan springt auch das Menü 2 hinauf neben das Menü1 wenn ich das Browserfenster vergrößere.

<!-- Header -->
<div id="layout_head">
        <img src="akkorde/logo.png" style="float:left; margin-right: 20px">
        <h1>Akkordtabelle</h1>
        <h2>f&uuml;r Gitarre, Bass, Ukulele und Keyboard</h2>
</div>
    
<!-- Menüelemente -->
<div id="layout_navi1">
    <ul>
        <li id="currentpage"><a href="#">Gitarre</a></li>
        <li><a href="bass.html">Bass</a></li>
        <li><a href="ukulele.html">Ukulele</a></li>
        <li><a href="keyboard.html">Keyboard</a></li>
        <li><a style="color: red;" href="feedback.html">Feedback</a></li>
    </ul>
</div>
<div id="layout_navi2">
    <ul>
        <li><a href="index.html#dur">Dur</a></li>
        <li><a href="index.html#moll">Moll</a></li>
        <li><a href="index.html#sus2">Sus2</a></li>
        <li><a href="index.html#sus4">Sus4</a></li>
        <li><a href="index.html#m6">m6</a></li>
        <li><a href="index.html#6">6</a></li>
        <li><a href="index.html#m7">m7</a></li>
        <li><a href="index.html#7">7</a></li>
        <li><a href="index.html#maj7">Maj7</a></li>
        <li><a href="index.html#m9">m9</a></li>
        <li><a href="index.html#9">9</a></li>
    </ul>
    
</div>

#layout_head {
    background-color: #222;
    color: white;
    height: 75px;
    padding: 15px;
}
#layout_head h1{
    color: white;
    font-style: italic;
    font-size:32px;
}
#layout_head h2{
    color: gray;
}

#layout_main {
    background: #FFF;
    padding: 8px 8px 0;
}

/* Navigation*/
#layout_navi1 ul,
#layout_navi1 li {
    font: bold 1.3em sans-serif;
    padding: 0px 8px;
    background: #333;
    float: left;
    display: inline;
    }

#layout_navi1 a {
    color: #999;
    font-weight: bold;
    padding: 5px 10px 0px 10px;
    text-decoration: none;
    }
    
#layout_navi1 a:hover {
    color: #222;
    background: #c5c5c5;
    }
    
#layout_navi1 #currentpage a {
    background: #eee;
    color: #000;
    }

#layout_navi2 ul,
#layout_navi2 li {
    font: 1.2em sans-serif;
    padding: 1px 8px;
    background: #eee;
    float: left;
    display: inline;
    }

#layout_navi2 a {
    color: #000;
    padding: 0px 5px 0px 5px;
    text-decoration: none;
    }
    
#layout_navi2 a:hover {
    text-decoration: underline;
    }
    
#layout_navi2 #currentpage a {
    background: #ccc;
    color: #333;
    }

 

[Efchen]

Da sind immer noch zu viele <div>. Du packst Deine Menüs (<ul>) nochmal in ein <div>. Wozu? Das ist so, als würdest Du Geschenke in zwei Lagen Papier einpacken.

<ul> ist wie <div> ein Block-Element und verhält sich daher genauso.

"Gruppieren" heißt ja, dass Du mindestens zwei Elemente hast.

Was Deine Darstellungsprobleme angeht, finde ich es angenehmer, wenn Du einen Link zur Seite postest, denn dann kann man das mit den diversen Webdeveloper-Tools überprüfen und muss sich nicht durch den Code lesen.

 

[neuroleptika]

Du packst Deine Menüs (<ul>) nochmal in ein <div>. Wozu?

Zum clearen:

..
        </ul>
        <div class="clearer">&nbsp;</div>
    </div>
..

 

[patrick227]

@Efchen: Ich habe die Seite leider noch nicht online.

Zum clearen:

..
        </ul>
        <div class="clearer">&nbsp;</div>
    </div>
..

Genau, das hat sonst nciht funktioniert, was ich so verstanden hab. Soll ich das ändern oder nicht?

lg Patrick

 

[neuroleptika]

Es ist die einfachtse Methode zum clearen.

 

[Efchen]

Zum clearen

Richtig, in Beitrag #6 ist noch ein <div> zum clearen im Code.

Ich bezog mich auf #10, da ist innerhalb der navi-divs kein weiteres Element und im CSS-Code steht auch nichts von clear.

 

[neuroleptika]

Irgendwie müssen die Floats aber eingeschlossen werden.
Das geht am einfachsten in einer weiteren Box um ul.

 

[patrick227]

Ich glaub dass es bei meiner Css sehr fehlerhaft ist, ich bin immer noch beim Menü. Ich habe den Code nun auch im Anhang. Vielen Dank für die Mühe!

/* Navigation*/

#layout_navi {
    background: #333;
}

#navi1 ul,
#navi1 li {
    font: bold 1.3em sans-serif;
    padding: 0px 8px 0px 8px;
    float: left;
    display: inline;
    }

#navi1 a {
    color: #999;
    font-weight: bold;
    text-decoration: none;
    padding: 5px 6px 0px 6px;
    }
    
#navi1 a:hover {
    color: #222;
    background: #c5c5c5;
    }
    
#navi1 #currentpage a {
    background: #eee;
    color: #000;
    }

#navi2 ul,
#navi2 li {
    font: 1.2em sans-serif;
    padding: 1px 8px;
    background: #eee;
    float: left;
    display: inline;
    }

#navi2 a {
    color: #000;
    padding: 0px 5px 0px 5px;
    text-decoration: none;
    }
    
#navi2 a:hover {
    text-decoration: underline;
    }
    
#navi2 #currentpage a {
    background: #ccc;
    color: #333;
    }

<!-- Header -->
<div id="layout_head">
        <img src="akkorde/logo.png" style="float:left; margin-right: 20px">
        <h1>Akkordtabelle</h1>
        <h2>f&uuml;r Gitarre, Bass, Ukulele und Keyboard</h2>
</div>
    
<!-- Menüelemente -->
<div id="layout_navi">
    <div id="navi1">    
        <ul>
            <li id="currentpage"><a href="#">Gitarre</a></li>
            <li><a href="bass.html">Bass</a></li>
            <li><a href="ukulele.html">Ukulele</a></li>
            <li><a href="keyboard.html">Keyboard</a></li>
            <li><a style="color: red;" href="feedback.html">Feedback</a></li>
        </ul>
        <div class="clearer">&nbsp;</div>
    </div>
    <div id="navi2">    
        <ul>
            <li><a href="index.html#dur">Dur</a></li>
            <li><a href="index.html#moll">Moll</a></li>
            <li><a href="index.html#sus2">Sus2</a></li>
            <li><a href="index.html#sus4">Sus4</a></li>
            <li><a href="index.html#m6">m6</a></li>
            <li><a href="index.html#6">6</a></li>
            <li><a href="index.html#m7">m7</a></li>
            <li><a href="index.html#7">7</a></li>
            <li><a href="index.html#maj7">Maj7</a></li>
            <li><a href="index.html#m9">m9</a></li>
            <li><a href="index.html#9">9</a></li>
        </ul>
        <div class="clearer">&nbsp;</div>
    </div>
</div>