Navigationsleiste ohne Frames

tebox

Servus,

ich habe eine schöne Design-Idee für meine linksseitige Navigationsleiste. Ich möchte ein Hintergrundbild für die Navigation benutzen, das sich vertikal wiederholt. Natürlich nur bis zum unteren Seitenende.
Es sollte dabei weder Scrolleisten produzieren, indem es über das untere Seitenende hinaus geht (vielleicht mit overflow:hidden). Es sollte aber auch nicht zu früh aufhören. Das heißt, es sollte sich so lange wiederholen, wie es die Länge des Inhalts der Seite erfordert.

Denkt ihr, dass das möglich ist?

Ronald

Moin!

Ich "denke" nicht das das möglich ist, ich weiß es *fg*

Wie teilst du deine Seite denn auf, benutzt Frames, Tabellen, oder was anderes?

Im Grunde ist das allerdings egal, du weißt einfach dem Body-, Table-, TD- oder Div-Tag eine Höhe von 100% und eine Hintergrundgrafik zu. Dabei kannst du das Verhalten der Grafik bestimmem, z.B. eben auch, ob sie sich vertikal oder horizontal wiederholen soll. Schau mal bei SelfHTML nach, da ist das ganz anschaulich beschrieben: http://de.selfhtml.org/css/eigenschaften/hintergrund.htm

G.a.d.M.

Ronald

tebox

Ok, ich glaube ohne konkretes Beispiel kann ich das Problem nicht deutlich machen: Mein Code lautet

Code

<div style="
position:absolute;
top:0px;
left:0px;
z-index:0;
height:138px;
width:100%;
background: url(banner-top.gif);
background-repeat: no-repeat;">
</div>


<div style="
position:absolute;
top:138px;
left:3px;
z-index:1;
height:100%;
width:180px;
background-image:url(navigation-bg.gif);
background-repeat:repeat-y;">
</div>

Alles anzeigen

Das ganze kann man sich auch anschauen auf
http://<br>http://www.lamla.com/test/versuchsfeld.html</a><br>

vor allem der IE macht komische Sachen. Er interpretiert "width:100%" als "width:70%" oder so. (Zumindest bei mir) Das Problem konnte ich lösen, indem ich das Banner zum body-Hintergrund machte. Habe es jetzt aber mal so gelassen, damit man die Struktur besser versteht.

yeti66

Hitebox,

also mit der Höhenangabe in % ist das so eine Sache:
"Der Prozentwert wird realtiv zur Höhe des umschließenden Blocks der erzeugten Box berechnet. Wird die Höhen der umschließenden Box nicht explizit angegeben (das heißt, ist sie demnach von der Inhaltshöhe abhängig), wird der Wert als 'auto' interpretiert."---->Zitat aus XHTML,CSS & Co von S. Mintert

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Versuchsfeld</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
		#container { text-align:left;margin:0 auto;position:relative;width: 1230px;height:100%;border:solid 0 }
		#banner {position:relative;left:0px;top:0px;width: 1230px; height:138px;background: url(banner-top.gif);}
		#navi { position: absolute;top:138px; margin-left:3px;padding: 0px;width:180px; height:1200px;background-image:url(navigation-bg.gif);background-repeat:repeat-y;}	
		#content { position:absolute;padding: 0px; width:1150px; left:183px; top: 138px;}

</style>
</head>
<body>
<div id="container">
  <div id="banner"></div>
  <div id="navi">
    <div id="nav-menu">
      <ul>
        [*][url='#']Men&uuml;punkt1[/url]
        [*][url='#']Men&uuml;punkt2[/url]
        [*][url='#']Men&uuml;punkt3[/url]
        [*][url='#']Men&uuml;punkt4[/url]
        [*][url='#']Men&uuml;punkt5[/url]
        [*][url='#']Men&uuml;punkt6[/url]
        [*][url='#']Men&uuml;punkt7[/url]
        [*][url='#']Men&uuml;punkt8[/url]
      [/list]
    </div>
  </div>
  <div id="content">Lorem ipsum ............gekürzt wegen der Dastellung im Forum..........ipsum dolor sit ametur. </div>
