zurück zur Startseite
  


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

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.02.2006, 16:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.10.2005
Beiträge: 19
fanttomas befindet sich auf einem aufstrebenden Ast
Standard Navigation mit CSS und Bilder

Guten Tag Leute,

Da ich eine bestimmte Schriftart unbedingt benutzen möchte, und der Weg über Bilder unvermeidlich ist, da nicht jeder die Schrift hat.
Im PS template habe ich schon eine NavBar vorgesehen, daher will ich nur die Schriften irgendwie drüber kriegen mit CSS. Navi mit Standard Schriften passen nicht zum Design,habe ich schon probiert.
meine erste Frage ist. wie gehe ich da konkret vor mache ich ein transparenter gif mit alle links drauf oder für jeden Link ein gif ( bei beiden Schrift auf transparenter Bg)?
Nur die Schriftfarbe soll sich ändern in den jeweiligen Zustände.
Es ist mir klar, dass ich für die jeweiligen Zustände (link, hover, focus), gif in unterschiedliche Farben machen muss.
Ich vermute auch, dass ich für jeden Link eine entsprechende id in der CSS Datei definieren muss.
Hoffe es kann mir jemand helfen oder hat ein guter Tut zu empfehlen.

dank im voraus.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.02.2006, 18:10
Neuer Benutzer
neuer user
 
Registriert seit: 10.02.2006
Beiträge: 12
urklmurkl befindet sich auf einem aufstrebenden Ast
Standard

Hi,

ich würde vorschlagen, für jeden Link und für jeden Zustand ein Bild.

Klar musst du dann auch für jeden Link eine Id haben um ihn gezielt ansprechen zu können.

Falls du jetzt also mit Grafiken arbeiten wirst musst du die Sache mit dem Preload beachten...

Möcht nicht rumquasseln... Sag bescheid falls du dazu Infos brauchst.

Gruß urklmurkl
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.02.2006, 18:17
EdiciusTsaf
Gast
 
Beiträge: n/a
Standard

also ich würde auf keinen fall für jeden zustand ein eigenes Bild machen. Es sieht einfach nur hässlich aus wenn so ein Bild nachlädt.
Verbreitet ist die Methode ein bild mit allen 3 zuständen zu haben und das bild jeweils so zu verschieben wie man es braucht.

Ich hoffe ich hab deine frage richtig verstanden

PS: Achja, hier ein paar Image replacement Techniken:
http://meiert.com/de/publications/articles/20050513/
Mit Zitat antworten
  #4 (permalink)  
Alt 11.02.2006, 18:54
Neuer Benutzer
neuer user
 
Registriert seit: 10.02.2006
Beiträge: 12
urklmurkl befindet sich auf einem aufstrebenden Ast
Standard

Stimmt, für rein grafische Links ist EdiciusTsaf's Vorschlag besser

Gruß urklmurkl
Mit Zitat antworten
  #5 (permalink)  
Alt 11.02.2006, 19:20
EdiciusTsaf
Gast
 
Beiträge: n/a
Standard

irgendwo gibts auch coole beispiele wo jemand ALLE grafiken seiner Seite in eine gepackt hat...
sollte man aber nur machen wenn man spaß an mathe hat;D
Mit Zitat antworten
  #6 (permalink)  
Alt 13.02.2006, 14:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.10.2005
Beiträge: 19
fanttomas befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von EdiciusTsaf
also ich würde auf keinen fall für jeden zustand ein eigenes Bild machen. Es sieht einfach nur hässlich aus wenn so ein Bild nachlädt.
Verbreitet ist die Methode ein bild mit allen 3 zuständen zu haben und das bild jeweils so zu verschieben wie man es braucht.

Ich hoffe ich hab deine frage richtig verstanden

PS: Achja, hier ein paar Image replacement Techniken:
http://meiert.com/de/publications/articles/20050513/
Dann werde ich es mal ausprobieren und erstmal die Bilder anfertigen, und nebenbei mir dein Link ansehen.

danke, ich melde mich wenn ich steckenbleibe.

gruss
Mit Zitat antworten
  #7 (permalink)  
