Positionierung Navigation

Quickline · #1 (**permalink**) 03.10.2009, 15:20

Hallo, ich verusche eine Navigation die ich mit Taco HTML erstellt habe zu zentrieren.
Ich habe mich im CSS Code den er mir erstellt hat umgeschaut und denke das ich mit dem hier die Positionierung beeinflussen kann.

Zitat:

* List items in main menu --[for non-javascript users this applies to submenus as well] */
#myNavigationMenu li {
/*great place to use a background image as a divider*/
display:block;
list-style:none;
position:relative;
float:left;

Ich habe versucht bei float center einzusetzen. Es wird zwar zentriert aber die einzelen Bereieche der Navi (Home)(Fotos) usw. nehmen die ganze Bildschirmbreite und werden mit einer riesigen breite untereinander gelistet.

Wie kann ich machen das er mir nur die Navi zentriert und nich die eigentliche Navi Grösse verändert?

Hier der ganze CSS Code und HTML Code.

CSS

Zitat:

/* Based partially on Matthew Carroll's keyboard accessible flavor of Suckerfish
* Dropdowns by Patrick Griffiths and Dan Webb.
* Suckerfish Dropdowns - Two Level Bones - Keyboard Accessible
*/
/* ----[ LINKS ]----*/
/* all menu links */
#myNavigationMenu a, #myNavigationMenu_menuContainer a{
text-decoration:none;
display:block;
float:center;
position:middle;
}
/* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
#myNavigationMenu a{
margin: 0;
float: center;
color: #fdf6f9;
font-family: "Trebuchet MS";
font-size: 16.0px;
padding: 10px 22px 10px 22px;
background-color: #070807;
float:center;
position:middle;
}
#myNavigationMenu li+li a {
border-left: 1px solid #ffffff;
float:center;
position:middle;
}
/* Just sub menu links */
#myNavigationMenu_menuContainer a, #myNavigationMenu li li a{
text-align:center;
color: #f5fff2;
padding: 10px 20px 10px 10px;
background-color: #050505;
float:center;
position:middle;
}
#myNavigationMenu_menuContainer li+li a, #myNavigationMenu li li+li a{
border-top: 1px solid #eeeeee;
float:center;
position:middle;
}
/* Main menu links on hover or focus */
#myNavigationMenu a:hover, #myNavigationMenu a:focus, #myNavigationMenu a.mainMenuParentBtnFocused {
color: #000000;
background-color: #fdfff5;
float:center;
position:middle;
}
/* Sub menu links on hover or focus */
#myNavigationMenu_menuContainer a:hover, #myNavigationMenu_menuContainer a:focus, #myNavigationMenu_menuContainer a.subMenuParentBtnFocused{
color: #000000;
background-color: #fbffff;
float:center;
position:middle;
}
/* Parent Sub Menu Links ---[javascript users only]*/
#myNavigationMenu_menuContainer .subMenuParentBtn {
background: url('../Images/TSWNavigationMenuArrowSubRight_F5FF00.png');
background-position: right center;
background-repeat: no-repeat;
float:center;
position:middle;
}
/* Parent Sub Menu Links on hover or focus ---[javascript users only]*/
#myNavigationMenu_menuContainer .subMenuParentBtnFocused {
background: url('../Images/TSWNavigationMenuArrowSubRightHover_EEFFEE.png');
background-position: right center;
background-repeat: no-repeat;
float:center;
position:middle;
}
/* Parent Main Menu Links ---[javascript users only]*/
#myNavigationMenu .mainMenuParentBtn {
background-image: url('../Images/TSWNavigationMenuArrowDown_F9FC02.png');
background-position: right center;
background-repeat: no-repeat;
float:center;
position:middle;
}
/* Parent Main Menu Links on hover or focus ---[javascript users only]*/
#myNavigationMenu .mainMenuParentBtnFocused {
background-image: url('../Images/TSWNavigationMenuArrowDownHover_000000.png');
background-position: right center;
background-repeat: no-repeat;
float:center;
position:middle;
}
/* ----[ OLs ULs, LIs, and DIVs ]----*/
/* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */
.smOW{
display:none;
position: absolute;
overflow:hidden;
/*the 2px left and right padding lets you have a 1px border
on the ul or ol inside since overflow is set to hidden*/
padding:0 2px;
margin:0 0 0 -2px;
float:center;
position:middle;
}
/* All ULs and OLs */
#myNavigationMenu, #myNavigationMenu ul, #myNavigationMenu ol, #myNavigationMenu_menuContainer ul, #myNavigationMenu_menuContainer ol {
padding: 0;
margin: 0;
list-style: none;
line-height: 1.5em;
float:center;
position:middle;
}
/* All submenu OLs and ULs */
#myNavigationMenu ol, #myNavigationMenu ul, #myNavigationMenu_menuContainer ul, #myNavigationMenu_menuContainer ol {
/*border around submenu goes here*/
border:1px solid #000000;
left:0;
float:center;
position:middle;
}
/* List items in main menu --[for non-javascript users this applies to submenus as well] */
#myNavigationMenu li {
/*great place to use a background image as a divider*/
display:block;
list-style:none;
position:relative;
float:left;

}
#myNavigationMenu_menuContainer li{
list-style: none;
}
/* main menu ul or ol elment */
#myNavigationMenu{
display:block;
list-style:none;
margin:0 0 0 0;
z-index:5;
text-align: center;

}
#myNavigationMenu_menuContainer{ display:block; position:absolute; top:0; left:0; width:100%; height:0; overflow:visible; z-index:1000000000; }
/* --------------------------[ The below is just for non-javscript users ]--------------------------*/
#myNavigationMenu li li {
float:center;
}
#myNavigationMenu li li a{ /* Just submenu links*/
position:center;
float:none;

}
#myNavigationMenu li ul { /* second-level lists */
position: absolute;
width: 10em;
margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
margin-top:2.2em;
}
/* third-and-above-level lists */
#myNavigationMenu li ul ul { margin: -1em 0 0 -1000em; }
#myNavigationMenu li:hover ul ul { margin-left: -1000em; }
/* lists nested under hovered list items */
#myNavigationMenu li:hover ul{ margin-left: 0; }
#myNavigationMenu li li:hover ul { margin-left: 10em; margin-top:-2.5em;}
/* extra positioning rules for limited noscript keyboard accessibility */
#myNavigationMenu li a:focus + ul { margin-left: 0; margin-top:2.2em; }
#myNavigationMenu li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;}
#myNavigationMenu li li a:focus {left:0; margin-left:1000em; width:10em; margin-top:0;}
#myNavigationMenu li li li a:focus {left:0; margin-left: 2010em; width: 10em; margin-top:-1em;}
#myNavigationMenu li:hover a:focus{ margin-left: 0; }
#myNavigationMenu li li:hover a:focus + ul { margin-left: 10em; }
#myNavigationMenu ul, #myNavigationMenu ol { z-index: 1000000000; }

