Autor |
Nachricht |
liepeKathi
Threadersteller
Dabei seit: 03.07.2008
Ort: Wetter (Ruhr)
Alter: 35
Geschlecht:
|
Verfasst Di 23.06.2009 11:24
Titel Problem beim Erstellen einer Navi |
|
|
Hallo Zusammen,
ich habe ein Problem. Ich hatte eigentlich nicht gedacht, dass dies zu einem Problem wird.
Ich habe einen Kunden ein Feindesign für eine Website vorgelegt. Fand er gut.
Also bin ich nun dabei das Feindesign mittels HTML / CSS umzusetzen. Leider gibt es da einige Probleme mit der Navigation.
Ich habe noch nicht viel mit CSS gemacht und versuche mir das irgendwie selbst beizubringen. Von daher sind meine Navigationen bisher nur in JavaScript (Roll-Over Effeke in Dreamweaver eingebunden).
Das funktioniert so, dass ich 2 Bilder abspeicher, eines im Normalzustand und das andere im Over-Zustand. Das funktioniert bei dieser Navigation nicht (siehe Bild: http://img44.imageshack.us/img44/7924/navif.jpg).
Habt ihr eine Idee wie man das am Besten umsetzen kann?
Danke schon einmal im voraus.
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Di 23.06.2009 12:10
Titel
|
|
|
dazu solltest du uns schon ein paar mehr infos geben.
das javascript und dein html markup wärens ehr hilfreich.
was funktioniert nicht? werden die bilder nicht angezeigt?
|
|
|
|
|
Anzeige
|
|
|
vecto
Dabei seit: 04.06.2007
Ort: Würzburg
Alter: 37
Geschlecht:
|
Verfasst Di 23.06.2009 12:23
Titel Re: Problem beim Erstellen einer Navi |
|
|
Wieso? Nur weil die Punkte Schräg sind?
normal
hover
Geht doch
|
|
|
|
|
liepeKathi
Threadersteller
Dabei seit: 03.07.2008
Ort: Wetter (Ruhr)
Alter: 35
Geschlecht:
|
Verfasst Di 23.06.2009 12:27
Titel
|
|
|
ja aber, wie soll man die aneinander anordnen?
Das sind zwar nun zwei Bilder, aber setzt man die anderen Bilder daneben, funktioniert das Roll-Over-Effekt nicht mehr, oder? Ich hätte dann bei Navipunkt2 einen blaues Dreieck, welches nicht da sein dürfte.
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Di 23.06.2009 12:31
Titel
|
|
|
wieso legst du eigentl deinen Kunden Layouts vor die du selbst nicht umsetzen kannst?
entweder du ordnest <a> nebeneinander an, und setzt abstände (hier wohl nicht nötig) oder eine liste.
|
|
|
|
|
vecto
Dabei seit: 04.06.2007
Ort: Würzburg
Alter: 37
Geschlecht:
|
Verfasst Di 23.06.2009 12:46
Titel
|
|
|
Beispiel
|
|
|
|
|
liepeKathi
Threadersteller
Dabei seit: 03.07.2008
Ort: Wetter (Ruhr)
Alter: 35
Geschlecht:
|
Verfasst Di 23.06.2009 13:24
Titel
|
|
|
ok, und wie hast du das gemacht?
Weil mein Chef es so wollte. Ich bin noch Auszubildene und werde immer ins kalte Wasser geschmissen. Mein Chef weiß leider gar nicht wie so etwas funktioniert.
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Di 23.06.2009 13:35
Titel
|
|
|
CSS
Code: |
<style type="text/css">
/* for this demo only */
/* the stylesheet */
#slant {padding:0; margin:50px 0 200px 20px; list-style:none;}
#slant li {float:left; text-align:center; margin-right:-20px;}
#slant a {display:block; text-decoration:none;}
#slant a em {font-style:normal; display:block; padding:0 15px; height:25px; background:#363; float:left; cursor:pointer; color:#beb; line-height:24px;}
#slant a b, a span {cursor:pointer; display:block; width:0; overflow:hidden; float:left; background:#363;}
#slant a span {height:0; border-top:25px solid #363; border-right:25px solid #fff;}
#slant a b.p1,
#slant a b.p2,
#slant a b.p3,
#slant a b.p4,
#slant a b.p5 {border-top:5px solid #fff; border-right:5px solid #363;}
#slant a b.p1 {height:0; margin-top:20px;}
#slant a b.p2 {height:5px; margin-top:15px;}
#slant a b.p3 {height:10px; margin-top:10px;}
#slant a b.p4 {height:15px; margin-top:5px;}
#slant a b.p5 {height:20px;}
#slant a b.p6,
#slant a b.p7,
#slant a b.p8,
#slant a b.p9,
#slant a b.p10 {border-bottom:5px solid #fff; border-left:5px solid #363;}
#slant a b.p6 {height:20px;}
#slant a b.p7 {height:15px;}
#slant a b.p8 {height:10px;}
#slant a b.p9 {height:5px;}
#slant a b.p10 {height:0;}
#slant a:hover {background:#696;}
#slant a:hover em, #slant a.selected em {color:#030; background:#696;}
#slant a:hover b.p1, #slant a.selected b.p1,
#slant a:hover b.p2, #slant a.selected b.p2,
#slant a:hover b.p3, #slant a.selected b.p3,
#slant a:hover b.p4, #slant a.selected b.p4,
#slant a:hover b.p5, #slant a.selected b.p5 {border-right-color:#696; background: #696;}
#slant a:hover b.p6, #slant a.selected b.p6,
#slant a:hover b.p7, #slant a.selected b.p7,
#slant a:hover b.p8, #slant a.selected b.p8,
#slant a:hover b.p9, #slant a.selected b.p9,
#slant a:hover b.p10, #slant a.selected b.p10 {border-left-color:#696; background: #696;}
#slant a:hover span, #slant a.selected span {border-top-color:#696;}
#slant a.selected:hover b, #slant a.selected:hover em, #slant a.selected:hover span {cursor:default;}
</style>
|
HTML Markup
Code: |
<div id="info">
<h2>A 45° slant menu</h2>
<h3>7th February 2007</h3>
<h3>10th February 2007 - 'click' to show selected tab added</h3>
<ul id="slant">
<li><a href="slanty.html?current=one"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>Item One</em><span></span></a></li>
<li><a href="slanty.html?current=two" class="selected"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>Item Two</em><span></span></a></li>
<li><a href="slanty.html?current=three"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>Longer Item Three</em><span></span></a></li>
<li><a href="slanty.html?current=four"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>Four</em><span></span></a></li>
<li><a href="slanty.html?current=five"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>.. and Five</em><span></span></a></li>
<li><a href="slanty.html?current=six"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>6</em><b class="p6"></b><b class="p7"></b><b class="p8"></b><b class="p9"></b><b class="p10"></b></a></li>
</ul>
</div>
|
Copyright HInweis nicht zu vergessen wie auf der Seite vorgegeben
|
|
|
|
|
|
|
|
Ähnliche Themen |
IE Problem mit CSS Navi
Problem mit css navi
PHP-Problem mit index.php und Navi
CSS Problem - Div Navi bis zum Footer
Problem mit Navi Leiste
Sliding door navi // jQuery Problem
|
|