zurück zur Startseite
  


Zurück XHTMLforum > Sonstiges > Offtopic
Seite neu laden Jobangebot für CSS Profi

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.08.2007, 22:26
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.07.2007
Beiträge: 50
Monchichi befindet sich auf einem aufstrebenden Ast
Standard Jobangebot für CSS Profi

Hallo

eigentlich ist der Titel ein wenig übertrieben, denn es geht (für euch Profis) nur um eine Kleinigkeit...

Folgendes:
Ich hätte gerne eine vollkommend valide Navigation in CSS! Ich habe schon eine in Javascript, möchte aber gerne von Javascript weg.....


Ich habe bisher schon einiges versucht, klappt auch schon ganz gut, nur weit weg von valider Programmierung....

Ich habe seit langer Zeit eine Navigation, die der Adobe.com Navigation sehr ähnlich ist. Meine Navigation erzeugt nur horzonatle Subemenus. Davon möchte ich ebenfalls weg.


Was ich nun konkret möchte?
Ich möchte gerne von der Gestaltung die Navigation, die Adobe.com hat nur mit ein paar kleinen Veränderrungen.

Hier erstmal meine alte Navigation
Von der Anordnung (Logo oben links, oben rechts die Texte und die Flaggen) soll alles gleich bleiben!

So soll die Navigation aussehen!
So soll die Navigation werden, nur mit den paar Differenzen wie:
Breite soll 756 pix sein, Logo nicht Links daneben sondern oben drüber wie bei der alten Navigation, und rechts die beiden Flaggen und die Texte.

Die Bilder bei hover, die für die Submenus geladen werden sollen so übernommen werden. Das bedeutet die Bilder bei on hover sind ja rund bei der Adobe Navigation, so hätte ich das auch gerne...


das habe ich bereits erstellt, läuft aber nicht bei jedem Browser, also nicht valide, also schrott!


Code:
Das ist der Code zu dem, was ich bereits gemacht habe:
<HTML><HEAD><TITLE>Navigationsleiste</TITLE>

</HEAD>
<BODY>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>





<style type="text/css">

 /* common styling */
.menu2
{
	width:756px; font-family: verdana, arial, sans-serif; font-size:11px; background:url(navigat.gif); width:756px; height:35px;
}
.menu2 ul
{
	padding:0;margin:0;list-style-type:none;
}
.menu2 ul li
{
	float:left; position:relative;
}
.menu2 ul li.group
{
	display:block; text-indent:10px; background:#666; color:#ff0; width:152px; padding:4px 0;
}
.menu2 ul li a, .menu2 ul li a:visited
{
	float:left; display:block; text-decoration:none; color:#444; padding:0px 16px; line-height:25px; height:30px;
}
.menu2 ul li:hover
{
	width:auto;
}
.menu2 ul li a:hover
{
	background:#aaa url(sub2a.gif); color:#c00;
}
.menu2 ul li:hover a
{
	background:#aaa url(sub2a.gif); color:#c00;
}
.menu2 ul li ul
{
	display: none;
}
.menu2 table
{
	margin:0; border-collapse:collapse; font-size:11px; position:absolute; top:0; left:0;
}

/* specific to non IE browsers */
.menu2 ul li:hover ul
{
	display:block; position:absolute;top:29px; background:#aaa; margin-top:1px; left:0; width:152px;
}
.menu2 ul li:hover ul.scroller
{
	height:138px; width:172px; overflow:auto;
}
.menu2 ul li:hover ul.endstop
{
	left:-90px;
}
.menu2 ul li:hover ul li ul
{
	display: none;
}
.menu2 ul li:hover ul li a
{
	display:block; background:#aaa; color:#fff;height:auto;line-height:15px;padding:4px 16px; width:120px;
}
.menu2 ul li:hover ul li a.drop
{
	background:#888;
}
.menu2 ul li:hover ul li a:hover
{
	color:#ff0; background: #888;
}
.menu2 ul li:hover ul li a:hover.drop
{
	background: #888; color:#ff0;
}
.menu2 ul li:hover ul li:hover ul
{
	display:block; position:absolute; left:153px; top:-70px; color:#000; left:152px; height:138px; width:172px; overflow:auto; background:#888;
}
.menu2 ul li:hover ul li:hover ul li a
{
	background:#888;
}
.menu2 ul li:hover ul li:hover ul li.group
{
	width:152px; padding:5px 0;
}
.menu2 ul li:hover ul li:hover ul.left
{
	left:-172px;
}
.menu2 ul li:hover ul li:hover ul li a:hover
{
	background:#666; color:#0ff;
}
/* specific to IE5.5 and IE6 browsers */
.menu2 ul li a:hover ul
{
	display:block;position:absolute;top:30px; t\op:29px; background:#aaa;left:0; marg\in-top:1px;
}
.menu2 ul li a:hover ul.scroller
{
	height:138px; overflow:auto;
}
.menu2 ul li a:hover ul.endstop
{
	left: -90px;
}
.menu2 ul li a:hover ul li a
{
	display:block; color:#fff; height:1px; line-height:15px; padding:4px 16px; width:152px; w\idth:120px;
}
.menu2 ul li a:hover ul li a.drop
{
	background:#888; padding-bottom:5px;
}
.menu2 ul li a:hover ul li a ul
{
	visibility:hidden; position:absolute; height:0; width:0;
}
.menu2 ul li a:hover ul li a:hover
{
	color:#ff0; background: #888;
}
.menu2 ul li a:hover ul li a:hover.drop
{
	background: #888; color:#ff0;
}
.menu2 ul li a:hover ul li a:hover ul
{
	visibility:visible; position:absolute; top:-69px; t\op:-70px; color:#000; left:152px; height:138px; width:170px; overflow:auto; background:#888;
}
.menu2 ul li a:hover ul li a:hover ul.left
{
	left:-170px;
}
.menu2 ul li a:hover ul li a:hover ul li a:hover
{
	background:#666; color:#0ff;
}
.left
{
	clear:both;
}
</style>


</head>


<body>
	

<div class="menu2">

<ul>
<li><a class="menu2one" href="#nogo">Home</a></li>
</ul>
<ul>
<li><a class="menu2two" href="#nogo">Products
<!--[if IE 7]><!--></a><!--<![endif]-->
	<table><tr><td>
	<ul>
	<li><a href="#nogo">Mobiles</a></li>
	<li><a href="#nogo">Photoframes</a></li>
	<li><a href="#nogo">Tripods</a></li>
	<li><a class="drop" href="#nogo">Cameras
	<!--[if IE 7]><!--></a><!--<![endif]-->
		<table><tr><td>
		<ul>
		<li class="group">Minolta</li>
		<li><a href="#nogo">SLRs</a></li>
		<li><a href="#nogo">Compact</a></li>
		<li><a href="#nogo">Digital</a></li>
		<li><a href="#nogo">Video</a></li>
		<li class="group">Cannon</li>
		<li><a href="#nogo">SLRs</a></li>
		<li><a href="#nogo">Compact</a></li>
		<li><a href="#nogo">Digital</a></li>
		<li><a href="#nogo">Video</a></li>
		<li class="group">Nikon</li>
		<li><a href="#nogo">SLRs</a></li>
		<li><a href="#nogo">Compact</a></li>
		<li><a href="#nogo">Digital</a></li>
		<li><a href="#nogo">Video</a></li>
		<li class="group">Olympus</li>
		<li><a href="#nogo">SLRs</a></li>
		<li><a href="#nogo">Compact</a></li>
		<li><a href="#nogo">Digital</a></li>
		<li><a href="#nogo">Video</a></li>
		</ul>
		</td></tr></table>
	<!--[if lte IE 6]></a><![endif]-->
	</li>
	<li><a href="#nogo">Memory cards</a></li>
	<li><a href="#nogo">Camcorders</a></li>
	</ul>
	</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a class="menu2three" href="#nogo">Services