</div>
</body>
</html>

Alles anzeigen

Will sagen hilf Dir mit einer absoluten Angabe.
Einzige absolute Lösung: mit JS das Bilschirmformat abfragen und übergeben.

Gruß yeti66
P.S.: Habe Deinen Code etwas in Form gebracht. Deine navigation-bg.gif ist 3px zu schmal auf der linken Seite!!.

Ronald

Zitat von yeti66

Einzige absolute Lösung: mit JS das Bilschirmformat abfragen und übergeben.

Falsch!

Bessere Lösungen:

eine Tabelle mit CSS auf 100% setzen und die Hintergrundgrafik als Tabellenhintergrund benutzen.

Da aber auch bei diesem User die DIVormie ausgebrochen zu sein scheint, halte ich mich mal lieber zurück.

Nur eine Frage noch: Wo lernt man das mit diesen endlosen und sinnlosen DIV-Tags eigentlich?

Fragt ...

Ronald

yeti66

Oder, wenn man obiges Zitat umsetzt:

Code

#container { text-align:left;margin:0 auto;position:relative;width: 1230px;height:100%;border:solid 0 }

-- >die Höhe in : height:2000px; ändern und ;

Code

#navi { position: absolute;top:138px; margin-left:3px;padding: 0px;width:180px; height:1200px;background-image:url(navigation-bg.gif);background-repeat:repeat-y;}

-- > die Höhe in 100% ändern.

Und schon erfüllt man die Bedingungen aus obigen Zitat.

Gruß yeti66

yeti66

Zitat von Ronald

Falsch!

Bessere Lösungen:

eine Tabelle mit CSS auf 100% setzen und die Hintergrundgrafik als Tabellenhintergrund benutzen.

Da aber auch bei diesem User die DIVormie ausgebrochen zu sein scheint, halte ich mich mal lieber zurück.

Nur eine Frage noch: Wo lernt man das mit diesen endlosen und sinnlosen DIV-Tags eigentlich?

Fragt ...

Ronald

Alles anzeigen

zu JS:
Naja mit JS die Bildschirmformat abzufragen und das Ergebnis in einer Weiche zu benutzen um seine Seite anzupassen war früher gängige Methode, heute wird das nicht mehr empfohlen, das ist schon richtig. Es ist aber eine Möglichkeit.
zu DIVormie:
..ja,ja ist schon recht. Ich sage auch nicht, das es optimal ist. Ich habe halt den navi-container von tebox der Einfachheit halber in meinen #nav gesetzt und den #container mache ich immer am Anfang. Das macht es für mich mit der Positionierung einfacher. Beides kann wegfallen, wenn der CSS-Code angepaßt wird. Ich wollte aber nicht soviel von tebox's Code ändern.
Der Königsweg ist die Vorgehensweise nicht, aber wer kann das von sich behaupten.

yeti66

tebox

Danke für die Hilfe yeti66,

Der Navigationshintergrund wiederholt sich jetzt schön. Leider wird er nicht am unteren Seitenrand abgeschnitten.
Geht es vielleicht einfach doch nicht so, wie ich es mir gedacht habe?

Zur "DIVormie": Natürlich kann man hier wieder eine Grundsatzdiskussion vom Zaun brechen, aber eigentlich hatte ich eine Anfrage für ein konkretes Problem. (ohne jetzt unhöflich werden zu wollen). Naja ich antworte trozdem.

An Frames stört mich massiv, dass die Adresse der html-Dateien nicht angezeigt wird.

Tabellen wollte ich zur Darstellung von ... na eben von ... Tabellen nutzen und nicht zur Seitenstrukturierung. Die wollte ich ausschließlich mit CSS machen. Ich sehe auch nicht, was an Divs schlecht sein soll. Nur dass es halt nicht ganz so funktioniert, wie ich es mir erhoffte.

tebox

Ok, ich habs mit einer Tabelle verusucht, aber irgendwie...muss ich da einen (oder dutzende) Fehler eingebaut haben.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Versuchsfeld</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
</head>


<body>
<table>
<tr>
<td style="width=100%; height:138px; background-image: url(banner-top.gif); background-repeat: no repeat;">
<div id="nav-menu">
<ul>
[*][url='#']Menüpunkt1[/url]
[*][url='#']Menüpunkt2[/url]
[*][url='#']Menüpunkt3[/url]
[*][url='#']Menüpunkt4[/url]
[*][url='#']Menüpunkt5[/url]
[*][url='#']Menüpunkt6[/url]
[*][url='#']Menüpunkt7[/url]
[*][url='#']Menüpunkt8[/url]
[/list]
</div>
</td>
</tr>
<tr>
<td style="width=180px; height:100%; background-image: url(navigation-bg.gif); background-repeat: repeat-y;">
</td>
<td style="width=100%; height:100%;">
Lorem ipsum ...gekürzt...
</td>
</tr>
</table>
</body>
</html>

Alles anzeigen

Edit: Oh merde: habe schon den ersten riesen Fehler entdeckt...Ich poste wieder, wenn ich mir mehr Gedanken gemacht habe.

Ronald

Ein Fehler steht schon in der ersten Zeile:

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Du mußt den Lonk zur W3C rausnehmen, sonst kapieren die Browser die Höhenangebn nicht - keine Ahnung warum das so ist.

2. Fehler: du hast keine Höhe für die Tabelle anngegeben.

G.a.d.M.

Ronald

tebox

Heißt das, das man wenn man Tabellen mit Höhenangaben einsetzt, gar keine Chance mehr hat W3C-konform zu sein?

Ronald

Keine Ahnung.

Ich sag es mal so:
Wenn ich eine Höhenangabe verwende, die alle Browser verstehen, zu der die W3C aber sagt, dass es diese Angabe nicht gibt - dann frag ich mich, wer da was falsch macht?

M.E. hat die W3C die Höhenangaben ganz einfach vergessen, denn Alternativen kann sie uns auch nicht nennen. O.K., man könnte versuchen mit JavaScript die Anzeigegröße des Monitors zu ermitteln und dann z.B. eine Tabelle mit genau diesen Maßen zu erstellen - das wäre dann W3C-gerecht.
Aber sag mal ehrlich: macht das irgendwo noch einen Sinn???

Ich baue meine Seiten weiterhin so, wie es mir gefällt und teste sie ständig mit den verschiedensten Browsern. Wenn es paßt, dann paßt es. Den Besuchern scheint es zu gefallen, den zwei meiner homepages machen zusammen jedes Jahr ~ 1.400.000 (einemillionvierhunderttausend) Besucher. Und das sind echte Besucher und keine Pageviews und auch keiene 'Schmuddelseiten'!

Ach ja: bei dem W3C-Validator fallen meine Seiten alle durch. Das ist mir aber ziemlich egal, denn es scheint von meinen Besuchern auch niemanden zu stören

G.a.d.M.

Ronald

Hi tebox;

Zitat von tebox

Tabellen wollte ich zur Darstellung von ... na eben von ... Tabellen nutzen und nicht zur Seitenstrukturierung. Die wollte ich ausschließlich mit CSS machen. Ich sehe auch nicht, was an Divs schlecht sein soll. Nur dass es halt nicht ganz so funktioniert, wie ich es mir erhoffte.

So sollte es auch sein,denn - Tabellen sind ein Struktur-, kein Layoutmittel.
Die Praxis sieht leider oft anders aus. Zukunftsträchtiger aber sind Stylesheets. Sie sollten das Mittel der Wahl sein bei der Layoutgestaltung. Das man auch damit über das Ziel hinausschießen kann (DIVmania) bestreitet keiner. Übersichtlicher sind Stylesheets allemal. Auch Tabellen wollen unter Kontrolle behalten werden.
Zu was sich jeder entscheidet,- ist jedem selbst überlassen.

Gruß yeti66

Aber als Grundsatzdiskussion sehe ich das aber eher nicht. Das sehe ich eher sportlich.

Zitat von Anonymous

Hi tebox;

So sollte es auch sein,denn - Tabellen sind ein Struktur-, kein Layoutmittel.
Die Praxis sieht leider oft anders aus. Zukunftsträchtiger aber sind Stylesheets. Sie sollten das Mittel der Wahl sein bei der Layoutgestaltung. Das man auch damit über das Ziel hinausschießen kann (DIVmania) bestreitet keiner. Übersichtlicher sind Stylesheets allemal. Auch Tabellen wollen unter Kontrolle behalten werden.
Zu was sich jeder entscheidet,- ist jedem selbst überlassen.

Gruß yeti66

Aber als Grundsatzdiskussion sehe ich das aber eher nicht. Das sehe ich eher sportlich.

Ronald

Zitat von Anonymous

Tabellen sind ein Struktur-, kein Layoutmittel.

Wo steht das?
Ich meine, wo steht das verbindlich ?

Vielmehr schreibt sogar die Bibel der Webmaster es völlig anders:

Zitat von SelfHTML

Sie können in HTML Tabellen definieren, um tabellarische Daten darzustellen, oder um Text und Grafik attraktiver am Bildschirm zu verteilen. Obwohl Tabellen natürlich vornehmlich zur Darstellung tabellarischer Daten geschaffen wurden, sind sie in der heutigen Praxis des Web-Designs vor allem als Grundgestaltungsmittel für Seiten-Layouts nicht mehr wegzudenken. Mehr dazu im Abschnitt Seite Tabellen als Mittel für Web-Seiten-Layouts. Puristen, die HTML so weit wie möglich von gestalterischen Aufgaben befreit sehen wollen, rümpfen darüber zwar die Nase - aber so klar sind die Grenzen zwischen Struktur und Gestaltung nicht immer. Die saubere Verteilung von Information auf einer Web-Seite ist durchaus ein Aspekt der Strukturierung, obwohl sie zugleich ein Aspekt der Gestaltung ist. Rein optisch lässt sich also grundsätzlich unterscheiden zwischen Tabellen, die Gitternetzlinien haben (für tabellarische Daten), und Tabellen ohne sichtbare Gitternetzlinien (so genannte "blinde Tabellen" für mehrspaltigen Text oder für Verteilung von Inhalten auf einer Web-Seite).

So, nun frag ich ganz einfach mal, wieviele von Euch denn tabellarischen Daten auf der HP abbilden. Also ein/zwei Seiten kenne ich da schon, dann war es das aber auch. Ich zweifele wirklich ernsthaft, daß sich für so eine geringe Nachfrage an Tabellen jemand die Mühe machen würde, so viele Styles, Layoutmöglichkeiten und Zusatztags für Tabellen zu entwerfen.

Ich sehe es ähnlich wie mit dem Teflon: Entwickelt für den Hitzeschutz in der Raumfahrt wird es heute doch viel häufiger einfach in die Pfanne gehaun. Teflonpfannen sind aus dem Haushalt genau so wenig wegzudenken, wie Tabellen als Gestaltungshilfe bei Internetseiten. 'Puristen' wird es sicherlich für beides geben, aber wirklich logische Erklärungen warum man keine Tabellen als Designhilfe und kein Teflon für Bratpfannen benutzen darf, können sie nicht geben.

Nur eben immer wieder diese Phrasen, die völlig unbegründet sind.

Selbst schuld, wer drauf hört.

G.a.d.M.

Ronald

Ronald

Zitat von Anonymous

Tabellen sind ein Struktur-, kein Layoutmittel.

Wo steht das?
Ich meine, wo steht das verbindlich ?

Vielmehr schreibt sogar die Bibel der Webmaster es völlig anders:

