Zum Inhalt springen

Probleme Formatierung von Template in typo3

Erstellt am 9. Januar 2009 · 3 Antworten · letzte Antwort am 13. Januar 2009

Tags: HTML & CSS, Frage

Spunkino ·

Frage, ich habe ein Template gemacht, das jetzt Ansatzweise funktioniert, jedoch gibt es noch ein paar Probleme:

1. Links im Menü wird in Typo3 der unterste Punkt "Impressum" nicht angezeigt

2. Das komplette Menü ist um ein paar Pixel zu weit nach links verschoben, ich habe schon in allen möglichen Formatierungen in meiner template.html bzw. main.css rumgesucht, aber ich finde den Fehler nicht.

3. Rechts im unteren Teil meiner Seite (Haupttextfeld) möchte ich, das eine Scrolleiste erscheint, wenn zu viel Text eingegeben wird. Funktioniert aber leider nicht, obwohl in der main.css unter #haupttextfeld eingestellt. Stattdessen wird die ganze Seite nach unten auseinandergezogen. (Leider wird die komplette id: #haupttextfeld nicht umgesetzt,heul).

Würde mich über ein paar gute Tipps freuen, Grüsse und Dank im Vorraus, Ingo

template.html

<!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=ISO-8859-1" />
<title>kunst-in-der-welt</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!-- ###subpart_global###  start-->
<table width="696" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="107"><img src="uploads/tf/oben_links.jpg" alt="oben_links" width="180" align="left" /></td>
    <td height="107" align="center" class="rechte_spalte_oben"><h2>kunst-in-der-welt</h2></td>
  </tr>
  <tr>
    <td width="180" height="25" class="linke_spalte_kopf"><img src="uploads/tf/mitte_links.gif" alt="mitte_links" width="180" height="25" align="left" /></td>
    <td width="696" height="25" class="rechte_spalte"><img src="uploads/tf/mitte_rechts.gif" width="641" height="25" alt="mitte_rechts" /></td>
  </tr>
  <tr>
    <td width="180" height="377" valign="top" class="linke_spalte_oben">
    <!-- ###subpart_hauptnavi###  start-->
    <div id="hauptmenue">
    <ul>
      <li><a href="#">Startseite</a></li>
      <li><a href="#">Künstler</a></li>
      <li><a href="#">Ausstellungen</a></li>
      <li><a href="#">Kontakt</a></li>
      <li><a href="#">Impressum</a></li>
    </ul>
    </div>
    <!-- ###subpart_hauptnavi###  stop-->    
    <!-- ###subpart_linker_text###  start-->
    <!-- ###subpart_linker_text###  stop-->    
    </td>    
    <td width="696" height="377" valign="top" class="rechte_spalte_unten">
    <!-- ###subpart_haupttext###  start-->
    <div id="haupttextfeld">
      <h1>Lorem ipsum dolor sit amet</h1>, consectetur adipiscing elit.eleifend, turpis ipsum blandit sapien, id feugiat felis mi   sit amet purus</p>
    </div>
    <!-- ###subpart_haupttext###  stop-->
    </td>
  </tr>
  <tr>
    <td width="180" height="25" class="linke_spalte_fuss"><img src="uploads/tf/unten_links.gif" alt="unten_links" width="180" height="25" align="left" /></td>
    <td width="696" height="25" class="rechte_spalte"><img src="uploads/tf/unten_rechts.gif" width="641" height="25" alt="unten_rechts" /></td>
  </tr>
</table>
<!-- ###subpart_global###  stop-->
</body>
</html>

Typo3:

page = PAGE
page.stylesheet = uploads/tf/main.css
page.10 = TEMPLATE
page.10 {
 template = FILE
 template.file = uploads/tf/template.html
 workOnSubpart = subpart_global
 
 }
 
 page.10.subparts.subpart_hauptnavi < tmp.HAUPTNAVIGATION
 page.10.subparts.subpart_haupttext < styles.content.get

Navigation:

tmp.HAUPTNAVIGATION = HMENU
tmp.HAUPTNAVIGATION {
  wrap = <div id="hauptmenue"> | </div>
  excludeUidList = 7
  1 = TMENU
  1 {
    wrap = <ul> | </ul>
    NO = 1
    NO.wrapItemmAndSub = <li> | </li>
    ACT = 1
    ACT < .NO
    ACT.ATagParams = id=current
  }
}

main.css

/* Layer: ID=...--------------------------------------------------------------------------------*/

/* Formatierungen für das Hauptmenü und dessen Hyperlinks ----------------------*/

#hauptmenue {
	width: 180px;
}

#hauptmenue ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
#hauptmenue ul li
{
	margin: 0;
	padding: 0;
}

#hauptmenue a
{
	display: block;
	padding-right: 0px;
	padding-left: 20px;
	padding-top: 3px;
	padding-bottom: 3px;
	margin: 0;
	width: 180px;
	background-color: #EEE;
	border-bottom: 1px solid #E7E7E7;
}

html>body #hauptmenue a {
	width: 180px;
}


#hauptmenue a:link, #mainnavcontainer a:visited
{
	color: #525252;
	text-decoration: none;
}

#hauptmenue a:hover
{
	background-color: #FFFFFF;
	color: #000;
}

#hauptmenue a#current{
	background-color: #E7E7E7;
}
/* rahmen fuer das linke_textfeld------------------------------------------------------  */
#linkes_textfeld {
	background-color: #EEE;
	width:			180px;
	height:			300px;
	z-index:			3;
	left:				0px;
	top:				0px;
	position:		relative;
	overflow:		auto;
	scrollbar-base-color:			#525252;
	scrollbar-3dlight-color:		#525252;
	scrollbar-arrow-color:			#ffffff;
	scrollbar-darkshadow-color:		#525252;
	scrollbar-face-color:			#ffffff;
	scrollbar-highlight-color:		#ffffff;
	scrollbar-shadow-color:			#666666;
	scrollbar-track-color:			#ffffff;
	border-width:	0px;
	border-style:	solid;
	border-color:	#525252;
}
/* rahmen fuer das haupt_textfeld------------------------------------------------------  */
#haupttextfeld {
	width:			590px;
	height:			359px;
	z-index:			3;
	left:			10px;
	top:			15px;
	position:		relative;
	overflow:		auto;
	scrollbar-base-color:			#525252;
	scrollbar-3dlight-color:		#525252;
	scrollbar-arrow-color:			#ffffff;
	scrollbar-darkshadow-color:		#525252;
	scrollbar-face-color:			#ffffff;
	scrollbar-highlight-color:		#ffffff;
	scrollbar-shadow-color:			#666666;
	scrollbar-track-color:			#ffffff;
	border-width:	0px;
	border-style:	solid;
	border-color:	#525252;
}
/* Klassen: class =...---------------------------------------------------------------------------------------------*/

/* link formatierungen für was neues */
a.neu:link {
	font-size:		13px;
	line-height:	10px;
	color:			#003366;
}

a.neu:visited {
	font-size:		13px;
	line-height:	10px;
	color:			#003366;
}

a.neu:hover {
	font-size:		13px;
	line-height:	10px;
	color:			#ffffff;
}


/* kein Rand für bilder------------------------------------------------------- */
img {
	border:	0px;
	background-image: url();
}
/* Formatierungen der Klassen linke_Spalte_oben Text --------------------------*/


.linke_spalte_oben {
	background-color: #FFF;
	background-image: url();
	
	margin: 0;
	padding: 0;
}

.linke_spalte_oben a{
	color: #FB9F00;
	text-decoration: none;
}
.linke_spalte_oben a:hover{
	text-decoration: underline;
}

/* Formatierungen der Klassen linke_Spalte_unten Text --------------------------*/

.linke_spalte_unten {
	background-color: #FFF;
	background-image: url(../uploads/tf//haupt_links.gif);
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #525252;
	margin: 0;
	padding-right: 0px;
	padding-left: 0px;
	padding-top: 40px;
	padding-bottom: 0px;
		
	width:			590px;
	height:			359px;
	z-index:			3;
	left:			10px;
	top:			15px;
	position:		relative;
	overflow:		scroll;
	scrollbar-base-color:			#525252;
	scrollbar-3dlight-color:		#525252;
	scrollbar-arrow-color:			#ffffff;
	scrollbar-darkshadow-color:		#525252;
	scrollbar-face-color:			#ffffff;
	scrollbar-highlight-color:		#ffffff;
	scrollbar-shadow-color:			#666666;
	scrollbar-track-color:			#ffffff;
	border-width:	0px;
	border-style:	solid;
	border-color:	#525252;

	
	
	
	
}

.linke_spalte_unten h1{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #525252;
	margin: 0;
	padding-right: 0px;
	padding-left: 0px;
	padding-top: 5px;
	padding-bottom: 10px;
}
.linke_spalte_unten h2{
	font-family: Verdana;
    font-weight: bold;
	font-size: 24px;
	color: #666666;
	margin: 0;
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 10px;
}
.linke_spalte_unten p{
	margin: 0;
	padding-right: 0px;
	padding-left: 0px;
	padding-top: 0px;
	padding-bottom: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* Formatierungen klasse "linke_spalte_unten" Links -------------------------------*/
.linke_spalte_unten a{
	color: #F45C20; /* Farbe für Links*/
	text-decoration: none;
}
.linke_spalte_unten a:hover{
	text-decoration: underline;
}



/* Formatierungen der Klassen rechte_Spalte_oben u. rechte_spalte_unten Text -----*/
.rechte_spalte_oben {
	background-color: #EEE;
	background-image: url(/../uploads/tf/oben_rechts.gif);
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #525252;
	margin: 0;
	padding-right: 0px;
	padding-left: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

.rechte_spalte_oben h1{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	margin: 0;
	padding-right: 0px;
	padding-left: 0px;
	padding-top: 20px;
	padding-bottom: 10px;
}
.rechte_spalte_oben h2{
	font-family: Verdana;
    font-weight: bold;
	font-size: 24px;
	color: #666666;
	margin: 0;
	padding-right: 0px;
	padding-left: 0px;
	padding-top: 20px;
	padding-bottom: 10px;
}
.rechte_spalte_oben p{
	margin: 0;
	padding-right: 0px;
	padding-left: 0px;
	padding-top: 0px;
	padding-bottom: 10px;

}
.rechte_spalte_unten {
	background-color: #FFF;
	background-image: url();
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #525252;
	margin: 0;
	padding-right: 10px;
	padding-left: 20px; /* hier wird eingestellt, wo Text innerhalb des in "id=haupt_textfeld" deklarierten Textes, siehe oben */
	padding-top: 10px;
	padding-bottom: 0px;
}
.rechte_spalte_unten h1{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	margin: 0;
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 10px;
}
.rechte_spalte_unten h2{
	font-family: Verdana;
    font-weight: bold;
	font-size: 24px;
	color: #666666;
	margin: 0;
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 10px;
}
.rechte_spalte_unten p{
	margin: 0;
	padding-right: 0px;
	padding-left: 0px;
	padding-top: 0px;
	padding-bottom: 10px;

}
/* Formatierungen klasse "rechte_spalte_unten" Links -------------------------------------------*/
.rechte_spalte_unten a{
	color: #F45C20; /* Farbe für Links*/
	text-decoration: none;
}
.rechte_spalte_unten a:hover{
	text-decoration: underline;
}
Michaelh74 ·

Ist die Seite mit Impressum evtl. Uid 7?

Dann wäre das hier verantwortlich:

excludeUidList = 7

Kann man die Seite irgendwo sehen?
Ist sonst rein anhand von dem CSS etwas schwer ausfindig zu machen.

Es handelt sich dort ja um CSS Problem, die ansich jetzt nicht direkt was mit Typo3 zu tun haben.

Nur so als Anmerkung:
Tabellen-Layout sind heutzutage eigentlich nicht mehr angebracht ;-)
Würde das Ganze besser sauber tabellenfrei umsetzen...

Gruß
Michael

Spunkino ·

Danke für den Hinweis mit dem Exclude .. id =7 . Ich bin vielleicht ein Seppel !! Na ja, Punkt entfernt, und schon wird auch das komplette Menü, wie gewünscht angezeigt. Daüfr schonmal vielen Dank !

Jedoch sind die zwei anderen Punkte für mich leider noch nicht gelöst. Ich frag jetzt mal anders, könnte mir mal jemand einen codeschnipsel senden, bei dem die Scrolleiste innerhalb einer Zelle erfolgreich funktioniert, wenn viel Inhalt angezeigt werden soll, damit nicht immer die ganze Page auseinandergezogen wird. !?

Zur Antwort von Michael:
Und was meinst Du damit, Du würdest Deine Page ohne Tabellen umsetzten, weil das Out ist? Bzw. kannst du mir mal einen konkreten Ansatz geben, ich bin ja für neue Anregungen immer offen !!??

Michaelh74 ·

Tabellen waren vor vielen Jahren für eine Layout notwendig. Heutzutage geht das über CSS + DIV, etc.

Google doch mal nach tabellenfrei layout oder so...

Das mit dem scrollbaren Bereich hat nichts mit Typo3 zu tun, sondern ist wieder mal rein CSS. Also kommst Du wohl nicht herum Dich dort etwas einzuarbeiten... Sichwort CSS + overflow!

Gruß
Michael