✔ bei liste abstand vergrößern

Status
Nicht offen für weitere Antworten.
Kurt Cobain

Kurt Cobain

Erfahrenes Mitglied
Tag Tag

Hab den Code

Code: 
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title></title>
<meta name="author" content="Manuel">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">

<style type="text/css">
<!--
#session ul{
margin:0;
padding:5px;
list-style:none;
white-space: nowrap;
}

#session li{
display:inline;
}

#session a.uname{
font-weight:bold;
color:#006595;
font:normal 11px verdana,sans-serif;
padding:1px 15px 2px 15px;
text-decoration:none;
background-color:#fafafa;
border:1px solid #d5e7ec;
border-left:15px solid #d5e7ec;
text-align:center;
}

#session a.uname:hover{
color:#006595;
background-color:#fafafa;
border:1px solid #008996;
border-left:15px solid #008996;
text-align:right;
}
-->
</style>

</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">

<ul id="session">
<li><a href="#" class="uname">Testlink</a></li>
<li><a href="#" class="uname">Testlink</a></li>
<li><a href="#" class="uname">Testlink</a></li>
<li><a href="#" class="uname">Testlink</a></li>
</ul>

</body>
</html>

Wenn ich jetzt den Browser ganz klein mache, werden die LI's ja untereinander angezeigt. Wie kann ich den Abstand zum Oberen vergrößern

gruß ich
 
Wenn ich das Element ul vor dem ID-Namen notiere, werden die Listenpunkte beim Verkleinern des Browserfensters nicht in die nächste Zeile verschoben:

Code: 
ul#session{
margin:0;
padding:5px;
list-style:none;
white-space: nowrap;
}

ul#session li{
display:inline;
}

ul#session a.uname{
font-weight:bold;
color:#006595;
font:normal 11px verdana,sans-serif;
padding:1px 15px 2px 15px;
text-decoration:none;
background-color:#fafafa;
border:1px solid #d5e7ec;
border-left:15px solid #d5e7ec;
text-align:center;
}

ul#session a.uname:hover{
color:#006595;
background-color:#fafafa;
border:1px solid #008996;
border-left:15px solid #008996;
text-align:right;
}
 
Ich möchte aber, dass sich die LI's in die nächste Zeile verschieben, wenn man dan Browser kleiner macht.

Was muss ich also ändern
 
Sorry, habe dich wohl mißverstanden. Verwende hierfür dann folgendes Stylesheet:

Code: 
ul#session  {
margin:0;
padding:5px;
list-style:none;
white-space: nowrap;
}

ul#session li{
display:inline;
}

ul#session a.uname{
font-weight:bold;
color:#006595;
font:normal 11px verdana,sans-serif;
padding:1px 15px 2px 15px;
text-decoration:none;
background-color:#fafafa;
border:1px solid #d5e7ec;
border-left:15px solid #d5e7ec;
text-align:center;
display:block;
float:left;
margin:5px;
}

ul#session a.uname:hover{
color:#006595;
background-color:#fafafa;
border:1px solid #008996;
border-left:15px solid #008996;
text-align:right;
}
Den Wert für margin mußt du ggfs. noch deinen Vorstellungen anpassen.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück