Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 12.10.2007, 00:12
spacegaier spacegaier ist offline
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