• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

layout ohne table

Status
Für weitere Antworten geschlossen.
B

Bit2_Gosu

Neues Mitglied
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 <table> realisieren?
 
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..
 
Das ist eine ganz normale Liste(<ul>), die als Listenelemente(<li>) die Links(<a>) enthält. Die Listenelemente sind nach links gefloatet(float: left), damit sie nebeneinander stehen.

PHP: 
<ul>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
</ul>
Code: 
 li {float: left;}
Damit hast du die Grundlage, nun heißt es lesen und probieren.

Der Inhalt ändert sich, weil eine neue Seite geladen wird, da ist nichts besonderes dran.
 
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 <ul> background gibt es ja nicht. ich hab auch probiert, die liste mit <div> zu umschließen, und dem div ein background zu setzen, aber das ging auch nicht..
 
mit <ul> geht das anscheinend nicht..

Code: 
ul.optionbar
{
    background: green;    
}

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

Code: 
li.optionbar
{
    float: left;  
}

wenn das weg ist, ist der hintergrund da... alles sehr interessant..
 
damit klappts auch nicht..

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

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;
}
endlich so, wie ich es haben wollte!
 
Zuletzt bearbeitet von einem Moderator:
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.
 
Also wenn ich folgenden code habe:

Code: 
ul
{
    height: 22px;
    float: left;
    background: green;    	
}

li
{
    list-style: none;	
}

Code: 
<ul>
                    <li>
                        <a href="downloads.php">Downloads</a>
                    </li>
                    <li>
                        <a href="games.php">Games</a>
                    </li>
                </ul>
                    
                <p>Welcome to my website.</p>

dann bricht bei mir in allen browsern das völlige chaos aus...
 
Das float: left sollte ja auch für die li gelten und nicht für die ul.

Probier es mal so:

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

li
{
    margin: 0 0.5em;
    float: left;
}
 
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).
 
Bit2_Gosu schrieb:
denn sowas wie ein <ul> background gibt es ja nicht.
Zum Vergrößern anklicken....
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.
 
Efchen schrieb:
Es gibt erschreckend viele Leute, die sowas glauben, aber ich frag mich immer, woher die sowas haben?
Zum Vergrößern anklicken....
Vom ausprobieren und interpretieren.
Wenn die <li>s in der <ul> 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 </li> und</ul> passt.
 
Zuletzt bearbeitet:
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
 
Ich meinte das clearen der Floats einer Liste:
Code: 
ul:after {
display: block; /*nicht none*/
content: ".";
height: 0;
visibility: hidden;
}
Für IE5-7 reicht Layout für <ul>
Ein <div> um die <ul> finde ich aber auch nicht störend.

Mit dem Post wollte ich auf die mögliche Ursache der Meinung
"<ul> nimmt keine Hintergrundfarbe auf" eingehen.
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben