3 dynam. Spalten mit Inhaltsüberlauf

spacegaier · #1 (**permalink**) 11.10.2007, 23:12

Hallo zusammen,

ich bin gerade dabei mir ein flexibles Layout aufzubauen.

Das ganze sieht folgendermasen aus:

Das ganze nutzt 90% der Breite, hat einen Header, darunter eine horizontale Navigation, dann drei Spalten, wovon die beiden äußeren feste Breiten haben und die mittlere den Platz dazwischen ausfüllt. Das ganze wird dann unten von einem Footer abgeschlossen.

Allerdings gibt es noch zwei Probleme:

1. Am besten sieht es noch im Opera9 aus: Dort ist das einzige Problem, dass die Hintergrundgraphiken der äußeren Spalten nicht die ganze Spaltenhöhe nutzen, sondern beide auf gleicher Höhe aufhören. D.h. es gibt einen Bereich dieser Spalten, der nur durch den die ganze Seite umgebenden Rand gekennzeichnet ist.

2. Im IE7 und FF2 gibt es anderes Problem: Dort ist es
a) so, dass die Hintegrundbilder der beiden äußeren Spalten länger sind als der Rahmen, der die ganze Page umgibt (erzeugt in der ID wrapper). Somit ragen ein Teil der Hintergründe aller Spalten, sowie der Footer über diesen Rahmen hinaus.

b) Der Inhalt der mittleren Spalte läuft unter dem Footer hinaus. Doch selbst dabei gibt es noch einen kleinen Unterschied bei den Browsern. In beiden Fällen ist zwar das Hintegrundbild des Footers über dem der mittleren Spalte, beim IE2 jedoch ist der Text der mittleren Spalten ebenfalls vom Footer verdeckt, wohingegen der Text beim FF2 über den Footer läuft.

Hier dazu mal drei Screenshots:

IE7: http://www.spacegaier.de/ie7.jpg
FF2: http://www.spacegaier.de/ff.jpg
Opera9: http://www.spacegaier.de/opera.jpg

Hier jetzt noch der Code:

html-Datei (dort wo jetzt das ganze Text Text Text steht, einfach mehr Inhalt einfüllen um den Überlauf zu erzeugen):

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<?xml version="1.0" encoding="UTF-8"?>
			<html>
				<head>
					<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
					<title>Page</title>
					<link rel="stylesheet" type="text/css" href="design_4.css">
				</head>
			<body>
				<div id="wrapper">

    				<div id="header"></div>
     		
			 		<div id="subnav">
          				
     				Test</div>

     				<div id="contentfloatholder">

       					<div id="left">
               				
							<div id="menu">
								<div class="menu_button"><a class="menu_link_selected" href="index.php"><div class="link_font">test</div></a></div>
								<div class="menu_button"><a class="menu_link_selected" href="index.php"><div class="link_font">test</div></a></div>
								<div class="menu_button"><a class="menu_link_selected" href="index.php"><div class="link_font">test</div></a></div>
								<div class="menu_button"><a class="menu_link_selected" href="index.php"><div class="link_font">test</div></a></div>
							</div>
				               
        					<div id="status_screen">
            						Die Seite ist im Alpha-Stadium!
        					</div>
        					
          				</div>
          		
          				<div id="right">
          					
							<div id="loginform">
								<form action="login.php" method="post">
        							<input type="text" name="user_name" size="20" value="Benutzername" >
        							<input type="password" name="user_password" size="20" value="Passwort" >
        							<input type="submit" name="submit" value="Login">
        							<a href="index.php?cmd=register">Registrieren</a>
        						</form>
        					</div>
							              		
          				</div>

        				<div id="centerwrap">
							<div class="outer_content_box">
								<div class="inner_content_box">
									<div class="news_title">Ttiel</div>
									
									<div class="news_deco_1"></div>
					
									<div class="news_infos">Geschrieben von Auot am Datum;</div>

									<div class="news_message">  Text Text Text Text Text Text Text Text Text Text Text Text Text Text
																Text Text Text Text Text Text Text Text Text Text Text Text Text Text
																Text Text Text Text Text Text Text Text Text Text Text Text Text Text
																Text Text Text Text Text Text Text Text Text Text Text Text Text Text
																Text Text Text Text Text Text Text Text Text Text Text Text Text Text
																Text Text Text Text Text Text Text Text Text Text Text Text Text Text
																Text Text Text Text Text Text Text Text Text Text Text Text Text Text
																Text Text Text Text Text Text Text Text Text Text Text Text Text Text
																Text Text Text Text Text Text Text Text Text Text Text Text Text Text
																Text Text Text Text Text Text Text Text Text Text Text Text Text Text
																Text Text Text Text Text Text Text Text Text Text Text Text Text Text
																Text Text Text Text Text Text Text Text Text Text Text Text Text Text
									</div>
								</div>
							</div>
						
						</div>
				
      			</div>

      			<div id="footer">Text</div>
	
			</div>
		</body>
		</html>

