3 spalten layout Anpassung

[Christian Walgenbach]

Hi Leute,

ich habe Schwierigkeiten mit der Anpassung eines Layouts.
Ich möchte die Seite http://www.kanu-xxl.de vom Tabellen-Layout ins 3 Spalten-Layout überführen.

Die bisherigen Bemühungen kann man sich unter http://www.lfzm.de/kanuxxl/ anschauen.

Das ganze sieht noch im MSIE und Mozilla sehr unterschiedlich aus. Auch auf der Auflösung 1024x786 soll es zu der Orginalseite passen.

Hoffe auf interessante Anregungen.

by Christian

[fastix®]

Moin!

Versuche mal:

.mitte {
  position: absolute;
  top: xx px;
  left: 25%;
  right:25%;
  bottom:0px;
}

Die anderen ähnlich. Probleme macht dann "nur" der IE. Diese lassen sich mit JS lösen.

Das folgende Geschreibsel zeigt einige Ansätze, die es bei mir an anderer Stelle lösen. (Die Funktion wird "onload" und "onresize" des Bodys aufgerufen.)

function aufbau() {
    if (document.all) {
     hoehe  = document.body.offsetHeight;
     breite = document.body.offsetWidth;
     document.getElementById('header').style.width=(breite-14)+"px";
     document.getElementById('top_menue').style.width=(breite-14-150)+"px";

document.getElementById('inhalt').style.width=(breite-14-180)+"px";
     document.getElementById('inhalt').style.height=(hoehe-150)+"px";

newhight=((document.getElementById('inhalt').style.height.replace("px","")*1)+40)+"px";
     document.getElementById('menue_links').style.height=newhight ;
    }
}

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®

[Christian Walgenbach]

Hallo fastix,

.mitte {
  position: absolute;
  top: xx px;
  left: 25%;
  right:25%;
  bottom:0px;
}

habe es mal eingebaut. Sieht schon viel besser aus. Jetzt klappt auch mein overflow. Trotzdem habe ich noch ein paar Problemchen.

Die anderen ähnlich. Probleme macht dann "nur" der IE. Diese lassen sich mit JS lösen.

Das folgende Geschreibsel zeigt einige Ansätze, die es bei mir an anderer Stelle lösen. (Die Funktion wird "onload" und "onresize" des Bodys aufgerufen.)

verstehe nicht ganz warum ich das brauche und wie ich es einbaue.

by Christian

[Ingo Turski]

Hi,

so wird das nichts werden. Oder soll auf Kunden mit zu kleinem Bildschirm verzichtet werden?
Warum darf das Layout keinen Scrollbalken bei zu kleinem Fenster bekommen und warum mu´ß ein unschöner interner Scrollbalken herhalten?

freundliche Grüße
Ingo

[Christian Walgenbach]

Hallo,

so wird das nichts werden. Oder soll auf Kunden mit zu kleinem Bildschirm verzichtet werden?

das würde ich auch gerne besser lösen. Aber wie?

Warum darf das Layout keinen Scrollbalken bei zu kleinem Fenster bekommen und warum mu´ß ein unschöner interner Scrollbalken herhalten?

Meine Kunde möchte, dass wie bei Frames auch, die Navigation immer im Bild ist.

by Christian

[Ingo Turski]

Hi,

das würde ich auch gerne besser lösen. Aber wie?

ohne Höhenangaben, overflow:hidden und absolute Positionierungen des Inhaltsbereichs.

Meine Kunde möchte, dass wie bei Frames auch, die Navigation immer im Bild ist.

no way. Das Menü ist einfach zu lang, als daß man den üblichen IE-Workaround für position:fixed verwenden könnte.
Ich habe mir gerade mal die ursprüngliche Seite angesehen und auch hier benötigt man ein ausreichend großes Fenster, um alle Menüpunkte erreichen zu können.
Frage Deinen Kunden, was wichtiger ist: eine feststehende Navigation oder Zugänglichkeit auch für Besucher kleinerer Monitore. Bei meiner Seite sind dies im letzten Monat über 10% gewesen: http://www.1ngo.de/statistik.html#Aktuelles
10% potentielle Kunden, die insbesondere die Preisgarantie und auch das Impressum nicht sehen könnten, wenn sie nicht vorher ihre Auflösung heraugsetzen würden (was sie aber wohl nicht tun würden, und selbst wenn, wäre fraglich, ob sie noch etwas entziffern könten). Was das Impressum betrifft, bin ich mir auch nicht sicher, ob eine Verfügbarkeit nur ab 1024*768 überhaupt ausreicht.

freundliche Grüße
Ingo

[fastix®]

Moin!

Hi,

das würde ich auch gerne besser lösen. Aber wie?
ohne Höhenangaben, overflow:hidden und absolute Positionierungen des Inhaltsbereichs.

Meine Kunde möchte, dass wie bei Frames auch, die Navigation immer im Bild ist.
no way.

Doch. Das hat mit dem Overflow nichts zu tun. Ich würde sagen, wer mit "kleinen" Browserfenstern/Monitoren surft ist den Umgang mit Scroll-Leisten gewohnt. Also das hidden muss definitv weg. Das mit dem unsichtbar/unerreichbaren Impressum könnte tatsächlich ein unnötiges juristisches ergo unnötig teures Problem werden.

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®

[Ingo Turski]

Hi,

Doch. Das hat mit dem Overflow nichts zu tun.

hmm.. die Möglichkeiten, die ich kenne, um eine Navigation mit CSS an einer Seite zu fixieren, benötigen alle 100% Höhe und overflow-y:hidden. Ich habe gerade mal ein wenig experimentiert, z.B. mit overflow:auto für den Navigationsbereich, aber es nicht hinbekommen. Hast Du sowas denn schonmal gesehen oder selbst umgesetzt?

freundliche Grüße
Ingo

[fastix®]

Moin!

hmm.. die Möglichkeiten, die ich kenne, um eine Navigation mit CSS an einer Seite zu fixieren,

Definiere "um eine Navigation mit CSS an einer Seite zu fixieren".

Soll diese nicht mitscrollen?

Wenn Höhe des Browserfensters kleiner ist, als die Navigation lang ist + deren Offset von oben, dann macht genau das absolut keinen Sinn. In dem Fall kann man via JS diese Eigenschaft aufheben (oder besser: nicht erst setzen).

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®

[Ingo Turski]

Hi,

Definiere "um eine Navigation mit CSS an einer Seite zu fixieren".

Soll diese nicht mitscrollen?

genau das fordert der Kunde.

Wenn Höhe des Browserfensters kleiner ist, als die Navigation lang ist + deren Offset von oben, dann macht genau das absolut keinen Sinn.

Das meinte ich ja. Und ich sehe keinen Weg, die Navigation im IE ohne Frames getrennt vom Inhalt scrollen zu lassen.

In dem Fall kann man via JS diese Eigenschaft aufheben (oder besser: nicht erst setzen).

Nunja, wenn man die Fensterhöhe auslesen kann und den Workaround erst über Javascript aktiviert, könnte das eine - wenn auch ziemlich umständliche - Möglichkeit sein. Zwar nicht 100%ig, aber fast.

freundliche Grüße
Ingo

[fastix®]

Moin!

Das meinte ich ja. Und ich sehe keinen Weg, die Navigation im IE ohne Frames getrennt vom Inhalt scrollen zu lassen.

Wieso? Das kann meines Wissens jeder verdammte div:

overflow: scroll
alternativ:
overflow: auto

Du baust den div in der Größe (Höhe) relativ zum Browserfenster und bestimmst den overflow so wie oben. Ich habs nicht probiert, es sollte aber gehen, wie bei einem Iframe auch.

Anderer Gag: probiere mal <img src="xyz.html" height=200 width=300 alt="">
(Der Browser, der diesen name verdient wertet den Content- Typ aus, den der Server sendet um darzustellen, was da kommt. Ein Server, der diesen Name verdient, wird "Content-type: text/html" senden....

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®

[Ingo Turski]

Hi,

Du baust den div in der Größe (Höhe) relativ zum Browserfenster

stimmt, das hatte ich glatt vergessen.

Anderer Gag: probiere mal <img src="xyz.html" height=200 width=300 alt="">

und was sollten die Browser Deiner Meinung nach machen? Die HTML-Datei als solche behandeln und innerhalb der Bildabmessungen anzeigen?

freundliche Grüße
Ingo

[fastix®]

Moin!

Anderer Gag: probiere mal <img src="xyz.html" height=200 width=300 alt="">
und was sollten die Browser Deiner Meinung nach machen? Die HTML-Datei als solche behandeln und innerhalb der Bildabmessungen anzeigen?

Genau das tun sie auch... (jedenfalls meiner)

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®

[Ingo Turski]

Hi,

Genau das tun sie auch... (jedenfalls meiner)

echt? welcher denn? Ich hatte es glaub' ich mit dreien getestet, wenn auch nicht gerade den aktuellsten Versionen.

freundliche Grüße
Ingo

[fastix®]

Moin!

Genau das tun sie auch... (jedenfalls meiner)
echt? welcher denn? Ich hatte es glaub' ich mit dreien getestet, wenn auch nicht gerade den aktuellsten Versionen.

Mozilla, Opera (Linux).

Ich sehe immer öfters die 404-er Fehlermeldungen meines Webservers, wenn ich auf Seiten surfe deren Werbebanner ich via hosts- Datei auf den localhost umgeleitet habe. (

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®

[fastix®]

Moin!

Hallo fastix,
verstehe nicht ganz warum ich das brauche und wie ich es einbaue.

Schau Dir mal: http://www.fastix.org/ mit dem IE und abgeschaltetem JS an... Dann weisst Du, wann Du das brauchst.

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®

[Christian Walgenbach]

Hi,

Schau Dir mal: http://www.fastix.org/ mit dem IE und abgeschaltetem JS an... Dann weisst Du, wann Du das brauchst.

so habe ich jetzt eingebaut. Leider stellt er es jetzt total falsch dar.

by Christian

[fastix®]

Moin!

so habe ich jetzt eingebaut. Leider stellt er es jetzt total falsch dar.

Hey!

[1] Du sollst das nicht einach abschreiben, sondern an Deine Seite anpassen...
Du musst das sogar :)

[2] Das height: 100% sollte jetzt rausfliegen.
Sonst hast Du sowas: Stelle eine Wurst in den Kühlschrank, die 10cm unterhalb der Oberkante des Kühlschranks beginnt, bis unten hin reicht und so hoch ist wie der Kühlschrank...

Du bist durcheinander und meinst das passt nicht? Dein Browser auch...

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®

[Christian Walgenbach]

Hi,

[1] Du sollst das nicht einach abschreiben, sondern an Deine Seite anpassen...
Du musst das sogar :)

gibt es eine Anleitung wie man das anpasst?

[2] Das height: 100% sollte jetzt rausfliegen.

welches height meinst du?

by Christian

[fastix®]

Moin!

gibt es eine Anleitung wie man das anpasst?

Ups. Du hattest im Urbeitrag geschrieben, es gehe Dir darum, Anregungen zu bekommen.

Also: schauen wir uns mal Deinen mittleren Frame an:

HTML:

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

<div id="inhalt">
  Plapla...
</div>
...

CSS:

#inhalt {
position: absolute;
  top: 150 px;
  left: 25%;
  right:25%;
  bottom:0px;
  /*
    Das stört jetzt:
    height: 100%;

Der Rest ist Stuff von Dir:
  */
  overflow: auto;
  overflow-x: hidden;
  text-align:justify;
  background-color: #4A6DA5;
  border-left-width:5px;
  border-left-color:#F7BD21;
  border-left-style:solid;
  border-right-width:5px;
  border-right-color:#F7BD21;
  border-right-style:solid;
  border-top-width:5px;
  border-top-color:#F7BD21;
  border-top-style:solid;
}

JavaScript:

function aufbau() {
    if (document.all) {
     hoehe  = document.body.offsetHeight;
     breite = document.body.offsetWidth;
     /*
       Du hast doch diese Elemente gar nicht...
       document.getElementById('header').style.width=(breite-14)+"px";
       document.getElementById('top_menue').style.width=(breite-14-150)+"px";
     */
     /*
       An der Breite brauchst Du hier nichts machen...
       document.getElementById('inhalt').style.width=(breite-14-180)+"px";
       Wenn überhaupt, ich kann gerade nicht schauen, was die IE's so treiben:
       document.getElementById('inhalt').style.width=(math.round(breite/2))+"px";
       (Schau nach, ob math round so funktioniert...)
     /*

document.getElementById('inhalt').style.height=(hoehe-150)+"px";

/* Der IE mag meines Wissens im CSS keine Hoehenangaben, sonst wäre das nicht notwendig. Probiere das aber mal, du verwendest schleißlich HTML 4.01 Strict, ich hatte transitional*/

/*
      Dieses auch nicht, Du hast kein Element mit der ID 'menue_links':
      newhight=((document.getElementById('inhalt').style.height.replace("px","")*1)+40)+"px";
      document.getElementById('menue_links').style.height=newhight ;
    */
    }
}

Eigentlich brauchst Du also nur:
function aufbau() {
  if (document.all) {
    document.getElementById('inhalt').style.height=(document.body.offsetHeight-150)+"px";
    /* (Passe aber die 150 Pixel an.) */
  }
}

Das ist blind geschrieben und ungetestet: Es kann Fehler enthalten.

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®

[Ingo Turski]

Hi,

Schau Dir mal: http://www.fastix.org/ mit dem IE und abgeschaltetem JS an... Dann weisst Du, wann Du das brauchst.

hab' ich gerade mal gemacht. Warum löst Du das nicht besser?

freundliche Grüße
Ingo

[fastix®]

Moin!

hab' ich gerade mal gemacht. Warum löst Du das nicht besser?

Ach was... wenn ich es wirklich wöllte, dann würde ich es besser lösen. Aber fastix.org ist eine Art Experimentierfeld. Und letzens hatte ich irgendwann mal Lust mich mit dem Spaltenlayout- Problem zu befassen. Sicherlich gibts da auch ganz andere Ansatzmöglichkeiten, ich habe aber eine bestimmte verfolgt. Das ganze erhebt keinerlei Anspruch auf Reife oder Perfektheit.

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®

[Ingo Turski]

Hi,

Ach was... wenn ich es wirklich wöllte, dann würde ich es besser lösen. Aber fastix.org ist eine Art Experimentierfeld.

Na dann ist ja Ok. Obwohl: Was ist, wenn sich ein Potentieller Kunde mit IE ohne JS auf diese Seiten verirrt? Auch egal?

freundliche Grüße
Ingo

[fastix®]

Moin!

Na dann ist ja Ok. Obwohl: Was ist, wenn sich ein Potentieller Kunde mit IE ohne JS auf diese Seiten verirrt? Auch egal?

Egal nicht wirklich, aber ziemlich unwahrscheinlich. fastix.org ist meines wissens nicht extern verlinkt und die Seiten werden ohnehin sehr selten aufgerufen. Ich überlege allerdings gerade, ob ich die Beucher zu fastix.de umleiten sollte. Genau genommen warte ich eigentlich auf die alles umwerfende Idee, was ich damit machen könnte. Einen Fanclub habe ich schon: community.fastix.de- da ist blos nicht viel los, vielleicht muss ich doch T-Shirts bedrucken oder endlich was über grafische Gestaltung lernen, Kassel hat eine Kunsthochschule.)

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®

[Ingo Turski]

Hi,

Egal nicht wirklich, aber ziemlich unwahrscheinlich. fastix.org ist meines wissens nicht extern verlinkt und die Seiten werden ohnehin sehr selten aufgerufen.

Nunja, bei Suche nach "fastix" kommt die knapp hinter der de. Und wehe, wenn einer mal nach was Ausgefallenem wie "Zugangsbarrieren Fehlsichtige" sucht...

freundliche Grüße
Ingo

[fastix®]

Moin!

Hi,

Egal nicht wirklich, aber ziemlich unwahrscheinlich. fastix.org ist meines wissens nicht extern verlinkt und die Seiten werden ohnehin sehr selten aufgerufen.
Nunja, bei Suche nach "fastix" kommt die knapp hinter der de. Und wehe, wenn einer mal nach was Ausgefallenem wie "Zugangsbarrieren Fehlsichtige" sucht...

Der hat wahrscheinlich kein Problem mit der Seite.... :) .... sagt mein lynx.

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®

[Christian Walgenbach]

Hi,

ich habe jetzt nach langen experiemtieren für eine Browserweiche ala

<link rel="STYLESHEET" href="<?echo $serv;?>online.css" type="text/css">
<link rel="STYLESHEET" href="<?echo $serv;?>print.css" type="text/css" media="print">
<!--[if gte IE 6]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if gte IE 5]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

entschieden.

Leider gibt es da noch ein Problem. Auf der Hauptseite funktioniert es im MSIE tadellos. Nur die anderen Links auf der Seite scheinen damit nicht zu funktionieren. Woran könnte das liegen?

Dann habe ich noch eine Frage zu meiner online.css die für andere Browser wie Mozilla/Opera verwendet wird. Der Text kanu-xxl.de   &   moseltours.de hat zu viel Abstand oben. Was muss ich dort ändern?

by Christian