Zitat von SelfHTML

Sie können in HTML Tabellen definieren, um tabellarische Daten darzustellen, oder um Text und Grafik attraktiver am Bildschirm zu verteilen. Obwohl Tabellen natürlich vornehmlich zur Darstellung tabellarischer Daten geschaffen wurden, sind sie in der heutigen Praxis des Web-Designs vor allem als Grundgestaltungsmittel für Seiten-Layouts nicht mehr wegzudenken. Mehr dazu im Abschnitt Seite Tabellen als Mittel für Web-Seiten-Layouts. Puristen, die HTML so weit wie möglich von gestalterischen Aufgaben befreit sehen wollen, rümpfen darüber zwar die Nase - aber so klar sind die Grenzen zwischen Struktur und Gestaltung nicht immer. Die saubere Verteilung von Information auf einer Web-Seite ist durchaus ein Aspekt der Strukturierung, obwohl sie zugleich ein Aspekt der Gestaltung ist. Rein optisch lässt sich also grundsätzlich unterscheiden zwischen Tabellen, die Gitternetzlinien haben (für tabellarische Daten), und Tabellen ohne sichtbare Gitternetzlinien (so genannte "blinde Tabellen" für mehrspaltigen Text oder für Verteilung von Inhalten auf einer Web-Seite).

So, nun frag ich ganz einfach mal, wieviele von Euch denn tabellarischen Daten auf der HP abbilden. Also ein/zwei Seiten kenne ich da schon, dann war es das aber auch. Ich zweifele wirklich ernsthaft, daß sich für so eine geringe Nachfrage an Tabellen jemand die Mühe machen würde, so viele Styles, Layoutmöglichkeiten und Zusatztags für Tabellen zu entwerfen.

Ich sehe es ähnlich wie mit dem Teflon:
Im "Volksglauben" ursprünglich entwickelt für den Hitzeschutz in der Raumfahrt *) , wird es heute doch viel häufiger einfach in die Pfanne gehaun. Teflonpfannen sind aus dem Haushalt genau so wenig wegzudenken, wie Tabellen als Gestaltungshilfe bei Internetseiten. 'Puristen' wird es sicherlich für beides geben, aber wirklich logische Erklärungen warum man keine Tabellen als Designhilfe und kein Teflon für Bratpfannen benutzen darf, können sie nicht geben.

Nur eben immer wieder diese Phrasen, die völlig unbegründet sind.

Selbst schuld, wer drauf hört.

G.a.d.M.

Ronald

*) Anmerkung:
Das Märchen mit "entwickelt für den Hitzeschutz in der Raumfahrt" hält sich seit Jahren hartnäckig in den Köpfen der Menschen.
Dabei wurde Teflon vielmehr 1938 als Zufallsprodukt entdeckt, nachdem ein Gasflache mit Tetrafluorethylen über nacht nicht ausreichend gekühlt wurde und sich das Gas dann zu dem verband, was wir heute als Teflon kennen. Das erste Patent für Teflon stammt aus dem jahr 1941, da hat jedoch noch kein Mensch ernsthaft an Raumfahrt gedacht (das ging erst Ende der 50er Jahre los, da war ich schon 'dabei').

tebox

Naja, ich hätte einfach gerne die Seite W3C-konform gehabt. Daran kann ich nichts schlechtes finden.

Die Diskussion, ob es wirklich erstrebenswert ist, eine valide Seite zu bauen kann wohl endlos geführt werden. Bezeichnend ist in meinen Augen aber, dass sowohl selfhtml als auch csszengarden valide sind, bei spiegel-online aber über 200 Meldungen kommen.

Für mich ist Validität auf jeden Fall ein "nice to have" und meine neuen Seite wollte ich ohne Frames (s.o.) und valide haben(Das war übrigens der Grund, weswegen ich es zuerst ohne Tabellen versucht habe). Es scheint aber so zu sein, dass es einfach nicht geht, wenn man seine Designideen nicht ständig über den Haufen werfen will.

Ich dachte, dass Stylesheets einem ermöglichen sollten, die Seite so zu gestalten wie man es sich vorstellt, ohne auf andere Strukturmittel wie Tabellen zurückgreifen zu müssen.

Wie dem auch sei. Ich habe bestimmt 12-15 Stunden versucht, das Design ohne Tabellen so hinzubekommen, ohne Erfolg zu haben. Mit Tabellen hat das nicht mal eine Stunde gedauert.

Ich poste mal den Code, der soweit das macht, was ich will:

HTML

<html>


<head>
<title>Versuchsfeld</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>


<body>


<table width="100%" height="100%" margin="0" cellpadding="0" cellspacing="0">
<colgroup>
 <col width="150px">
 <col width="auto">
</colgroup>


<tr>
<td colspan="2" height="138" background="banner-top.gif" background-repeat= "no repeat">
</td>
</tr>
<tr>
<td width="180px"  background="navigation-bg.gif" background-repeat= "repeat-y">
<div id="nav-menu">
<ul>
[*][url='#']Menüpunkt1[/url]
[*][url='#']Menüpunkt2[/url]
[*][url='#']Menüpunkt3[/url]
[*][url='#']Menüpunkt4[/url]
[*][url='#']Menüpunkt5[/url]
[*][url='#']Menüpunkt6[/url]
[*][url='#']Menüpunkt7[/url]
[*][url='#']Menüpunkt8[/url]
[/list]
</div>
</td>
<td width="auto">
Lorem ipsum ... gekürzt ...
</td>
</tr>
</table>


</body>
</html>

Alles anzeigen

Falls sich jemand den Code mit meinen Hintergrundbildern anschaut: Ich weiß, dass da noch Bruchstellen drin sind. Mir gings nur um den Code.

tebox

Ich habs jetzt auch nochmal online gestellt unter
http://www.lamla.com/test/versuchsfeld2.html

Man bemerke (neben den Bruchstellen und dem unansehnlichen Schattenwurf):
1: Die Hintergrundgrafiken gehen bis zum Rand
2: Vor allem gehen sie bis zum unteren Rand, auch wenn der Inhalt daneben nicht die Seite ausfüllt. (Fügt man den W3C-Spruch ein, funktioniert das allerdings nicht mehr)
3: Wenn die Hintergrundgrafiken größer sind als der Bildschirm werden sie abgeschnitten, sie provozieren keine Scrollleisten.
4. Die linke Grafik wiederholt so oft es aufgrund des Inhalte rechts daneben nötig ist.

Ich schreibe das so ausführlich hier auf, weil es diese paar Kleinigkeiten waren, die mich etliche Stunden beschäftigt haben.

P.S.: Die Linien in den Grafiken habe ich übrigens mit PowerPoint gemalt
Ich benutze den GIMP als Grafikprogramm und da sind Rechtecke einfach ziemlich umständlich zu zeichnen (zumindest wenn es viele sein sollen).[/url]

yeti66

Hi Ronald,

Es steht im XHTML,CSS & Co Edition W3C.de von Stefan Mintert. Eine Online Version findest Du unter:
http://www.edition-w3c.de
Konkret zu Tabellen findest Du den Text in der Anmerkung der Übersetzer wieder: http://www.edition-w3.de/TR/1999/REC-ht…uct/tables.html

Gruß yeti66

Ronald

Moin!

Stefan Mintert ist m.E. keine offizelle Einrichtung, sondern der Inhaber einer kleinen Firma hier in Hamburg.

Er hat den W3C-Text übersetzt und dann kommentiert. Erst in seinem Kommentar steht, daß Tabellen kein Layoutmittel sein sollen. Das hat für mich genau so viel Verbindlichkeit, als wenn ich schreibe, daß Tabellen ab sofort immer einen roten Rand haben müssen.

So, nun halt Euch mal an meine Anweisung

G.a.d.M.

Ronald