Css-Datei:

Code:

*
{
   margin: 0px;
   padding: 0px;
   border: 0px;
   font-family: Tahoma;
   font-size: 1em;
}

body
{
   font-family: Tahoma;
   height: 100%;			/* Für IE7 */
}

html
{
   height: 100%;			/* Für IE7 */
}

#wrapper
{
   width: 90%;
   margin: 0 -5% 0 5%;
   border: 1px solid #000;
   height: 100%;
}

#header, #subnav, #footer
{
   clear: both;
   width: 100%;
}

#header
{
   background-image: url(img/header_4.jpg);
   height: 70px;
}

#subnav
{
   background-image: url(img/subnav_4.jpg);
   color: #377593;
   height: 25px;
   border-bottom: 1px solid #000;
   border-top: 1px solid #000;
}

#contentfloatholder
{
  	width: 100%;
  	height: 100%;
}

#centerwrap
{
   	background-color: #3F7D9E;
	margin-left: 180px;
	margin-right: 180px;
	padding-top: 15px;
	height: 100%;
}

#right
{
  	height: 100%;
	width: 180px;
  	float: right;
	background-image: url(img/right_column_4.jpg);
	border-left: 1px solid #000;
}

#left
{
  	height: 100%;
	width: 180px;
  	float:left;
  	background-image: url(img/left_column_4.jpg);
  	border-right: 1px solid #000;
}

#menu
{
   	padding-top: 25px;
}

a
{
   	text-decoration: none;
}

.menu_button
{
   	height: 35px;
   	width: 100%;
   	border-top: 1px solid #fff;
   	border-bottom: 1px solid #C0D1D3;
   	margin-bottom: 3px;
}

a.menu_link
{
   	width: 100%;
   	height: 100%;
   	color: #000;
   	background-image: url(img/link_4.jpg);
   	display: block;
}

a.menu_link:hover
{
   	width: 100%;
   	height: 100%;
   	color: #000;
   	font-weight: bold;
   	background-image: url(img/link_4_hover.jpg);
}

a.menu_link_selected
{
   	width: 100%;
   	height: 100%;
  	color: #000;
   	font-weight: bold;
   	background-image: url(img/link_4_active.jpg);
   	display: block;
}

div.link_font
{
   	padding-left: 35px;
   	padding-top: 7px;
}

#status_screen
{
   	font-size: 0.7em;
   	font-style: italic;
   	margin-left: 15px;
   	margin-right: 15px;
   	margin-top: 35px;
   	text-align: center;
   	color: #fff;
}

a.position_link
{
   	color: #377593;
}

a.position_link:hover
{
   	color: #377593;
   	text-decoration: underline;
}

#footer
{
   	background-image: url(img/subnav_4.jpg);
   	color: #000;
   	height: 35px;
   	font-size: 8pt;
   	text-align: center;
   	border-top: 1px solid #000;
}

.outer_content_box
{
	background-image: url(img/news_4.jpg);
   	margin-left: 25px;
   	margin-right: 25px;
   	margin-bottom: 15px;
   	border: 1px solid #000;
	font-size: 0.8em;
}

.inner_content_box
{
   	background-image: url(img/news_inner_4.jpg);
	border: 1px dashed #fff;
	margin: 10px;
	padding-left: 8px;
	padding-right: 8px;
    padding-bottom: 5px;
	padding-top: 5px;
}

.news_title
{
	font-size: 0.9em;
	font-weight: bold;
}

.news_infos
{
	font-style: italic;
	font-size: 0.7em;
	margin-top: 5px;
	margin-bottom: 5px;
}

.news_user_action_bar
{
 	font-style: normal;
	font-size: 0.7em;
	margin-top: 5px;
	margin-bottom: 5px;
}
 

