abstand zwischen <ul>

Yui · 14. November 2012

huhu... habe wieder einmal ne frage. muss als projekt im fach mediengestaltung eine hompage entwerfen... habe so etwas nie gemacht und wollte kurz fragen wie ich es schaffe zwischen den <ul> tags ein abstand zu bekommen.... auf dem bild sehr ihr es. jetzt soll zB über "Bilder von vergangenen Events son padding von 10 px

sry hatte schon abgeschickt...
hier noch meine css daten:

Code

ul.nav {
background-color: #C0C0C0;
//wenn ich hier das padding hinzufüge passiert nix
}
ul.nav li {
line-height: 20px; /*für 20 Pixel Zeilenhöhe*/
margin: 5px 5px 5px 5px; /*für einen Rand von 5 Pixel um den Listeneintrag*/
letter-spacing: 1px; /*Buchstabenabstand von 1 Pixel im Listeneintrag*/
word-spacing: 5px; /*Wortabstand von 5 Pixel im Listeneintrag*/
list-style-type: square;
background-color: #CCC;
padding: 1px 0;
list-style-position: inside;
}

Alles anzeigen

hans

florian0 · 14. November 2012

Padding is ja der Innen-Abstand. Versuchs mal mit Margin (Außenabstand)

Gruß
florian0

Yui · 14. November 2012

damit hattest du natürlich recht. so also irgendwie passt das nicht
das ist der css par für div.nav2:

Code

div.nav2{
margin-bottom: 5px;
}

und hier nochmal die liste:

Code

<div class="sidebar1">
<ul class="nav">
<center> <div class=nav2><ul>Wie gefällt Ihnen die Seite?</ul>
<li>Sehr Gut</li>
<li>Gut</li>
<li>Könnte besser sein</li>
<li>Nicht so gut</li>
<li>Garnicht<br></li></div>
<div class=nav2> <ul>Bilder von vergangenen Events</ul>
<img src="220px-FH-Stralsund_Wirtschaft_21.jpg"></div>
<div class=nav2> <ul>Bevorstehende Vorträge</ul>
<li>Windows 8 (29.01)</li>
<li>Microcontroller (18.07)</li>
<li>Studierende mit Kindern (13.3)</li>
<li>Bachelorarbeit (28.04)</li>
<li>Vortrag 6 (24.12)</li></div></center>
</div>

Alles anzeigen

theoretisch müsste er doch jetzt son abstand zwischen die div.nav2 machen oder nicht?

Ennosuke · 14. November 2012

Das ist aber ein sehr sehr sehr sehr krudes Markup, also du solltest da erstmal alles in Ordnung bringen und die Elemente für das Nutzen für was sie vorgesehen.
Ein paar Tipps: ul ist eine Liste und darf nur li enthalten. Für Überschriften gibt es die h2-6 Tags

Teilen