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

Lists mit CSS formatieren

T

tigran

Neues Mitglied
hallo leute,
hab ich folgende problem: ich habe meine navigationstasten mithilfe von lists erstellt. jetzt will ich dass " li " elemente verschieden grossen haben. mit tabellen kann ich dass sehr leicht machen aber mit lists klappt es nicht. hier ist mein cod mit tabellen (so will ich es haben) und mit lists:

<style type="text/css">
<!--
#button {
width: 205px;
position: absolute;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
left: 300px;
top: 20px;
height: 144px;
}
#button ul {
list-style-type: none;
padding: 0px;
position: absolute;
top: 0px;
width: 100%;
}
#button li {
height: 25px;
list-style-type: none;
width: 200px;
padding: 0px;
border: 1px solid #999;
}
-->
</style>
</head>

<body>
<table width="200" border="1" cellspacing="0" cellpadding="0"> <tr> <td height="40">Categorie1</td> </tr> <tr> <td height="25"><a href="#">Beispieltext1</a></td> </tr> <tr><td height="25"><a href="#">Beispieltext2</a></td></tr><tr><td height="40">Categorie2</td></tr><tr> <td height="25"><a href="#">Beispieltext3</a></td> </tr> </table>

<div id="button">
<ul >
<li>Categorie</a></li>
<li><a href="#">Beispieltext1</a></li>
<li><a href="#">Beispieltext2</a></li>
<li>Categorie2</li>
<li><a href="#">Beispieltext3</a></li>
</ul>
</div>


mfg
 
Lass das div weg, du gruppierst da nichts, also ist es überflüssig.
Lass die absolute Positionierung weg, die ist meistens unnötig.
Bei dem ersten Listenelement hast du ein schließendes <a/>, aber kein öffnendes.

Wenn es nach der Behebung der Fehler noch immer nicht klappt, würde ein Link zur Seite helfen.
 
_Thor_ schrieb:
Lass das div weg, du gruppierst da nichts, also ist es überflüssig.
Lass die absolute Positionierung weg, die ist meistens unnötig.
Bei dem ersten Listenelement hast du ein schließendes <a/>, aber kein öffnendes.

Wenn es nach der Behebung der Fehler noch immer nicht klappt, würde ein Link zur Seite helfen.
Zum Vergrößern anklicken....

danke _Thor_ für deine tipps,
aber ich habe thema erstellt nicht für fehlers sondern vielmehr für design. ich will dass "Categories" einbissen grosser werden als "beispieltexts". und du schlägst vor dass ich div tag weg lasse. wie kann dann meine liste formatieren? gibt es eine andere möglichkeit? (ich muss mehrer lists haben,und jeder kriegt eine andere formatierung).
mfg tigran
 
tigran schrieb:
und du schlägst vor dass ich div tag weg lasse. wie kann dann meine liste formatieren?
Zum Vergrößern anklicken....

Direkt die Liste formatieren. Also:

Code: 
ul { .. }

Optional natürlich auch mit Klasse möglich.

gibt es eine andere möglichkeit? (ich muss mehrer lists haben,und jeder kriegt eine andere formatierung).
mfg tigran[/QUOTE]
 
ok,
danke threadi,
aber was ist mit " li " elements höhe? kann ich die unterschiedlich hoch haben in einer list?
mfg
 
Wenn Du einzelne Elemente eines Typs anders formatieren willst, verwende für die anders formatierten Elemente Klassen. Also:

Code: 
li { .. Standard ..}
li.anders { .. Unterschiede vom Standard .. }
 
threadi schrieb:
Wenn Du einzelne Elemente eines Typs anders formatieren willst, verwende für die anders formatierten Elemente Klassen. Also:

Code: 
li { .. Standard ..}
li.anders { .. Unterschiede vom Standard .. }
Zum Vergrößern anklicken....


ok leute,
danke euch alle.hat geklappt. Hab ich einfach eine neue klasse erstellt und dort höhe definiert. Es sah so aus.

<style type="text/css">
<!--
.listform {/*neue class*/
height: 40px;
}
-->
</style>
<ul >
<li class="listform">Categorie</li> <!--/*neue class*/ -->
<li><a href="#">Beispieltext1</a></li>
<li><a href="#">Beispieltext2</a></li>
<li class="listform >Categorie2</li><!--/*neue class*/ -->
<li><a href="#">Beispieltext3</a></li>
</ul>

mfg tigran[FONT=&quot][/FONT]
 
_Thor_ schrieb:
Um das Design kann man sich aber erst vernünftig kümmern, wenn der Quellcode fehlerfrei ist, denn sonst kann es passieren, dass das CSS auch nicht richtig funktioniert.
Zum Vergrößern anklicken....

Ausserdem würde ich dir raten die CSS datei auszulagern damit du sie auf jede seite übertragen kannst ohne das ganze wieder und wieder copy-pasten musst und du hast eine übersichtlichere ausstattung deines codes. Ausserdem kannst du css welche du nur für eine Seite benutzen willst immernoch im head positionieren ohne das diese auf die anderen seiten übernommen wird.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben