zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Formatierung von CSS-Listen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.03.2009, 14:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.03.2009
Beiträge: 2
chrismich befindet sich auf einem aufstrebenden Ast
Frage 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> | &copy;2008 munyu.com</div>

</div>


</body>
</html>

Danke vielmals für eure Antworten!!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.03.2009, 14:36
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von chrismich Beitrag anzeigen
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.
Vermutlich löst das Entfernen der festen Höhenangabe der Links dein Problem.
Ich verstehe deine Beschreibung aber nicht wirklich.

Zitat:
Ausserdem sollten die Punkte (beide Arten) raus, ich weiss aber nicht wie, da sie im CSS-Code gar nicht drin sind!
Die Browser verwenden standardmäßig Aufzählungszeichen. Wenn du sie nicht willst, musst du sie entfernen.

Bitte schau dir nochmal ganz genau an, wie Listen richtig verschachtelt werden.
SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Listen
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.03.2009, 15:07
Benutzer
neuer user
 
Registriert seit: 19.02.2009
Beiträge: 50
manhunter__ befindet sich auf einem aufstrebenden Ast
Standard

die Aufzählungszeichen kannst du mittels list-style-type: none im li-tag und nicht im a-tag entfernen.
Mit Zitat antworten
  #4 (permalink)  
Alt 17.03.2009, 15:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.03.2009
Beiträge: 2
chrismich befindet sich auf einem aufstrebenden Ast
Standard

Beide Probleme sind gelöst!

Vielen Dank!!!
Mit Zitat antworten
Antwort

Stichwörter
aufzählungen, css, formatierung, liste

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:55 Uhr.