• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

bitte um hilfe bei meinem CSS Drop Down Menue (Zentrieren?)

M

ModelWizko

Guest
das ganze habe ich einmal hier als rar datei gepackt
http://www.wizko.de/CSSDropDownMenue.rar

schaut euch die datei bitte kurz an brauch mal eure hilfe!
und zwar geht es darum ich möchte das ganze dynamisch zentrieren und nicht auf der linken seite.
ich versuche seit 2 tage das hinzubekommen klappt nur nicht wäre echt nett von euch wenn sich die sache mal einer anehmen könnte DANKE im voraus !!!
...wizko
 
Werbung:
Warum lädst du die Seite nicht auf einen Webserver, so dass sie sich jeder ansehen kann? Jetzt müsste sich jeder das Archiv runterladen und selbst auf einen Server laden um dir zu helfen, das werden die Wenigsten machen.

Ohne jetzt in dein Archiv geschaut zu haben kann ich dir sagen, dass man ein Menü wie folgt zentriert.
HTML: 
<ul>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
</ul>
Code: 
ul {width: 15em; margin: 0 auto;}
Die Breite ist hier nur ein Beispiel und kann natürlich an die eigenen Bedürfnisse angepasst werden.
 
ohh danke dir für deine schnelle rückmeldung
das problem ist es ist mit div wie geht das?
 
Werbung:
Auch ein div lässt sich so zentrieren. Ein Menü ist allerdings eine Liste von Links, da hat ein div normalerweise nichts zu suchen.
 
irgendwie bekomme ich es noch nicht hin ?
hier mal der quelltext der seite was muß ich da wie anders machen sorry aber ich bin
echt überfordert ..wizko


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="XHTML namespace" xml:lang="en" lang="en">
<head>
<title>CSS DropDown Menue ohne JavaScript</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link type='text/css' rel='stylesheet' href='../WizkoHP/style.css' />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<link href="style2.css" rel="stylesheet" type="text/css" />
</head>
<body BGCOLOR="#" onload="MM_preloadImages('../WizkoHP/back_over.png')">
<!-- ###### Start Menue ###### -->
<div class="center">
<!-- Start Kat 1 -->
<div class="menu"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','../WizkoHP/back_over.png',1)"><img src="../WizkoHP/back.png" alt="" name="Image1" width="66" height="17" border="0" id="Image1" /></a>
<div class="menu_sub">
<div><a href="#">linkl</a></div>
<div><a href="#">link2</a></div>
<div><a href="#">link3</a></div>
<div><a href="#">link4</a></div>
</div>
</div>
<!-- Start Kat 2 -->
<div class="menu"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','../WizkoHP/back_over.png',1)"><img src="../WizkoHP/back.png" name="Image2" width="66" height="17" border="0" id="Image2" /></a>
<div class="menu_sub">
<div><a href="#">linkl</a></div>
<div><a href="#">link2</a></div>
<div><a href="#">link3</a></div>
<div><a href="#">link4</a></div>
</div></div>
<!-- Start Kat 3 -->
<div class="menu"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','../WizkoHP/back_over.png',1)"><img src="../WizkoHP/back.png" name="Image3" width="66" height="17" border="0" id="Image3" /></a>
<div class="menu_sub">
<div><a href="#">linkl</a></div>
<div><a href="#">link2</a></div>
<div><a href="#">link3</a></div>
<div><a href="#">link4</a></div>
</div></div>
<!-- Start Kat 4 -->
<div class="menu"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image41','','../WizkoHP/back_over.png',1)"><img src="../WizkoHP/back.png" alt="" name="Image41" width="66" height="17" border="0" id="Image41" /></a>
<div class="menu_sub">
<div><a href="#">linkl</a></div>
<div><a href="#">link2</a></div>
<div><a href="#">link3</a></div>
<div><a href="#">link4</a></div>
</div>
</div>
<!-- Start Kat 5 -->
<div class="menu"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image42','','../WizkoHP/back_over.png',1)"><img src="../WizkoHP/back.png" alt="" name="Image42" width="66" height="17" border="0" id="Image42" /></a>
<div class="menu_sub">
<div><a href="#">linkl</a></div>
<div><a href="#">link2</a></div>
<div><a href="#">link3</a></div>
<div><a href="#">link4</a></div>
</div>
</div>
<!-- Start Kat 6 -->
<div class="menu"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image43','','../WizkoHP/back_over.png',1)"><img src="../WizkoHP/back.png" alt="" name="Image43" width="66" height="17" border="0" id="Image43" /></a>
<div class="menu_sub">
<div><a href="#">linkl</a></div>
<div><a href="#">link2</a></div>
<div><a href="#">link3</a></div>
<div><a href="#">link4</a></div>
</div>
</div>
<!-- Start Kat 7 -->
<div class="menu"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image44','','../WizkoHP/back_over.png',1)"><img src="../WizkoHP/back.png" alt="" name="Image44" width="66" height="17" border="0" id="Image44" /></a>
<div class="menu_sub">
<div><a href="#">linkl</a></div>
<div><a href="#">link2</a></div>
<div><a href="#">link3</a></div>
<div><a href="#">link4</a></div>
</div>
</div>
</div>
<!-- ###### Ende Menue ###### -->
</body>
</html>
 
Ach ja, der Dreamweaver hat noch nie ordentlichen Code generiert... und verwendet dazu noch unnötiger Weise JavaScript für Dinge, die auch mit CSS funktionieren würden.

So wie das aussieht musst du in dem Beispiel welches ich oben geschrieben habe im CSS das ul durch div.menu ersetzen. Vorausgesetzt, in der CSS-Datei steht nichts, was diese Formatierung wieder aufhebt.

Mein Tipp, lerne HTML und CSS (Einführung | Webdesign mit XHTML und CSS) und verzichte auf Dreamweaver und ähnliche Generatoren.
 
Werbung:
ja ich gebe dir da recht dreamweaver ist wirklich nicht so gut hmm
mist ich kriege das denoch nicht gebacken vor lauter wärme
eventuel liegt es auch daran das ich hundemüde bin dieses problem beschäftigt mich schon seit letzter nacht
kannst du mir das im quelltext schreiben? wäre dir sehr dankbar
 
Hmm, andere das einfach machen zu lassen, das ist so eine Sache. Weißt du, bei uns ist es schließlich auch warm...
 
ich würde es ja gerne machen wenn ich es verstehen würde wie es geht? :?
 
Werbung:
Tja dann müsste mensch ja mal googlen und sich ein bisschen engagieren anstatt auf eine fertige Lösung zu warten ;-)

OK also du musst ein Stylesheet in deinen Code einfügen. Mache das VOR der </head>-zeile:
HTML: 
<style type="text/css">
.menu {
    width: 15em;
    margin: 0 auto;
}
</style>

Gruß
Jens
 
die unterlinks vom menü verschieben sich jetzt nach rechts?
habe ich da ein fehler gemacht die sollen eigentlich untereinander
 
Hallo, jo also das müsste klappen. Füge am Ende deiner CSS-Datei Folgendes hinzu:
Code: 
.center {
    width: 700px;
    position: absolute;
    left: 50%;
    margin-left: -350px;
}
Das ist nicht sooo sauber, weil du mit absoluten Breiten arbeiten musst. Die 700px sind die Breite deines Menüs, und die 350px logischerweise die Hälfte. ich denke das klappt bei dir ganz gut weil du ja sowieso Grafiken verwendest.

Gruß
Jens
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben