Hilfe bei Menü-Einbindung - andere Foren können nicht helfen

hijacker

geht um ein menü, das nicht mittig werden will... reagiert nicht auf margin auto...wäre euch so unendlich dankbar wenn ihr mir helfen könnt...

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 http://www.hiphop-sms.com/index.html 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>




<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>








  <div id="bookmarks">
  [URL='http://javascript%3Cb%3E%3C/b%3E:x=document;a=encodeURIComponent%28x.location.href%29;t=encodeURIComponent%28x.title%29;d=encodeURIComponent%28window.getSelection%28%29%29;open%28%27http://www.alltagz.de/bookmarks/?action=add&popup=1&address=%27+a+%27&title=%27+t+%27&description=%27+d,%27alltagz%27,%27modal=1,status=0,scrollbars=1,toolbar=0,resizable=1,width=730,height=465,left=%27+%28screen.width-730%29/2+%27,top=%27+%28screen.height-425%29/2%29;void%200;'][IMG]http://www.alltagz.de/add2alltagz/blog_button.png[/IMG][/URL]
 
    [URL='http://http://www.favoriten.de/url-hinzufuegen.html'][IMG]http://www.favoriten.de/buttons/16x16_3.gif[/IMG][/URL]
 
   [URL='http://http://www.mister-wong.de/add_url/'][IMG]http://www.mister-wong.de/img/buttons/logo16.gif[/IMG][/URL]
     </div>








<div id="impressum">
  [URL='http://hiphop-webmaster-impressum.html']Impressum[/URL]
</div>


  <div id="header">
    [URL='http://index.html']<div id="logo"></div>[/URL]
  </div>


  <div id="all">

      <div id="pro11" style="margin:auto">
        <ul>
[*][URL='http://index.html'][B]<h1>Free SMS</h1>[/B][/URL]
[*][URL='http://rap-radio.html'][B]<h1>Rap-Radio</h1>[/B][/URL]
[*][URL='http://rnb-radio.html'][B]<h1>R&B-Radio</h1>[/B][/URL]
[*][URL='http://rap-news.html'][B]<h1>Hiphop News</h1>[/B][/URL]
[*][URL='http://paid-sms.html'][B]<h1>Paid SMS</h1>[/B][/URL]
[/list]
      </div>
      </div>




 
 
 
<div id="footer2">  
  Copyright bei Hiphop-SMS | Version 0.01 | [URL='http://hiphop-webmaster-impressum.html']Impressum[/URL]


</div>


</BODY>
</HTML>

Alles anzeigen

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;
}

Alles anzeigen

bitte bitte 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)

bin leider ein ziemlicher noob, hab nur grundkenntnisse

synaptic

dein div mit der ID proll sollte ne breite bekommen die dann auch ein margin: 0 auto verträgt!
habs mit margin:0 auto; und width:70% hinbekommen, dass des menü zentriert ist!
und nimm da den shice element-style raus und mach des über das externe stylesheet, is einfacher zu pflegen!

hijackerNICHTEINGELOGGT

hi, habs ausprobiert und wollt mich schon überschwenglich bedanken aber habs nicht hingekriegt. bei 70% ist es bei mir bei 1280x800 nicht exakt mittig (man siehts mit bloßem auge) und auf 1024x768 ist es sowieso ein kuddelmuddel (das eine tab haut ab in die 2. zeile).

kannst du mir eventuell, wenn bei dir diese probleme nicht auftreten per pn oder hier in den thread den code schreiben (css code vorallem) mit dem du des geschafft hast? dafür wäre ich extrem dankbar... bin eh schon dankbar, dass sich überhaupt jmd die mühe gemacht hat das problem genauer annzuschauen.

synaptic

ja dann setz dich mal hin und bring den ausgangszustand wieder zurück...

hijackerNICHTEINGELOGGT

welchen ausgangszustand? habe meinen post oben nicht verändert... (sorry dass ich so dumm frage, bin noob)

synaptic

ich meine den zustand deiner website, da waren grad noch grafiken fürs menü..
und die änderungen die ich gemacht hatte waren getestet via firebug (addon für den FF)

da hab ich alle element-styles weggemacht und eben margin:0 auto; und width:70% eingefügt

hijackerNICHTEINGELOGGT

ah okay danke, ich probiers nochma (und stell sonst den ausgangszustand wieder her), dauert aber wohl bis heut abend bis ich dazu komme...

hijacker

okay hoffe habe den richtigen zustand hergestellt, ist jetzt mit 70% nur funktionierts nicht bei mir... (bei verschiedenen auflösungen sind verschiedenviele dinger in der 2. zeile.. glaub hab jetzt sogar noch nen fehler zusätzl. reingebaut, weil vorher gings wenigstens bei einer der auflösungen (s.o.)... wäre so dankbar... wenns noch nen tipp gäbe... hier nochmal die url: http://www.hiphop-sms.com/index2.html

sejuma

Mal ein paar grundsätzliche Überlegungen, ohne jetzt eine Gesamtlösung parat zu haben:

Wenn du eine Breite von 70% verwendest (oder auch ein beliebiger anderer Prozentwert):
Dann ist doch die Navi je nach Bildschirmbreite ebenfalls immer unterschiedlich breit. Andere Bildschirme --->> andere Navibreiten.
Die Links haben aber eine feste Breite.
Folge: Sie werden immer in unterschiedliche (prozentuale) Gesamtbreiten eingebunden und können so nie richtig zentriert sein oder der prozentuale Platz reicht noch nicht mal aus, um sie nebeneinander darzustellen.

Deshalb folgender Lösungsansatz:
Verwende für die Navi feste Pixelwerte.
Ich hatte in einem anderen Zusammenhang mal was ähnliches gebastelt und da ist etwas Rechenarbeit angesagt:
Zunächst ermittelst du die Anzahl der Links. Diesen gibst du eine bestimmte, einheitliche Pixelbreite. Unter Berücksichtigung von evtl. Border-, Margin- und Paddingwerten ermittelst du die Gesamtbreite der einzelnen Links.
Diese verwendest du für ul. Und ul zentrierst du in dem Navi-Div.

Ich poste hier mal dieses Beispiel, das du dann an deine spezifischen Verhältnisse mit anderen Pixelwerten anpassen müsstest.

CSS:

Code

#navi { 
  width: 898px; 
  height: 1.8em; 
  background-color:#EBECE4; 
  border-left: 1px solid #4D4D4D; 
  border-right: 1px solid #4D4D4D; 
 margin: 0 auto;
} 


#navi ul { 
  width: 605px; 
  margin: 0 auto; 
  list-style-type: none; 
  line-height: 1.8em; 
  text-align: center; 
} 


#navi li { 
  float: left; 
  border-right: 1px solid #4D4D4D; 
} 


#navi a { 
  width: 150px; 
  display: block; 
  text-decoration: none; 
  color: #4D4D4D; 
} 


#navi li a:hover { 
  color: #0000CD; 
  background-color: #C1CDCD; 
}

Alles anzeigen

HTML

Code

<div id="navi"> 
    <ul> 
      <li style="border-left: 1px solid #4D4D4D;">[url='index.html']Home[/url] 
      [*][url='link1.html']Link 1[/url] 
      [*][url='link2.html']Link 2[/url] 
      [*][url='link3.html']Link 3[/url] 
    [/list] 
  </div>

hijacker

DANKE DANKE LEUTE - ICH HABS HINGEKRIEGT DURCH ALLES IN PIXEL ANGEBEN. Ich bin euch so dankbar! - Noch eine Frage: Müsste es nicht auch gehen, wenn ich alles in % angebe, also auch die einzelnen links?

sejuma

Theoretisch ja, kannst es ja einfach mal ausprobieren.
Aber da du nie weißt, wie groß 100% sind, besteht die Gefahr, dass nicht alle Links in eine Reihe passen. Oder anderer Extremfall: dass sie viel zu breit werden.

Tags