CSS: Navigationsbalkenüber komplette Breite

sukitio · 22.06.2011

Hi,
ich habe ein Problem mit CSS (da blutiger Anfänger).
Und zwar würde ich gerne meine Navigation (als waagerechte Balken untereinander) über die komplette Breite des jeweiligen Screens und hinter dem eigentlichen Content laufen lassen.

Kann man das in CSS programmieren oder muss ich dafür Bilder verknüpfen? Wenn Bilder, wie erreiche ich dann, dass die Hintergrundbalken immer - egal wie die Auflösung des Bildschirms ist - über den kompletten Schirm laufen?

Vielen Dank für eure Hilfe,

sukitio

fakerer · 22.06.2011

AW: CSS: Navigationsbalkenüber komplette Breite

hmm navi hinter dem content na ja ich weis nicht ob das userfreundlich ist

aber wie auch immer ganze breite einfach immer width:100% und damit das ganze hinter dem contet ist einfach mit z-index arbeiten.

germinal · 22.06.2011

AW: CSS: Navigationsbalkenüber komplette Breite

Hallo,

Deine Fragestellung ist vielleicht etwas verwirrend. Deine Navigation soll "als waagerechte Balken untereinander" erscheinen? Wie meinst Du das? So, wie bei kicker.de? Dann nennt man das dropline. Ist ein wenig kompliziert, lohnt sich aber zu googlen. Dazu gibt es auch tolle Beispiele.
Die komplette Breite zu nutzen ist, wie fakerer oben schon beschrieb, nicht schwer.
Aber was um alles in der Welt soll eine Navigation denn nutzen, wenn sie sich hinter dem Content versteckt???
Oder soll der Content unter der Navi durchgescrollt werden??

rakader · 23.06.2011

AW: CSS: Navigationsbalkenüber komplette Breite

Sukito, formuliere das bitte genau, und zeige per Bild (Screenshot) was du meinst. Das ist so verschwurbelt, dass Dein Anliegen keiner versteht. Kann man auch als Unhöflichkeit auffassen.

hubspe · 23.06.2011

AW: CSS: Navigationsbalkenüber komplette Breite

fakerer schrieb:
aber wie auch immer ganze breite einfach immer width:100% und damit das ganze hinter dem contet ist einfach mit z-index arbeiten.

sorry, aber das ist imho teilweise unnötig, teilweise zu unscharf für einen Anfänger formuliert.

Die Angabe einer Breite ist bei Blockelementen überflüssig, da diese automatisch immer so breit werden wie Platz ist.

z-index greift nur bei Elementen, die ungleich position:static sind.
Hier mal eine einfache Erklärung der Stapelreihenfolge.

@sukitio Als blutiger Anfänger ist Little Boxes dein Freund.

Ein Link zum Problem ist immer das Beste für eine effektive Hilfe.

gosiggi · 23.06.2011

AW: CSS: Navigationsbalkenüber komplette Breite

Speziell für Menüs kann ich dir die Seite von also CSSplay wärmstens empfehlen......

rakader · 24.06.2011

AW: CSS: Navigationsbalkenüber komplette Breite

Stu ist eine Entdeckungsreise wert. Aber IMHO für Fortgeschrittene und Profis.

sukitio · 26.06.2011

AW: CSS: Navigationsbalkenüber komplette Breite

Hallo nochmal,
ich hab mich wahrscheinlich etwas unklar ausgerückt. Deswegen hier ein Screenshot von dem, wie ich mir das vorstelle: http://666kb.com/i/bup342j2ek3nacqdg.png

Zur Erklärung:
Helle Balken=Standardaussehen
Dunkler Balken=Aktive Seite / Hover

Wie man sieht soll die Navigation links und rechts vom Content abgebildet werden.

Danke für eure Hilfe!

sukitio · 26.06.2011

AW: CSS: Navigationsbalkenüber komplette Breite

Die Seite von Stu hab ich mir auch mal angeschaut. Wie rakader auch sagte denk ich, dass das eher was für Forgeschrittene ist (zumindest fortgeschrittener als ich

)
Da ich aber in diesem Bereich mehr machen will, merk ich mir die Seite schonmal vor. Danke dafür.

