zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 3 dynam. Spalten mit Inhaltsüberlauf

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.10.2007, 23:12
A noobish expert
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 11.10.2007
Beiträge: 126
spacegaier befindet sich auf einem aufstrebenden Ast
Standard 3 dynam. Spalten mit Inhaltsüberlauf

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.10.2007, 23:34
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.867
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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 ).
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.10.2007, 23:53
A noobish expert
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 11.10.2007
Beiträge: 126
spacegaier befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 12.10.2007, 00:00
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.867
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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

Zitat:
Zitat von spacegaier Beitrag anzeigen
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.
Mit Zitat antworten
  #5 (permalink)  
Alt 12.10.2007, 00:12
A noobish expert
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 11.10.2007
Beiträge: 126
spacegaier befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #6 (permalink)  
Alt 12.10.2007, 00:16
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.867
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

#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; ).
Mit Zitat antworten
  #7 (permalink)  
Alt 12.10.2007, 00:24
A noobish expert
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 11.10.2007
Beiträge: 126
spacegaier befindet sich auf einem aufstrebenden Ast
Standard

Danke! Das mit der Höhe klappt jetzt.

Des mit den Faux Columns werde ich mir morgen nochmal anschauen und bei Fragen, dann melden.
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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:37 Uhr.