.news_deco_1
{
	background-image: url(img/news_deco_4.jpg);
	background-repeat: repeat-x;
	width: 100%;
	margin-top: 5px;					
	font-size:1pt;								/*Auf klein setzen damit die Höhe des Divs gering wird*/						
}

.news_message
{
 	border: 1px dashed #fff;
	padding: 5px;
	margin: 3px;
}

#loginform
{
 	margin-top: 25px;
	border-top: 1px solid #fff;
   	border-bottom: 1px solid #C0D1D3;
	background-image: url(img/loginform_4.jpg);
 	padding: 5px;
 	display: block;
 	font-size: 0.8em;
}

Hoffe mir kann jemand helfen. Experimentiere hier an dem Ding jetzt schon seit 11 Tagen rum und hab mir zig Artikel und Beiträge in zig Foren angeschaut und wieder experimentiert und so weiter...
Hat leider bislang nix gebracht.

Grüße - spacegaier

heiko_rs · #2 (**permalink**) 11.10.2007, 23:34

Dein Hauptproblem: 100% Höhe funktioniert anders. Wirf jegliches height: 100%; raus und siehe FAQ Punkt 1, evtl. auch 7 (dann kannst Du height: 100%; zumindest für html und body behalten

).

spacegaier · #3 (**permalink**) 11.10.2007, 23:53

Danke schon mal für die schnelle und kompetente Hilfe!!! Im IE7 und in Opera9 klappt das Ganze jetzt. Aber im FF2 läuft der Inhalt immer noch unten raus...

Habe ich da noch etwas übersehen?

Code:

html, body 
{
     margin:0;
     padding:0;
     font-family: Tahoma;
}

div#wrapper 
{
  
   width: 90%;
   margin: 0 -5% 0 5%;
   border: 1px solid #000;
}
* html #wrapper 
{ 
   width: 90%;
   margin: 0 -5% 0 5%;
   border: 1px solid #000;
}

#header, #subnav, #footer
{
   clear: both;
   width: 100%;
}

#header
{
   background-image: url(img/header_4.jpg);
   height: 70px;
}

#subnav
{
   background-image: url(img/subnav_4.jpg);
   color: #377593;
   height: 25px;
   border-bottom: 1px solid #000;
   border-top: 1px solid #000;
}

#contentfloatholder
{
  	width: 100%;
  	height: 100%;
}

#centerwrap
{
   	background-color: #3F7D9E;
	margin-left: 180px;
	margin-right: 180px;
	padding-top: 15px;
	padding-bottom: 15px;
}

#right
{
	width: 180px;
  	float: right;
	background-image: url(img/right_column_4.jpg);
	border-left: 1px solid #000;
}

#left
{
	width: 180px;
  	float:left;
  	background-image: url(img/left_column_4.jpg);
  	border-right: 1px solid #000;
}

#menu
{
   	padding-top: 25px;
}

a
{
   	text-decoration: none;
}

.menu_button
{
   	height: 35px;
   	width: 100%;
   	border-top: 1px solid #fff;
   	border-bottom: 1px solid #C0D1D3;
   	margin-bottom: 3px;
}

a.menu_link
{
   	width: 100%;
   	height: 100%;
   	color: #000;
   	background-image: url(img/link_4.jpg);
   	display: block;
}

a.menu_link:hover
{
   	width: 100%;
   	height: 100%;
   	color: #000;
   	font-weight: bold;
   	background-image: url(img/link_4_hover.jpg);
}

a.menu_link_selected
{
   	width: 100%;
   	height: 100%;
  	color: #000;
   	font-weight: bold;
   	background-image: url(img/link_4_active.jpg);
   	display: block;
}

div.link_font
{
   	padding-left: 35px;
   	padding-top: 7px;
}

#status_screen
{
   	font-size: 0.7em;
   	font-style: italic;
   	margin-left: 15px;
   	margin-right: 15px;
   	margin-top: 35px;
   	text-align: center;
   	color: #fff;
}

a.position_link
{
   	color: #377593;
}

a.position_link:hover
{
   	color: #377593;
   	text-decoration: underline;
}

#footer
{
   	background-image: url(img/subnav_4.jpg);
   	color: #000;
   	height: 35px;
   	font-size: 8pt;
   	text-align: center;
   	border-top: 1px solid #000;
}

.outer_content_box
{
	background-image: url(img/news_4.jpg);
   	margin-left: 25px;
   	margin-right: 25px;
   	margin-bottom: 15px;
   	border: 1px solid #000;
	font-size: 0.8em;
}

.inner_content_box
{
   	background-image: url(img/news_inner_4.jpg);
	border: 1px dashed #fff;
	margin: 10px;
	padding-left: 8px;
	padding-right: 8px;
    padding-bottom: 5px;
	padding-top: 5px;
}

.news_title
{
	font-size: 0.9em;
	font-weight: bold;
}

.news_infos
{
	font-style: italic;
	font-size: 0.7em;
	margin-top: 5px;
	margin-bottom: 5px;
}

.news_user_action_bar
{
 	font-style: normal;
	font-size: 0.7em;
	margin-top: 5px;
	margin-bottom: 5px;
}
 

.news_deco_1
{
	background-image: url(img/news_deco_4.jpg);
	background-repeat: repeat-x;
	width: 100%;
	margin-top: 5px;					
	font-size:1pt;								/*Auf klein setzen damit die Höhe des Divs gering wird*/						
}

.news_message
{
 	border: 1px dashed #fff;
	padding: 5px;
	margin: 3px;
}

#loginform
{
 	margin-top: 25px;
	border-top: 1px solid #fff;
   	border-bottom: 1px solid #C0D1D3;
	background-image: url(img/loginform_4.jpg);
 	padding: 5px;
 	display: block;
 	font-size: 0.8em;
}

Gibt es für das Problem mit den Hintergründen keine Alternative zu den "Faux Columns"? Das ist ja nämlich total unflexible, wenn man die Hintergründe ändern will.

Und v.a. da ich die Breite meines Container namens Wrapper ja in Prozent angebe, weiß ich ja im vorheraus nicht wie breit das Ganze auf dem Bildschirm dann (in Pixeln) auch wirklich ist. Wie soll ich denn da die passende Größe für meine vertikal-kachelbare Graphik herausfinden?

Danke schon mal soweit und Grüße
spacegaier

heiko_rs · #4 (**permalink**) 12.10.2007, 00:00

Lade die geänderte Version mal hoch, das erspart das Zusammenbasteln.

Zitat:

Zitat von spacegaier

Und v.a. da ich die Breite meines Container namens Wrapper ja in Prozent angebe, weiß ich ja im vorheraus nicht wie breit das Ganze auf dem Bildschirm dann (in Pixeln) auch wirklich ist.

Aber Du weißt, wie breit die Randspalten sind, und genau da kannst Du ansetzen. Dein Layout läßt sich völlig problemlos mit FC umsetzen.

spacegaier · #5 (**permalink**) 12.10.2007, 00:12

Hier die beiden Dateien:

html-Datei:
Page

css-Datei:
design_4.css

Zitat:

Dein Layout läßt sich völlig problemlos mit FC umsetzen.

Was ist FC? Und könntest du den Ansatz für die Faux Columns noch etwas ausführen? Ich weiß doch nicht wie breit meine mittlere Spalte ist?

heiko_rs · #6 (**permalink**) 12.10.2007, 00:16

#contentfloatholder hat immer noch height: 100%;.

FC ist "faux columns".

Wie breit die mittlere Spalte ist, ist egal, Du hast doch genug divs, die alle 3 Spalten umgeben, diese können alle benötigten Grafiken bekommen (u.a. mit background-position: right; ).

spacegaier · #7 (**permalink**) 12.10.2007, 00:24

Danke! Das mit der Höhe klappt jetzt.

Des mit den Faux Columns werde ich mir morgen nochmal anschauen und bei Fragen, dann melden.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Drei spaltige webseite: Spalten mit opacity highlighten.	sepp88	Javascript & Ajax	2	16.11.2009 14:10
Problem beim ein/ausblenden von Spalten in Tabellen via CSS und JavaScript	chrisol_76	CSS	2	21.07.2008 17:37
mitwachsender Menüblock AUF mitgewachsenen Spalten	Fips01	CSS	13	14.04.2008 18:19
3 Spalten immer gleich hoch. Wie mach ich das?	Fanello	CSS	7	21.02.2006 15:39
Tooltip für Spalten ?	SolCom	(X)HTML	0	21.11.2005 15:26