Wo ist der Fehler? NN macht Scrollbalken wo keine hinsollen!

[sunny]

Guten Morgen!

Ich bastle immer noch an meiner Testseite, versuche das Layout mit divs aufzubauen.

So halbwegs hab ich das jetzt auch hinbekommen, allerdings schauts nur im IE 6.0 (welch Wunder *g) so aus wie ich es haben möchte ...
Netscape 6.+ macht mir Scrollbalken auf die Seite (horizontal und vertikal - grässlich), kann mir jemand sagen warum? Außerdem ist die dunkelblaue Rahmenlinie beim Navigationsbereich verschoben - so um 1 px. Aber ich weiß nicht, woran das liegt!?

Außerdem würde mich interessieren, wie ihr das mit dem NN 4.7 Problem macht!? Baut ihr da dann nochmal eine eigene Seite dafür? (Die Site sollte zumindest funktionieren im NN 4.7, ignorieren möcht ich ihn nicht).

Es ist noch alles (CSS & HTML) in einer Seite zusammen - zum Testen -hier der link: https://www.auskunftsportal.net/test/test.html

(Die Site ist verschlüsselt, weil auf der Seite später Dienste angeboten werden, die über eine gesicherte Verbindung laufen müssen.)

Ich hoffe, ihr habt ein paar Tips für mich wo die Fehler liegen ... vielen Dank!

Liebe Grüße,
sunny

[Jan]

Hallo,
im mozilla ist das selbe problem.

#inhalt{
 .
 width:100%;
 .
 .
 padding-left:190px;
 .}

das könnte das problem sein, änder mal die 100%, der balken sollte verschwinden, ich hatte auch schon das problem und musste dann einen kompromiss zwischen ie und nn finden.

zur not bei den anderen ids auch mal die 100% ändern.

mfg, jan aus dresden

[sunny]

Hi Jan,

im mozilla ist das selbe problem.

Ich weiß!

#inhalt{
.
width:100%;
.
.
padding-left:190px;
.}

das könnte das problem sein, änder mal die 100%, der balken sollte verschwinden, ich hatte auch schon das problem und musste dann einen kompromiss zwischen ie und nn finden.

Na ja, das Problem ist die müssen ja 100% sein weil sich die divs der restlichen verfügbaren Breite anpassen sollen. Mir ist schon klar, dass die Scrollbalken wenn ich einen fixen Wert in px eingebe nicht auftauchen (sofern die Breite ausreicht), aber ich will ja keine fixe Breite sondern die jeweiligen Bereiche (ausgenommen der Navigationsbereich) sollen sich dem Browserfenster anpassen.

Ich wär echt dankbar wenn ich noch ein paar Tips erhalten würde ... ich komm irgendwie überhaupt nicht mehr weiter ...

Liebe Grüße,
sunny

[Vimes]

Verzichte auf die 100%-Angaben, setze stattdessen den rechten bzw unteren Abstand zum Rand auf 0px - dann funktioniert es zumindest in opera, mozi hab ich noch nicht getestet
So gehts:

»#navigation {
» position:absolute;
» left:0px;
» top:0px;
» width:161px;

» bottom:0px;

» padding-top:110px;
» background:#6795DB;
» text-indent:11px;
» border-right-width:1px;
» border-right-style:solid;
» border-right-color:#012F8D;
» z-index:2;
}

»#inhalt {
» position:absolute;
» left:0px;
» top:0px;

right: 0px;

» bottom:0px;
» padding-top:110px;
» padding-left:190px;
» z-index:1;
»}

YNWA

[sunny]

Hallo!

Verzichte auf die 100%-Angaben, setze stattdessen den rechten bzw unteren Abstand zum Rand auf 0px - dann funktioniert es zumindest in opera, mozi hab ich noch nicht getestet
So gehts:

»#navigation {
» position:absolute;
» left:0px;
» top:0px;
» width:161px;

» bottom:0px;

» padding-top:110px;
» background:#6795DB;
» text-indent:11px;
» border-right-width:1px;
» border-right-style:solid;
» border-right-color:#012F8D;
» z-index:2;
}

»#inhalt {
» position:absolute;
» left:0px;
» top:0px;

right: 0px;

» bottom:0px;
» padding-top:110px;
» padding-left:190px;
» z-index:1;
»}

Jetzt gehts zwar in NN & Moz - aber im IE nicht mehr!? Der Navigationsbereich ist ab da wo keine Links mehr sind weiß!? Auch wenn ich background-color angebe!?

Lg,
sunny

PS: Kannst Du mir vielleicht auch noch sagen, was die "beste" (sofern es sowas gibt) Lösung für NN 4.7x ist!? Der mag die divs ja gar nicht ... :(

[sunny]

Jetzt gehts zwar in NN & Moz - aber im IE nicht mehr!? Der Navigationsbereich ist ab da wo keine Links mehr sind weiß!?

Besser gesagt, das div ist nur so hoch wie´s Inhalt gibt - bottom:0px scheint IE 6.0 da zu ignorieren!?

Lg,
sunny

[sunny]

Ich glaub ich führ hier Selbstgespräche ... ;)

Jetzt funktionierts, hab die height für das navigationsdiv wieder angegeben, schaut in NN & IE gut aus (keine Scrollbalken)! *freu

Allerdings hab ich immer noch das Problem mit der verschobenen Linie im NN 6.+?
Hast Du da auch noch eine Idee?

Und über eine Antwort bezüglich NN 4.7x würd ich mich natürlich auch freun!

Danke für die Hilfe, lg,
sunny

[Vimes]

Allerdings hab ich immer noch das Problem mit der verschobenen Linie im NN 6.+?
Hast Du da auch noch eine Idee?

das problem ist, dass die Browser unterschiedlicher Meinung darüber sind, ob die Rahmenbreite zur Gesamtbreite des divs dazugehört, oder ob sie noch extra draufgerechnet wird. Lässt sich IMHO nicht mit CSS allein korrigieren.

YNWA

[sunny]

das problem ist, dass die Browser unterschiedlicher Meinung darüber sind, ob die Rahmenbreite zur Gesamtbreite des divs dazugehört, oder ob sie noch extra draufgerechnet wird. Lässt sich IMHO nicht mit CSS allein korrigieren.

Hmm, ich wollte das jetzt so lösen:

#rand {
 position:absolute;
 left:160px;
 top:0px;
 bottom:0px;
 width:1px;
 height:100%;
 background-color:#012F8D;
 z-index:7;
}

Aber IE scheint eine komische Auffassung von width:1px; zu haben? Gibts sonst noch eine Lösung ohne JS oder muss ich da ´ne Browserweiche bauen!?

Lg,
sunny

[josef stebegg]

Hallo

Habe jetzt nicht eure ganze korespondenz durchgelesen.
Auch wenn es die Sache nicht betrifft oder ohnehin bekannt ist. Ich hatte jedenfalls das gleiche Problem wenn ich in html oder css ein scroll="auto" bzw scroll:auto definiert habe.

mfg
josef

[Vimes]

Jetzt gehts zwar in NN & Moz - aber im IE nicht mehr!? Der Navigationsbereich ist ab da wo keine Links mehr sind weiß!?

Besser gesagt, das div ist nur so hoch wie´s Inhalt gibt - bottom:0px scheint IE 6.0 da zu ignorieren!?

Lg,
sunny

das einfache zuerst: NN4.7 versteht sich gut mit absolut positionierten divs, da macht er keinen Ärger.

Für den IE (und alle anderen Browser) wär meine Idee, drei Divs zu machen,
 div.navigation {... height:100% ...}
 div.kopf {... width:100% ... }
 div.inhalt {.. height:100%; width:100% }
dabei auf die padding-sachen verzichten und die eigentlichen Inhalte in neue divs innerhalb der entsprechenden Bereiche packen.

YNWA

[sunny]

das einfache zuerst: NN4.7 versteht sich gut mit absolut positionierten divs, da macht er keinen Ärger.

Ja? Dann hab ich wohl irgendwas falschgemacht ... Bei meiner Seite sind alle divs übereinandergelegt ... ohne Positionierung.

Für den IE (und alle anderen Browser) wär meine Idee, drei Divs zu machen,
div.navigation {... height:100% ...}
div.kopf {... width:100% ... }
div.inhalt {.. height:100%; width:100% }
dabei auf die padding-sachen verzichten und die eigentlichen Inhalte in neue divs innerhalb der entsprechenden Bereiche packen.

Ähm - ist das bei mir nicht fast genau so!?
Ein div navigation, ein div kopf und ein div inhalt. Und innerhalb der divs wieder divs!? So hab ichs doch ohnehin gemacht. Außer dass im Inhaltsbereich noch nix drin is!? Oder was meinst Du genau?

[Vimes]

div.navigation {... height:100% ...}
div.kopf {... width:100% ... }
div.inhalt {.. height:100%; width:100% }
dabei auf die padding-sachen verzichten und die eigentlichen Inhalte in neue divs innerhalb der entsprechenden Bereiche packen.

Ähm - ist das bei mir nicht fast genau so!?
Ein div navigation, ein div kopf und ein div inhalt. Und innerhalb der divs wieder divs!? So hab ichs doch ohnehin gemacht. Außer dass im Inhaltsbereich noch nix drin is!? Oder was meinst Du genau?

Verzichte bei den "untersten" divs auf die padding-Angaben, die zerballern das überall (nur im IE nicht). Statt dessen z.B. in

<div id="navi">
   <div id="int_navi" style="position:relative;left:x;top:y">
      <a>dfgdf
      <a>fdgdfg
   </div>
 </div>

für x und y die entsprechenden alten padding-angaben wählen

[sunny]

Verzichte bei den "untersten" divs auf die padding-Angaben, die zerballern das überall (nur im IE nicht). Statt dessen z.B. in

<div id="navi">
   <div id="int_navi" style="position:relative;left:x;top:y">
      <a>dfgdf
      <a>fdgdfg
   </div>
</div>

Hm, ich kann da irgendwie keinen Unterschied sehen und wollte die divs nicht noch unnötig verschachteln ...

Lg,
sunny

[Vimes]

Hm, ich kann da irgendwie keinen Unterschied sehen und wollte die divs nicht noch unnötig verschachteln ...

ist aber ein großer Unterschied, da die inneren divs keine größenangaben brauchen, sondern sich an den Inhalt anpassen, die äußeren das Erscheinungsbild sicherstellen.

Und die Verschachtelung ist ja nicht unnötig, da es sonst nicht in jedem Browser funktioniert :-).

Thema width:1px und ie setz border:0px und padding:0px, dann könnte das funktionieren

[sunny]

ist aber ein großer Unterschied, da die inneren divs keine größenangaben brauchen, sondern sich an den Inhalt anpassen, die äußeren das Erscheinungsbild sicherstellen.

Und die Verschachtelung ist ja nicht unnötig, da es sonst nicht in jedem Browser funktioniert :-).

Hm, ich habs jetzt nochmal ausprobiert - Bsp:

#inhalt {
 position:absolute;
 left:0px;
 top:0px;
 right:0px;
 bottom:0px;
 z-index:1;
}

#text {
 padding-top:110px;
 padding-left:190px;
}

<div id="navigation">
 <div id="links">
 <p><a href="#" class="navigation">Startseite</a></p>
 ...
 </div>
</div>

Und mit den anderen auch so - ich kann überhaupt keinen Unterschied erkennen, schaut komplett gleich aus - auch in NN 4.75!?

Thema width:1px und ie setz border:0px und padding:0px, dann könnte das funktionieren

Das funktioniert leider nicht, IE 6.0 macht die Linie 2 px breit :(

Grüße,
sunny

[sunny]

Und die Verschachtelung ist ja nicht unnötig, da es sonst nicht in jedem Browser funktioniert :-).

Also ich kriegs auch mit Verschachtelung irgendwie überhaupt nicht sodass es auch in NN 4.75 funktioniert!?

Und mit den anderen auch so - ich kann überhaupt keinen Unterschied erkennen, schaut komplett gleich aus - auch in NN 4.75!?

Thema width:1px und ie setz border:0px und padding:0px, dann könnte das funktionieren

Das funktioniert leider nicht, IE 6.0 macht die Linie 2 px breit :(

Mit font-size:0px; funktionierts!

Lg,
sunny

[Vimes]

#inhalt {

austauschen mit #navigation {

position:absolute;
left:0px;
top:0px;

height:100%;

z-index:1;
}

#text {

austauschen mit #links {
»»
    position:relative;
    top:110px;
    left:190px;

}

<div id="navigation">
<div id="links">
<p><a href="#" class="navigation">Startseite</a></p>
...
</div>
</div>

Probier das mal.

[sunny]

#inhalt {
austauschen mit #navigation {
position:absolute;
left:0px;
top:0px;
  height:100%;
z-index:1;
}

#navigation {
 position:absolute;
 left:0px;
 top:0px;
 width:161px;
 height:100%;
 background-color:#6795DB;
 z-index:1;
}

#text {
austauschen mit #links {
»»
    position:relative;
    top:110px;
    left:190px;
}

#links {
 position:relative;
 top:110px;
 left:11px;
}

Und es funktioniert zwar aber ich hab genau die gleiche Darstellung wie ursprünglich schon gehabt (ok in NN 6.+, IE 6.0, Opera 6.01 & Mozilla, aber der reinster Horror in NN 4.75). Was sollte denn jetzt anders sein?

sunny

[Vimes]

Und es funktioniert zwar aber ich hab genau die gleiche Darstellung wie ursprünglich schon gehabt (ok in NN 6.+, IE 6.0, Opera 6.01 & Mozilla, aber der reinster Horror in NN 4.75). Was sollte denn jetzt anders sein?

für den NN4.75 kannst du die Sachen mit CSS fast vergessen. Kann der einfach noch nicht. Workaround wär, das ganze in Tabellen zu werfen, falls es mit N4.75 unbedingt gehen muss.

so long

[sunny]

Und es funktioniert zwar aber ich hab genau die gleiche Darstellung wie ursprünglich schon gehabt (ok in NN 6.+, IE 6.0, Opera 6.01 & Mozilla, aber der reinster Horror in NN 4.75). Was sollte denn jetzt anders sein?

für den NN4.75 kannst du die Sachen mit CSS fast vergessen. Kann der einfach noch nicht. Workaround wär, das ganze in Tabellen zu werfen, falls es mit N4.75 unbedingt gehen muss.

Dann versteh ich immer noch nicht warum ich die divs verschachteln soll!?

Hm, Tabellen wollt ich ja vermeiden, darum ja das ganze mit CSS. Bisher hab ich Websiten immer mit Tabellen gebaut, aber das ist ja wohl nicht mehr ganz der neueste Stand ... was ja NN 4.7 wohl auch nicht grad ist ;) Nur sollten die Sites halt trotzdem zumindest "anschaubar" sein ... hmmm ...

Trotzdem danke für die Mühe die Du Dir bisher gemacht hast!

Lg,
sunny

[Vimes]

Und es funktioniert zwar aber ich hab genau die gleiche Darstellung wie ursprünglich schon gehabt (ok in NN 6.+, IE 6.0, Opera 6.01 & Mozilla, aber der reinster Horror in NN 4.75). Was sollte denn jetzt anders sein?

Genau das war doch das Ausgangsproblem oder ? nämlich das da Scrollbalken sind im Mozi/NN und Opera, die jetzt hoffentlich weg sind.

Hm, Tabellen wollt ich ja vermeiden, darum ja das ganze mit CSS. Bisher hab ich Websiten immer mit Tabellen gebaut, aber das ist ja wohl nicht mehr ganz der neueste Stand ... was ja NN 4.7 wohl auch nicht grad ist ;) Nur sollten die Sites halt trotzdem zumindest "anschaubar" sein ... hmmm ...

Browserweiche und spartanisch mit table für N4.7 vielleicht.

CSS nicht zu machen, <b>nur</b> weil es der N4.7 nicht kann ist auch nicht das wahre.

[sunny, die den Betreff hätte ändern sollen]

Und es funktioniert zwar aber ich hab genau die gleiche Darstellung wie ursprünglich schon gehabt (ok in NN 6.+, IE 6.0, Opera 6.01 & Mozilla, aber der reinster Horror in NN 4.75). Was sollte denn jetzt anders sein?

Genau das war doch das Ausgangsproblem oder ? nämlich das da Scrollbalken sind im Mozi/NN und Opera, die jetzt hoffentlich weg sind.

Die Scrollbalken waren doch ohnehin schon die ganze Zeit weg ("Ich glaub ich führ hier Selbstgespräche ... ;) Jetzt funktionierts ...").
Na ja egal, macht ja nix, hauptsache es funktioniert jetzt!

Hm, Tabellen wollt ich ja vermeiden, darum ja das ganze mit CSS. Bisher hab ich Websiten immer mit Tabellen gebaut, aber das ist ja wohl nicht mehr ganz der neueste Stand ... was ja NN 4.7 wohl auch nicht grad ist ;) Nur sollten die Sites halt trotzdem zumindest "anschaubar" sein ... hmmm ...

Browserweiche und spartanisch mit table für N4.7 vielleicht.

Das wär´n dann sozusagen 2 Versionen der Website, oder?
Müsst ich dann mit SSI machen - ansonsten hab ich ja denn doppelten Pflegeaufwand - auch nicht das Wahre ...

CSS nicht zu machen, <b>nur</b> weil es der N4.7 nicht kann ist auch nicht das wahre.

Stimmt - wenn man diese Ding doch irgendwie verbieten könnte ... ;)

Lg,
sunny

[sunny]

Hallo!

Jetzt hab ich noch ein Problem. Also mein CSS sieht für den Inhaltsbereich jetzt wie folgt aus:

#inhalt {
 position:absolute;
 left:0px;
 top:0px;
 right:0px;
 bottom:0px;
 width:100%;
 height:100%;
 z-index:1;
}

#text {
 position:relative;
 top:110px;
 left:190px;
 z-index:2;
}

Die HTML-Datei:

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

Und nun wird der Text nicht umgebrochen wenn er zu lang ist sondern geht über den sichtbaren Bereich des Bildschirms hinaus ... das div scheint also irgenwie zu groß zu sein.

Ich habs mit max-width versucht, aber das scheint IE 6.0 nicht zu mögen. Weiß jemand eine Lösung für das Problem?

Liebe Grüße,
Simone

[Vimes]

Hallo!

Jetzt hab ich noch ein Problem. Also mein CSS sieht für den Inhaltsbereich jetzt wie folgt aus:

#inhalt {
position:absolute;
left:0px;
top:0px;
right:0px;
bottom:0px;
width:100%;
height:100%;
z-index:1;
}

#text {
position:relative;
top:110px;
left:190px;
z-index:2;
}

Die HTML-Datei:

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

Und nun wird der Text nicht umgebrochen wenn er zu lang ist sondern geht über den sichtbaren Bereich des Bildschirms hinaus ... das div scheint also irgenwie zu groß zu sein.

das div macht er so groß, wie es sein muss, da du keine Begrenzung hast (width) packt er eben alles in eine Zeile.

Lösungsvorschlag: bei #inhalt ein
  right:0px;

einbauen.

[sunny]

Hallo!

#inhalt {
position:absolute;
left:0px;
top:0px;
right:0px;
bottom:0px;
width:100%;
height:100%;
z-index:1;
}

Und nun wird der Text nicht umgebrochen wenn er zu lang ist sondern geht über den sichtbaren Bereich des Bildschirms hinaus ... das div scheint also irgenwie zu groß zu sein.

das div macht er so groß, wie es sein muss, da du keine Begrenzung hast (width) packt er eben alles in eine Zeile.

Lösungsvorschlag: bei #inhalt ein
  right:0px;

einbauen.

Das war ohnehin schon drinnen! Ich habs jetzt so gelöst, dass ich bei #text einfach ein  margin-right:230px; hinzugefügt hab, dann schauts gut aus!

Liebe Grüße,
sunny

[Vimes]

Hallo,

sorry, meinte ursprünglich  bei #text, statt

Lösungsvorschlag: bei #inhalt ein
  right:0px;

einbauen.

Das war ohnehin schon drinnen! Ich habs jetzt so gelöst, dass ich bei #text einfach ein  margin-right:230px; hinzugefügt hab, dann schauts gut aus!

mit margin-right:230px; könnte es bei unterschiedlichen Auflösungen zu komischen Effekten kommen, vielleicht kehrt sogar der verschwundene Scrollbalken zurück, obwohl der ganze Text zu lesen ist. Schon getestet?

YNWA

[sunny]

Hallo,

sorry, meinte ursprünglich  bei #text, statt

Lösungsvorschlag: bei #inhalt ein
  right:0px;

einbauen.

Das ändert nichts! Hatte ich schon versucht!

Das war ohnehin schon drinnen! Ich habs jetzt so gelöst, dass ich bei #text einfach ein  margin-right:230px; hinzugefügt hab, dann schauts gut aus!

mit margin-right:230px; könnte es bei unterschiedlichen Auflösungen zu komischen Effekten kommen, vielleicht kehrt sogar der verschwundene Scrollbalken zurück, obwohl der ganze Text zu lesen ist. Schon getestet?

Klar! Schaut in den gängigen Browsern ok aus (außer NN4.x natürlich). Keine Scrollbalken! :)

Liebe Grüße,
sunny

[Christian Seiler]

Hallo,

Hm, Tabellen wollt ich ja vermeiden, darum ja das ganze mit CSS. Bisher hab ich Websiten immer mit Tabellen gebaut, aber das ist ja wohl nicht mehr ganz der neueste Stand ... was ja NN 4.7 wohl auch nicht grad ist ;) Nur sollten die Sites halt trotzdem zumindest "anschaubar" sein ... hmmm ...

Wie wär's damit?

<link rel="stylesheet" href="nn4.css" type="text/css">
<style type="text/css">
@import url(richtiger.css) screen;
</style>

In nn4.css sind dann nur so Sachen wie Farben, Schriftarten, etc. definiert und in richtiger.css wären dann alle <div>-Sachen, etc. drinnen.

NN4 kapiert zum Glück kein @import :-)

Grüße,

Christian

[sunny]

Hi!

Hm, Tabellen wollt ich ja vermeiden, darum ja das ganze mit CSS. Bisher hab ich Websiten immer mit Tabellen gebaut, aber das ist ja wohl nicht mehr ganz der neueste Stand ... was ja NN 4.7 wohl auch nicht grad ist ;) Nur sollten die Sites halt trotzdem zumindest "anschaubar" sein ... hmmm ...

Wie wär's damit?

<link rel="stylesheet" href="nn4.css" type="text/css">
<style type="text/css">
@import url(richtiger.css) screen;
</style>

In nn4.css sind dann nur so Sachen wie Farben, Schriftarten, etc. definiert und in richtiger.css wären dann alle <div>-Sachen, etc. drinnen.

NN4 kapiert zum Glück kein @import :-)

Tja, das Problem ist aber leider, dass dann alle Elemente durcheinandergewürfelt sind bzw. einfach über-/untereinander stehen ... von irgendeinem Design keine Rede mehr ... ohne Tables ist da wohl nicht viel zu machen!?

Lg,
sunny

[Christian Seiler]

Hallo,

Tja, das Problem ist aber leider, dass dann alle Elemente durcheinandergewürfelt sind bzw. einfach über-/untereinander stehen ... von irgendeinem Design keine Rede mehr ... ohne Tables ist da wohl nicht viel zu machen!?

Du könntest ja eigens an diesem CSS für NN4 rumbasteln, so dass NN4 das so einigermaßen hinbekommt. Ich meine: position: absolute/relative kennt er ja; genauso wie left, top, width, height. right und bottom dagegen IIRC nicht. Musst halt ein bisschen experimentieren (da der Style bei den anderen Browsern sowieso vom anderen überschrieben wird, kannst Du da praktisch alles reinschreiben, was du willst)

Grüße,

Christian

[sunny]

Hi Christian,

Tja, das Problem ist aber leider, dass dann alle Elemente durcheinandergewürfelt sind bzw. einfach über-/untereinander stehen ... von irgendeinem Design keine Rede mehr ... ohne Tables ist da wohl nicht viel zu machen!?

Du könntest ja eigens an diesem CSS für NN4 rumbasteln, so dass NN4 das so einigermaßen hinbekommt. Ich meine: position: absolute/relative kennt er ja; genauso wie left, top, width, height. right und bottom dagegen IIRC nicht. Musst halt ein bisschen experimentieren (da der Style bei den anderen Browsern sowieso vom anderen überschrieben wird, kannst Du da praktisch alles reinschreiben, was du willst)

Hm, also ich habs bisher nicht hinbekommen so ein Design für NN4 mit Stylesheets zu bauen ... der positioniert mir die Elemente irgendwie nie richtig - hast Du da vielleicht einen Ansatz dafür!?

---------------------------------------------------
 |          |                                      |
 |   bild   |                 bild                 |
 |          |                                      |
 ---------------------------------------------------
 | link1    |  Inhalt ...                          |
 |          |                                      |
 | link2    |                                      |
 |          |                                      |
 | link3    |                                      |
 |          |                                      |
 | link4    |                                      |
 |          |                                      |
 | link5    |                                      |
 |          |                                      |
 |          |                                      |
 |          |                                      |
 |          |                                      |
 ---------------------------------------------------

Is ja eigentlich ein ganz gewöhnliches Layout, aber ich krieg das unmöglich für NN 4.7 hin. Vielleicht wenn ich es nur mit fixen Angaben versuche!? Is zwar auch nicht so ideal wegen der verschiedenen Auflösungen & Fenstergrößen etc., aber was ist schon ideal für NN 4.x! Also wenn Du mich ein bisschen in die richtige Richtung schubsen könntest für NN 4.x - das wär schön!

Liebe Grüße,
sunny

[Christian Seiler]

Hallo,

Hm, also ich habs bisher nicht hinbekommen so ein Design für NN4 mit Stylesheets zu bauen ... der positioniert mir die Elemente irgendwie nie richtig - hast Du da vielleicht einen Ansatz dafür!?

Ich habe einen _fast_ eleganten Ansatz gefunden. Das Problem ist: In den HTML-Quellcode muss ein <br clear="all"> (bzw. <br style="clear: both;">) hinein, damit das funktioniert.

----------------------------------------------------------
<html>
<head>
  <title>Test</title>
  <style>
  #lefttop {
    float: left;
    width: 150px;
    height: 120px;
    background: #ff0000;
  }
  #top {
    float: left;
    width: 100%;
    height: 120px;
    background: #00ff00;
  }
  #navig {
    float: left;
    width: 150px;
    height: 100%;
    background: #0000ff;
  }
  #content {
    float: left;
    width: 100%;
    height: 100%;
    background: #ff00ff;
  }
  </style>
</head>
<body>
<div id="lefttop">Left Top</div>
<div id="top">Top</div>
<br clear="all">
<div id="navig">Navig</div>
<div id="content">Content</div>
</body>
</html>
----------------------------------------------------------

NN4 interpretiert zwar die Höhen nicht, aber dafür macht er die Breiten so, wie ich will (zumindest 4.78 auf Linux, der im allgemeinen eine schlechtere CSS-Interpretation hat als die Windows-Version)

So kannst Du NN4-Usern zumindest noch ein bisschen Layout bieten.

Grüße,

Christian

[sunny]

Hi Christian!

Ich habe einen _fast_ eleganten Ansatz gefunden. Das Problem ist: In den HTML-Quellcode muss ein <br clear="all"> (bzw. <br style="clear: both;">) hinein, damit das funktioniert.

Wow - super! Danke für die Mühe die Du Dir gemacht hast. Ich hab damit jetzt ziemlich viel herumgebastelt, das Problem ist, dass meine HTML-Datei bereits anders aufgebaut war/ist - es gibt mehr divs. Ich habs jetzt immerhin geschafft, dass nicht mehr einfach alle Elemente übereinander liegen, aber trotzdem schaut´s immer noch grauenhaft aus.

Der obere Bereich will einfach nicht die ganze Bildschirmbreite einnehmen und das Bild krieg ich nicht in die Mitte ... und mit dem Navigationsbereich hauts leider auch nicht so ganz hin ... hab mich jetzt den ganzen Tag damit gespielt, aber ich schaffs nicht.

Wär wirklich toll, wenn Du Dir das nochmal anschauen könntest und mir sagst, was ich falsch mach oder was ich ausprobieren könnte - Du scheinst ja ein richtiger Experte zu sein!

Hier der Link: https://www.auskunftsportal.net/test/test.shtml

Danke für Deine Hilfe,
glg,
sunny

[Christian Seiler]

Hi,

Der obere Bereich will einfach nicht die ganze Bildschirmbreite einnehmen und das Bild krieg ich nicht in die Mitte ... und mit dem Navigationsbereich hauts leider auch nicht so ganz hin ... hab mich jetzt den ganzen Tag damit gespielt, aber ich schaffs nicht.

Du darfst beim NN4 nicht absolut positionieren, sonst nimmt er (anscheinend) keine relativen Breiten. Nimm' also das position: absolute; , die top und die left-angaben komplett raus. Desweiteren müsste die Struktur der <div>s so aussehen:

<div id="oben">
 <div id="bruecke"><img src="images/bruecke.gif" width="161" height="84"></div>
 <div id="logo" align="center"><img src="images/logo.gif" width="577" height="84"></div>

</div>
<div id="inhalt">
 <div id="text">
   ...
 </div>
</div>
<div id="navigation">
 <div id="links">
  <p><a href="#" class="navigation">Startseite</a></p>
<p><a href="#" class="navigation">Demo</a></p>
<p><a href="#" class="navigation">Infos</a></p>
<p><a href="#" class="navigation">Partner</a></p>
<p><a href="#" class="navigation">Voraussetzungen</a></p>
<p><a href="#" class="navigation">Organisatorisches</a></p>
<p><a href="#" class="navigation">Kontakt</a></p>
<p><a href="#" class="navigation">Support</a></p>
<p><a href="#" class="navigation">Login</a>
 </div>
</div>
<div id="rand"> </div>
<div id="logoklein">
 <img src="images/logo_unten.gif">
</div>
</body>
</html>

Beim #oben brauchst Du warscheinlich kein float:left;

Wär wirklich toll, wenn Du Dir das nochmal anschauen könntest und mir sagst, was ich falsch mach oder was ich ausprobieren könnte - Du scheinst ja ein richtiger Experte zu sein!

Naja - ich bin da eigentlich nicht so der Experte; aber durch Trial&Error lernt man enorm viel. (und durch mitlesen hier im Forum *gg*)

Grüße,

Christian

[sunny]

Hi Christian!

Du darfst beim NN4 nicht absolut positionieren, sonst nimmt er (anscheinend) keine relativen Breiten. Nimm' also das position: absolute; , die top und die left-angaben komplett raus.

Beim #oben brauchst Du warscheinlich kein float:left;

Hach je ... ich hab jetzt die ganezn Angaben zur Positionierung rausgenommen, nur irgendwie is das jetzt alles nicht mehr so ganz an der richtigen Stelle. Ich kenn mich jetzt gar nicht mehr aus ... was versteht denn NN nun und was nicht? Ich verlier den Überblick jetzt komplett ... schaut ziemlich komisch aus ... überall große Abstände zwischen den divs und der Inhalt und ... na ja, kannst ja mal schauen: https://www.auskunftsportal.net/test/test.shml

Danke für die viele Mühe die Du Dir gibst und schon gegeben hast! :)
Hoffentlich kannst Du mir nochmal sagen was ihm (NN) jetzt wieder nicht passt bzw. was jetzt fehlt!?

Liebe Grüße,
sunny

[sunny]

Sorry, falscher Link - Korrektur:
https://www.auskunftsportal.net/test/test.shtml

sunny

[sunny]

Hmm, also jetzt hab ich noch weiter herumgespielt und probiert usw. jetzt schauts wieder ein bisschen besser aus. Das CSS is zwar irgendwie schon sehr "komisch" ... aber zumindest kommt die Seite meinen Vorstellungen näher.

Trotzdem noch viele Probleme:

Das Logo oben bekomme ich nicht in die Mitte! Wie geht das für den NN 4.x? Außerdem ist der darunterliegende Bereich mit dem Hintergrund ein px zu niedrig, auch das bekomme ich nicht geändert.

Kann ich irgendwie im Navigationsbereich den Text etwas einrücken?
Das funktioniert auch nicht - die Position fürs #links lässt sich nicht ändern ohne das wieder alles durcheinander gebracht wird.

Und wie schaff ich es dass der obere Bereich und der Inhaltsbereich (Text) bündig abschließen? Rechts meine ich. Der obere blaue Bereich hat eine eigenartige Vorstellung von width:100%; ...

Also vielleicht kannst Du mir da wieder ein bisschen weiterhelfen!

Liebe Grüße,
sunny

[Christian Seiler]

Hi,

Das Logo oben bekomme ich nicht in die Mitte! Wie geht das für den NN 4.x? Außerdem ist der darunterliegende Bereich mit dem Hintergrund ein px zu niedrig, auch das bekomme ich nicht geändert.

Das mit dem 1px geht warscheinlich gar nicht korrigieren (sei froh, dass er überhaupt soviel kapiert)

Mittig müsste eigentlich über text-align: center; funktionieren (kann ich aber bei NN4 nicht garantieren)

Kann ich irgendwie im Navigationsbereich den Text etwas einrücken?

padding? (_Müsste_ er eigentlich machen)

Und wie schaff ich es dass der obere Bereich und der Inhaltsbereich (Text) bündig abschließen? Rechts meine ich. Der obere blaue Bereich hat eine eigenartige Vorstellung von width:100%; ...

sorry - da bin ich überfragt ...

ich denke, dass wenn das Layout so wie oben in NN4 einigermaßen funktioniert, kannst Du echt glücklich sein :-)

Grüße,

Christian

[sunny]

Hallo mal wieder!

Das Logo oben bekomme ich nicht in die Mitte! Wie geht das für den NN 4.x? Außerdem ist der darunterliegende Bereich mit dem Hintergrund ein px zu niedrig, auch das bekomme ich nicht geändert.

Das mit dem 1px geht warscheinlich gar nicht korrigieren (sei froh, dass er überhaupt soviel kapiert)

Echt? Das geht ned? Hmmm ...

Mittig müsste eigentlich über text-align: center; funktionieren (kann ich aber bei NN4 nicht garantieren)

Ja das funktioniert - super!

Kann ich irgendwie im Navigationsbereich den Text etwas einrücken?

padding? (_Müsste_ er eigentlich machen)

Macht er auch! Dachte dass ich das eigentlich schon versucht hätte ... na ja - jedenfalls funktioniert das jetzt auch! :)

Und wie schaff ich es dass der obere Bereich und der Inhaltsbereich (Text) bündig abschließen? Rechts meine ich. Der obere blaue Bereich hat eine eigenartige Vorstellung von width:100%; ...

sorry - da bin ich überfragt ...

Hat vielleicht sonst jemand eine Idee!? Das wär schon noch wichtig - so wirkt das total komisch. Ok - gegen das was ich am Anfang hatte sieht das jetzt Dank Eurer (vor allem Christians) Hilfe schon super aus, aber wenn da doch noch jemand einen Tip hätte wie ich das schaffen könnte dass rechts beide divs an derselben Stelle (zumindest ungefähr) abschließen wär das toll!

ich denke, dass wenn das Layout so wie oben in NN4 einigermaßen funktioniert, kannst Du echt glücklich sein :-)

Ja schön langsam kommt es meinen Vorstellungen näher. Man kanns zumindest anschaun ;) So eine Plagerei für diesen NN 4.x ... aber dafür lern ich jetzt (endlich) ´ne Menge über CSS! :)

Dankende Grüße,
sunny

[sunny]

Hallo!

Also frag(t) mich jetzt nicht wie - aber irgendwie hab ich das jetzt hingekriegt *freu

So halbwegs zumindest! Jetzt enspricht es ungefähr meinen (für NN 4.x stark heruntergeschraubten) Vorstellungen!

Falls aber noch jemand eine Idee hat wie ich die Darstellung noch optimieren kann dann nur her damit!

Zu sehen ist das Ganze immer noch unter https://www.auskunftsportal.net/test/test.shtml

Jedenfalls ein großes Dankeschön für die tolle Hilfe!

Glg,
sunny

[Christian Seiler]

Hi,

Zu sehen ist das Ganze immer noch unter https://www.auskunftsportal.net/test/test.shtml

Das sieht doch schon mal sehr gut aus :-) Hätte nicht gedacht, dass wir das dem Netscape 4 noch beibringen könnten .... :-)

Jedenfalls ein großes Dankeschön für die tolle Hilfe!

Ich hab' ja auch etwas dabei gelernt (zum Beispiel, dass meine zukünftigen <div>-Layouts auch im NN4 nach etwas aussehen können).

Grüße,

Christian