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

Hilfe beim Floaten

L

Loana

Mitglied
Hallo liebes Forum...
Ich habe eine ungeordnete Liste für Lektionen auf einer Seite erstellt ich möchte gerne rechts daneben noch so eine Liste haben, ich weiss es geht mit float left...nun meine Frage könnte mir jemand dazu mal den CSS Code geben ?
Ich bin mit CSS nicht so firm und würde mich über Hilfe sehr freuen.
Wenn ihr die Seite dazu braucht
Flashen lernen

neben dieser erste Liste soll rechts eine gleich grosse Liste daneben sein

Danke schonmal
 
Werbung:
(ungetestet)

HTML: 
<ul style="float: left;">
    <li><a href="lektion1.html">Lektion1</a></li>
    <li><a href="seiten/lektion2.html"> Lektion2</a></li> 
    <li><a href="seiten/lektion3.html"> Lektion3</a></li>
    <li><a href="seiten/lektion4.html"> Lektion4</a></li>
    <li><a href="seiten/lektion5.html"> Lektion5</a></li>
    <li><a href="lektion6.html"> Lektion6</a></li>
    <li><a href="lektion7.html"> Lektion7</a></li>
    <li><a href="lektion8.html"> Lektion8</a></li>
    <li><a href="lektion9.html"> Lektion9</a></li>
    <li><a href="lektion10.html"> Lektion10</a></li>
 </ul>

<ul>
    <li><a href="lektion1.html">Lektion1</a></li>
    <li><a href="seiten/lektion2.html"> Lektion2</a></li>
    <li><a href="seiten/lektion3.html"> Lektion3</a></li>
    <li><a href="seiten/lektion4.html"> Lektion4</a></li>
    <li><a href="seiten/lektion5.html"> Lektion5</a></li>
    <li><a href="lektion6.html"> Lektion6</a></li>
    <li><a href="lektion7.html"> Lektion7</a></li>
    <li><a href="lektion8.html"> Lektion8</a></li>
    <li><a href="lektion9.html"> Lektion9</a></li>
    <li><a href="lektion10.html"> Lektion10</a></li>
 </ul>

<br style="clear: left;" />
 
Danke es hat geklappt...nur da sind Listenpunkte drin,die kann ich nicht gebrauchen...wie kriege ich die weg.
Mal noch ne doofe Frage ein CSS brauch man da wohl nicht dazu?
Ich habe gedacht man brauch eine Css datei? (zumindest mal davon gelesen)

Vielen lieben Dank
 
Werbung:
Du kannst deine CSS-Styles auf 3 Arten einbinden:
1. direkt im HTML-Tag via style="" (z.B. <ul style="float: left;">)
2. im HTML <head> (<style type="text/css">ul {float: left;}</style>)
3. in einer externen .css-Datei (<style type="text/css" src="style.css" /> )

Für deine Frage habe ich Nr. 1 gewählt, um es einfach zu zeigen, wie dein Problem gelöst werden kann. Zu empfehlen ist aber Art Nr. 3, da es einfach dein HTML übersichtlicher, einfacher zu warten und suchmaschinenfreundlicher macht.

Die Listenpunkte bekommst du mit list-style-type: none; weg.

Wenn du es in einer externen CSS-Datei haben möchtest sieht das ganze so aus:

Zuerst bindest du im HTML-Head dein Stylesheet ein
HTML: 
<head>
  <style type="text-css" src="style.css" />
</head>

Dann deine Listen:
HTML: 
<ul>
    <li><a href="lektion1.html">Lektion1</a></li>
    <li><a href="seiten/lektion2.html"> Lektion2</a></li> 
    <li><a href="seiten/lektion3.html"> Lektion3</a></li>
    <li><a href="seiten/lektion4.html"> Lektion4</a></li>
    <li><a href="seiten/lektion5.html"> Lektion5</a></li>
    <li><a href="lektion6.html"> Lektion6</a></li>
    <li><a href="lektion7.html"> Lektion7</a></li>
    <li><a href="lektion8.html"> Lektion8</a></li>
    <li><a href="lektion9.html"> Lektion9</a></li>
    <li><a href="lektion10.html"> Lektion10</a></li>
 </ul>

<ul>
    <li><a href="lektion1.html">Lektion1</a></li>
    <li><a href="seiten/lektion2.html"> Lektion2</a></li>
    <li><a href="seiten/lektion3.html"> Lektion3</a></li>
    <li><a href="seiten/lektion4.html"> Lektion4</a></li>
    <li><a href="seiten/lektion5.html"> Lektion5</a></li>
    <li><a href="lektion6.html"> Lektion6</a></li>
    <li><a href="lektion7.html"> Lektion7</a></li>
    <li><a href="lektion8.html"> Lektion8</a></li>
    <li><a href="lektion9.html"> Lektion9</a></li>
    <li><a href="lektion10.html"> Lektion10</a></li>
 </ul>

 <br class="clear" />

CSS-Datei:
Code: 
ul {
  float: left; //floatet alle <ul>-Elemente im HTML
}

.clear {
  clear: left;
}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben