mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 21:22 Benutzername: Passwort: Auto-Login

Thema: Problem beim Erstellen einer Navi vom 23.06.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Problem beim Erstellen einer Navi
Seite: 1, 2  Weiter
Autor Nachricht
liepeKathi
Threadersteller

Dabei seit: 03.07.2008
Ort: Wetter (Ruhr)
Alter: 35
Geschlecht: Weiblich
Verfasst Di 23.06.2009 11:24
Titel

Problem beim Erstellen einer Navi

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Di 23.06.2009 12:10
Titel

Antworten mit Zitat Zum Seitenanfang

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?
  View user's profile Private Nachricht senden
Anzeige
Anzeige
vecto

Dabei seit: 04.06.2007
Ort: Würzburg
Alter: 37
Geschlecht: Männlich
Verfasst Di 23.06.2009 12:23
Titel

Re: Problem beim Erstellen einer Navi

Antworten mit Zitat Zum Seitenanfang

liepeKathi hat geschrieben:
Das funktioniert bei dieser Navigation nicht (siehe Bild: http://img44.imageshack.us/img44/7924/navif.jpg).

Wieso? Nur weil die Punkte Schräg sind?


normal


hover

Geht doch * Keine Ahnung... *
  View user's profile Private Nachricht senden
liepeKathi
Threadersteller

Dabei seit: 03.07.2008
Ort: Wetter (Ruhr)
Alter: 35
Geschlecht: Weiblich
Verfasst Di 23.06.2009 12:27
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Di 23.06.2009 12:31
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
vecto

Dabei seit: 04.06.2007
Ort: Würzburg
Alter: 37
Geschlecht: Männlich
Verfasst Di 23.06.2009 12:46
Titel

Antworten mit Zitat Zum Seitenanfang

Beispiel
  View user's profile Private Nachricht senden
liepeKathi
Threadersteller

Dabei seit: 03.07.2008
Ort: Wetter (Ruhr)
Alter: 35
Geschlecht: Weiblich
Verfasst Di 23.06.2009 13:24
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Di 23.06.2009 13:35
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


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.