zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Grafische Verbindung von horiz. Haupt-Navigation mit vertikaler Detail-Navigation

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.11.2010, 13:34
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard Grafische Verbindung von horiz. Haupt-Navigation mit vertikaler Detail-Navigation

Ich suche Inspiration.

Die Navigation sei aufgeteilt in eine horizontale Haupt-Navigation und eine (links angeordnete Spalte mit der) Detail-Navigation.

Vom aktiven Eintrag in der Haupt-Nav soll eine grafische Verbindungslinie zur linken Detail-Nav laufen.

Code:
| xxxx | xxx | xxxxxxxx | XXXXX | xxx |
                            |
       +--------------------+
       |
| xxxxxxx    |
| xxxxx      |
| xxxxxxx    |
| XXX        |
| xxxxxx     |
| xxx        |
| xxxxxxx    |
Natürlich soll die Site skalieren.

Fangen wir mit dem einfachsten Fall an: eine feste Breite der Seite in em und eine feste Breite der Detail-Nav-Spalte ebenfalls in em.

Die Grafik für die Linie müsste, so die Überlegung, eine Breite in em haben.

Kennt ihr Sites, wo die beschriebene Aufgabe schön gelöst ist?
__________________

Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.11.2010, 14:18
Neuer Benutzer
neuer user
 
Registriert seit: 16.11.2010
Beiträge: 12
Mister Blue Sky befindet sich auf einem aufstrebenden Ast
Standard Dynamische Grafik

So eine Website kenn ich zwar nicht, aber vielleicht hilft Dir dass:

HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="de" xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<title>test</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
*              {margin:0; padding:0;}
#wrap          {width:80%; margin:40px auto;}
.picbox        {max-width:1000px; max-height:74px; padding:0; margin:0;}
.picbox img    {width:100%; border:0;}
/*]]>*/
</style>

</head><body>

<div id="wrap"><div class="picbox"><img src="http://tiny.cc/2jbcp" 
alt="x" /></div></div>

</body></html>
BS

Geändert von Mister Blue Sky (25.11.2010 um 14:31 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.11.2010, 15:03
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

@Mister Blue Sky

Danke für Deine Mühe.

Die Herausforderungen liegen in diversen Merkmalen:

* keine Größen in px

* mit den Markern (den vertikalen Schnirpseln der Grafik) genau die Mitte eines Menüeintrags und der linken Spalte treffen

* Bild nicht als img, sondern per "background-image" (CSS), da es nicht zum Inhalt gehört
element:after { content: url("bild.png"); display: block; }
scheidet aus, weil man dem Bild keine Breite zuweisen kann.
element { background-image: url("bild.png"); background-position:bottom; background-repeat:no-repeat; }
scheidet aus demselben Grund aus. Weiterhin kann man ein Hintergrundbild nicht unterhalb eines Inhaltes platzieren, wenn von dem Element die Höhe nicht bekannt ist.

* Ideal von der Struktur wäre es, wenn Haupt-Nav und Detail-Nav in einer einzigen verschachtelten Liste stehen.

Ich werde bei Gelegenheit mal bosseln.

Hätte ja sein können, dass sich jemand an eine Seite mit so einer Darstellung erinnert.

Ich selber schätze eine solche Linie als Visualisierung der Zugehörigkeit der Detail-Nav zu einem einzigen Haupt-Nav-Eintrag.

Bei folgendem Code ist mir nicht klar, warum Text und Bild nicht absolut synchron skalieren:

HTML-Code:
<!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">
<head>
<title></title>
<style type="text/css">
div { font-family: monospace; }
img { width: 30em; height: 3em; }
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br />
<img src="http://tiny.cc/2jbcp" /></div>
</body>
</html>
__________________


Geändert von AndreasB (25.11.2010 um 16:26 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 25.11.2010, 16:57
Neuer Benutzer
neuer user
 
Registriert seit: 16.11.2010
Beiträge: 12
Mister Blue Sky befindet sich auf einem aufstrebenden Ast
Standard Firefox Einstellung: Schriftarten

Tipp: Kurzversion {font:normal 16px "courier new", sans-serif;}

HTML-Code:
<!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">
<head>
<title></title>

<style type="text/css">
/*<![CDATA[*/
div.txt {font:normal 16px "courier new", sans-serif; width:60em; 
text-align:center;}
div.img {}
img {width:30em; height:3em;}
/*]]>*/
</style>

</head><body>

<div class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod</div>
<div class="img"><img src="http://tiny.cc/2jbcp" alt="x" /></div>

</body></html>
BS

Geändert von Mister Blue Sky (25.11.2010 um 17:37 Uhr) Grund: Die Begründung: "Gecko Rendering Engine benötigt mehr Code" ... war natürlich Blödsinn
Mit Zitat antworten
  #5 (permalink)  
Alt 25.11.2010, 17:37
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

@Mister Blue Sky

Eine Größenangabe in px für Text möchte ich nicht anwenden.

Kennt jemand die Ursache, warum Text und Bild nicht synchron skalieren?
__________________

Mit Zitat antworten
  #6 (permalink)  
Alt 25.11.2010, 17:44
Neuer Benutzer
neuer user
 
Registriert seit: 16.11.2010
Beiträge: 12
Mister Blue Sky befindet sich auf einem aufstrebenden Ast
Standard Größenangaben

Funktioniert natürlich genauso mit {font:normal 1em "courier new", sans-serif;}

BS
Mit Zitat antworten
  #7 (permalink)  
Alt 26.11.2010, 10:57
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

Zitat:
Zitat von Mister Blue Sky Beitrag anzeigen
Funktioniert natürlich genauso mit {font:normal 1em "courier new", sans-serif;}
Hhmm.
Funktioniert erwartungsgemäß auch mit
div.txt {font-family: monospace; width:60em; text-align:center;}

Angaben zum font-style und zur Größe sind überflüssig sind, da "normal" und "1em" die Default-Werte des Browser sind.

Eine Breitenangabe des div.text sollte sich nicht auf den Breitenverbrauch des Inhaltes auswirken. Geschweige denn auf das nachfolgenden Nachbarelement.

Besonders erstaunlich finde ich, dass sich "text-align:center" auswirkt.

Wie auch immer:
Die ursprüngliche Idee lässt sich, wie es aussieht, nicht umsetzen.

Denn wer will schon eine Festbreitenschrift in der Navi.
__________________

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 19:16 Uhr.