Zum Inhalt springen

DIV Anzeige Problem

Erstellt am 10. Februar 2007 · 2 Antworten · letzte Antwort am 11. Februar 2007

Tags: Frage

Billix ·

Hallo!

Habe folgendes Problem!

Habe 5 Div's die ich in mit meinem Typo3 anspreche!
Menü, Linken Content Rechten Content, Haupt Content und den Footer

Auf Grund meiner Notwenigkeit ist Linker und Rechter Content gleich Breit wie der HauptContent und so eingestellt das der Haupt Content immer darunter angezeigt wird!

Nun wenn ich linken und rechten Content nicht mit Typo3 anspreche bleibt er leer und es wir nur der Text von Haupt Content angezeit!

Wenn ich die Webseite mit FF öffne dann bleibt nimmt der linke und rechte Content auch keinen platz ein. so wie es auch sein soll.

Wenn ich die Webseite im IE öffne dann hat der linke und rechte Content ca. 2 cm an Höhe! Was natürlich das ganze Desing verhaut!

Vielleicht hat jemand einen Tipp oder einen Ansatz was ich ändern könnte

Hier noch mein Template!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />


</head>
<body id="type-c">
<!-- ###DOKUMENT### Start -->
	<div id="wrap">
<div id="test"></div>
			
			
			<div id="BANNER">###BANNERTOP###</div>
			<div id="test"></div>

			<div id="hmenu">
	  			<!-- ###MENU_OBEN### Start -->
				<!-- ###MENU_OBEN### Start -->
			</div>
<div id="test"></div>
			
				<div id="lcontent">###lcontent###</div>
				<div id="rcontent">###rcontent###</div>

<div id="test"></div>
    	<div id="content">
			<!-- ###INHALT### Start -->
		<h2>INHALT</h2>
			<!-- ###INHALT### Start -->
		</div>
			
				<div id="test"></div>		

			
			<div id="footer">###footer###</a></div>
	</div>



<!-- ###DOKUMENT### Stop -->
</body>
</html>

body {
	background-color: #333333;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

#sprachen {
	width: 800px;
	padding-left: 20px;
	padding-right: 20px;
	text-align: right;
}

#BANNER {
	width: 800px;
	height: 112px;
	padding-right: 20px;
	padding-left: 20px;
}

#hmenu {
	width: 800px;
	background-color: #FFFFFF;
	padding-right: 20px;
	padding-left: 20px;
}


#wrap {
	width: 840px;
	margin: auto;
	position: relative;
	background-color: #FFFFFF;
	-moz-border-radius:10px;
}

#content-wrap {
	display: marker;
	position: relative;
	width:800px;
	background-color: #FFFFFF;
	padding-left: 20px;
	padding-right: 20px;
	margin-top: 0px;
	padding-top: 0px;
	margin-bottom: 0px;
}

#content-wrap2 {
	width:800px;
	padding-right: 20px;
	padding-left: 20px;
	position: relative;
}

#content {
	text-align: justify;
	background-color: #FFFFFF;
	font-size: 13px;
	font-family: Verdana;
	font-style: normal;
	color: #000000;
	padding-right: 20px;
	padding-left: 20px;
/*	line-height: 10px; */
}
#test {
clear: both; 
}

.bodytext{
	text-align: justify;
	font-size: 13px;
	font-family: Verdana;
	font-style: normal;
	color: #000000;
	background-color: #FFFFFF;
/*	line-height: 10px; */


}
div.csc-header-n1 { margin: 0px 0px 0px 0px } 


p.bodytext { line-height: 17px; background-color: #FFFFFF; }
p { line-height: 1px;  vertical-align: top; background-color: #FFFFFF; }
br { line-height: 1px; background-color: #FFFFFF;}

ul, ol {
	font-size: 13px;
	font-family: Verdana;
	font-style: normal;
	line-height: normal;
	color: #494949;
	background-color: #FFFFFF;
	padding-left: 0px;
	padding-bottom: 0px;
	padding-right: 0px;
	padding-top: 0px;
}

/* LAYOUT - FOOTER */
#footer {
	border-top: 1px solid #E3E8EE;
	font-family: Verdana;
	font-size: 0.65em;
	text-align: right;
	padding-bottom: 10px;
	padding-right: 20px;
	padding-left: 20px;
}

#lcontent {
	float: left;
	width: 500px;
	background-color: #FFFFFF;
	padding-left: 20px;
}

#rcontent {
	float: right;
	width: 290px;
	background-color: #FFFFFF;
	padding-right: 20px;
}


#rcontent a { 
	background-color: #FFFFFF;
}

    #nav {
	width:800px;
	background:#FCF3F8;
	font-size:13px;
	margin-right: 0px;
	margin-left: 0px;
	padding-right: 0px;
	padding-left: 0px;
      }
    #nav ul {
        padding:10px 10px 0 50px;
        list-style:none;
      }
    #nav li {
      display:inline;
      margin:0;
      padding:0;
      }

    #nav a  {
      float:left;
      display:block;
      background:url("tabrightD.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#C7377D;
      }
	  

    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #nav a span {float:none;}
    /* End IE5-Mac hack */
    #nav a:hover span {
      color:#C7377D;
      }
    #nav a:hover {
      background-position:0% -42px;
      }
    #nav a:hover span {
      background-position:100% -42px;
      }

DANKE

Honk88 ·

Hi,

wenn ich dich richtig verstehe, dann willst du, dass content links und rechts
nur dargesetllt werden , wenn Inhalt vorhanden und ansonsten nicht erscheinen
sollen.
Dein Problem ist jetzt, dass die divs trotzdem im generierten Code stehen,
auch wenn sie leer sind.
Der IE geht desweiteren hin und gibt den beiden Elementen eine "min" Höhe von
besagten 2cm.

Lösungsvariante a) sorge per css dafür, dass 'lcontent' und 'rcontent' nicht
padden, spacen etc.

Lösungsvariante b) sorg per TS dafür, dass auch die umschließenden Divs nur dann
erscheinen, wenn wirlklich Inhalt da ist.

ins Haupt TS

...
rcontent < temp.rcontent
lcontent < temp.lcontent
...

in ein +ext TS

temp.rcontent < styles.content.getRight
temp.rcontent.stdWrap {
  wrap = <div id="rcontent"> | </div>
  if.isTrue.numRows < styles.content.getRight
}

temp.lcontent < styles.content.getLeft
temp.lcontent.stdWrap {
  wrap = <div id="lcontent"> | </div>
  if.isTrue.numRows < styles.content.getLeft
}

im HTML-Template dann nur die MARKER ohne umschließende Div-Tags

+ext TS im Haupt TS nich vergessen 😉

LG
Honk