zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Crocko.com Navigation Nachbau

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.06.2013, 23:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.06.2013
Beiträge: 4
me01 befindet sich auf einem aufstrebenden Ast
Standard Crocko.com Navigation Nachbau

Hallo, würde gerne mal die Navigation von crocko.com nachbauen, nun meine Frage wie wurde die umgesetzt - Only HTML/CSS oder auch Javascript?

Hier ein Bild: http://abload.de/img/555o6kie.png

Wenn einer weis in welche "Richtung" es geht bitte ein paar Stichworte nennen, ich google mich da recht fix durch.

Gruß me01
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.06.2013, 01:23
Benutzerbild von Schwarzerhut
Neuer Benutzer
neuer user
 
Registriert seit: 21.06.2013
Beiträge: 22
Schwarzerhut befindet sich auf einem aufstrebenden Ast
Standard

Hab mal was auf die schnelle gemacht.
Ist reines HTML + CSS.
Für neue Browser ist das aufjedenfall ausreichend und crock.com nutzt das auch. Kann nur sein das ältere Browser damit schwierigkeiten haben, ich würde sogar sicher sein

Für mehr informationen:
SELFHTML: Stylesheets / CSS-basierte Layouts / Navigationsleisten

LG Hut


HTML-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" xml:lang="de" lang="de"> 
	<head>
		<style>
			.navi .activ{background-color:#90b53b;
				padding:4px 18px;
				float:left;color:#FFF;
				margin:0px 8px 0px 8px;
				font-family:Franklin Gothic Demi, Arial,Tahoma,Helvetica,sans-serif;font-size:14px;
				text-shadow: #000 0 1px 1px;
				-moz-border-radius:12px;-webkit-border-radius:12px;border-radius:12px;
			}  

			.navi ul{
				margin:0px;padding:0px; float:left;
			}
			.navi li{
				float:left;display: inline;
				list-style:none;padding:0px;margin:0px;
			}
			 .navi li a{
				margin:0px;
				display:block;font-family:Franklin Gothic Demi, Arial,Tahoma,Helvetica,sans-serif;
				text-align:center;
				text-decoration:none;
				padding:4px 18px;color:#7a7a7a;
				text-shadow: #fff 0 1px 1px;font-size:14px;
			}  
	
			.navi li a:hover{
				
				display:block;
				text-align:center;
				text-decoration:none;background-color:#d6dec5;
				padding:4px 18px;color:#7a7a7a;font-size:14px;
				-moz-border-radius:12px;-webkit-border-radius:12px;border-radius:12px;
			}  
	
		</style>
	</head>
	<body>
		<div class="navi">
			<ul>
				<li><span class="activ">Dateien Hochladen</span></li>
				<li><a href="#">Tour</a></li>
				<li><a href="#">Premium</a></li> 				
			</ul>
		</div>
	</body>
</html>

Geändert von Schwarzerhut (22.06.2013 um 01:28 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.06.2013, 10:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.06.2013
Beiträge: 4
me01 befindet sich auf einem aufstrebenden Ast
Standard

Cool, danke für die schnelle Hilfe!
Mit Zitat antworten
  #4 (permalink)  
Alt 23.06.2013, 15:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.06.2013
Beiträge: 4
me01 befindet sich auf einem aufstrebenden Ast
Standard

Hab dein Code für meine Zwecke mal angepasst:

Code:
<style>
#navigation .active{
	font: 12px Verdana, Tahoma, Arial;
	font-weight: bold;
	text-shadow: #000 0 1px 1px;
	color: #fff;
	background-color: #333;
	border-radius: 12px;
	padding: 5px 18px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
}

#navigation ul{
	float: left;
	margin: 13px 0px 0px 175px;
}

#navigation li{
	float: left;
	list-style: none;
	padding: 0px;
	margin: 0px;
}

#navigation li a{
	font: 12px Verdana, Tahoma, Arial;
	font-weight: bold;
	text-align: center;
	text-shadow: #fff 0 1px 1px;
	color: #7a7a7a;
	padding: 5px 18px;
	margin: 0px 3px;
}  

#navigation li a:hover{
	font: 12px Verdana, Tahoma, Arial;
	font-weight: bold;
	color: #7a7a7a;
	background-color: #e2e2e2;
	padding: 5px 18px;
	border-radius: 12px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
}  
</style>

<div id="navigation">
 <ul>
  <li><a href="#"><span class="active">Startseite</span></a></li>
  <li><a href="#">Seite 1</a></li>
  <li><a href="#">Seite 2</a></li>
  <li><a href="#">Seite 3</a></li> 		
  <li><a href="#">Seite 4</a></li> 		
 </ul>
</div>

Die Startseite ist natürlich auch eine URL - jetzt taucht das Problem auf das wenn ich über "Startseite" fahre das #navigation li a:hover vom CSS mit angezeigt wird, heißt das der graue border background von den anderen nicht class="active" ebenfalls versetzt angezeigt wird.

Einfache Lösung: die background-color von #navigation li a:hover anpassen und die gleiche Farbe wie in #navigation .active verwenden. Funktioniert auch, allerdings gilt dieser background dann auch für die anderen nicht class="active" links auch.

Hat da jemand eine saubere Lösung? Das einzige was noch nicht funktioniert bzw. stört ist das wenn ich über den link Startseite fahre der graue border background von #navigation li a:hover angezeigt wird.
Mit Zitat antworten
  #5 (permalink)  
Alt 23.06.2013, 18:13
Benutzerbild von Schwarzerhut
Neuer Benutzer
neuer user
 
Registriert seit: 21.06.2013
Beiträge: 22
Schwarzerhut befindet sich auf einem aufstrebenden Ast
Standard

Code:
<style>
#navigation .active{
	font: 12px Verdana, Tahoma, Arial;
	font-weight: bold;
	text-shadow: #000 0 1px 1px;
	color: #fff;
	background-color: #333;
	border-radius: 12px;
	padding: 5px 18px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
}

#navigation .active:hover{
	font: 12px Verdana, Tahoma, Arial;
	font-weight: bold;
	text-shadow: #000 0 1px 1px;
	color: #fff;
	background-color: #333;
	border-radius: 12px;
	padding: 5px 18px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
}

#navigation ul{
	float: left;
	margin: 13px 0px 0px 175px;
}

#navigation li{
	float: left;
	list-style: none;
	padding: 0px;
	margin: 0px;
}

#navigation li a{
	font: 12px Verdana, Tahoma, Arial;
	font-weight: bold;
	text-align: center;
	text-shadow: #fff 0 1px 1px;
	color: #7a7a7a;
	padding: 5px 18px;
	margin: 0px 3px;
}  

#navigation li a:hover{
	font: 12px Verdana, Tahoma, Arial;
	font-weight: bold;
	color: #7a7a7a;
	background-color: #e2e2e2;
	padding: 5px 18px;
	border-radius: 12px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
}  
</style>

<div id="navigation">
 <ul>
  <li><a href="#" class="active">Startseite</a></li>
  <li><a href="#">Seite 1</a></li>
  <li><a href="#">Seite 2</a></li>
  <li><a href="#">Seite 3</a></li> 		
  <li><a href="#">Seite 4</a></li> 		
 </ul>
</div>
Warum nicht einfach dem <a> die class geben und nen hover dafür machen.

LG

Hut
Mit Zitat antworten
  #6 (permalink)  
Alt 23.06.2013, 19:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.06.2013
Beiträge: 4
me01 befindet sich auf einem aufstrebenden Ast
Standard

Perfekt! So ähnlich hatte ich vorher auch rumprobiert aber anders: ich hatte
statt deinem #navigation .active:hover ein a.active1:hover gemacht und #navigation .active2 diese hab ich dann beide verwendet, was aber nicht richtig funktioniert hatte. Wusste halt nicht das man ner class direkt ein hover geben kann.

Danke dir nochmals
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
Ausrichtung Kalender greece4u CSS 20 14.05.2012 14:32
Navigation ist nicht mittig Schokokrapfen CSS 29 20.09.2011 00:19
Problem mit Navigation safari CSS 12 20.04.2011 12:11
Float-Problem? mischaef CSS 33 20.10.2010 17:20
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 16:29


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