Navi css

S

spamerix

Mitglied
Hallo ich habe da ein kleines Prob, und zwar möchte ich das Navi ein wenig verändert haben.

http://spamerix.de/gggg/test/test/beispiele/testtesttest123/index.html

Mann sieht ja links das Navi, jetzt möchte ich das das schwarze feld wagerecht ist.

Und ich auch Navi rein schreiben kann in den Feld.

Hat einer iddee, hoffe das ihr versteht was ich meine?

Hier jetzt die css und php anhang.

css.wrap
#wrap {width:0;
position:relative;
background:#000;
height:362px;
padding:0 0px;
color:#999;
margin-left:25px;}
#wrap a.nikon_link,

#wrap a.nikon_link:visited {color:#bcd; font-size:10px;}

#wrap a.nikon_link:hover {text-decoration:none;}
Zum Vergrößern anklicken....

css.flyout

#flyout {font-size:11px;
padding:0;
margin:0;
list-style:none;
width:24px;
height:360px;
position:absolute;
left:-25px;}

#flyout ul {padding:0;
margin:0;
list-style:none;}

#flyout li {display:block;
width:50px;
height:120px;
background:#1c1c1c;}

#flyout li a {display:block;
width:50px;
height:120px;
weight:120px;
text-indent:-999px;
text-decoration:none;}

#flyout li a.nikon {background:url(#ffffff);}

#flyout li a.canon {background:url(bottunnavimitte.gif);}

#flyout li a.pentax {background:url(bottunnaviunten.gif);}

#flyout table {position:absolute;
border-collapse:collapse;
top:0; left:0;
z-index:100;
font-size:1em;}

#flyout li {float:left; margin-bottom:1px;}

#flyout li ul {visibility:hidden;
position:absolute;
top:0;
left:24px;
width:117px;
height:400px;
border-left:1px solid #fff;
padding-top:4px;}

#flyout li ul li {display:block;
display:inline;
width:100px;
height:25px;
border:0;
margin:0 10px;
background:transparent;}

#flyout li ul li a {text-indent:0;
background:transparent;
display:block;
width:100px;
height:22px;
line-height:21px;
color:#bbb;
border-bottom:1px solid #555;
text-decoration:none;}

#flyout li b {visibility:hidden;
display:block;
width:120px;
height:360px;
position:absolute;
top:0;
left:24px;
background:#234;
opacity:0.8;
filter:alpha(opacity=80);}

* html #flyout li a:hover {position:relative; white-space:normal;}
* html #flyout li a:hover ul li a:hover {color:#000; background:#bcd;}

#flyout li:hover {position:relative;}

#flyout li:hover ul li a:hover {background:#bcd; color:#000;}

#flyout li:hover b,

#flyout li a:hover b {
visibility:visible;
}

#flyout li:hover ul,

#flyout li a:hover ul {
visibility:visible;
}
Zum Vergrößern anklicken....


php schnipsel

<div id="wrap">
<ul id="flyout">
<li><a href="#nogo" class="nikon">Nikon<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<b></b>
<ul>
<li><a href="http://www.google.de">test1</a></li>
<li><a href="#nogo">test2</a></li>
<li><a href="#nogo">test3</a></li>
<li><a href="#nogo">test4</a></li>

<li><a href="#nogo">test5</a></li>
<li><a href="#nogo">test6</a></li>
<li><a href="#nogo">test7</a></li>
<li><a href="#nogo">test8</a></li>
<li><a href="#nogo">test9</a></li>
<li><a href="#nogo">test10</a></li>
<li><a href="#nogo">test11</a></li>
<li><a href="#nogo">test12</a></li>
<li><a href="#nogo">test13</a></li>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

</div>
Zum Vergrößern anklicken....

Mfg

Spamerix
 
Code: 
#flyout li {display:block;
width:120px;
height:50px;
background:#1c1c1c;}
height und width vertauschen, dann wirds waagerecht.
 
Hi,

falls das komplette Menü horizontal ausgerichtet werden soll,
anstelle von display:block den Wert inline für das li-Element wählen, und die Links (a) stattdessen mit float:left auszeichnen.

mfg Maik
 
Ich bedanke mich bei euch beiden schon mal.

Wie bekomme ich jetzt auf den schwarzen feld navi?

@Maik das layout habe ich durch deine hilfe mit css gemacht, vieleicht weisst du es ja noch das alte css layout steyl werde ich noch im thread posten für die nachwelt :) .
 
spamerix hat gesagt.:
Wie bekomme ich jetzt auf den schwarzen feld navi?
Zum Vergrößern anklicken....
Kann dir gerade nicht ganz folgen, worauf du mit der Frage hinaus willst? :confused:

Falls du aber von dem rechtslastigen Versatz des Submenüs gegenüber der schwarzen Box sprichst, einfach seine linke Startposition auf null zurücksetzen:

Code: 
#flyout li ul {visibility:hidden; 
	position:absolute; 
	top:0; 
	left:24px; 
	width:117px; 
	height:400px; 
	border-left:1px solid #fff; 
	padding-top:4px;}


mfg Maik
 
Nein das meinte ich nicht aber könnte auch noch helfen.

Ich meinte das auf den schwarzen feld der schrift zug Navi in irgend einer farbe stehen soll.
 
Und weiter? Wo ist denn hier bitte das Problem, mit color die gewünschte Textfarbe für #wrap festzulegen?

mfg Maik
 
*schwitz* - das ist aber eine besonders harte Nuß, die du uns da zum Wochenausklang zum Knacken präsentierst :suspekt:

Sorry, ich gewinne hier immer mehr den Eindruck, dass du dir die drei existierenden Stylesheet-Dateien von überall zusammenkopiert, und darin keine einzige Zeile selbst geschrieben hast, wenn du noch nicht mal den Überblick hast, welche Regel derzeit für die Schriftfarbe im Element #wrap festgelegt ist :(

http://spamerix.de/gggg/test/test/beispiele/testtesttest123/wrap.css hat gesagt.:
Code: 
#wrap {width:0; 
	position:relative; 	
	background:#000; 
	height:362px; 
	padding:0 0px; 
	color:#999; 
	margin-left:25px;}
Zum Vergrößern anklicken....

mfg Maik
 
@Maik danke schonmal.

Aber die Frage ist wie bekomme ich die schrieft in diesen schwarzen Feld rein?

Hehe das seiten layout die css habe ich ganz alleine geschaft durch deine hilfe vor paar wochen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück