layout ohne table

html.de-Forum HTML, XHTML & CSS
1

Hallo!

Ich möchte eine Seite schreiben, in der oben die buttons horizontal nebeneinander stehen und darunter (je nach dem auf welchen button gedrückt wurde) der Inhalt steht, so wie auf dieser seite.

nun wollte ich das ganze erst mit einer tabelle lösen. In der oberen hälfte wären die buttons, in der unteren der inhalt.
auf dieser seite wird einem auch empfohlen sein layout mit tabellen zu gestalten.
in diesem forum sagte mir aber jemand, ich solle mit meinem layout ohne tabellen zurecht kommen.

Ich frage mich dann aber: Wie kann ich obige Wunschseite ohne

realisieren?

2

Stichwort CSS! CSS 4 You - The Finest in Stylesheets: Workshop CSS: Allgemeines

3

ich kenne css und ich weiß auch, wie es funktioniert. ich kenne eigentlich auch die meißten tags und css attribute.

aber konkret wüsste ich nicht, wie ich das mit dem button und dem inhalts bereich hinbekommen kann…

4

Das ist eine ganz normale Liste(

5

danke für den tipp! das klappt jetzt schon ganz gut.

Nur frage ich mich, wie ich den gesamten button bereich (der ja jetzt durch eine liste gegliedert ist) mit einem background hinterlegen kann.
denn sowas wie ein

    background gibt es ja nicht. ich hab auch probiert, die liste mit
    zu umschließen, und dem div ein background zu setzen, aber das ging auch nicht…

6

Du kannst so ziemlich jedem Element einen Hintergrund zuweisen.

Hintergrundbilder: Übersicht: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

7

PS: war quatsch…

8

Du solltest dir den Link nochmal ganz gründlich anschauen und aufmerksam lesen^^

CSS 4 You - The Finest in Stylesheets: CSS-Referenz: Eigenschaften von A-Z

9

mit

    geht das anscheinend nicht…

    ul.optionbar { background: green; }

    bewirkt nichts. Aber ich merke gerade das liegt alles an dem float: left:

    li.optionbar { float: left; }

    wenn das weg ist, ist der hintergrund da… alles sehr interessant…

10 
ul.optionbar
{
    background: green;  
    display: block;  
    height: 20px;
}
11

damit klappts auch nicht…

dieses float: left macht auch noch mehr sachen kaputt…
das ist mein code:

<ul class="optionbar"> <li class="optionbar"> <a href="downloads.php">Downloads</a> </li> <li class="optionbar"> <a href="games.php">Games</a> </li> </ul> <div>Welcome to my website.</div> und hier wird nun (wenn das float: left in der css da ist) das „welcome to my website“ nicht in einer neuen zeile geschrieben, sondern rechts neben dem „Games“ nur eine zeile tiefer…

so jetzt klappts endlich.

ich hab diese float mal 300 kilometer weit weggeschmissen, es hat nur müll veranstaltet, d.h. zu ganz komischen effekten geführt.

ich hab es jetzt mit

[code]ul
{
background: green;
}

li
{
list-style: none;
display: inline;
}[/code]endlich so, wie ich es haben wollte!

12

Du hättest deiner ul nur noch eine Höhe geben brauchen, dann wäre es auch so gewesen. Mit display: inline fehlt dir die Möglichkeit, den Elementen Höhe und Breite geben zu können. Aber wenn es jetzt so ist, wie du es möchtest, kannst du es aber auch so lassen.

13

Also wenn ich folgenden code habe:

[CODE]ul
{
height: 22px;
float: left;
background: green;
}

li
{
list-style: none;
}[/CODE]

[CODE]

            <p>Welcome to my website.</p>[/CODE]

dann bricht bei mir in allen browsern das völlige chaos aus…

14

Das float: left sollte ja auch für die li gelten und nicht für die ul.

Probier es mal so:

    ul
{
    height: 1.5em;
    list-style-type: none;    
    background: green;        
}

li
{
    margin: 0 0.5em;
    float: left;
}
15

ah, ok, das war blöd von mir - meine schuld!

es bricht nun zwar kein chaos mehr aus, allerdings kann ich den text der ul nun nicht mehr nebeneinander UND zentriert darstellen. das float: left verhindert das irgendwie. (ich habe die ul mit divs umschlossen, deren textalign center ist).

16

Woher kommen eigentlich solche falschen Informationen? Es gibt erschreckend viele Leute, die sowas glauben, aber ich frag mich immer, woher die sowas haben?

Prinzipiell kannst Du erstmal jede CSS-Eigenschaft jedem HTML-Tag zuweisen. Ausnahmen bestätigen natürlich die Regel.

17

Vom ausprobieren und interpretieren.
Wenn die

  • s in der
      gefloatet werden ohne zu clearen sieht es so aus als ob background-color nicht greift.
      Das clearen wird in Listen oft vergessen weil kein zusätzliches Element zwischen und
    passt.

    • 18

    Wie kann man in einer horizontalen Liste denn clearen?
    :after    /content & display: none wär die einzige Variante, die mir gefallen würde, wenn sie in der Praxis funktionierte.

    Gruß
    Junny

    19

    Ich meinte das clearen der Floats einer Liste:

    ul:after {
display: block; /*nicht none*/
content: ".";
height: 0;
visibility: hidden;
}

    Für IE5-7 reicht Layout für


      Ein
      um die
        finde ich aber auch nicht störend.

        Mit dem Post wollte ich auf die mögliche Ursache der Meinung
        „

          nimmt keine Hintergrundfarbe auf“ eingehen.

    20

    Genau sowas wollte ich wissen. Werde das mal ausprobieren, danke.

    Gruß
    Junny