|
|||
Formatierung von CSS-Listen
Hallo,
bei meiner Navi kleben die einzelnen List-Elemente etwas komisch zusammen. Allerdings nur sobald ein Eintrag zweizeilig wird. Ich hätte gerne immer den gleichen Abstand zwischen der letzten Zeile des Eintrags und der ersten Zeile des neuen Eintrags. Ausserdem sollten die Punkte (beide Arten) raus, ich weiss aber nicht wie, da sie im CSS-Code gar nicht drin sind! Ich dachte es hätte evtl. mit der anderen Liste zu tun die ich für den content angelegt habe, aber ein rausschmeissen selbigen codes hat leider nix gebracht. So schaut die Seite bislang aus: Projekte - Verein Hilfe zur Selbsthilfe Munyu/Kenia e.V. Hier ist der komplette CSS-Code: Code:
body { background-color: #f1f1f1; font-size: 100%; font-family: Verdana, Arial, Helvetica, Sans-Serif; color:#333333; line-height: 18px; padding:0px; margin:0px; } a {color: #6d1d11; text-decoration:none;} a:visited {color:#6d1d11;} a:hover {font-size: 100%; color:#2a110c; font-weight:bold; } a:active { color:#2a110c; } img.download {vertical-align:middle;} /* ----------container zentriert das layout-------------- */ #container { width: 800px; margin: 20px auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; background: #86351b url(img/content.gif) repeat-y; border: 1px solid #333333; border-color: value; } /* ----------header for logo-------------- */ #header { background: #ccc url(img/header.gif) no-repeat; height: 100px; } /* --------Haupt-Menü oben--------------- */ #menu .menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url('img/menu.png') repeat-x;} .menu li{padding:0; margin:0; list-style:none; display:inline;} .menu li a{float:left; padding-left:30px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url('img/menu.png') 0px -30px no-repeat;} .menu li a span{line-height:30px; float:left; display:block; padding-right:30px; background:url('img/menu.png') 100% -30px repeat-x;} .menu li a:hover{background-position:0px -60px; color:rgb(255,255,255);} .menu li a:hover span{background-position:100% -60px;} .menu li a.active, .menu li a.active:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url('img/menu.png') 0px -90px no-repeat; color:rgb(255,255,255);} .menu li a.active span, .menu li a.active:hover span{background:url('img/menu.png') 100% -90px no-repeat;} /* ----------------Menü links, Liste-------------------- */ #navileft { float: left; width: 200px; margin: 0px; padding: 45px 15px 10px 0px; } .uebernavi { text-align: left; color: #49180a; font-weight:bold; font-size: 80%; padding: 0px 0px 0px 20px; } .uebernavi a:link { color:#6d1d11; text-decoration:none;} .uebernavi a:visited { color:#6d1d11; } .uebernavi a:hover { font-size: 90%; color:#2a110c; font-weight:bold;} .uebernavi a:active { color:#2a110c; text-decoration:none; font-weight:bold;} .navileft li a { display:block; width:140px; height:20px; font-size:70%; text-decoration:none; list-style-type:none; list-style-position:outside; padding: 0px 0px 5px 5px; } .navileft li a:link { color:#6d1d11; text-decoration:none;} .navileft li a:visited { color:#6d1d11; } .navileft li a:hover { font-size: 80%; color:#2a110c; font-weight:bold;} .navileft li a:active { color:#2a110c; text-decoration:none; font-weight:bold;} .navileft_active { color:#2a110c; text-decoration:none; font-weight:bold;} .navileft2 li a { display:block; width:100px; height:20px; font-size:65%; text-decoration:none; list-style-type:none; list-style-position:outside; padding: 0px 0px 5px 5px; } /* -----------------Inhalt--------------------- */ #content { background: #86351b url(img/content.gif) repeat-y; background-color: #ffffff; padding: 30px 30px 30px 10px; margin-left: 200px; margin-right: 0px; margin-bottom: 80px; } p, pre{ padding: 5px 10px; margin:0px; } .h1 { color: #2a110c; font-size: 105%; font-style: bold; padding: 0px 0px 0px 0px; line-height: 12px; padding-top: 10px; padding-bottom: 10px; } .h2 { color: #333333; font-size: 100%; font-style: bold; padding: 0px 0px 0px 10px; line-height: 12px; padding-top: 0px; padding-bottom: 10px; } .h3 { color: #333333; font-size: 90%; font-style: bold; padding: 0px 0px 0px 10px; line-height: 12px; padding-top: 0px; padding-bottom: 10px; } .h4 { color: #333333; font-size: 60%; font-style: bold; padding: 0px 0px 0px 10px; line-height: 12px; padding-top: 0px; padding-bottom: 10px; } .links { color: #3f1d0e; font-size: 11px; font-style: inherit; padding: 10px 10px 10px 5px; line-height: 50px; padding-top: 0px; padding-bottom: 0px; } .fliesstext { text-align: left; color: #2a110c; font-size: 80%; } .picture { background-color: #F9F9F9; font: 10px/1.4em Tahoma, sans-serif; color:#49180a; text-align:center; border: thin silver solid; padding: 1px; float:right; margin: 0px 0px 0px 15px; } .picture-img { border: 1px solid #CCCCCC; vertical-align:middle; margin-bottom: 3px; display:block; } .picture-right { margin: 30px 30px 30px 30px; padding: 2px; float:right; } .text ul { list-style-position:outside; padding: 0px 0px 0px 25px; margin: 0; } .text li { list-style-type:circle; text-align: left; color: #2a110c; font-size: 80%; padding: 0px 0px 5px 0px; } .clear { clear: left; font-size: 1px; line-height: 0; } /* -----------footer--------------------------- */ #footer { text-align: center; font-size: 10px; clear: both; margin: 0px; padding: 0px; } #footer a { color: #999999; } Hier ist der HTML-Code: HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link type="text/css" href="css/style.css" rel="stylesheet" media="screen" /> <title>Projekte - Verein Hilfe zur Selbsthilfe Munyu/Kenia e.V.</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="container"> <div id="header"></div> <div id="menu"> <ul class="menu"> <li><a href="index.html"><span>Home</span></a></li> <li><a href="ueberuns.html"><span>Über uns</span></a></li> <li><a href="projekte.html" class="active"><span>Projekte</span></a></li> <li><a href="service.html"><span>Service</span></a></li> <li><a href="kontakt.html"><span>Kontakt</span></a></li> </ul> </div> <div id="navileft"> <div class="uebernavi">Projekte</div> <ul class="navileft"> <li><a class="navileft_active" href="MMSS.html">Maria Magdalena Special School</a></li> <ul class="navileft2"> <li><a class="navileft" href="MMSS-patenschaften.html">Patenschaften</a></li> <li><a class="navileft" href="MMSS-wasserversorgung.html">Wasserversorgung</a></li> <li><a class="navileft" href="MMSS-werkstatt.html">Werkstatt für Behinderte</a></li> <li><a class="navileft" href="MMSS-huehner.html">Hühnerprojekt</a></li> <li><a class="navileft" href="MMSS-stromversorgung.html">Stromversorgung</a></li> <li><a class="navileft" href="MMSS-maismuehle.html">Maismühle</a></li> </ul> <li><a class="navileft" href="nursery.html">Nursery</a></li> <li><a class="navileft" href="primaryschool.html">Primary School<br/> in Athi</a></li> <li><a class="navileft" href="tailoringschool.html">Tailoring School</a></li> <li><a class="navileft" href="gatuanyaga.html">Gatuanyaga Bewässerung</a></li> </ul> </div> <div id="content"> <p class="h1">Unsere Projekte</p> <br> <div class="picture right" style="width:322px;"> <img src="img/kid01.jpg" width="320" height="206" alt="Welcome"/>Mädchen in Kenia. </div> <p class="fliesstext">Seit der Gründung unseres Vereins im Jahr 2001 arbeiten alle Mitglieder ehrenamtlich.<br /> Die Projekte in Kenia werden gemeinsam mit den Beteiligten entwickelt und diskutiert. Uns ist dabei wichtig, dass die Menschen in Kenia auch einen eigenen Anteil an der Arbeit beisteuern sei es in Form von finanziellen Mitteln oder als Eigenarbeit.<br /> <br /> Beispiel:<br /> Gatuanyaga Bewässerung - St. Mary Drainage<br /> Im Jahr 2001 baten uns Mitglieder der kleinen christlichen Gemeinde Gatuyanyaga um Hilfe beim Ausheben von Gräben. Ihr Ziel war die Errichtung eines Entwässerungsnetzes mit Teichen zur Speicherung von Regenwasser. Von anfänglich geplanten 10 Teichen für alle Beteiligten, veränderte sich die Zielsetzung nach harten Diskussionen auf je einen Teich pro Grundstück, insgesamt 48 Teiche. </p> <p class="fliesstext">Alle Hilfsarbeiten wurden von den Beteiligten durchgeführt. Die Kosten für Material wie Zement und für erforderliche Facharbeiten wir Sprengung des Untergrundes wurden von uns übernommen. </p> <br/> <p class="fliesstext">Der Verein wurde am 24.11.2001 mit 13 Mitgliedern gegründet. Zur Zeit sind bereits über 50 Privatpersonen und Firmen Mitglied.<br /> Die Körperschaft dient ausschließlich gemeinnützigen Zwecken, Spenden sind steuerbegünstigt (Finanzamt Neu-Ulm AZ 111/40429).</p> </div> <div id="footer"><a href="impressum.html">Impressum</a> | ©2008 munyu.com</div> </div> </body> </html> Danke vielmals für eure Antworten!! |
Sponsored Links |
|
|||
Zitat:
Ich verstehe deine Beschreibung aber nicht wirklich. Zitat:
Bitte schau dir nochmal ganz genau an, wie Listen richtig verschachtelt werden. SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Listen
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
Stichwörter |
aufzählungen, css, formatierung, liste |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
"Redundanz" in der CSS Formatierung | bastien | CSS | 6 | 07.12.2007 16:38 |
Formatierung eines links mit CSS | shade37337 | CSS | 12 | 18.11.2006 16:24 |
Mozilla ignoriert externes css | DarkWanderer | CSS | 9 | 22.09.2005 12:39 |
css formatierung in java newsticker | eyetag | CSS | 5 | 11.06.2005 13:40 |
[newbi] css listen gestaltung mit pulldown | gala | CSS | 7 | 28.04.2005 19:42 |