<!--[if IE 7]><!--></a><!--<![endif]-->
	<table><tr><td>
	<ul class="scroller">
	<li><a href="#nogo">Photography</a></li>
	<li><a href="#nogo">Video editing</a></li>
	<li><a href="#nogo">Web site Design</a></li>
	<li><a href="#nogo">Reference guides</a></li>
	<li><a href="#nogo">Photo-editing</a></li>
	<li><a href="#nogo">Banner design</a></li>
	<li><a href="#nogo">Web consultancy</a></li>
	<li><a href="#nogo">Banner Exchange</a></li>
	</ul>
	</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a class="menu2four" href="#nogo">Contact us</a></li>
<li><a class="menu2five" href="#nogo">Site map</a></li>
<li><a class="menu2six" href="#nogo">News
<!--[if IE 7]><!--></a><!--<![endif]-->
	<table><tr><td>
	<ul >
	<li><a href="#nogo">Breaking</a></li>
	<li><a href="#nogo">Latest</a></li>
	<li><a href="#nogo">May 2006</a></li>
	<li><a class="drop" href="#nogo">News archives
	<!--[if IE 7]><!--></a><!--<![endif]-->
		<table><tr><td>
		<ul class="left">
		<li class="group">2006</li>
		<li><a href="#nogo">April</a></li>
		<li><a href="#nogo">March</a></li>
		<li><a href="#nogo">February</a></li>
		<li><a href="#nogo">January</a></li>
		<li class="group">2005</li>
		<li><a href="#nogo">December</a></li>
		<li><a href="#nogo">November</a></li>
		<li><a href="#nogo">October</a></li>
		<li><a href="#nogo">September</a></li>
		<li><a href="#nogo">August</a></li>
		<li><a href="#nogo">July</a></li>
		<li><a href="#nogo">June</a></li>
		<li><a href="#nogo">May</a></li>
		<li><a href="#nogo">April</a></li>
		<li><a href="#nogo">March</a></li>
		<li><a href="#nogo">February</a></li>
		<li><a href="#nogo">January</a></li>
		</ul>
		</td></tr></table>
	<!--[if lte IE 6]></a><![endif]-->
	</li>
	</ul>
	</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
</ul>

</div>
</body>
</html>
Es fehlt also lediglich noch die erstellung der Hintergrundbilder bei hover und die Validität des Codes, den ich einfach nicht hinbekomme...

Also nochmal kurz:
1. Hintergrundbilder bei Hover für Submenus integrieren
2. Code soll valide sein
3. Aufbau soll wie bei der alten Navigation sein (Logo links, Breite 756px, und Flaggen rechts)
4. Alles per CSS kein Javascript einsetzen
5. Navigation zentrieren, diese muss immer mittig sein



Wenn jemand Interesse hat ein wenig Geld zu verdienen und sich der Aufgabe gewachsen fühlt, dann schreibt hier bitte zurück oder pm..

Die Bilder für die Submenus bitte selber erstellen oder bescheid sagen, dann mache ich das noch schnell...

Geändert von Monchichi (19.08.2007 um 22:33 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.08.2007, 20:33
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.07.2007
Beiträge: 50
Monchichi befindet sich auf einem aufstrebenden Ast
Standard

Hat denn keiner Interesse ein wenig Geld zu verdienen?

Ich bin gerne bereit ein wenig zu zahlen und bin auch schon ein wenig weiter....

Hier die neue Version der Navigationsleiste


Wie gesagt es fehlt nur noch die validivität für alle browser und das laden der hintergrundbilder für die submenus....

Wie gesagt das kann genauso aussehen wie bei adobe.com....

Ich denke, dass wird im Prinzip nur eine Kleinigkeit für ein CCS Profi sein...

Bitte meldet euch, ist sehr dringend. Schickt mir ein Angebot, was das kosten soll und dann gehts sofort los!

Geändert von Monchichi (20.08.2007 um 20:36 Uhr)
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
2 CSS Files -> 1 CSS File Habi CSS 7 17.02.2010 16:25
Verschachteln und Erweitern von CSS? DerJo CSS 4 25.01.2010 19:07
MYspace mehr als nur CSS oder ? Vinceone CSS 0 12.07.2007 03:21
Eric Meyer's CSS Petty Ressourcen 0 21.11.2005 09:18
Mozilla ignoriert externes css DarkWanderer CSS 9 22.09.2005 12:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:29 Uhr.