Alt 13.02.2006, 14:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.10.2005
Beiträge: 19
fanttomas befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von EdiciusTsaf
irgendwo gibts auch coole beispiele wo jemand ALLE grafiken seiner Seite in eine gepackt hat...
sollte man aber nur machen wenn man spaß an mathe hat;D
Und Ahnung von der Materie. Bin ein Anfänger erstmal muss ich meine Seite überhaupt zum laufen bringen, für Hardcore bin ich noch nicht bereit.

gruss
Mit Zitat antworten
  #8 (permalink)  
Alt 14.02.2006, 00:50
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.03.2005
Beiträge: 286
Chattanooga befindet sich auf einem aufstrebenden Ast
Standard

Das Original dieser Methode stammt von Pixy. Seine ziemlich gute Beschreibung findet sich hier:
http://www.wellstyled.com/css-nopreload-rollovers.html

Ahnung von Mathe braucht man nicht, nur etwas Ahnung von Englisch.

Gruß
Chattanooga
Mit Zitat antworten
  #9 (permalink)  
Alt 16.02.2006, 11:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.10.2005
Beiträge: 19
fanttomas befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Chattanooga
Das Original dieser Methode stammt von Pixy. Seine ziemlich gute Beschreibung findet sich hier:
http://www.wellstyled.com/css-nopreload-rollovers.html

Ahnung von Mathe braucht man nicht, nur etwas Ahnung von Englisch.

Gruß
Chattanooga
Danke man, dein Tip war gut und scheint einfacher zu sein als die anderen Dinge. Bilder habe ich schon gebastelt. Code sieht übersichtlich aus.

gruss
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 16.02.2006, 13:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.10.2005
Beiträge: 19
fanttomas befindet sich auf einem aufstrebenden Ast
Standard

Morgen Leute,

Mit dem Link von Chatta, habe ich folgende Navi erstellt.
Firefox zeigt alles an problemlos, nur im IE sieht man gar nichts.
Könnte mir bitte da jemand helfen, bin für jede Hilfe dankbar.
Bin kein Experte; also bitte so dass ich verstehen kann.
Dank im voraus.


HTML:
Code:
<div id="navigation">
	
	<ul id="navi">
 	<li id="home">
	<li id="about">
	<li id="news">
	[/list]</div>

CSS:
Code:
#navigation {
	margin: 0 auto;
	padding: 0px;
	background: url(../design/navbar.png) no-repeat;
	height: 58px;
	width: 984px;
	overflow: hidden;
}
#navigation ul {
       margin: 0;
       padding: 0 100px;
       list-style-type: none;
       text-align: center;
}
#navigation li {
	float: left;
	list-style: none;
	display: inline;
	padding: 28px 0px 0 5px;
}

#navigation ul {
margin: 0;
padding: 0 100px;
list-style-type: none;
text-align: center;
}

#navigation li a {
        display: block;
	padding: 25px 0 0;
	overflow: hidden;
	height: 0 !important;
	height /**/: 35px; /* for IE5/Win */;
	font-size: 10px;
	border-bottom: none;
	text-align: center;
}

#navigation li a:hover {
	background-position: 0 -25px;
	text-decoration: none;
}

li#home a {
	background: url(../images/navhome.gif) no-repeat left top;
	width: 65px;
}

li#about a {
	background: url(../images/navabout.gif) no-repeat left top;
	width: 65px;
}

li#news a {
	background: url(../images/navnews.gif) no-repeat left top;
	width: 65px;
}
Mit Zitat antworten
Sponsored Links
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
Hilfe bei CSS Navigation trimalchio CSS 7 10.01.2011 14:13
Bilder werden aus dem CSS nicht angezeigt dihegroup CSS 6 13.04.2010 09:48
Problem mit FlyOut Menu im IE7 quarki69 CSS 5 15.03.2010 16:46
Listenformatierung mit CSS Problem bei Navigation loozy CSS 4 07.06.2006 15:03
Horizontale Navigation mit Rollovergrafiken – mit CSS? Kirsten CSS 6 04.06.2006 12:57


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:09 Uhr.