 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
GDesigns
Threadersteller
Dabei seit: 26.08.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 26.08.2008 13:21
Titel (CSS) Zentrierung eines Klappmenus |
  |
|
Hallo, ich bin totaler css neuling habt bitte ein bisschen rücksicht auf mich 
Also, ich habe nach einem Tutorial ein Klappmenu erstellt. So jetzt bin ich fast fertig aber ich schaff es nicht die menupunkte mittig in der orangen Menubar auszurichten.
Bitte helft mir. Ich bin schon am verzweifeln.
| Code: |
margin-left: auto;
margin-right: auto;
text-align: center
margin: 0 auto
|
HTML DATEI ink. BILDER ZUM DOWNLOAD
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Klappmenu</title>
<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {behavior: url(csshover.htc); font-size: 100%;}
#menu ul li a {height: 1%;}
}
</style>
<![endif]-->
<style type="text/css">
#menu { width: 100%; background: url(img/img_09.jpg) ; float: left}
#menu ul { list-style: none; margin:0 ; padding: 0; float: left}
#menu a, #menu h2
{ font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
margin:0 ; padding: 0; }
#menu h2 { color: #FF8635; background: #FF9000; text-transform: uppercase; }
#menu a { color: #000; background: #FF9000; text-decoration: none;}
#menu a:hover { color: #a00; background: #fff; }
#menu li {position: relative; }
#menu ul ul { position: absolute; z-index: 500; }
#menu ul ul ul { position: absolute; top: 0; }
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
</style>
<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[i])&&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[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
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[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].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[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('img/rollover_01.jpg','img/rollover_02.jpg','img/rollover_03.jpg','img/rollover_04.jpg','img/rollover_05.jpg','img/rollover_06.jpg','img/rollover_07.jpg','img/rollover_08.jpg')">
<div id="menu">
<ul style="width:103px">
<li><h2><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','img/rollover_01.jpg',1)"><img src="img/img_01.jpg" name="Image1" width="103" height="48" border="0" id="Image1" /></a></h2>
<ul style="width:103px">
<li><a href="#">eins</a></li>
<li><a href="#">zwei ...</a></li>
<li><a href="#">drei ...</a></li>
<li><a href="#">drei b i</a></li>
<li><a href="#">drei b ii</a></li>
<li><a href="#">drei b iii</a></li>
</ul>
</li>
</ul>
<ul style="width:119px">
<li><h2><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','img/rollover_02.jpg',1)"><img src="img/img_02.jpg" name="Image2" width="119" height="48" border="0" id="Image2" /></a></h2>
<ul style="width:119px">
<li><a href="#">eins</a></li>
<li><a href="#">zwei ...</a></li>
<li><a href="#">drei ...</a></li>
<li><a href="#">drei b i</a></li>
<li><a href="#">drei b ii</a></li>
<li><a href="#">drei b iii</a></li>
</ul>
</li>
</ul>
<ul style="width:113px">
<li><h2><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','img/rollover_03.jpg',1)"><img src="img/img_03.jpg" name="Image3" width="113" height="48" border="0" id="Image3" /></a></h2>
<ul style="width:113px">
<li><a href="#">eins</a></li>
<li><a href="#">zwei ...</a></li>
<li><a href="#">drei ...</a></li>
<li><a href="#">drei b i</a></li>
<li><a href="#">drei b ii</a></li>
<li><a href="#">drei b iii</a></li>
</ul>
</li>
</ul>
<ul style="width:106px">
<li><h2><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','img/rollover_04.jpg',1)"><img src="img/img_04.jpg" name="Image4" width="106" height="48" border="0" id="Image4" /></a></h2>
<ul style="width:106px">
<li><a href="#">eins</a></li>
<li><a href="#">zwei ...</a></li>
<li><a href="#">drei ...</a></li>
<li><a href="#">drei b i</a></li>
<li><a href="#">drei b ii</a></li>
<li><a href="#">drei b iii</a></li>
</ul>
</li>
</ul>
<ul style="width:141px">
<li><h2><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','img/rollover_05.jpg',1)"><img src="img/img_05.jpg" name="Image5" width="141" height="48" border="0" id="Image5" /></a></h2>
<ul style="width:141px">
<li><a href="#">eins</a></li>
<li><a href="#">zwei ...</a></li>
<li><a href="#">drei ...</a></li>
<li><a href="#">drei b i</a></li>
<li><a href="#">drei b ii</a></li>
<li><a href="#">drei b iii</a></li>
</ul>
</li>
</ul>
<ul style="width:118px">
<li><h2><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','img/rollover_06.jpg',1)"><img src="img/img_06.jpg" name="Image6" width="118" height="48" border="0" id="Image6" /></a></h2>
<ul style="width:118px">
<li><a href="#">eins</a></li>
<li><a href="#">zwei ...</a></li>
<li><a href="#">drei ...</a></li>
<li><a href="#">drei b i</a></li>
<li><a href="#">drei b ii</a></li>
<li><a href="#">drei b iii</a></li>
</ul>
</li>
</ul>
<ul style="width:115px">
<li><h2><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','img/rollover_07.jpg',1)"><img src="img/img_07.jpg" name="Image7" width="115" height="48" border="0" id="Image7" /></a></h2>
<ul style="width:115px">
<li><a href="#">eins</a></li>
<li><a href="#">zwei ...</a></li>
<li><a href="#">drei ...</a></li>
<li><a href="#">drei b i</a></li>
<li><a href="#">drei b ii</a></li>
<li><a href="#">drei b iii</a></li>
</ul>
</li>
</ul>
<ul style="width:136px">
<li><h2><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','img/rollover_08.jpg',1)"><img src="img/img_08.jpg" name="Image8" width="136" height="48" border="0" id="Image8" /></a></h2>
<ul style="width:136px">
<li><a href="#">eins</a></li>
<li><a href="#">zwei ...</a></li>
<li><a href="#">drei ...</a></li>
<li><a href="#">drei b i</a></li>
<li><a href="#">drei b ii</a></li>
<li><a href="#">drei b iii</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
|
lg
[edit by grunge: verschoben von programmierung nach allgemeines nonprint]
Zuletzt bearbeitet von theGRUNGEone am Di 26.08.2008 19:15, insgesamt 3-mal bearbeitet
|
|
| |
  |
 |
Snifferdog
Dabei seit: 08.03.2007
Ort: Düsseldorf
Alter: 35
Geschlecht: 
|
Verfasst Di 26.08.2008 13:31
Titel
|
|
|
Hi,
also beim schnell drüber gucken sind mir schonmal ein paar Sachen aufgefallen. Vielleicht beheben die ja das Problem.
| Code: |
#menu { width: 100%; background: url(img/img_09.jpg) ; float: left}
#menu ul { list-style: none; margin:0 ; padding: 0; float: left}
// Hier fehlen jeweils die Semikolons am Ende.
|
Dazu ist die ganze CSS Struktur sehr unübersichtlich, weil du alles doppelt und dreifach deklarierst.
Ich persönlich fände es deutlich besser wenn du für soetwas dann mal ne Klasse oder zwei erstellen würdest anstatt solche Sachen wie "#menu ul ul ul"
Mehr kann ich dazu so jetzt nicht sagen, würde vorallem die Semikolons hinzufügen und nochmal probieren und dann mal
die Struktur ordnern. Ein Tipp der mir manchmal hilft, ist einfach z.b. einem Element einen auffälligen Border zuverpassen also z.b. in rot oder so um erstmal zu sehen ob alles an den Stellen sitzt wo es auch sitzen soll.
Gruß
|
|
| |
 |
|
|
Anzeige
|
|
|
Errox
Dabei seit: 04.08.2008
Ort: Braunschweig
Alter: -
Geschlecht:
|
Verfasst Di 26.08.2008 13:36
Titel
|
|
|
Keine Ahnung was für dich mittig ist, aber bei mir sind sie exakt mittig unter dem jeweiligen Button ausgefahren. Ich habe nichts verändert, lediglich deine Dateien gedownloadet. 
|
|
| |
|
|
GDesigns
Threadersteller
Dabei seit: 26.08.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 26.08.2008 14:50
Titel
|
|
|
@Errox: Mit mittig meine ich nicht menu was sich aufklappt, sondern die Menupunktbilder, die momentan linksbündig sind.
@Snifferdog: danke für die info, aber glaube nicht das das mein problem lösen wird.
Zuletzt bearbeitet von GDesigns am Di 26.08.2008 18:30, insgesamt 1-mal bearbeitet
|
|
| |
|
|
GDesigns
Threadersteller
Dabei seit: 26.08.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 26.08.2008 18:29
Titel
|
|
|
|
bitte hat keiner eine idee ? Ich bin total ratlos.
|
|
| |
|
|
Errox
Dabei seit: 04.08.2008
Ort: Braunschweig
Alter: -
Geschlecht:
|
Verfasst Di 26.08.2008 18:54
Titel
|
|
|
Ich habe eben mal ein wenig in deinem Quellcode gewühlt  und in diesem Wald von HTML und CSS eine table gesetzt. Diese hat 3 Spalten und in der 2. habe ich deinen Div-Tag 'menu' eingebettet, der 2. Spalte eine Breite von 951 (die Breite der gesammten Buttons) gegeben. Jetzt ist die Navigation mittig.
HF
|
|
| |
|
|
GDesigns
Threadersteller
Dabei seit: 26.08.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 26.08.2008 18:57
Titel
|
|
|
haha geritzt ^^. Gleich mal probiern.
aber ist nur so durcheinander weil java, css und html in einer datei sind. Werde das, wenn es in das gesammte layout reinkommt natürlich säuberlich trennen 
thx
edit: trotzdem würde mich eine tabellenfreie lösung interessieren
Zuletzt bearbeitet von GDesigns am Di 26.08.2008 18:58, insgesamt 1-mal bearbeitet
|
|
| |
|
|
GDesigns
Threadersteller
Dabei seit: 26.08.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 26.08.2008 19:22
Titel
|
|
|
|
toll im kack IE 5.2 geht das klappmenu wieder mal nicht. Grrrrrrrrrrrrrrrrrrrrrrrrr
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
CSS und zentrierung von z-index
DIV Sichtbarkeit / Zentrierung
(BARRIEREFREIHEIT) SWF zentrierung in HTML
XHTML und CSS, Zentrierung und Positionierung?
Problem bei Zentrierung eines DIV-Tags
Wieso funktioniert die Zentrierung der Div´s nicht :(
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
