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/be...123/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;}

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

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>

Mfg

Spamerix

Code :

1 2 3 4

#flyout li {display:block; [COLOR="Red"]width:120px; height:50px;[/COLOR] 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 .

Zitat von spamerix

Wie bekomme ich jetzt auf den schwarzen feld navi?

Kann dir gerade nicht ganz folgen, worauf du mit der Frage hinaus willst?

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 :

1 2 3 4 5 6 7 8

#flyout li ul {visibility:hidden;     position:absolute;     top:0;     [B]left:24px; [/B]     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

Zitat von Maik

Und weiter? Wo ist denn hier bitte das Problem, mit color die gewünschte Textfarbe für #wrap festzulegen?

mfg Maik

Ja irgend wie schnalle ich es nicht .

Wie ich es genau umsetzen soll .

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

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

Zitat von http://spamerix.de/gggg/test/test/beispiele/testtesttest123/wrap.css

Code :

1 2 3 4 5 6 7

#wrap {width:0;     position:relative;       background:#000;     height:362px;     padding:0 0px;     [B][size=4]color:#999;[/size] [/B]     margin-left:25px;}

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.

Na, indem du sie da ganz einfach reinschreibst - oder zickt sie rum, und will nicht nach deiner Pfeife tanzen?

Code :

1 2 3 4

<div id="wrap">     [B][size=4]NAVI[/size][/B]     <ul id="flyout"> ...</ul> </div>

mfg Maik
- der sich schon mal prophylaktisch den Nußknacker holt -

Zitat von Maik

Na, indem du sie da ganz einfach reinschreibst - oder zickt sie rum, und will nicht nach deiner Pfeife tanzen?

Code :

1 2 3 4

<div id="wrap">     [B][size=4]NAVI[/size][/B]     <ul id="flyout"> ...</ul> </div>

mfg Maik
- der sich schon mal prophylaktisch den Nußknacker holt -

Ja schlimmer wie meine Frau .

Es steht da drüber bin am verzweifeln.

Mfg

André

Zitat von spamerix

.
Es steht da drüber bin am verzweifeln.

Das glaubst aber auch nur du im weiten Rund

Macht es dich eigentlich nicht stutzig, dass der vermeintliche schwarze Bereich, den du da als die Box #wrap betrachtest, gerade mal etwas mehr als ein Siebtel von deiner festgelegten Höhe (height:362px) besitzt?

Ich hab hier mal zur Verdeutlichung etwas kontrastreiche Farbe ins Spiel gebracht und zusätzlich dem DIV #wrap anstelle von width:0 seinem Elternelement #links1 entsprechend, eine Breite zugewiesen:

Code css:

1 2 3 4 5 6 7

#wrap {width:183px;         position:relative;         background:yellow;         height:362px;         padding:0 0px;         color:black;         margin-left:25px;}

(FF 3.0.4 - WinXP)

Das dürften aber noch die weitaus niedrigeren Hürden auf deinem Weg ins Ziel darstellen, wenn ich mir dagegen die Seite zur Abwechslung im IE (6 + 7) betrachte. Deren Screenshots erspar ich uns hier aber besser mal, denn "Kraut-und-Rüben" bei "Hempels unter'm Sofa" sind nix dagegen

mfg Maik

Ich glaube ich knack das nicht.

Ja jetzt steht ja navi im Gelben, es soll aber in denn schwarzen feld drinne stehen.

Ich weiss hatte selber schon im IE geschaut mache ich aber noch das es da auch geht.

"Step by Step - ooh Baby"

Ist dir seit meinem letzten Post vor genau zwei Stunden noch immer nicht ein- bzw. aufgefallen, um welches Element mit dunkelgrauem Hintergrund (#1c1c1c) es sich hierbei handelt?

Guggst du hier:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13

#flyout li {display:block;         width:120px;         height:50px;         [u][COLOR="DarkSlateGray"]background:#1c1c1c;[/COLOR][/u]}   #flyout li a {display:block;         width:50px;         height:120px;         weight:120px;        [B] /*text-indent:-999px;*/[/B] /* auskommentiert, damit der Link zum Vorschein kommt, von dem bislang weit und breit nix zu sehen war */         text-decoration:none;}   #flyout li a.nikon {[B]color:#fff;[/B]}

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<div id="wrap"> Navi <ul id="flyout">     <li><a href="#nogo" class="nikon">Nikon<!--[if gte IE 7]><!--></a><!--<![endif]-->            <!--[if lte IE 6]><table><tr><td><![endif]-->            <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>            </ul>            <!--[if lte IE 6]></td></tr></table></a><![endif]-->     </li> </ul> </div>

Für die logische Schlußfolgerung, dass es sich hierbei nur um den Menüpunkt "Nikon" aus der ersten Menüebene handeln kann, hab ich jetzt keine zwei Minuten benötigt, und mir ist der CSS-Code der drei CSS-Dateien sicherlich nicht so vertraut, wie dir, der sich mit ihm wer-weiß-wie-lange-schon beschäftigt

mfg Maik