Kann Elemente nicht von Anfang bis Ende der Listenbox unterstreichen

netzor · 13.11.2008, 16:11

Hallo liebe CSS'ler,

Also ich möchte jedes Element von der Firstnav-Liste unterstreichen. Das bisherige Ergebnis seht ihr hier. Es wäre furchtbar nett wenn mir jemand hälfe.

Hier der HTML-Code:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> 
<head>
<meta name="content-type" content="text/html;charset=utf-8" />
  
	<title>Alphalayout</title> 

<link rel="shortcut icon" href="bilder/favicon.ico" />
<link href="css/mainstyle.css" rel="stylesheet" type="text/css" />


<meta name="DC.subject" content="+++ Layout +++">
<meta name="robots" content="index, follow" />

</head>
<body>

<div id="wrap1">
	    <ul class="leftBorder">
		    </ul>
		    <ul class="rightBorder">
		    </ul>
		<div id="banner">
			<img src="bilder/banner.jpg" alt=""/>
		</div>
    <div id="content">

	<ul class="sidenav">
	    Test
	    <ul class="firstnav">
			<li><a rel="" href="#">Test</a>
		    <li><a rel="" href="#">Test</a>
		    <li><a rel="" href="#">Test</a>
		    </ul>
		</ul>

		<div id="text">
		Nec, no se quam! aluptam aut adhia etem vidummus as melleciaedolut lii pris er nequo vollautricur. eta patur taquidis oris glore. quersitius, omnibusa quiatio, natus; sici, colegient se sti ne iuceprophram eters etsi potiaturunt. na iis? Albus re.<br />quidis inamus volegant. in ippera eatore vivoluptantrineclibunt ab ipsarionfli ine? Quod quem', reri Grandem et qui atque se eossedo sinut invid magitis iderente, obabus hoc omnin quodo Epientur sa, inction inin siconectatitaturum. Scab Epient vitatine idicitur vensciscien iliam matintere que volec quatio aut hoc.<br /> Quamquam tum vere e ditur sum volorantisse videsquod qua dem Sed anus restinam mei rarudixim sicum si phibus. ullatissent utio prophocrine et enimpe expet. etundistibusa nimusa habos aut fectis mis rem cumerianturucupta.<br />si lesentum ad veserrepreferiben, ut caudium eorem, sendublaerum sta ta eniam, quirtur sit, quent. us, que eniae re estra sum rendascipsublamquimplum sinliuvacieni pus agnon hum vartiamque effilientur neconectimaiuntur venenum miumense exple di sitatur.<br />O phommuntis rerres sus se pret iri. quinquidcilinecent. 'Nonitra cumintem sarem sum dur il a unc detiae necertimuli a diciplerectibus; idariae am am explit dem probersolunt homolvatus infirturat antis.<br />Brum ei nut in aetum mantinec homnegulorempravintur, sa, quod nequis derrent ma mur pora vervitrimi reri le, que non re quon pote vavis cae phocum acumpentium est, noneris, prorerum si nimullartiam nire ipsangant eo sionset Sillicam et audi nomnego esse amus lorum mati antur, mation tent pon etitionsperitoret quosa, inatiducetis.<br />dit firmihi dem sit ereaegeninos lam verente cautota ingeronante nultaturameriscipsivendatoloctestinque dum lor lenistisse estillauscit facuitur, unte ipienditirmanduntus Torbenerum re cont? nerrem dium inem re cus. Iiside esersiconnec sium carunt, quibus:.<br />inam utiae as dolenimullegenandici philius natiora ex nectimatane am, ut imicia sedic atur conis ped atri etem linbeo qua pos do facit Epiritudidentimeri ium retrimotem ex; cuntem suaet de audolupti via iis lego ipsa; seribusamis, co movida ansublaut seque dem. in cabilis Albabearusdenimusquidiurraccet?.Quid anihilic illiisquosse eo aniturumque nos omnecit, nisin que cuptio negenduciendi probis ratu inultibi quoqualenis, ces, tusdamiliiscirebi non eate. Inventur. Non inmo atit ped mellibus sum coreritara ausa feropostast! explius sarumesseti quibus, quaerputentioneque det am estut santquam aborne.<br />porrum torqui mon imet igentione ve estu posse eornepellam ulchi phi de repitur sitandenstior voloque que que pe modivamantiosolludint Antere alorterum no essenis sidit, quirtemordicilorquae mante hicumquost. hompetipsat in dem hum antur? Sciuvivite non opellecit. mandi det evaciam repotur: In Cn. Vestionis se nes autest cultiantia.<br />quod que con eos sum ad eatum ab reffircons, ulto diae firendere. quam sus is et ina fient, experegi, naniquer nonsita ad inacupta pris reperroreni alego quilla put plum corum mo nam rerofferitte mossi.<br />partius ad suctiore saptaquaessetesserum et eo. .' nostem rel, nus mos ravis esquibenditomnem nimo anossequiamunt. te rem ignas que ae iis eo praectamquicur. us et nossequemquaersolupiaeritte.Quid anihilic illiisquosse eo aniturumque nos omnecit, nisin que cuptio negenduciendi probis ratu inultibi quoqualenis, ces, tusdamiliiscirebi non eate. Inventur. Non inmo atit ped mellibus sum coreritara ausa feropostast! explius sarumesseti quibus, quaerputentioneque det am estut santquam aborne.<br />porrum torqui mon imet igentione ve estu posse eornepellam ulchi phi de repitur sitandenstior voloque que que pe modivamantiosolludint Antere alorterum no essenis sidit, quirtemordicilorquae mante hicumquost. hompetipsat in dem hum antur? Sciuvivite non opellecit. mandi det evaciam repotur: In Cn. Vestionis se nes autest cultiantia.<br />quod que con eos sum ad eatum ab reffircons, ulto diae firendere. quam sus is et ina fient, experegi, naniquer nonsita ad inacupta pris reperroreni alego quilla put plum corum mo nam rerofferitte mossi.<br />partius ad suctiore saptaquaessetesserum et eo. .' nostem rel, nus mos ravis esquibenditomnem nimo anossequiamunt. te rem ignas que ae iis eo praectamquicur. us et nossequemquaersolupiaeritte.
		</div>

    </div>
    <div id="footer">
<h3>&copy; by Netzor.de, Peter Majmesku 2008</h3>
</div>
</div>
</body>
</html>

Im Folgenden die CSS-Source:

HTML-Code:

/* Wird benötigt, damit die Box oben keinen Abstand hat. */
* {margin:0; padding:0;}

body {
background-image:url(../bilder/background.gif);
color:#FFF;
font-family:Verdana, sans-serif;
text-align:center;
}

#wrap1 {
font-family:Verdana, sans-serif;
font-size:12px;
height:100%;
margin:0 auto;
padding:0;
width:840px;
padding-top: -10px;
/* Equal Height Columns */
overflow: hidden;
}

ul.leftBorder {
background-image:url(../bilder/chromBgRight.gif);
float:left;
width:20px;
padding-bottom: 9999px;
margin-bottom: -9999px;
}

ul.rightBorder {
background-image:url(../bilder/chromBgLeft.gif);
float:right;
width:20px;
padding-bottom: 9999px;
margin-bottom: -9999px;
}

h3 {
background:#069;
color:#FFF5EE;
font-family:Verdana, sans-serif;
font-size:12px;
margin:0 auto;
padding:0;
width:800px;
}

#content {
background:#FFF;
color:#FFF;
float:left;
height:100%;
width:800px;
overflow: hidden;
margin:0 auto;
margin-left: 20px;
}

#text {
color:#000;
height:100%;
padding-top:10px;
padding-bottom:10px;
width:600px;
padding-left:180px;
padding-right:20px;
}

#footer {
/* Wird benötigt, damit der Footer nicht überdeckt */
clear:both;
/* Wird benötigt, damit die Sidenav unter Safari (Mac)
und Opera 9 keine Probleme bereitet */
width: 100%;
display: block;
position: relative;
}

a:link {
text-decoration:none;
color: black;
}

a:visited {
color:#ff0;
}

ul.sidenav {
background:#737171;
border-right-color:#000;
border-right-style:solid;
border-right-width:1px;
color:#FFF;
float:left;
list-style-type:none;
margin:0;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
text-decoration:none;
width:20%;

padding-bottom: 9999px;
margin-bottom: -9999px;
}

ul.firstnav {
background: #ffffff;
border-bottom: 1px solid #000000;
float:left;
margin:10px 0 0;
padding-bottom:5px;
padding-left:5px;
width:70%;
font-size: 0.9em;
}

#firstnav li a
{
text-decoration: none;
float: left;
border-bottom: 1px solid #000000;
}

#banner {
height:120px;
width:800px;
padding-left: 20px;
padding-right: 20px;
}

a:hover,a:active {
color:red;
}

li.sidenav,li.sidenav a,li.sidenav a:hover {
font-size:1em;
}

li.firstnav,li.firstnav a,li.firstnav a:hover {

font-size: 0.5em;
text-decoration:none;
border-bottom: 1px solid #000000;
}

jayjay · 13.11.2008, 17:27

als vorschlag, du musst aber noch verfeinern:

HTML-Code:

		<div id="sidebar">
			<ul>
				<li>
					<h2>Test</h2>
					<ul>
						<li><a rel="" href="#">Test</a>
						<li><a rel="" href="#">Test</a>
						<li><a rel="" href="#">Test</a>
					</ul>
				</li>
			</ul>
		</div>

Code:

/* Sidebar */
#sidebar {
	background:#737171;
	border-right:#000 solid 1px;
	color:#FFF;
	float:left;
	list-style-type:none;
	margin:0;
	padding:5px 0 5px 5px;
	text-decoration:none;
	width:20%;
	padding-bottom: 9999px;
	margin-bottom: -9999px;
}
#sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#sidebar li {
	margin: 0;
	padding: 0;
}
#sidebar li ul {
	background: #ffffff;
	border-bottom: 1px solid #000000;
	float:left;
	margin:10px 0 0;
	padding-bottom:5px;
	padding-left:5px;
	width:70%;
	font-size: 0.9em;
}
#sidebar li li {
	margin: 0 0 0 0;
	margin: 0 0 0 0;
	line-height: 35px;
	border-bottom: 1px solid #000000;
}
#sidebar h2 {
	margin: 0 0 0 20px; 
	height: 35px;
	font-size: 12px;
}
#sidebar a {
	text-decoration: none;
	display:block;
}
#sidebar a:hover {
	text-decoration: none;
}

jayjay · 13.11.2008, 21:22

wie es aussieht hast du es angepasst, saubääär