HTML

Zitat:

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

<head>
<title></title>
<script type="text/javascript" src="TacoComponents/MooTools/mootools.js"></script>
<script type="text/javascript" src="TacoComponents/MenuMatic/MenuMatic.js"></script>
<link rel="stylesheet" type="text/css" href="TacoComponents/MenuMatic/MenuMatic_myNavigationMenu.css" />

</head>
<body>

<div align="center"> <img style="border-width: 0px; " src="../../../Applications/Taco%20HTML%20Edit.app/Contents/Resources/Components/Shared/DefaultImages/Sunset1.jpg" width="1024" height="100" />

<ul id="myNavigationMenu">
<li><a href="#">Home</a></li>
<li><a href="#">Fotos</a>
<ul>
<li><a href="#">Ballett</a></li>
<li><a href="#">Mode</a></li>
<li><a href="#">Freizeit</a></li>
</ul>
</li>
<li><a href="#">About me</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Links</a></li>
</ul>

<script type="text/javascript" >
window.addEvent('load', function() {
var myMenu = new MenuMatic({
id: 'myNavigationMenu',
subMenusContainerId: 'myNavigationMenu_menuContainer',
effect: 'slide & fade',
duration: 800,
hideDelay: 1000,
opacity: 100});

});
</script>



</div>
</body>
</html>

mfg Quickline

XImbericle · #2 (**permalink**) 04.10.2009, 13:54

Also mit float:center; zu positionieren, ist doof, und float bezweckt auch nicht die Ausrichtung, sondern das Umfließen.

Elemente positioniert man waagrecht mit

Code:

deinElement
{
margin:0px auto;
}

und senkrecht mit

Code:

deinElement
{
margin: auto 0px;
}

Erklärung: Margin bedeutet Außenabstand, quasi n durchsichtiger Schutzmantel in nem gewissen Abstand mit denen er sich andere Elemente vom Leibe hält und notfalls das Element das er einhüllt verschiebt.

Wenn du bei margin 2 Angaben machst, ist die erste für oben und unten die Zweite für links und rechts, bei auto berechnet er sich den verfügbaren platz und setzt die abstände so, dass sich das Element zetriert.
Genauso ist es mit senkrechtem zentrieren.

Weiteres lese hier: http://www.css4you.de/margin.html

MfG

Quickline · #3 (**permalink**) 04.10.2009, 19:07

Hm..klappt leider nicht naja...geht wohl gar nicht,

EvT · #4 (**permalink**) 04.10.2009, 22:33

float:center, position:middle, position:center usw. Falls Taco HTML-Editor diesen Code generiert hat, dann zieh dieses Teil so schnell es geht in den Papierkorb.

Ansonsten schau in unsere FAQ. Dort sind ab Punkt 10 alle möglichen Linkmenüs umfassend und kompetent abgehandelt. Insbesondere Punkt 13 dürfte dich interessieren.

Quickline · #5 (**permalink**) 05.10.2009, 16:13

Ne das war ich war irgendie verzweifelt weil ich die Homepage dringend fertigmachen muss und habe dann einfach noch das unmöglichste probiert...

XImbericle · #6 (**permalink**) 05.10.2009, 20:39

Ich fress meine Eier wenn es mit Margin nicht geht.

Füge in das Element was du willst id="id" ein, und setzte in den <head>

HTML-Code:

<script type="text/css">
#id
{
margin:0px auto;
}
</script>

MfG

Quickline · #7 (**permalink**) 06.10.2009, 12:31

Naja bin wohl zu dumm dafür aber trozdem danke.
Habe jetzt eine andere Navi gemacht die ich platzieren kann wie ich sie wollte.

majorbenks · #8 (**permalink**) 17.10.2009, 20:28

Hört mal: Ich glaub das ist wieder die alte IE und FF Geschichte: Bei FF funktioniert margin:0px auto; bei IE 7 nicht... Hab aber auch keine Ahnung wie man das beim IE hinkriegt..

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit Navigation	safari	CSS	12	20.04.2011 11:11
Float-Problem?	mischaef	CSS	33	20.10.2010 16:20
Problem mit FlyOut Menu im IE7	quarki69	CSS	5	15.03.2010 15:46
Javascript UL Navigation im IE6	ven	CSS	7	29.04.2008 15:29
Container mit 2 Container darin -> Hintergrund anzeigen	bendar	CSS	4	05.04.2005 18:18