zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Navigation Gestalltung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.03.2007, 23:30
Benutzerbild von Pr@ana
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.08.2006
Ort: Hessen
Beiträge: 61
Pr@ana befindet sich auf einem aufstrebenden Ast
Standard Navigation Gestalltung

Nabend,
auf die Gefahr hin, dass ich mich blamiere:

GarWie

Wie realisiere ich den die Navigation so, dass vor dem aktiven Link der Pfeil zu sehen ist (so wie im Mozilla) und das ganze noch valid ist?

Ich habe das ganze natürlich erst mit ul / li gemacht, so wie man es im css (http://www.netwg.de/~hauke/dev/garwi...yle/screen.css) noch sehen kann, aber damit bin ich auch kein Stück weiter gekommen

p.s.: Die border sind nur zum "Debuggen"
__________________
Kaum macht man es richtig, schon funktioniert es!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.03.2007, 02:28
Benutzer
neuer user
 
Registriert seit: 28.03.2007
Beiträge: 42
schorsch befindet sich auf einem aufstrebenden Ast
Standard

an deiner stelle würde ich wieder eine liste verwenden. verwende doch einfach bei dem aktivierten link ein anderes listbullet.

Code:
<div id="nav">
  <ul>
    <li><a href="">Home</a></li>
    <li class="active"><a href="">Planung</a></li>
    <li><a href="">Pflaster & Naturstein</a></li>
  </ul>
</div>
Code:
#nav ul, #nav li {
  margin: 0px;
  padding: 0px;
}
#nav li {
  list-style-type: none;
}
.active {
  list-style-image:url( ...bildurl einfügen... );
}
des weiteren kannst du pseudoklassen verwenden, um das bullet beim drüberfahren mit der maus einzublenden. leider unterstützt das der alte IE nicht.

Code:
#nav li:hover {
  list-style-image:url( ...bildurl einfügen... );
}
musst noch n bissel mit den abständen links rumspielen. momentan sind sie 0px, d.h. das bullet ist nicht zu sehen, weil es links aus dem seitenbereich raus geht. ich bin mir aber gerade nicht sicher, welchen abstand (innen oder außen) du ändern musst. das machen die browser teilweise unterschiedlich.

Geändert von schorsch (29.03.2007 um 02:38 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.03.2007, 10:48
Benutzerbild von Pr@ana
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.08.2006
Ort: Hessen
Beiträge: 61
Pr@ana befindet sich auf einem aufstrebenden Ast
Standard

Moin,
ich möchte am liebsten beide Bilder in das <li> packen können. Das habe ich aber nicht hinbekommen.
Mit dem jetztigen Lösungsansatz bin ich überhaupt nicht zufrieden.
__________________
Kaum macht man es richtig, schon funktioniert es!
Mit Zitat antworten
  #4 (permalink)  
Alt 31.03.2007, 00:04
Benutzer
neuer user
 
Registriert seit: 28.03.2007
Beiträge: 42
schorsch befindet sich auf einem aufstrebenden Ast
Standard

ich habe mir mal die mühe gemacht und es für dich mit <img>-Tag gebastelt. die seite ist sowohl im firefox, als auch im IE6 richtig dargestellt. valide heißt eigentlich was anderes, aber sie ist auch valide.

Seitenvorschau

Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>TODO supply a title</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style type="text/css">
            * {
            padding: 0px;
            margin: 0px;
            font-family: Verdana;
            color: #ff0;
            }
            
            li {
            margin-bottom: 5px;
            line-height: 30px;
            list-style: none;
            background: url(navi_spacer.gif) no-repeat 15px 28px;
            }
            img {
            float: left;
            display: block;
            width: 14px;
            margin-right: 5px;
            }
            #nav {
            float: left;
            width: 160px;
            background: #060;
            padding: 5px;
            }
            #content {
            margin-left: 180px;
            padding: 10px;
            background: #060;
            height: 600px;
            }
        </style>
    </head>
    <body>
        <ul id="nav">
            <li><img src="pfeil.jpg" alt="" />Punkt 1</li>
            <li><img src="pfeil.jpg" alt="" />Punkt 2</li>
        </ul>
        <div id="content">
            <h1>Überschrift</h1>
        </div>
    </body>
</html>

Geändert von schorsch (31.03.2007 um 00:36 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 31.03.2007, 00:19
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von schorsch Beitrag anzeigen
Code:
<div id="nav">
  <ul>
    <li><a href="">Home</a></li>
    <li class="active"><a href="">Planung</a></li>
    <li><a href="">Pflaster & Naturstein</a></li>
  </ul>
</div>
Aber raus mit dem div und ul die ID geben. Und die Pfeile gehören auf keinen Fall ins Markup, sondern ins CSS (a zuweisen).
Mit Zitat antworten
  #6 (permalink)  
Alt 31.03.2007, 00:40
Benutzer
neuer user
 
Registriert seit: 28.03.2007
Beiträge: 42
schorsch befindet sich auf einem aufstrebenden Ast
Standard

ich würde sie ja auch versuchen ins css zu hauen, wollte es nur nach seinen wünschen realisieren.

ich hab es nochmal umgeschrieben:

Seitenvorschau

Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Beispiel</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style type="text/css">
            * {
            padding: 0px;
            margin: 0px;
            font-family: Verdana;
            color: #ff0;
            text-decoration: none;
            }
            li {
            margin-bottom: 5px;
            line-height: 30px;
            list-style: none;
            background: url(navi_spacer.gif) no-repeat 15px 28px;
            }
            img.pfeil {
            float: left;
            display: block;
            width: 14px;
            margin-right: 5px;
            }
            #nav {
            float: left;
            clear: left;
            width: 160px;
            background: #060;
            padding: 5px;
            }
            #content {
            margin-left: 180px;
            padding: 10px;
            background: #060;
            height: 600px;
            }
            a {
            background: url(pfeil.jpg) no-repeat 0px 2px;
            padding: 7px 0px 7px 20px;
            }
        </style>
    </head>
    <body>
        <ul id="nav">
            <li><a href="">Punkt 1</a></li>
            <li><a href="">Punkt 2</a></li>
        </ul>
        <div id="content">
            <h1>Überschrift</h1>
        </div>
    </body>
</html>

Geändert von schorsch (31.03.2007 um 00:56 Uhr)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:37 Uhr.