Menüproblem die 2., DRINGEND HILFE Gesucht, verzweifelt

PeterAssmann · 7 Juli 2008

Also bitte schaut euch mal genau den Code an, ich habe die ganze Seite auseinandergebaut damit man alles einfach anschauen kann, vllt. findet ihr ja meinen Fehler, warum das verdammte Menü auf dieser Seite einfacher nicht mittig werden will.

das hier ist der komplette html code der unterseite, um die es geht:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML>
<HEAD>
<TITLE>Free-SMS für die Hiphop-Community: Hiphop-SMS.com | Home</TITLE>

<!-- Metadata generated by hiphop-sms -->
<META NAME="description" content="Free-SMS Dienst für die Hiphop Community. Außerdem gibt's ein Rap Radio, Rnb Radio, Hiphop Radio sowie eine topaktuelle Hiphop-News Seite.">
<META NAME="keywords" content="hiphop-sms, free-sms, free, sms, freesms, freisms, hiphop, rap radio, rap-radio, hiphop radio, rnb radio, r&b radio, rap, rnb, r'n'b, rap news, rap-news, hiphop news, hiphopper, kostenlos, gratis, frei, sms-versand, smsversand, versand, frei-sms, kostenlose sms, news">
<META NAME="Content-Language" content="de">
<META NAME="author" content="Björn Assmann">
<META NAME="ROBOTS" CONTENT="INDEX, FOLLOW">
<meta name="robots" content="all">
<meta name="revisit-after" content="5 days" />
<meta name="distribution" content="global">
<meta name="language" content="de">
<meta name="verify-v1" content="9DAGfZ1tci4sEJRT9MaPHojcOyyhm5vLjBLGhu6omkA=" />
<link rel="stylesheet" type="text/css" href="style.css">
<!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="lt_ie7.css">
<![endif]-->
<link rel="icon" type="image/ico" href="fav.ico" />

<script language="JavaScript1.2">
var bookmarkurl="http://www.hiphop-sms.com"
var bookmarktitle="Hiphop-SMS.com - FREE SMS für alle"
function addbookmark(){
if (document.all)
window.external.AddFavorite(bookmarkurl,bookmarktitle)
}

s2i_uid = 38;
</script>
</HEAD>
<BODY>


<!-- Bookmarks START -->

  <div id="bookmarks">
  <a href="javascript:x=document;a=encodeURIComponent(x.location.href);t=encodeURIComponent(x.title);d=encodeURIComponent(window.getSelection());open('http://www.alltagz.de/bookmarks/?action=add&popup=1&address='+a+'&title='+t+'&description='+d,'alltagz','modal=1,status=0,scrollbars=1,toolbar=0,resizable=1,width=730,height=465,left='+(screen.width-730)/2+',top='+(screen.height-425)/2);void 0;"><img src="http://www.alltagz.de/add2alltagz/blog_button.png" title="Die Seite bei AllTagz adden" border=0 /></a><br>
    <a href="http://www.favoriten.de/url-hinzufuegen.html" onClick="location.href=&quot;http://www.favoriten.de/url-hinzufuegen.html?bm_url=&quot;+encodeURIComponent(location.href)+&quot;&amp;bm_title=&quot;+encodeURIComponent(document.title);return false" title="Diese Seite bei Favoriten.de adden" target="_top"><img src="http://www.favoriten.de/buttons/16x16_3.gif" alt="Diese Seite zu Favoriten.de hinzuf&uuml;gen" border="0"></a><br>
   <a href="http://www.mister-wong.de/add_url/" onClick="location.href=&quot;http://www.mister-wong.de/index.php?action=addurl&bm_url=&quot;+encodeURIComponent(location.href)+&quot;&bm_description=&quot;+encodeURIComponent(document.title)+&quot;&quot;;return false" title="Die Seite bei Mister-Wong adden" target="_top"><img src="http://www.mister-wong.de/img/buttons/logo16.gif" alt="Diese Seite zu Mister Wong hinzufügen" border="0"></a>
     </div>

<!-- Bookmarks ENDE -->


<div id="impressum">
  <a class="white" href="hiphop-webmaster-impressum.html">Impressum</a>
</div>

  <div id="header">
    <a href="index.html"><div id="logo"></div></a>
  </div>

  <div id="all">
   
      <div id="pro11" style="margin:auto">
        <ul>
      <li><a href="index.html"><b><h1>Free SMS</h1></b></a></li>
      <li><a href="rap-radio.html"><b><h1>Rap-Radio</h1></b></a></li>
      <li><a href="rnb-radio.html"><b><h1>R&B-Radio</h1></b></a></li>
      <li><a href="rap-news.html"><b><h1>Hiphop News</h1></b></a></li>
      <li><a href="paid-sms.html"><b><h1>Paid SMS</h1></b></a></li>
         </ul>
      </div>
      </div>
<br><br>


<div id="footer2">  
  Copyright bei Hiphop-SMS | Version 0.01 | <a class="white" href="hiphop-webmaster-impressum.html">Impressum</a>

</div>

</BODY>
</HTML>

und hier das komplette domain style sheet, die relevanten tags sind ganz oben (body) und ganz unten (ul pro11):

Code:

body {
background : url(hintergrund.png);
background-repeat : no-repeat;
background-color : #000000;
margin-top : 0;
margin-bottom : 0;
font-family : Arial;
font-size : 12px;
text-align : center;
}
a:link {
color : #000000;
text-decoration : underline;
}
a:visited {
color : #000000;
text-decoration : underline;
}
a:hover {
color : #cd0000;
text-decoration : underline;
}
a:active {
color : #cd0000;
text-decoration : underline;
}
a:focus {
color : #cd0000;
text-decoration : underline;
}
.white:link {
color : #ffffff;
text-decoration : none;
}
.white:visited {
color : #ffffff;
text-decoration : none;
}
.white:hover {
color : #cd0000;
text-decoration : underline;
}
.white:active {
color : #cd0000;
text-decoration : underline;
}
.white:focus {
color : #cd0000;
text-decoration : underline;
}
h1 {
font-size : 14px;
font-weight : bold;
text-align : center;
}
#logo {
width : 463px;
height : 58px;
margin : auto;
border : 0 solid;
background-image : url(logo.png);
}
#counter {
visibility : hidden;
}
#impressum {
position : fixed;
right : 15px;
top : 10px;
}
#header {
text-align : center;
margin-top : 30px;
margin-bottom : 20px;
}
#all {
background-color : #ffffff;
width : 80%;
border-width : 0;
text-align : center;
margin : auto;
}
#main {
text-align : left;
margin-left : 20px;
margin-right : 20px;
margin-top : 0;
margin-bottom : 20px;
}
.navlist ul {
margin-left : 0;
padding-left : 0;
white-space : nowrap;
}
.navlist li {
display : inline;
list-style-type : none;
}
.navlist a {
padding : 3px 10px;
}
.navlist a:link, .navlist a:visited {
color : #ffffff;
background-color : #000000;
text-decoration : none;
}
.navlist a:hover {
color : #ffffff;
background-color : #cd0000;
text-decoration : none;
}
* {
margin : 0;
padding : 0;
}
#divs_nebeneinander {
min-height : 1%;
}
* html #divs_nebeneinander {
height : 1%;
}
#div1 {
width : 20%;
float : left;
text-align : right;
}
#div2 {
background-color : #cd0000;
width : 60%;
float : left;
text-align : center;
}
#div2unten {
height : 228px;
margin : 15px;
font-weight : bold;
text-align : left;
}
#div3 {
width : 20%;
float : left;
text-align : left;
}
.clear {
clear : both;
}
#footer {
margin-top : 30px;
margin-bottom : 0;
text-align : center;
}
#footer2 {
margin-top : 20px;
margin-bottom : 20px;
color : #ffffff;
}
.rss_box {
margin : 1em;
width : 350px;
background-color : #663333;
border : 0 solid #5f74cc;
}
p.rss_title {
padding : 0.5em;
}
.rss_title {
text-decoration : none;
font-family : verdana, sans-serif;
font-size : 85%;
background-color : #3399cc;
color : #ffffff;
font-weight : bold;
margin : 1px;
padding : 0;
text-align : left;
}
.rss_item {
color : #ffffff;
font-family : verdana, arial, sans-serif;
font-size : 0.85em;
font-weight : normal;
list-style : none;
padding-bottom : 1em;
}
.rss_item a {
color : #ffffff;
font-size : 105%;
font-weight : bold;
font-family : arial, sans-serif;
}
.rss_item a:visited {
color : #cd0000;
}
.rss_date {
font-size : 85%;
font-weight : normal;
color : #ffffff;
}
table.lfmWidgetradio_40984b0256707945e6cdbddcf5bced5d td {
margin : 0 !important ;
padding : 0 !important ;
border : 0 !important ;
}
table.lfmWidgetradio_40984b0256707945e6cdbddcf5bced5d tr.lfmHead a:hover {
background : url(http://cdn.last.fm/widgets/images/de/header/radio/regular_black.png) no-repeat 0 0 !important ;
}
table.lfmWidgetradio_40984b0256707945e6cdbddcf5bced5d tr.lfmEmbed object {
float : left;
}
table.lfmWidgetradio_40984b0256707945e6cdbddcf5bced5d tr.lfmFoot td.lfmConfig a:hover {
background : url(http://cdn.last.fm/widgets/images/de/footer/black_np.png) no-repeat 0 0 !important ;
}
table.lfmWidgetradio_40984b0256707945e6cdbddcf5bced5d tr.lfmFoot td.lfmView a:hover {
background : url(http://cdn.last.fm/widgets/images/de/footer/black_np.png) no-repeat -85px 0 !important ;
}
table.lfmWidgetradio_40984b0256707945e6cdbddcf5bced5d tr.lfmFoot td.lfmPopup a:hover {
background : url(http://cdn.last.fm/widgets/images/de/footer/black_np.png) no-repeat -159px 0 !important ;
}
#bookmarks {
background-color : #000000;
position : fixed;
left : 10px;
top : 10px;
padding : 5px;
border : 1px solid;
border-color : #cc0000;
}
#pro11 ul {
margin: 0 auto;
padding : 0;
list-style : none;
white-space : nowrap;
list-style : none;
height : 35px;
position : relative;
background : #fff;
font-size : 11px;
}
#pro11 li {
margin : 0 1px 0 0;
padding : 0;
float : left;
}
#pro11 li a {
display : block;
float : left;
height : 35px;
line-height : 20px;
color : #ddd;
text-decoration : none;
font-family : arial, verdana, sans-serif;
font-weight : bold;
text-align : center;
padding : 0 0 0 10px;
cursor : pointer;
background : url(pro_11_0a.gif) no-repeat;
}
#pro11 li a b {
float : left;
display : block;
padding : 0 25px 15px 15px;
background : url(pro_11_0b.gif) no-repeat right top;
}
#pro11 li.current a {
color : #fff;
background : url(pro_11_2a.gif) no-repeat;
line-height : 23px;
}
#pro11 li.current a b {
background : url(pro_11_2b.gif) no-repeat right top;
padding-bottom : 12px;
}
#pro11 li a:hover {
color : #fff;
background : url(pro_11_1a.gif) no-repeat;
line-height : 23px;
}
#pro11 li a:hover b {
background : url(pro_11_1b.gif) no-repeat right top;
padding-bottom : 12px;
}
#pro11 li.current a:hover {
color : #fff;
background : url(pro_11_2a.gif) no-repeat;
cursor : default;
}
#pro11 li.current a:hover b {
background : url(pro_11_2b.gif) no-repeat right top;
}

bitte tut mir den gefallen, und schaut euch mal den code an, was falsch ist, ich versteh es nicht und ein hinweis auf den html/css validator helfen mir auch nicht weiter (zumal das css hab ich grad letzt erst validiert)

Efchen · 8 Juli 2008

PeterAssmann schrieb:
Also bitte schaut euch mal genau den Code an, ich habe die ganze Seite auseinandergebaut damit man alles einfach anschauen kann, vllt. findet ihr ja meinen Fehler, warum das verdammte Menü auf dieser Seite einfacher nicht mittig werden will.

Wie man in Deinem Code ganz deutlich sehen kann, ist das Menü mittig. Firebug wird Dir das sicher gern bestätigen.

Block-Elemente sind immer so breit, wie das Elternelement, also 100%. 100% breite Elemente sind zwangsläufig auch immer zentriert, denn sie nehmen ja bereits die gesamte, zur Verfügung stehende Breite, ein.

Übrigens ist der Code noch leicht haarsträubend. div-Suppe, ein Element, das sich "header" nennt, aber keine Überschrift ist, ein Logo, das einen text enthält, aber per CSS eingefügt ist und im HTML-Code keinen Inhalt und ein inhaltsleeren Link hinterlässt, Links, die Überschriften sind, was schon syntaktisch nicht möglich ist (Block-Element innerhalb eines Inline-Elements) und Elemente, die Layout machen und in HTML deprecated sind (<b>).

Gruß,
-Efchen

Menüproblem die 2., DRINGEND HILFE Gesucht, verzweifelt

PeterAssmann

Gesperrt

Efchen

Guest

Neueste Beiträge