sukitio · 28.06.2011

AW: CSS: Navigationsbalkenüber komplette Breite

Guten Abend nochmal zusammen,

Ich habe das Grundproblem nun wie folgt gelöst:
- Die Balken als divs ganz normal mit den entsprechenden Attributen angelegt
- Darüber ein weiteres div mit den Navigationspunkten

Bei dieser "Lösung" gibt es nur ein Problem:
Geht man mit dem Mauszeiger auf das Wort und nicht auf den Balken, bekommt der Balken natürlich keine "hover"-Farbe.
Nun bin ich am überlegen, ob ich auf den hover-Effekt verzichte, sodass nur die aktive Seite einen entsprechend eingefärbten Navigationspunkt bekommt, da ich wirklich nur ungern die Seite über Bilder aufbauen würde (Ziel ist es möglichst wenig Speicherplatz zu benötigen).

Kennt jemand eine elegantere Lösung rein mit den mir zur Verfügung stehenden Mitteln HTML/CSS?

rakader · 28.06.2011

AW: CSS: Navigationsbalkenüber komplette Breite

sukitio schrieb:
Hallo nochmal,
ich hab mich wahrscheinlich etwas unklar ausgerückt. Deswegen hier ein Screenshot von dem, wie ich mir das vorstelle: http://666kb.com/i/bup342j2ek3nacqdg.png

Zur Erklärung:
Helle Balken=Standardaussehen
Dunkler Balken=Aktive Seite / Hover

Ja jetzt ist klar, was Du meinst. Da ist hover nicht unbedingt die zielführende Lösung. Mache doch einfach ein gif/png mit den zwei Balken und navigiere zum entsprechenden Ausschnitt mit css. Darüber legst Du die Schrift.
Wichtig ist dabei die background-position. Ein Beispiel aus einem alten Projekt möge helfen, beigefügt das Bild - dann bekommst Du eine Ahnung, wie das ausgelesen wird.

Code:

#header #navigation ul li a { background:transparent url(../gfx/navigation-item.gif) no-repeat 0 0; }
#header #navigation ul li a:hover { color:#e5cfb9; text-decoration:none; }
#header #navigation ul li a:focus { color:#e5cfb9; text-decoration:none; }
#header #navigation ul li.current a { background-position: 0 -40px; z-index:9999; }
#header #navigation ul li.first a { background-position: 0 -80px; }
#header #navigation ul li.first.current a { background-position: 0 -120px; z-index:9999; }
#header #navigation ul li.last a { background-position: 0 -160px; }
#header #navigation ul li.last.current a { background-position: 0 -200px; z-index:9999; }

sukitio · 28.06.2011

AW: CSS: Navigationsbalkenüber komplette Breite

rakader schrieb:
Mache doch einfach ein gif/png mit den zwei Balken und navigiere zum entsprechenden Ausschnitt mit css. Darüber legst Du die Schrift.

Zunächst einmal danke für das Beispiel, vielleicht kann ich daraus lernen. Werde ich mir morgen eingehender anschauen.

Wie gesagt würde ich das ganze am liebsten ohne externe Grafiken lösen. Wenn du allerdings meinst, dass das nicht elegant zu lösen ist, lass mich das doch bitte wissen.

Hast du auch evtl einen Rat, wie ich das Problem in meinem vorherigen Post beheben kann? Also, dass der Balken auch eingefärbt wird, wenn der Text markiert ist?
Ich kenn mich in HTML/CSS echt zu wenig aus um das beurteilen zu können, aber könnte man das Textelement so definieren, dass beim mouseover so auch der Balken mit geändert wird (gern auch mit weiteren Mitteln als HTML/CSS. Am besten lern ich beim machen)?

sukitio · 30.06.2011

AW: CSS: Navigationsbalkenüber komplette Breite

Und nocheinmal ich. Kleiner Push, um eine Sache noch zu klären:
Kann ich Text direkt in einen Balken schreiben bzw. den Navi-Text so mit Farbe zu hinterlegen, dass diese Hintergrundfarbe über die gesamte Bildschirmbreite läuft?

rakader · 30.06.2011

AW: CSS: Navigationsbalkenüber komplette Breite

sukitio schrieb:
Und nocheinmal ich. Kleiner Push, um eine Sache noch zu klären:
Kann ich Text direkt in einen Balken schreiben bzw. den Navi-Text so mit Farbe zu hinterlegen, dass diese Hintergrundfarbe über die gesamte Bildschirmbreite läuft?

Bildschirmbreite ist relativ. Hast Du das bedacht? Damit auf jedem Bildschirm die Breite optimal errechnet wird, wirst Du in diesem Fall um JavaScript nicht herumkommen.

Tipp: Mache es für den Anfang nicht unnötig kompliziert.

hubspe · 01.07.2011

AW: CSS: Navigationsbalkenüber komplette Breite

sukitio schrieb:
Kann ich Text direkt in einen Balken schreiben bzw. den Navi-Text so mit Farbe zu hinterlegen, dass diese Hintergrundfarbe über die gesamte Bildschirmbreite läuft?

ja!

rakader schrieb:
Bildschirmbreite ist relativ. Hast Du das bedacht? Damit auf jedem Bildschirm die Breite optimal errechnet wird, wirst Du in diesem Fall um JavaScript nicht herumkommen.

äh...wie kommste denn darauf?
Wie ich schon postete Blockelemente werden immer so breit wie es geht und wenn da nix begrenzendes drumherum ist, ist der Bildschirm das Begrenzende, egal wie breit oder schmal der ist (und das sogar ganz ohne JS

).

@sukitio wo ist der Link zum Problem? Zeig uns deinen bisherigen Versuch (nein kein Bild sondern einen Link zum Problem).
Willst du effektive Hilfe oder ein wildes Rumgerate wie bisher? :rolleyes:

rakader · 01.07.2011

AW: CSS: Navigationsbalkenüber komplette Breite

hubspe schrieb:
äh...wie kommste denn darauf?
Wie ich schon postete Blockelemente werden immer so breit wie es geht und wenn da nix begrenzendes drumherum ist, ist der Bildschirm das Begrenzende, egal wie breit oder schmal der ist (und das sogar ganz ohne JS

).
:

Da hast natürlich recht. Ich ging davon aus, dass er eine bestimme Breite meinte. D'accord mit dem Herumgerate.

hubspe · 01.07.2011

AW: CSS: Navigationsbalkenüber komplette Breite

rakader schrieb:
D'accord mit dem Herumgerate.

würde langsam dafür plädieren das sukitio einen Preis für die richtige Antwort aussetzt, wie das in jedem ordentlichen Quiz der Fall ist.

sukitio · 02.07.2011

AW: CSS: Navigationsbalkenüber komplette Breite

OK, dann hab ich das mit dem Problem zeigen falsch verstanden, sorry dafür. Hier dann mal der bisherige Code:
HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>erste page mit css</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>
<div id="kopf"></div>
<div id="navi">
    c<a href="http://www.google.de" class="navi_type" style="position:absolute; top:5px;">home</a>
    <a href="http://www.google.de" class="navi_type" style="position:absolute; top:30px;">gallerie 1</a>
    <a href="http://www.google.de" class="navi_type" style="position:absolute; top:55px;">gallerie 2</a>
    <a href="http://www.google.de" class="navi_type" style="position:absolute; top:80px;">vita</a>
    <a href="http://www.google.de" class="navi_type" style="position:absolute; top:105px;">kontakt</a>
    <a href="http://www.google.de" class="button" style="position: absolute; top:0px; left:0px;"></a>
    <a href="http://www.google.de" class="button" style="position: absolute; top:25px; left:0px;"></a>
    <a href="http://www.google.de" class="button" style="position: absolute; top:50px; left:0px;"></a>
    <a href="http://www.google.de" class="button" style="position: absolute; top:75px; left:0px;"></a>
    <a href="http://www.google.de" class="button" style="position: absolute; top:100px; left:0px;"></a>
    
</div><div id="content"></div><div id="footer"></div></body></html>

CSS:

Code:

@charset "UTF-8";
/* CSS Document */

body,td,th {
    font-family:"Lucida Sans Unicode", "Lucida Grande";
    font-size: 14px;
    color: #808080;
}

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}

a {
    font-size: 14px;
    color: #808080;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #808080;
}
a:hover {
    text-decoration: none;
    color: #579caa;
}
a:active {
    text-decoration: none;
    color: #579caa;
}

h1 {font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size:24px;
    font-style:normal;
    color:#630;
    font-weight: bold;
}

.button {
    text-align:right;
    position:absolute;
    width:100%;
    height:20px;
    background-color:#FFF;
    color:#c3c3c3;
    font-size:10px;
    text-indent: 10px;
    display:block;
    z-index:1;
}
a.button:link {
    text-decoration: none;
    background-color:#787878;
    color:#FFF;
}
a.button:visited {
    text-decoration: none;
    background-color:#787878;
    color:#FFF;
}
a.button:hover {
    text-decoration: none;
    background-color:#579caa;
    color:#FFF;
}
a.button:active {
    text-decoration: none;
    background-color:#579caa;
    color:#FFF;
}

.navi_type {
    color:#000000;
    text-decoration:none;
    text-align:right;
    font-size:10px;
    position:absolute;
    left:260px;
    z-index:2;
}

.navi_type:link {
    color:#000000;
    text-decoration:none;
}

.navi_type:hover {
    color:#000000;
    text-decoration:none;
}

.navi_type:visited {
    color:#000000;
    text-decoration:none;
}

.navi_type:active {
    color:#000000;
    text-decoration:none;
}

#kopf {
    position:absolute;
    top:0px;
    left:300px;
    height:150px;
    width:300px;
    background-color:#999;
    display:block;
}

#navi {
    position:absolute;
    top:180px;
    left:0px;
    height:500px;
    width:100%;
    z-index:1;
}

#content {
    position:absolute;
    top:180px;
    left:300px;
    height:500px;
    width:300px;
    background-color:#999;
    display:block;
    z-index:2;
}

#footer {
    position:absolute;
    top:550px;
    left:300px;
    height:150px;
    width:300px;
    background-color:#999;
    display:block;
}

Hier hab ich die Schrift der Navigation über die Balken gelegt. Natürlich wird dann beim mouseover auf die Schrift der Balken nicht umgefärbt. Das würde ich gerne beheben und zusätzlich die Schrift dann rechtsbündig an dem Contentfenster ausrichten.

Ich hoffe, ihr könnt mir so einfacher helfen

rakader · 02.07.2011

AW: CSS: Navigationsbalkenüber komplette Breite

Nun, hubspe meinte, Du solltest Dein Projekt mal online stellen. Das geht ja einfach mit einer Subdomain.

Zur Ausrichtung:
.navi_type
float:right;
width: DeinWertpx;
text-align:right;

Zum hover/visited:
Lege mal Unterseiten an. Der Google-Link ist Müll.
Dann für aktive Seite Link rausnehmen, dann wird active aktiv.

Dann mache Deine Navigation mit Liste - div braucht es nicht, vgl. selfhtml:
<ul>
<li><a>Start</a> </li>
<li><a href="./kapitel1.html">Kapitel 1</a> </li>
</ul>

Start ist hier der aktive oder besuchte Bereich. Das wolltest Du doch? Und das definierst Du mit der Hintergrundfarbe.
Wenn's das nicht ist, gebe ich auf mit raten.

hubspe · 02.07.2011

AW: CSS: Navigationsbalkenüber komplette Breite

sukitio schrieb:
Ich hoffe, ihr könnt mir so einfacher helfen

jau..äh...umpf....*umkipp*...............*wiederhochrappel*.

So, jetzt gehts wieder.

Also du machst den typischen Anfängerfehler und positionierst alles absolut und weißt im Grunde gar nicht was das macht, bzw. bewirkt.
Eine navi ist eine Aufzählung von Links und gehört deshalb in eine ul.

Das hat meiner Meinung nach so keinen Zweck.
Den Link zu Little Boxes habe ich ja schon gepostet, bitte arbeite das doch mal durch, damit du wenigstens eine gute Grundlage bekommst.

edit. Kann mir jemand verraten warum zwischen wiederh und ochrappel ein Leerzeichen eingefügt wird? :eek: