zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Flexibles 2-Spalten-Layout erzeugt Scrollbalken!?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.11.2007, 23:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.11.2007
Beiträge: 3
JonasR befindet sich auf einem aufstrebenden Ast
Standard Flexibles 2-Spalten-Layout erzeugt Scrollbalken!?

Hallo zusammen,

ich habe mal anhand der Suchfunktion geschaut, ob es mein Problem schonmal gab, aber in dieser Form konnte ich es bislang nicht finden.

Ich will mal gleich zum Thema kommen:

Ich habe ein Layout mit einem Header, einer Navigation, einem Inhalt und einem Footer. Die Navigation befindet sich links neben dem Inhalt-Container und besitzt eine andere Farbe. Da im Inhalt-Container stets unterschiedlich lange Texte stehen werden, soll sich die Höhe des Navigations-Containers entsprechend anpassen, so dass beide Container mit Beginn des Footers enden. Dies ist mir auch problemlos gelungen, "height: 100%;" im <body> resp. in den entsprechenden Containern sei Dank.

Doch leider war die Freude nur von kurzer Dauer. Im FireFox / IE (je neuste Versionen) betrachtet erzeugte der Code natürlich unterschiedliche Ergebnisse, das Problem jedoch ist vom Prinzip her gleich.

Die Container "Inhalt" und "Navigation" werden zwar wie erwünscht bis zum Footer angezeigt, jedoch ist der Footer nirgends mehr sichtbar. Dafür erscheint zur Rechten nun dieser wunderschöne Scollbalken, mit welchem man den Footer sichtbar werden lassen kann.
Auch die Reduzierung des height-Wertes im <body> auf 70% löste das Problem nicht erheblich, im IE passierte wie erwartet rein gar nichts, im FF ist die Länge der beiden betroffenen Container nun kleiner, auf der inhaltsschwachen Seite ziehen sich die Container zwar nach wie vor bis ans Ende des Browserfensters, aber das ist wohl der eigentliche Effekt des "height: 100%;"-Attributwerts.

Hat jemand für diese Schilderung einen Lösungsvorschlag? Ich habe mittlerweile etliche Möglichkeiten durchprobiert, selbst das Internet warf keine neue Idee mehr aus.

Zur Verdeutlichung nochmal ein paar Code-Auszüge:

HTML:
Zitat:
<body>
[...]
<div id="content">
<div id="content_left">
[Navigation]
</div>
<div id="content_right">
[Inhalte]
</div>
</div>
[...]
</body>
CSS:
Zitat:
body {
height: 70%;
}

#content {
margin: left;
padding: 0;
width: 810px;
height: 100%;
}

#content_left {
margin: left;
width: 185px;
background: #036cd9 url("bgleft.jpg") no-repeat;
background-position: 20% 20%;
height: 100%;
float: left;
}

#content_right {
background: url("bgright.jpg") no-repeat;
background-position: top center;
width: 625px;
height: 100%;
float: right;
}
Vielen Dank schonmal an alle Interessenten, die sich neben mir mit diesem Problem messen wollen
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.11.2007, 02:26
Benutzerbild von dottore:skin
~27
XHTMLforum-Mitglied
 
Registriert seit: 23.02.2005
Beiträge: 233
dottore:skin befindet sich auf einem aufstrebenden Ast
Standard

zum einen hast du den footer container nicht mit in deinem code. zum anderen such mal nach footerstick / footerstickalt.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.11.2007, 13:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.11.2007
Beiträge: 3
JonasR befindet sich auf einem aufstrebenden Ast
Standard

Hallo dottore:skin,

Die Methode mit FooterStick(Alt) ist mir geläufig, jedoch bin ich bis jetzt auf dem Kenntnisstand, dass der Footer stets am Browserende angezeigt werden soll. Gerade das möchte ich vermeiden

Sorry, dass ich mich etwas undeutlich ausgedrückt habe.

Also ich habe einen header, zwei Inhalt-Container (resp. Spalten) und einen Footer. Der Inhalt sollte eine Mindesthöhe haben, damit die entsprechenden Hintergrundbilder vollständig angezeigt werden (hier zickt der IE ja schonmal rum...). Nun kann es aber sein, dass ein Container im Inhalt her länger wird, so dass man scrollen muss, was an sich relativ geläufig ist. Daher sollen beide Inhalt-Container gleichmässig "wachsen", also im Endeffekt bei einem langen Text im der einen Spalte gleich lang sein. Der Footer soll dann einfach den Inhalts-Bereich abschliessen und untendran gehängt werden.

Das Problem, was bei mir jetzt aufgetaucht ist, ist: Beide Inhaltscontainer enden mit dem Ende des Browserfensters, so dass man für den Footer auf jeden Fall scrollen muss. Und das, obwohl beide Inhalt-Container relativ inhaltsleer sind.
Mit Zitat antworten
  #4 (permalink)  
Alt 06.11.2007, 17:57
Benutzerbild von Hasso
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.05.2006
Beiträge: 139
Hasso befindet sich auf einem aufstrebenden Ast
Standard

Code:
#content {
margin: left;
padding: 0;
width: 810px;
height: 100%;
}

#content_left {
margin: left;
width: 185px;
background: #036cd9 url("bgleft.jpg") no-repeat;
background-position: 20% 20%;
height: 100%;
float: left;
}
Was sollen uns diese Angaben sagen?
Code:
margin-left:XXpx;
wäre doch wohl richtiger.
Und warum gibst du deinen beiden content-Containern nicht einfach ein margin-bottom in Höhe des Footers? Dann sollte dieser doch auch ohne Scrollen zu sehen sein.
__________________
Hasso
Mit Zitat antworten
  #5 (permalink)  
Alt 06.11.2007, 22:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.11.2007
Beiträge: 3
JonasR befindet sich auf einem aufstrebenden Ast
Standard

Jepp, das hat geholfen, vielen Dank. Ich habe mich im Nachhinein nun für die Faux-Columns-Variante entschieden, in gewissen Sinne aber auch nur, weil ich das ganze mal auf meinen Fall bezogen ausprobieren wollte.
Leider ist nun aber noch ein neues Problem aufgetaucht (allerdings nicht durch die Faux-Columns), aber ich möchte nicht gleich einen neuen Thread eröffnen. In dieser Form konnte ich auch noch keine Hilfe in diesem Forum finden.

Kurz vorweg: Das Problem existiert nur im Firefox, im IE ist alles wunderbar.

Ich habe nun einen Header, einen Content (mit 2 gefloateten Spalten) der in der Höhe variabel (je nach Textlänge) sein soll, und letzendlich habe ich einen Footer.
Im Firefox muss ich allerdings feststellen, dass der (etwas längere Text) im Content einfach über den Footer hinweg geschrieben wird. Zunächst kam mir ein clear-Fehler in den Sinn, doch ich habe nun fast alle Möglichkeiten probiert - ohne Erfolg

Code:
HTML:
[...]
<div id="header"><img src="header.gif"></div>

<div id="content">
 
<div id="content_left">
   <div class="content_navi">Navigation:</div>
<ul>
<li>Punkt01</li>
<li>Punkt02</li>
</ul>
 </div>

 <div id="content_right">
  <div class="content_text">
  <h1>headline</h1>
bla<br>bla<br>bla [...] <br>bla<br>bla<br>bla
  </div>
 </div>

<div class="clear"></div>

</div> <!-- Ende 'id="content"' -->

<div id="footer">
texttexttexttext
</div>
[...]

----------------------------
CSS (nur relevantes):

#content {
padding: 0;
background: url("bg.gif") repeat-y;
z-index: 1;
width: 812px;
min-height: 420px;
}

#content_left {
width: 185px;
height: 420px;
background: url("navi_bg.jpg") no-repeat;
background-position: 20% 20%;
z-index: 2;
float: left;
}

#content_right {
background: url("content_bg.jpg") no-repeat;
background-position: top center;
z-index: 2;
width: 625px;
float: right;
}

#clear {
clear: both;
}

#footer {
width: 810px;
height: 60px;
}
So, das ist im wesentlichen das Grundgerüst meiner Testseite, an welcher ich versucht habe, das Problem Schritt für Schritt zu ermitteln.
Im IE klappt das alles wunderbar, aber wie bereits erwähnt beginnt der Footer bereits nach 420 (?) Pixeln Content-Höhe. Der (eigentlich etwas längere "<br>bla"-Text wird einfach über ihn hinweg weitergeschrieben.

Sobald dieses Problem gelöst ist, bin ich im Grunde fertig mit dem Gerüst. Ich prokel da (mal wieder) seit einiger Zeit dran und bin inzwischen etwas ratlos.

Vielen Dank im Voraus für eure Bemühungen

Geändert von JonasR (06.11.2007 um 22:04 Uhr)
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
2 Spalten Layout INKL. 1 Spalten Layout miedsegadse CSS 20 14.04.2011 01:02
Layout: 2 Spalten gleich langer Höhe Boof CSS 1 05.03.2010 11:50
3 Spalten fixed width css layout sharepointkb CSS 9 28.02.2010 21:00
Flexibles 3-Spalten Layout Tobbe CSS 4 18.10.2006 14:07
scrollbalken zerstört mein layout tobydom CSS 15 29.11.2005 14:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:30 Uhr.