Zum Inhalt springen

Probleme bei der Menü-Erstellung

Erstellt am 7. Januar 2009 · 4 Antworten · letzte Antwort am 11. Januar 2009

Tags: Frage

Spunkino ·

Hilferuf,
ich beschäftige mich seit einer Woche mit Typo3 und habe jetzt mal versucht, ein html-template zu erstellen inklusive css-datei und ich habe mir das wohl zu einfach vorgestellt. Ich versuche seit Tagen nach der Anleitung einer Schulungs-DVD mein Listenmenü in Typo3 einzubinden, leider ohne Erfolg. Könnte mir vielleicht jemand helfen,indem er mir sagt, wie der Typo3 Code aussehen muss, damit das funktioniert. Antwort wäre super nett, entweder per Mail oder per Skype an ingo_0011 oder an spunkino@t-online.de .Ich hänge mal die template.html sowie die main.css-Datei an. (nicht wundern, die Bilddateien sind in Typo3 natürlich von Bilder/ auf uploads/tf/ geändert.

Hier die 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 border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="107" class="linke_spalte_oben"><img src="Bilder/oben_links.jpg" width="180" alt="oben_links" /></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="Bilder/mitte_links.gif" alt="mitte_links" width="180" height="25" align="left" /></td>
    <td width="640" height="25" class="rechte_spalte"><img src="Bilder/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-->
    <div class="linke_spalte_unten" id="linkes_textfeld">
      <p><h1>Ohne Titel:</h1></p>
      <p>Das ist ein Witz von Onkel Fritz, der in der Badewanne sitzt,und zaubert Lakritz. Da wollen wir doch mal schauen, was da noch so auf uns zukommt.</p>
      <p>Nicht alles ist, wie es scheint.</p>
    </div>
    <!-- ###subpart_linker_text###  stop-->    
    </td>    
    <td width="640" height="377" valign="top" class="rechte_spalte">
    <!-- ###subpart_haupttext###  start-->
    <div class="rechte_spalte_unten" id="haupt_textfeld">
      <h1>Lorem ipsum dolor sit amet</h1>, consectetur adipiscing elit. Cras condimentum   dolor et libero. imperdiet 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="Bilder/unten_links.gif" alt="unten_links" width="180" height="25" align="left" /></td>
    <td width="640" height="25" class="rechte_spalte"><img src="Bilder/unten_rechts.gif" width="641" height="25" alt="unten_rechts" /></td>
  </tr>
</table>
<!-- ###subpart_global###  stop-->
</body>
</html>

Hier die 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: 160px;
}


#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 {
	
	width:			180px;
	height:			250px;
	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------------------------------------------------------  */
#haupt_textfeld {
	
	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(Bilder/haupt_links.gif);
	
	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(Bilder/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;
}

.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: #FFF;
	background-image: url(Bilder/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;
}
Polygnom ·

mit den beiden kann man nicht viel anfangen

dein typoscript code wäre da schon besser gewesen damit man sieht wie weit du schon bist

Michaelh74 ·

Außerdem wäre es auch sehr hilfreich zu wissen, was genau nicht funktioniert. Du erwarstest doch sicher nicht, dass jemand Dir alles vorkaut oder eine einwandfrei funktionierende Version zusendet, oder? ;-)

Bei konkreten Problemen, helfe ich Dir gerne.

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 auseinandergezogeen wird. !?