zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Brauche Tipps zur Umsetzung der Navigation

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.03.2007, 09:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.03.2007
Beiträge: 3
c3us befindet sich auf einem aufstrebenden Ast
Standard Brauche Tipps zur Umsetzung der Navigation

Hallo CSS-Freunde,
ich habe folgendes Layout und bin gerade am überlegen wie ich am effektivsten
die Navigation umsetze. Sie besteht aus dem 1px Border, dann dem Navi Text
und dann diesem Kastenbild welches auch einen Mouseover besitzt bei Hover.

Habt ihr Ideen? Ich hab schon an diese Bilder Matrix gedacht.

Danke!!
Angehängte Grafiken
Dateityp: jpg layout.jpg (10,6 KB, 31x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.03.2007, 10:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.149
mazzo wird schon bald berühmt werden
Standard

Navigationsmenus gehören in Listen. Du hast da -wenn ich das richtig verstehe- eine 2-Ebenen-Navi: Oben ein Rubrik-Begriff und der blaue Kasten darunter mit einer anderen Verlinkung, richtig?
Dann böte sich z.B. ein Menu in einer Definitionsliste an.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.03.2007, 10:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.03.2007
Beiträge: 3
c3us befindet sich auf einem aufstrebenden Ast
Standard

Danke für die Antwort, aber das war vielleicht etwas unmissverständlich von mir.

Also das erste li Element (Erster Kasten) besteht sozusagen aus:
____
Text
Bild

Wobei das Bild auch einen Mouseover hat.

Das Bild ist ursprünglich eine große Grafik welche weisse Trenner hat.

Man könnte jetzt das große Bild stückeln und jedem Li eine Hintergrundgrafik zuweisen.
Aber wäre es nicht viel besser so eine Bildmatrix zu erstellen? Also jedes Li hat die gleiche
Grafik bloss die px position ist eine andere. Fragen über Fragen.
Mit Zitat antworten
  #4 (permalink)  
Alt 20.03.2007, 10:19
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.149
mazzo wird schon bald berühmt werden
Standard

Dann ist es noch einfacher.
Wie wär es damit?
Code:
<ul>
<li>Text<a href="#">verlinkter Bildtext</a></li>
<li>....<li>
</ul><
a als Blockelement in der gewünschten Höhe und dem blauen Hintergrundbild (+Rahmen? könnte auch dem <li> zugewiesen werden). Die <li> natürlich alle gefloatet um nebeneinander zu stehen.
Mit Zitat antworten
  #5 (permalink)  
Alt 20.03.2007, 15:05
Neuer Benutzer
neuer user
 
Registriert seit: 19.03.2007
Beiträge: 3
Bichler befindet sich auf einem aufstrebenden Ast
Standard Genau so!

Hi,
da schließe ich mich an: die Navi gehört in Listen, und wenn die Listenpunke (li-Tags) nebeneinander erscheinen sollen, dann am besten floaten.

Hätte folgenden Vorschlag:
###########################
<html>
<head>
<title>Test-Liste</title>
<meta name="author" content="Besitzer">
</head>
<style type="text/css">
* {margin:0; padding:0;}
body {margin:10px;}
div#header {width:1004px;height:50px;background-color:#00E0FF;}

div#navi {width:1010px;height:140px;background-color:#FFF;}
div.nav_item ul {list-style:none; margin:0; padding:0;text-align:center;}
div.nav_item {float: left;height: 130px;width: 140px;padding:0;margin: 0 2px;background-color:red;}
div.randLinks {margin-left:0;}
div.nav_item ul li.nav_title {width:140px;height:20px;color:#FFF;background-color:blue;}
div.nav_item ul li.nav_link a {display:block;width:140px;height:120px;color:#007 F00;background-color:#FFBF00;}
div.nav_item ul li.nav_link a:hover {background-color:#F00;}
br.clearing {clear:both;}


div#content {height:300px;width:1004px;border:1px solid blue;}

div#footer {width:1008px;height:150px;background-color:#00C070;}

</style>
<body>
<div id="header">Kopfbreich</div>

<div id="navi">
<div class="nav_item randLinks">
<ul>
<li class="nav_title">Punkt 1</li>
<li class="nav_link"><a href="#">Zu diesem Punkt</a></li>
</ul>
</div>

<div class="nav_item">
<ul>
<li class="nav_title">Punkt 2</li>
<li class="nav_link"><a href="#">Zu diesem Punkt</a></li>
</ul>
</div>

<div class="nav_item">
<ul>
<li class="nav_title">Punkt 3</li>
<li class="nav_link"><a href="#">Zu diesem Punkt</a></li>
</ul>
</div>

<div class="nav_item">
<ul>
<li class="nav_title">Punkt 4</li>
<li class="nav_link"><a href="#">Zu diesem Punkt</a></li>
</ul>
</div>

<div class="nav_item">
<ul>
<li class="nav_title">Punkt 5</li>
<li class="nav_link"><a href="#">Zu diesem Punkt</a></li>
</ul>
</div>

<div class="nav_item">
<ul>
<li class="nav_title">Punkt 6</li>
<li class="nav_link"><a href="#">Zu diesem Punkt</a></li>
</ul>
</div>

<div class="nav_item">
<ul>
<li class="nav_title">Punkt 7</li>
<li class="nav_link"><a href="#">Zu diesem Punkt</a></li>
</ul>
</div>
<br class="clearing" />
</div>

<div id="content">Inhalte</div>
<div id="footer">Fußbereich</div>

</body>
</html>
###############################
Passt vielleicht an dem einen oder anderen Pixel noch nicht exakt, ist aber recht robust (übrigens in Anlehnung an ein Layout von Eric Meyer's CSS).

Nicht vergessen: es geht um XHTML. Und da wäre ein "großes Bild mit weißen Linien als Abtrenner" wahrlich nicht die konsequenteste Lösung.

Greetings

Bichler
Mit Zitat antworten
  #6 (permalink)  
Alt 20.03.2007, 15:21
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.149
mazzo wird schon bald berühmt werden
Standard

obiges Beispiel packt aber lauter Listen nebeneinander, anstatt das Menu in einer Liste zu lassen, wie es semantisch korrekt wäre.
Mit Zitat antworten
  #7 (permalink)  
Alt 20.03.2007, 17:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.03.2007
Beiträge: 3
c3us befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Bichler Beitrag anzeigen
Nicht vergessen: es geht um XHTML. Und da wäre ein "großes Bild mit weißen Linien als Abtrenner" wahrlich nicht die konsequenteste Lösung.
Danke!

Also bezüglich Bildermatrix meinte ich das hier:
Navigation Matrix Reloaded @ Dan Rubin’s SuperfluousBanter

Ein ul und dann die <li>'s . Und da ich so oder so entweder viele kleine
oder ein großes Bild lade ist es doch vom Aufwand her besser wenn ich
das gleich so aufbaue? Da spare ich mir 6 Http Requests.
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:22 Uhr.