Zum Inhalt springen

Probleme mit der Navi

Erstellt am 14. November 2006 · 13 Antworten · letzte Antwort am 16. November 2006

Tags: Frage

miami_vice ·

möchte eine Navi erstellen...leider hab ich jetzt zwischen dem Bild und dem verlinktem text einen Absatz drin an was kann das liegen???
eigentlich soll der Pfeil direkt an den Text
hier das Bild:

Bild: de-kunde.de/navi_neu.jpg

hier TS:

tmp.HAUPTNAVIGATION = HMENU
tmp.HAUPTNAVIGATION {
  wrap = <div id="mainnavcontainer"> | </div>
  excludeUidList = 7
  1 = TMENU
  1 {
    wrap = <ul> | </ul>
    NO = 1
    NO.linkWrap = <img src="fileadmin/pfeil_white.gif" alt="" />
  }
}

und hier das fertige HTML

<td width="151" valign="top" class="left_column">
<div id="mainnavcontainer">
<ul>
<img src="fileadmin/pfeil_white.gif" alt="" />
<a href="index.php?id=23" onfocus="blurLink(this);">company</a>
<img src="fileadmin/pfeil_white.gif" alt="" />
<a href="index.php?id=22" onfocus="blurLink(this);">applications</a>
<img src="fileadmin/pfeil_white.gif" alt="" />
<a href="index.php?id=21" onfocus="blurLink(this);">products</a></ul></div>

hmm kann hier keinen Absatz erkennen #paralyzed# und so sollte es eigentlich aussehen...

Bild: de-kunde.de/navi_neu_1.jpg

just2b ·

Hallo,

wo ist dein li-Tag?!?
NO.wrapItemAndSub = <li>|</li>

dann ists nur noch eine frage vom css. auch den pfeil könnte man als Background vom Link selbst machen

georg

miami_vice ·

oha den NO.wrapItemAndSub = <li>|</li> hab ich vergessen ...hat aber keine Auswirkung auf die Darstellung.

Wo geb ich bzw. definiere ich das in der CSS ??

hier mal die CSS

#mainnavcontainer {
	width: 151px;
}

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

#mainnavcontainer a
{
	display: block;
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin: 0;
	width: 151px;
	border-bottom: 2px solid #fff;
}

html>body #mainnavcontainer a {
	width: 131px;
}


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

#mainnavcontainer a:hover
{
	color: #004785;
	font-weight: bold;
	font-size: 12px;
}

#mainnavcontainer a#current{
	background-color: #E7E7E7;
}

frag mich nur warum er den Text mittig setzt die Pfeile aber nicht ?

just2b ·

in

#mainnavcontainer a:link, #mainnavcontainer a:visited {
background:url(...../arrow.gif) no-repeat left;

aber das hat nichts mehr mit typo3 zu tun

georg

miami_vice ·

super danke funktioniert jetzt thx.....

wenn ich jetzt die Navi um eine Ebene erweitern möchte also wie hier zu sehen:

Bild: de-kunde.de/navi_ebene.jpg

wie funktioniert das ???

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

denn über den entryLevel gibt er mir gar nichts aus ???

miami_vice ·

funktioniert doch....hatte nur die falschen Ebenen.
Jetzt fehlt mir aber noch ein Einzug so sieht es nämlich {zensiert} aus....

Bild: de-kunde.de/ebene2.jpg

und so sollte es aussehen

Bild: de-kunde.de/navi_ebene.jpg

hier mal das TS:

tmp.HAUPTNAVIGATION = HMENU
tmp.HAUPTNAVIGATION {
  wrap = <div id="mainnavcontainer"> | </div>
  1 = TMENU
  1 {
    wrap = <ul> | </ul>
    entryLevel = 2
    NO = 1
    NO.wrapItemmAndSub = <li> | </li>
    ACT = 1
    ACT < .NO
    ACT.ATagParams = id=current
  }
  
  #Die zweite Ebene als kopie der ersten Ebene beschreiben
  2 < .1
  2.NO {
    10.fontSize = 9
    10.fontColor = #061467
    }
  
}

und die Schrift macht er mir auch nicht kleiner was er ja eigentlich mit 10.fontSize = 9 machen müsste ???

kann ich eigentlich für die neue Ebene ein extra CSS id anlagen ??
denn

tmp.HAUPTNAVIGATION = HMENU
tmp.HAUPTNAVIGATION {
  wrap = <div id="mainnavcontainer"> | </div>
  1 = TMENU
  1 {
    wrap = <ul> | </ul>
    entryLevel = 2
    NO = 1
    NO.wrapItemmAndSub = <li> | </li>
    ACT = 1
    ACT < .NO
    ACT.ATagParams = id=current
  }
  
  #Die zweite Ebene als kopie der ersten Ebene beschreiben
  2 < .1
  wrap = <div id="ebene"> | </div>
  2.NO {
    10.fontSize = 9
    10.fontColor = #061467
    }
  
}

zeigt er mir gar nichts an ??

just2b ·

Hallo,

in deinem letzten Code, zeile 17... das sollte wohl heißen:

2.wrap = <ul id="ebene2">|</ul>

aber du hättest das ganze auch machen können rein per CSS:
#mainnavcontainer ul { = 1. ul)
#mainnavcontainer ul li ul ( = 2.ul)

georg

miami_vice ·

danke thx, er setzt mir jetzt zwar die neue CSS id ebene aber wenn ich an dieser was ändere übernimmt er das irgendwie nicht:

<div id="mainnavcontainer">
<ul>
<a href="index.php?id=23" onfocus="blurLink(this);">company</a>
<a href="index.php?id=22" onfocus="blurLink(this);">applications</a>
<a href="index.php?id=21" onfocus="blurLink(this);" id=current>products</a>
<div id="ebene">
<a href="index.php?id=30" onfocus="blurLink(this);">scan head series</a>
<a href="index.php?id=29" onfocus="blurLink(this);">plug & play</a>
<a href="index.php?id=28" onfocus="blurLink(this);">software</a>
</div>
<a href="index.php?id=20" onfocus="blurLink(this);">download area</a>
<a href="index.php?id=19" onfocus="blurLink(this);">press & news</a>
<a href="index.php?id=18" onfocus="blurLink(this);">contact & service</a>
</ul>
</div>

und hier die CSS

#mainnavcontainer {
	width: 151px;
}

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

#mainnavcontainer a
{
	display: block;
	padding-right: 10px;
	padding-left: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin: 0;
	width: 151px;
	border-bottom: 2px solid #fff;
}

html>body #mainnavcontainer a {
	width: 131px;
}


#mainnavcontainer a:link, #mainnavcontainer a:visited
{
	color: #004785;
	text-decoration: none;
	background:url(pfeil.gif) no-repeat left;
}

#mainnavcontainer a:hover
{
	color: #004785;
	font-weight: bold;
	font-size: 11px;
	background:url(kreis_pfeil.gif) no-repeat left;
}

#mainnavcontainer a#current{ 
	color: #004785;
	font-weight: bold;
	font-size: 11px;
	background:url(kreis_pfeil_down.gif) no-repeat left;
	
}

.box_header {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	color: #004785;
	font-weight: bold;
	font-size: 11px;
	padding-right: 10px;
	padding-left: 2px;
	padding-top: 30px;
	padding-bottom: 3px;
}

.loginbox-labelcell, .loginbox-fieldcell, .loginbox-commentcell {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #004785;
	font-size: 11px;
}

.loginbox-fieldcell input {
	padding-right: 50px;
	bgcolor: #004785;
	color: #004785;	
}


.ebene {
	width: 151px;
}

.ebene ul
{
	margin: 50;
	padding: 50;
	list-style-type: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 5px;
	font-color:#004785;
}
.ebene ul li
{
	margin: 0;
	padding: 0;
}

.ebene a
{
	display: block;
	padding-right: 10px;
	padding-left: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin: 0;
	width: 151px;
}

html>body .ebene a {
	width: 131px;
}


.ebene a:link, #mainnavcontainer a:visited
{
	color: #004785;
	text-decoration: none;
	background:url(pfeil.gif) no-repeat left;
}

.ebene a:hover
{
	color: #004785;
	font-weight: bold;
	font-size: 5px;
	background:url(kreis_pfeil.gif) no-repeat left;
}

.ebene a#current{ 
	color: #004785;
	font-weight: bold;
	font-size: 5px;
	background:url(kreis_pfeil_down.gif) no-repeat left;
	
}

er müsste ja jetzt zumindest die Schrift kleiner machen und die weißen Linien weg machen ....???

hier die Ausgabe

Bild: de-kunde.de/navi_nav.jpg

just2b ·

Hallo,

also da hast du noch immer einen Fehler:

2.NO.10.fontSize = 9

sowas gibts nicht!

du solltest eher sowas machen

2 = TMENU
2.wrap = <ul id="ebene">|</ul>
2.NO.wrapItemAndSub = <li>|</li>

und per css sollte das dann mit

#ebene2 li a... {
}

gehen

georg

miami_vice ·

ok also die Schrift verändert er mir jetzt er macht mir aber immer noch die blöden Pfeile und die weißen Linien obwohl ich die in meiner CSS unter ebene nicht drin hab.

Bild: de-kunde.de/2.jpg

hier das TS

tmp.HAUPTNAVIGATION = HMENU
tmp.HAUPTNAVIGATION {
  wrap = <div id="mainnavcontainer"> | </div>
  1 = TMENU
  1 {
    wrap = <ul> | </ul>
    entryLevel = 2
    NO = 1
    NO.wrapItemmAndSub = <li> | </li>
    ACT = 1
    ACT < .NO
    ACT.ATagParams = id=current
  }
  
  2 < .1
  2 = TMENU
  2.wrap = <div id="ebene"> | </div>
  2.NO.wrapItemmAndSub = <li> | </li>
  
}

und hier das CSS

#ebene {
	width: 151px;
}

#ebene ul
{
	margin: 50;
	padding: 50;
	list-style-type: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8px;
	font-color:#004785;
}
#ebene ul li
{
	margin: 0;
	padding: 50;
}

#ebene2 li a {
	display: block;
	padding-right: 10px;
	padding-left: 50px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin: 0;
	width: 151px;
}

#ebene a
{
	display: block;
	padding-right: 10px;
	padding-left: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin: 0;
	width: 151px;
}

html>body #ebene a {
	width: 131px;
}


#ebene a:link, #ebene a:visited
{
	color: #18EF6E;
	text-decoration: none;
	font-size: 10px;
}

uns so sollte es aussehen

Bild: de-kunde.de/navi_ebene.jpg

just2b ·

CSS = vererbung
wenn du was nicht mehr haben willst, dann musst du das schon explizit angeben, zB mit nichts überschreibn, oder beim background mit nem clear.gif/whatever

georg