✔ CSS-Layout Höhe ist größer als 100%

Status
Nicht offen für weitere Antworten.
Das Hintergrundbild "bg_pic.gif" im DIV #wrapper soll doch den Hintergrund für die Navigation erzeugen, oder etwa nicht?

Necro: Ja das Bild ist einfach nur 2x2px in dem dunklen tuerkis.

Soll sich dieser Spaltenhintergrund etwa nicht bis nach unten zum Footer erstrecken?

Necro: Doch die sollten sich bis nach unten erstrecken.

Maik hat gesagt.:
Sorry, ich kann dir gerade nicht ganz folgen.

Das Hintergrundbild "bg_pic.gif" im DIV #wrapper soll doch den Hintergrund für die Navigation erzeugen, oder etwa nicht?

Necro: Ja das Bild ist einfach nur 2x2px in dem dunklen tuerkis.

Soll sich dieser Spaltenhintergrund etwa nicht bis nach unten zum Footer erstrecken?

Necro: Doch die sollten sich bis nach unten erstrecken.

Ich bitte um Aufklärung, wie du dir das Seitenkonzept im Detail vorstellst, bevor wir hier aneinander vorbeireden und -entwickeln - vielen Dank!

mfg Maik
Zum Vergrößern anklicken....

Im anhang das Bild wie es aussehen soll
 
Zuletzt bearbeitet:
Hm..hab ich doch schon, ist auf der naechsten Seite...
irgendwie scheint das alles sehr verzoegert anzukommen...immer, wenn ich was poste steht deine Antwort eine Stelle vor meinem neuen Post

Die Bauanleitung, also das Bild, das im naechsten Post ist, reicht das?


Maik hat gesagt.:
Es wäre ganz sinnvoll und angebracht, wenn du allmählich die Seite auf einen Server lädst, und hier den Link zu ihr nennst, damit man sich das live anschauen kann, und deine "Baufortschritte" mitverfolgen kann.

Außerdem warte ich noch auf deine detailierte "Baubeschreibung", wie sich nun die beiden Spalten in ihren Höhen im Viewport verhalten sollen.

mfg Maik
Zum Vergrößern anklicken....
 
Ich häng dir die überarbeitete Fassung als ZIP-Datei an, da ich zwei neue Hintergrundbilder erstellt habe:

Code: 
div#wrapper {
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
background: repeat-y url(2columnsBackground.png); /* erzeugt die beiden Spaltenhintergründe für Navigation und Inhalt */
border-left: 1px solid #b8b8b8;
border-right: 1px solid #b8b8b8;
}

div#footer {
clear: both;
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
padding-top: 20px;
background: url(footerBackground.png); /* erzeugt den grauen Hintergrund für den Footer, sowie zwischen ihm und dem Inhalt den türkisfarbenen Streifen */
}
Desweiteren habe ich in diesen Boxen die entsprechende Hintergrundfarbe festgelegt, damit der rechte Spaltenhintergrund im DIV #wrapper an diesen Stellen überdeckt wird:

Code: 
div#header {
background: #cfcfcf url(img/layout_035_2.jpg) repeat-x;
margin:0;
}

#eins {
        font-weight:bold;
        font-size:10pt;
        line-height:2em;
        height:20px;
        color:#D5E4EE;
        padding-left:5px;
        padding-right:5px;
        text-align:right;
        background: #6fafaa;
        }
Das Modell hab ich in den folgenden Browsern (unter WinXP) erfolgreich getestet:

  • Firefox 1.x, 2.x, 3.x
  • IE 5.x, 6, 7
  • Mozilla 1.8b
  • Netscape 9.x
  • Opera 9.5.x
  • Safari 3.1.2 (Win)
  • SeaMonkey 1.1.6
mfg Maik
 

Anhänge

  • demo_Necro_nomicon.zip
    2,8 KB · Aufrufe: 18
Ich weiss nicht, was ich noch tun koennte um die Navigation und den Inhalt bis runter durchgehend zu machen, wie auf dem Bild......

Jetzt passt zwar der Footer und so, aber das Problem, dass ich schon zu Beginn hatte hat sich trotzdem nicht nicht geloest.

Ich verstehe nicht warum. Bei deinem Beispiel ging es ja.


+++edit+++
Jetzt haben wir gleichzeitig gepostet...
Ich schau mir das .zip sofort an!
 
Oh my God! *herumhuepf*

Es funktioniert! Ich muss mir das im Detail jetzt nochmal anschauen, warum und weshalb es geht! *um den Hals fall*

Du weisst gar nicht, wie erleichtert ich bin. Ich dachte mir, es waere viel einfacher. Im Buch schien das alles so logisch und ich dachte es waere einmal an der Zeit die tables aufzugeben. Aber jetzt hat mich das ganze nicht mehr losgelassen und ich hatte schon grosse Befuerchtungen durchzudrehen.....

Das einzige Problem, was ich gesehn habe ist, dass er beim IE 7 (Win) zwei Scrollbalken macht.
Und das Untermenue mit div=2 wird nicht angezeigt?

Aber was war eigentlich das ausschlaggebende, dass es nun funkt? Das mit dem Background im #eins? Dass er die Farbe sozusagen ueberschreibt?

Und wieso is der div=vier leer? Der braucht gar keine Angaben?
 
Zuletzt bearbeitet:
Hier der Scrollbalken

PS: Wie kann ich mich eigentlich erkenntlich zeigen, dass du dir so lange Zeit genommen hast!?
 
Zuletzt bearbeitet:
Der doppelte Scrollbalken im IE7 rührt von dieser CSS-Regel:

Code: 
html,body {
overflow:auto;
}
Abhilfe schafft da das Entfernen des body-Elements aus dem Selektor.

Bezgl. des Untermenüs schlage ich folgendes vor: das DIV #top_navigation entfällt gänzlich im Markup:

Code: 
<div id="zwei">
      <img src="img/layout_035_7.jpg" width="33" height="25" id="balken" alt="Test">
      <a href="ziele.html" class="top_link" id="ziele">Ziele</a>
      <a href="statuten.html" class="top_link" id="statuten">Statuten</a>
</div>
und die Regeländerungen im Stylesheet lauten dafür:

Code: 
#zwei {
        height:25px;
        width:100%;
        background-color:#D5E4EE;
        position:relative;
        }

a#ziele {
        bottom:0;
        left:35px;
        text-decoration:none;
        }

a#statuten {
        bottom:0;
        left:75px;
        text-decoration:none;
        }
Die ID #zwei liesse sich dann auch in den aussagekräftigeren ID-Bezeichner #top_navigation umtaufen.

Wie du dich für meinen Einsatz erkenntlich zeigen kannst?
Indem du in einem meiner Beiträge in der linken Spalte auf dieses Icon reputation.gif klickst, und den Beitrag positiv bewertest - vielen Dank! :)

mfg Maik
 
Necro_nomicon hat gesagt.:
Aber was war eigentlich das ausschlaggebende, dass es nun funkt? Das mit dem Background im #eins? Dass er die Farbe sozusagen ueberschreibt?

Und wieso is der div=vier leer? Der braucht gar keine Angaben?
Zum Vergrößern anklicken....
Das einzige Problem, das ich aus deinem vorletzten Screenshot entnommen habe, war der türkisfarbene Streifen zwischen dem Inhalts- und Footerbereich.

Ansonsten wurde bei mir das Hintergrundbild für die Navigation bis zum Footer wiederholt, und die übrigen Seitenbereiche überdeckten mit meiner Empfehlung, ihnen die entsprechende Hintergrundfarbe zuzuweisen, die Hintergrundfarbe des Inhalts.

Da die Hintergrundfarbe (#D5E4EE) für #vier nun mit dem Hintergrundbild im DIV #wrapper generiert wird, blieb zum Schluß nur noch diese eine Regel übrig:

Code: 
div#vier {
	/***
	position:absolute;
	top:53px;
	left:0px;
	bottom:0px; ***/
	/* background-color:#D5E4EE; */
	width:100%;
	}
die in diesem Fall überflüssig ist, da das Block-Element ohne die, von dir zuvor auskommentierte, absolute Positionierung von Hause aus eine relative Breite von 100% mitbringt.

mfg Maik
 
Hey:)

Ich hab gedacht du bist schon offline und hab mal ne Pause eingelegt und bin dabei
auf der Couch eingeschlafen:( Wahrscheinlich ist die Anspannung endlich abgefallen..wie es gefunkt hat....
Ich seh mir morgen dann nochmal deine letzten Posts durch und bastle weiter!
Muss aber zu einem Termin und ab Nachmittag vier Stunden Zugfahren...

Das mit dem Bewerten mache ich ganz sicher!

boah *gaehn* ich geh ins Bett! Bis morgen dann!

*waves*
Necro
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück