Zum Inhalt springen

Hilfe : Horizontales Menü!

Erstellt am 6. Juli 2006 · 6 Antworten · letzte Antwort am 6. Juli 2006

Tags: Frage

Jasson ·

Hallo alle,

Ich habe hier ein dringendes Problem. Ich muss für unser Portal ein horizontales Menü erstellen, als Typo Neuling gar nicht so einfach #paralyzed#

Vielleicht kann mir da jemand ja ein Tipp oder möglicher Lösungsweg geben.

Das ganze läuft mit Templavoila.

Hier sind mein TypoScript, Template und Stylesheet.
Wäre sehr dankbar wenn mir da jemand helfen könnte.

Freundliche Grüsse
Jasson

## Allgemeine Einstellungen ##
config {
  language = de
  locale_all = de_CH
  spamProtectEmailAddresses = 1
  spamProtectEmailAddresses_atSubst = (at)
  admPanel = 1
  sys_language_uid = 0
}

## localization ##
mod.SHARED {
  defaultLanguageFlag = de.gif
  defaultLanguageLabel = Deutsch
}

## Templa Voila ###
mod.web_txtemplavoilaM1.disableContainerElementLocalizationWarning = 1

## Root Line Link Path ##
lib.rootline = HMENU
lib.rootline {
  special = rootline
  special.range = 0|-1
  1 = TMENU
  1.target = _self
  1.wrap = <font face="Arial" size="2" color="silver">|</font>
  1.NO.linkWrap = | > 
  1.NO.ATagParams = class="linkWhite"
} 



## Rich Text Editor ##
lib.parseFunc_RTE {
	//  makelinks >
	# Processing <table> and <blockquote> blocks separately
	externalBlocks = table, blockquote, ol,ul
	externalBlocks {
		# The blockquote content is passed into parseFunc again...
		blockquote.stripNL=1
		blockquote.callRecursive=1
		blockquote.callRecursive.tagStdWrap.HTMLparser = 1
		blockquote.callRecursive.tagStdWrap.HTMLparser.tags.blockquote.overrideAttribs = 
style="margin-bottom:0;margin-top:0;"

		ol.stripNL=1
		ol.stdWrap.parseFunc = < lib.parseFunc

		ul.stripNL=1
		ul.stdWrap.parseFunc = < lib.parseFunc

		table.stripNL=1
		table.stdWrap.HTMLparser = 1
		table.stdWrap.HTMLparser.tags.table.fixAttrib.class {
			default = contenttable
			always = 1
			list = contenttable
		}
		table.stdWrap.HTMLparser.keepNonMatchedTags = 1
		table.HTMLtableCells=1
		table.HTMLtableCells {
			default.callRecursive=1
			addChr10BetweenParagraphs=1
		}
	}
	nonTypoTagStdWrap.encapsLines {
		encapsTagList = div,p,pre,h1,h2,h3,h4,h5,h6
		remapTag.DIV = P
		nonWrappedTag = P
		innerStdWrap_all.ifBlank =  
		addAttributes.P.class = text
		addAttributes.P.class.setOnly=blank
	}
	nonTypoTagStdWrap.HTMLparser = 1
	nonTypoTagStdWrap.HTMLparser {
		keepNonMatchedTags = 1
		htmlSpecialChars = 2
	}
}

## Plugin tt_news ##
plugin.tt_news {
  _CSS_DEFAULT_STYLE > 
  displayList {
    age_stdWrap.age = 1
    textNewsAge_stdWrap.wrap =
    date_stdWrap.strftime= %A</br>%H:%M 
    date_stdWrap.wrap = <span class="datetime">|</span>
	
    # Don't display caption in List view
    caption_stdWrap.if.directReturn = 0 

    title_stdWrap.wrap = |
    subheader_stdWrap.stripHtml = 1
    subheader_stdWrap.crop = 230 | ... | 1
    subheader_stdWrap.wrap = <p class="text">|</p>
    subheader_stdWrap.ifEmpty.field = bodytext
    author_stdWrap.wrap = <p class="author">|</p>
    imageCount=1
    imageWrapIfAny = <div class="newsImage">|</div>

    categoryTitles_stdWrap.wrap = |
    imgAltTextField = imagecaption

    linkTitleField = title
    linkTitleField.wrap = 
    linkAltField = short
    linkAltField.wrap = 
  }
  
  displaySingle {
    age_stdWrap.age = 1
    textNewsAge_stdWrap.wrap =
    date_stdWrap.strftime= %A %d. %B %Y um %H:%M Uhr
    date_stdWrap.wrap = <div class="datetime">|</div>
     
	
    # Don't display caption in List view
    caption_stdWrap.if.directReturn = 0 

    title_stdWrap.wrap = <h1>|</h1>
    subheader_stdWrap.wrap = <p class="teaser">|</p>
    subheader_stdWrap.ifEmpty.field = bodytext
    author_stdWrap.wrap = <p class="author">|</p>
  
    imageCount=2
    imageWrapIfAny = <div class="newsImage">|</div>

    categoryTitles_stdWrap.wrap = |
    imgAltTextField = imagecaption

    linkTitleField = title
    linkTitleField.wrap = 
    linkAltField = short
    linkAltField.wrap = 
  }
  
  displayLatest {
    age_stdWrap.age = 1
    textNewsAge_stdWrap.wrap =
    date_stdWrap.strftime= %A %d. %B %Y %H:%M Uhr
    date_stdWrap.wrap = <div class="datetime">|</div>
	
    # Don't display caption in List view
    caption_stdWrap.if.directReturn = 1 

    title_stdWrap.wrap = <h1>|</h1>
    subheader_stdWrap.wrap = <p class="text">|</p>
    subheader_stdWrap.crop = 
    subheader_stdWrap.ifEmpty.field = bodytext
    author_stdWrap.wrap = <p class="author">|</p>
    imageCount=1
    imageWrapIfAny = <div class="newsImageLatest">|</div>


    categoryTitles_stdWrap.wrap = |
    imgAltTextField = imagecaption

    linkTitleField = title
    linkTitleField.wrap = 
    linkAltField = short
    linkAltField.wrap = 
  }
  
  displayList.image < displaySingle.image
  displayLatest.image {
    file.maxW = 100
    file.minW = 100
    file.maxH = {$plugin.tt_news.listMaxH}
    imageLinkWrap = 1
  }
}


plugin.tx_forumlatest_pi1._CSS_DEFAULT_STYLE <

## Date / Time ###
lib.datetime = TEXT
lib.datetime.value = hour

## Menu ##
# Menu 1 cObject
lib.navigation = HMENU
# First level menu-object, textual
lib.navigation.1 = TMENU
lib.navigation.1 {
  # Normal state properties
  NO.allWrap = <div class="menu-level-1-no"> | </div>
  NO.stdWrap.htmlSpecialChars = 1
  # Enable active state and set properties:
  ACT = 1
  ACT.stdWrap.htmlSpecialChars = 1
  ACT.allWrap = <div class="menu-level-1-act"> | </div>
}
# Second level menu-object, textual
lib.navigation.2 = TMENU
lib.navigation.2 {
  # Normal state properties
  NO.allWrap = <div class="menu-level-2-no"> | </div>
  NO.stdWrap.htmlSpecialChars = 1
  # Enable active state and set properties:
  ACT = 1
  ACT.stdWrap.htmlSpecialChars = 1
  ACT.allWrap = <div class="menu-level-2-act"> | </div>
}

### page ###
page = PAGE
page.typeNum = 0
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page

das Template

<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="de" lang="de">
  <head>
    <title>SportChannels.org - Ihr Sportportal</title>
    <style type="text/css">
      <!-- @import "fileadmin/templates/css/css.css"; -->
    </style>
  </head>
  <body>
    <div id="page">
      <div id="header">
        <div id="headerLogo" class="column">
          <img src="img/header.jpg" alt="" />
        </div>
        <div class="adLeaderboard column">
          <img src="/images/comIII/com_728_90_0426.gif" alt="Werbung" />
        </div>
      </div>
      <!--<div id="time">
        17. Mai 2006 09:32
      </div>-->
      
      <div id="container">
        <div id="menu" class="column">
          <div id="menuitems">
          </div>
        </div>
        <div id="content" class="column">
          <h1>Titel</h1>
          <img src="img/fluedke.jpg" class="newsImage" alt="" />
          <p class="category">Kategorien</p>
          <div class="datetime">17.05.06 09:43</p>
          <p class="teaser">Teaser.</p>
          <p class="text">Text.</p>
          <div class="werbung480">
            <div class="divTitle">
              Werbung
            </div>           
            <div class="adRectangle480" style="width: 468px; height: 400px; background-color: red;">
              hier kommt die werbung
            </div>
          </div>
        </div>
        <div id="info" class="column">
          
        </div>
      </div>
      <div id="footer">
        
      </div>
    </div>
  </body>
</html>

und das Stylesheet

body {
  text-align: center;
  padding: 0;
  margin: 0;
}

#page {
  text-align: left;
  margin: 0 auto;
  color: #000000;
  background-color: #ffffff;
  width: 1024px;
}

#header {
  width: 1024px;
  height: 110px;
  line-height: 110px;
}

#header .column{
  position: relative;
  color: #000000;
  background-color: #ffffff;
}

#headerLogo {
  float: left;
  width: 135px;
}

#time {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.3em;
  text-align: right;
  clear: both;
  border: 1px solid #F5CC0B;
  background-color: #ffffff;
  background-color: #183183;
  color: #F5CC0B;
  height: 20px;
  line-height: 20px;
}

#container {
  padding-top: 3px;
}

#container .column {
  position: relative;
  float: left;
  background-color: #ffffff;
}

#menu {
  width: 150px;
  color: #000000;
  background-color: #ffffff;
  border: 1px solid #F5CC0B;
  min-height: 100px;
  float: left;
} 

#content {
  width:566px;
  margin-left: 10px;
  margin-right: 10px;
  color: #000000;
  background-color: #ffffff;
  min-height: 100px;
}
 
#info {
  width: 310px;
  color: #000000;
  background-color: #ffffff;
  min-height: 100px;
  float: right;
}

#footer {  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.3em;
  text-align: center;
  clear: both;
  background-color: #183183;
  color: #F5CC0B;
  height: 20px;
  line-height: 20px;
}

.infoBox {
  width: 130px;
  border: 1px solid #0033CC;
  float: left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.1em;  
  color: #00248F;
  background-color: #ffffff;
  margin-right: 5px;
}

.divTitle {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.3em;
  text-align: center;
  width: 100%;
  background-color: #183183;
  color: #F5CC0B;
  height: 16px;
  line-height: 16px;
}


h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.1em;  
  color: #00248F;
  background-color: #ffffff;
  padding-top: 0px;
  padding-bottom: 0px;
  margin: 1px;

}

td.twocolumleft { 

	vertical-align: top; 
	width: 50%; 
	border-top: 2px solid #183193F;

}

td.twocolumright { 
	
	vertical-align: top; 
	width: 50%; 
	border-top: 2px solid #183193F;
}

table.twocolumstable {

	 border-bottom: 10px solid #183193F;
}

div.newsImage {
  float: right;
  margin: 2px;
  border-width: 1px;
  border-style:solid;
  border-color: #CCCCCC;
}

div.newsImageLatest {
  float: left;
  margin: 2px;
  border-width: 1px;
  border-style:solid;
  border-color: #CCCCCC;
}

p {
  margin: 7px;
}

p.teaser {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.1em;  
  color: #00248F;
  background-color: #ffffff;
}

p.text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.0em;  
  color: #00248F;
  background-color: #ffffff;
  padding-top: 0px;
  padding-bottom: 0px;
}

p.category {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.1em;  
  color: #00248F;
  background-color: #ffffff;
  margin-bottom: -5px;
  margin-top: -3px;
  margin-left: 6px;
}

p.author a:link {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: normal;
  letter-spacing: 0.0em;  
  color: #009999;
  background-color: #ffffff;
}

p.author {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: normal;
  letter-spacing: 0.0em;  
  color: #009999;
  background-color: #ffffff;
}

.datetime {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: normal;
  letter-spacing: 0.1em;  
  color: #00248F;
  background-color: #ffffff;
  padding-top: 0px;
  padding-bottom: 0px;
  margin-left: 6px;
}

.news-latest-item {

	margin-bottom: 30px;
}

a:link {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: normal;
  letter-spacing: 0.1em;  
  color: #757979;
  text-decoration: none;
  background-color: transparent;
  margin-bottom: -10px;
}

a:visited {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: normal;
  letter-spacing: 0.1em;  
  color: #757979;
  text-decoration: none;
  background-color: transparent;
  margin-bottom: -10px;
}

a:focus {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: normal;
  letter-spacing: 0.1em;  
  color: #757979;
  text-decoration: none;
  background-color: transparent;
  margin-bottom: -10px;
}

a:hover {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: normal;
  letter-spacing: 0.1em;  
  color: #757979;
  text-decoration: underline;
  background-color: transparent;
  margin-bottom: -10px;
}

a:active {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: normal;
  letter-spacing: 0.1em;  
  color: #757979;
  text-decoration: none;
  background-color: transparent;
  margin-bottom: -10px;
}

div.werbung480 {
  width: 490px;
  margin-top: 80px;
  margin-left: 40px;
  margin-bottom: 10px;
  border: 1px solid #0033CC;
}

div.werbungSkyScraper {
  width: 180px;
  border: 1px solid #0033CC;
}

div.werbungRectangle300 {
  width: 308px;
  border: 1px solid #0033CC;
}

div.adRectangle480 {
  margin: 10px;
}

div.adRectangle300 {
  margin: 10px;
}

div.adLeaderboard {
  float: right;
}

div.adSkyScrapper {
  margin: 10px;
}

.news-single-additional-info {
  clear:both;
  background-color: #ffffff;
}

.news-single-related {
  border: 1px solid #0033CC;
  padding: 2px;
}

.news-single-files {
  border: 1px solid #0033CC;
  padding: 2px;
}

.news-single-links {
  border: 1px solid #0033CC;
  padding: 2px;
}

dt {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.3em;
}

dd {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.1em;
}

.clearer {
  clear:both;
  background-color: #809FFF;
  border: 1px solid #809FFF;
}

#advertising_468_400 {  
  border: 1px solid #809FFF;
  width: 488px;
  height: 436px;
  margin-left: 40px;  
  margin-top: 10px;  
  margin-bottom: 10px;
}

.content {
  margin-top: 5px;
  margin-bottom: 5px;
}

.divContent {
  border: 1px solid #0033CC;
}

#forum {
  width: 901px;
  margin-left: 10px;
  color: #000000;
  background-color: #ffffff;
  border: 1px solid #0033CC;
  min-height: 100px;
}

/* Menu */
/* Menu Level 1 */

div.menu-level-1-act { 
  border: 1px solid #ffffff;
  background-color: #183183;
  color: #F5CC0B;
}

div.menu-level-1-act:hover { 
  border: 1px solid #ffffff;
  background-color: #00248F;
  color: #F5CC0B;
}

.menu-level-1-act a:link { 
  color: #F5CC0B;
  padding-left: 2px;
}

.menu-level-1-act a:visited { 
  color: #F5CC0B;
  padding-left: 2px;
}

.menu-level-1-act a:focus { 
  color: #F5CC0B;
  padding-left: 2px;
}

.menu-level-1-act a:hover { 
  color: #F5CC0B;
  padding-left: 2px;
  text-decoration: none;
}

.menu-level-1-act a:active { 
  color: #F5CC0B;
  padding-left: 2px;
}

div.menu-level-1-no { 
  border: 1px solid #ffffff;
  background-color: #183183;
  color: #F5CC0B;
}

div.menu-level-1-no:hover { 
  border: 1px solid #ffffff;
  background-color: #FF9900;
  color: #F5CC0B;
}

.menu-level-1-no a:link { 
  color: #F5CC0B;
  padding-left: 2px;
}

.menu-level-1-no a:visited { 
  color: #F5CC0B;
  padding-left: 2px;
}

.menu-level-1-no a:focus { 
  color: #F5CC0B;
  padding-left: 2px;
}

.menu-level-1-no a:hover { 
  color: #F5CC0B;
  padding-left: 2px;
  text-decoration: none;
}

.menu-level-1-no a:active { 
  color: #F5CC0B;
  padding-left: 2px;
}

/* Menu Level 2 */
div.menu-level-2-act { 
  margin-left: 5px;
  border: 1px solid #ffffff;
  background-color: #FF9900;
  color: #009999;
}

div.menu-level-2-act:hover { 
  border: 1px solid #ffffff;
  background-color: #00248F;
  color: #009999;
}

.menu-level-2-act a:link { 
  color: #ffffff;
  padding-left: 2px;
}

.menu-level-2-act a:visited { 
  color: #ffffff;
  padding-left: 2px;
}

.menu-level-2-act a:focus { 
  color: #ffffff;
  padding-left: 2px;
}

.menu-level-2-act a:hover { 
  color: #ffffff;
  padding-left: 2px;
  text-decoration: none;
}

.menu-level-2-act a:active { 
  color: #ffffff;
  padding-left: 2px;
}

div.menu-level-2-no { 
  margin-left: 10px;
  border: 1px solid #ffffff;
  background-color: #00248F;
  color: #009999;
}

div.menu-level-2-no:hover { 
  border: 1px solid #ffffff;
  background-color: #FF9900;
  color: #009999;
}

.menu-level-2-no a:link { 
  color: #ffffff;
  padding-left: 2px;
}

.menu-level-2-no a:visited { 
  color: #ffffff;
  padding-left: 2px;
}

.menu-level-2-no a:focus { 
  color: #ffffff;
  padding-left: 2px;
}

.menu-level-2-no a:hover { 
  color: #ffffff;
  padding-left: 2px;
  text-decoration: none;
}

.menu-level-2-no a:active { 
  color: #ffffff;
  padding-left: 2px;
}
just2b ·
Jasson schrieb

Nun ja, wie ich aus diesem Vertikalen Menü ein horizontales machen kann :o

das is nirgends gestanden... #angry#

bastel dir mal in dreamweaver/editor das menü statisch und dann ists nicht mehr schwer das ins TYPO3 zu bringen... alternativ suche nach nem css menü das dem von dir gewünschten entspricht

georg

Jasson ·

Sorry aber das verstehe ich jetzt nicht ganz :o

Biher musste ich ja nur die <div> "menu" und "menuitems" einfügen und typo machte mir das menü dahin. Ich will ja eigentlich das gleich nur das die Menüpunkte horizontal anstatt vertikal angeordnet werden...

just2b ·
Jasson schrieb

Sorry aber das verstehe ich jetzt nicht ganz :o

Biher musste ich ja nur die <div> "menu" und "menuitems" einfügen und typo machte mir das menü dahin. Ich will ja eigentlich das gleich nur das die Menüpunkte horizontal anstatt vertikal angeordnet werden...

du musst nur mehr das CSS anpassen... und das funktioniert meistens statisch besser weil einfacher/schneller als über den Umweg typo3

Jasson ·

ok das Menu horizontal zu platzieren hat funktioniert 😉Danke .
Nun habe ich aber ein weiteres Problem.
Wenn sich nun eine Untermenü (Level 2) auftut geht das nach unten auf, und alle nachfolgenden Menüpunkte (Level 1) werden auch nach unten verschoben (hinter das Untermenü).
Wie kann ich das verhindern? Also das das Untermenü zwar nach unten aufgeht, die nachfolgenden Menüpunkte (Level 1) nicht nach unten verschoben werden?

Was ich eigentlich erreichen will ist ein Menü im Styl von http://www.kicker.de/.