✔ Probleme mit dem Quellcode

Status
Nicht offen für weitere Antworten.
Jan-Frederik Stieler

Jan-Frederik Stieler

Monsterator
Moderator
Hallo,
ich habe in der Seite ein paar Probleme mit denen ich nicht fertig werde. Es wäre nett wenn mir dabei jemand helfen könte?
Also erstmal haben sich alle divs verschoben nachdem ich eine Liste als Menü eingefügt habe.
Dann stehe ich vor dem Problem das sich der Text in dem Menü nicht vertikal mittig positionieren läßt.
Der Abstand der einzelnen li noch vorhanden trotz margin:0px. Aber wenn ich Vertical-align:middle hinzufüge verschwindet der Abstand.

Code: 
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Hella Tarara - travel advice + white tower tours</title>
<meta name="DESCRIPTION" content="Hella Tarara">
<meta name="AUTHOR" content="büro:exit">
<meta name="COPYRIGHT" content="büro:exit">
<meta name="GENERATOR" content="phase 5">
<meta name="ROBOTS" content="all">
<link href="css/basic.css" rel="stylesheet" type="text/css" >
<link href="css/divs.css" rel="stylesheet" type="text/css" >
<link href="css/menue.css" rel="stylesheet" type="text/css" >
</head>
<body>
<!-- container -->
<div id="container">
<!-- Menü -->
<div id="menue">
<ul id="navlist">
<li class="navlistnoactive">Home</li>
<li><a class="navlist" href="#">Leistungen</a></li>
<li><a class="navlist" href="#">White Tower Tours</a></li>
<li></li>
<li><a class="navlist" href="#">Kontakt / Impressum</a></li>
</ul>
</div>
</div>
<!-- travel advice logo -->
<div id="talogo"><img src="pics/talogo.gif" width="132" height="113" border="0" alt=""></div>
<!-- Abtrennung -->
<div id="uebergang"><img src="pics/uebergang.gif" width="62" height="460" border="0" alt=""></div>
<!-- Titel -->
<div id="titel"></div>
<!-- Content -->
<div id="content">dgfffffffffff
</div>
<!-- container ende! -->
</div>
</body>
</html>
DIVS.CSS
Code: 
#container {position:absolute;
            width:750px; left:50%; margin-left:-375px;
            height:460px; top:50%; margin-top:-230px;
            border:1px solid #B56528; z-index:1;}
#menue {position:absolute; background:#2B88D9; height:460px; width:180px; z-index:1; }
#talogo { position:absolute; left:20px; top:20px; height:113px; width:132px; z-index:2;}
#uebergang {position:absolute; left:170px; top:0px; height:460px; width:62px; z-index:3;}
#titel {position:absolute; background:#2B88D9; left:222px; top:30px; height:50px; width:300px; z-index:1;}
#content {position:absolute; overflow:auto; top:130px; left:222px; height:px; width:px; z-index:2;
menue.css
Code: 
ul {position:absolute;
    top:137px;
    left:0px;
    margin:0px;
    padding:0px;
    list-style-type:none;
    z-index:2;}

li {width:180px;
    height:28px;}

.navlistnoactive{background:#B2CCDB;
	      width:180px;
	      height:28px;
        	      margin:0px;
         	      padding:0px 0px 0px 22px;
         	      color:#000000;
         	      text-decoration:none;
         	      font-family: Verdana, sans-serif;
        	      font-size: 12px;}

a.navlist:link, a.navlist:visited{background:#004DA8;
		           width:180px;
		           height:28px;
	       	           margin:0px;
                			 padding:0px 0px 0px 22px;
                			 color:#ffffff;
                			 text-decoration:none;
                			 font-family: Verdana, sans-serif;
                			 font-size: 12px;}

a.navlist:hover, a.navlist:active{background:#B2CCDB;
                                  width:180px;
				 height:28px;
                                  margin:0px;
                 		 padding:0px 0px 0px 22px;
                 		 color:#000000;
                 	 	 text-decoration:none;
                 		 font-family: Verdana, sans-serif;
                 		 font-size: 12px;}

Ich hoffe mir kann jemand helfen.

Viele Grüße
 
In deinem HTML-Source steckt ein </div>, das da nicht hingehört:

Code: 
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Hella Tarara - travel advice + white tower tours</title>
<meta name="DESCRIPTION" content="Hella Tarara">
<meta name="AUTHOR" content="büro:exit">
<meta name="COPYRIGHT" content="büro:exit">
<meta name="GENERATOR" content="phase 5">
<meta name="ROBOTS" content="all">
<link href="css/basic.css" rel="stylesheet" type="text/css" >
<link href="css/divs.css" rel="stylesheet" type="text/css" >
<link href="css/menue.css" rel="stylesheet" type="text/css" >
</head>
<body>
<!-- container -->
<div id="container">
<!-- Menü -->
<div id="menue">
<ul id="navlist">
<li class="navlistnoactive">Home</li>
<li><a class="navlist" href="#">Leistungen</a></li>
<li><a class="navlist" href="#">White Tower Tours</a></li>
<li></li>
<li><a class="navlist" href="#">Kontakt / Impressum</a></li>
</ul>
</div>
</div>

<!-- travel advice logo -->
<div id="talogo"><img src="pics/talogo.gif" width="132" height="113" border="0" alt=""></div>
<!-- Abtrennung -->
<div id="uebergang"><img src="pics/uebergang.gif" width="62" height="460" border="0" alt=""></div>
<!-- Titel -->
<div id="titel"></div>
<!-- Content -->
<div id="content">dgfffffffffff
</div>
<!-- container ende! -->
</div>
</body>
</html>
Um die Links vertikal zu zentrieren, solltest du in der menue.css die height-Eigenschaften in line-height umschreiben - also:

Code: 
li {width:180px;
    line-height:28px;}

.navlistnoactive{background:#B2CCDB;
	      width:180px;
	      line-height:28px;
        	      margin:0px;
         	      padding:0px 0px 0px 22px;
         	      color:#000000;
         	      text-decoration:none;
         	      font-family: Verdana, sans-serif;
        	      font-size: 12px;}

a.navlist:link, a.navlist:visited{background:#004DA8;
		           width:180px;
		           line-height:28px;
	       	           margin:0px;
                			 padding:0px 0px 0px 22px;
                			 color:#ffffff;
                			 text-decoration:none;
                			 font-family: Verdana, sans-serif;
                			 font-size: 12px;}

a.navlist:hover, a.navlist:active{background:#B2CCDB;
                                  width:180px;
				 line-height:28px;
                                  margin:0px;
                 		 padding:0px 0px 0px 22px;
                 		 color:#000000;
                 	 	 text-decoration:none;
                 		 font-family: Verdana, sans-serif;
                 		 font-size: 12px;}


[ editpost ]

Um die unterschiedliche Interpretation des Box-Modells zu berücksichtigen, sollten keine Weiten- und Innenabstand-Angaben für ein Element kombiniert werden.

Der IE und Opera addieren (noch) nicht beide Angaben zusammen, FireFox, Mozilla und Netscape sehr wohl, was in ihnen deine Links 22px über den rechten Menürand verlängert.

Lösung, die padding-Eigenschaft aus den Links entfernen und einem <span>-Element zuordnen:

Code: 
li span {  padding:0px 0px 0px 22px; }
HTML: 
<li class="navlistnoactive"><span>Home</span></li>
<li><a class="navlist" href="#"><span>Leistungen</span></a></li>
<li><a class="navlist" href="#"><span>White Tower Tours</span></a></li>
<li></li>
<li><a class="navlist" href="#"><span>Kontakt / Impressum</span></a></li>
 
Zuletzt bearbeitet von einem Moderator:
Hier nochmal der komplette CSS-Code der menue.css:

Code: 
ul 
{
position:absolute;
top:137px;
left:0px;
margin:0px;
padding:0px;
list-style-type:none;
z-index:2;
}

li 
{
width:180px;
line-height:28px;
}

li span {  padding:0px 0px 0px 22px; }

.navlistnoactive
{
background:#B2CCDB;
width:180px;
line-height:28px;
display: block;
margin:0px;
color:#000000;
text-decoration:none;
font-family: Verdana, sans-serif;
font-size: 12px;
}

a.navlist:link, a.navlist:visited
{
background:#004DA8;
width:180px;
line-height:28px;
display:block;
margin:0px;
color:#ffffff;
text-decoration:none;
font-family: Verdana, sans-serif;
font-size: 12px; 
}

a.navlist:hover, a.navlist:active
{
background:#B2CCDB;
width:180px;
line-height:28px;
display: block;
margin:0px;
color:#000000;
text-decoration:none;
font-family: Verdana, sans-serif;
font-size: 12px; 
}
und der überarbeitete Seitenquelltext:

HTML: 
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Hella Tarara - travel advice + white tower tours</title>
<meta name="DESCRIPTION" content="Hella Tarara">
<meta name="AUTHOR" content="büro:exit">
<meta name="COPYRIGHT" content="büro:exit">
<meta name="GENERATOR" content="phase 5">
<meta name="ROBOTS" content="all">
<link href="css/basic.css" rel="stylesheet" type="text/css">
<link href="css/divs.css" rel="stylesheet" type="text/css">
<link href="css/menue.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- container -->
<div id="container">
<!-- Menü -->
<div id="menue">
<ul id="navlist">
<li class="navlistnoactive"><span>Home</span></li>
<li><a class="navlist" href="#"><span>Leistungen</span></a></li>
<li><a class="navlist" href="#"><span>White Tower Tours</span></a></li>
<li></li>
<li><a class="navlist" href="#"><span>Kontakt / Impressum</span></a></li>
</ul>
</div>

<!-- travel advice logo -->
<div id="talogo"><img src="pics/talogo.gif" width="132" height="113" border="0" alt=""></div>
<!-- Abtrennung -->
<div id="uebergang"><img src="pics/uebergang.gif" width="62" height="460" border="0" alt=""></div>
<!-- Titel -->
<div id="titel"></div>
<!-- Content -->
<div id="content">dgfffffffffff
</div>
<!-- container ende! -->
</div>
</body>
</html>
  • Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 8.01
 
Hi,
oh vielen Dank. Die Arbeit mit dem neuen Quellcode hättest du dir nicht machen brauchen. Deine ausführliche Erklärung hätte schon genügt. Aber trotzdem Danke!

Gruß
 
Zuletzt bearbeitet:
Gern geschehen, wollte die nötigen Änderungen nochmal 'kompakt' zusammenfassen.
 
Dann schau dir bitte noch mal meinen zuletzt geposteten CSS-Code an. Du hast die Eigenschaft display:block nicht übernommen.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück