Button in der Navigation

**Stefan_123** · 23.03.2006 09:26

Hallo Leute!
Kaum habe ich ein Problem gelöst - entsteht das Nächste.
Ich möchte in meiner Hauptnavigation anstatt der Text-Hyperlinks für jeden Link einen Button anbringen. Ist es besser für jeden Link einen eigenen Button zu erzeugen und einbinden, oder einen allgemeinen als Hintergrund für jeden Textlink (wobei mir die erstere Variante lieber wäre)?
Wie binde ich dann die Buttons (oder den Button) ein?

Als Template habe ich wds_akwarium gewählt.

Weiters wollte ich noch fragen, wie man überhaupt zu den verschiedenen Menüstrukturen kommt? Wählt man nach der Menüstruktur das Template oder gibt es dafür auch Module, ....?

Ich danke Euch im Voraus!

lG
Stefan

**upstream** · 23.03.2006 10:52

Eventuell ist könnte dieses Modul http://www.joomlanews.de/content/view/198/27/ für dich von interesse sein. Vor allem dann wenn du den Text in einer Schrifart haben möchtest die nicht jeder auf seinem Rechner hat.

**Stefan_123** · 23.03.2006 11:03

Hallo Ewi!

Danke für den Link. Allerdings bleibt mir das Einbinden eines Buttons nicht erspart. Hast du da auch eine Idee?

lG
Stefan

**upstream** · 23.03.2006 11:15

Meinst du mit Button einfach einen anderen Hintergrund oder soll der Button für jeden Menülink anders sein?

**Stefan_123** · 23.03.2006 11:27

Hallo!

Ich habe dir mal ein Bild der derzeitigen Navigation (alte Seite) angefügt. So sollte es aussehen. Jeder einzelne Button ist als jpg-Datei gespeichert.

lG
Stefan

**upstream** · 23.03.2006 11:34

Ach das ist doch kein Problem. Nimm einfach diesen roten Button ohne Text und definiere ihn bei a.mainlevel als Background.
Hat den Vorteil, dass dann deine Navigation dynamisch bleibt. Oder weshalb würdest du du die erste Variante (Post 1) bevorzugen?

**Stefan_123** · 23.03.2006 11:50

Ich habe leider mit CSS noch nicht so viel am Hut und konnte deinen Eintrag "a.mainlevel" natürlich nicht finden, desshalb poste ich die anbei den code der css-Datei.

Die Variante 1 würde ich bevorzugen, da die Schrift in den Buttons eigentlich eine strukturierte Oberfläche hat (Photoimpact), die ich beibehalten wollte.

Code:

/* Body */

.newsflash {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #E0E0D3;
	font-size: 10px;
	text-decoration: none;
	}

BODY {
	margin: 0px 0px 0px 0px;
	background-color : #CC0000;   /255572/
	color : #000000;
	}



td,tr,p,div {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	}



h4 {
	color: #333333; font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px; font-weight: bold;
	}

	

h5 {
	color: #333333; font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px; font-weight: bold;
	}

	

h6 {
	color: #333333; font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px; font-weight: bold;
	}



/* Links */

a:link, a:visited {
	font-size: 11px; color: #1E3146; text-decoration: none;
	font-family:  Verdana, Arial, Helvetica, sans-serif;
	}



a:hover {
	color: #375980;	text-decoration: none;
	}



/* Horizontal Line */	

hr {
	background: #C0C0C0; height:2px; border: 1px inset;
	}
hr.separator {
	background: #C0C0C0;
	height: 1px;
	width: 75px;
	border: 0px;
}



/* --Default Class Settings-- */	



a.mainmenu:link, a.mainmenu:visited {
	color: #000000;
	font-family: Verdana, Geneva, Arial, Helvetica, serif;
	font-weight: bold;
	font-size: 11px;
	}

	

a.mainmenu:hover {
	color: #000000;
	text-decoration: none;
	}



/* Content - Sections & Categories */

.contentpane {
	background : #D2BE4F;
	}



.contentpaneopen {
	border : 0px ridge #D2BE4F;
	}

	

.contentheading {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
 	color: #E0E0D3;
	text-align:left;
	}



.contentdescription {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #ffffff;
	text-align: left;
	}



.pathway {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
 	color: #ffffff;
	font-weight: bold;
	}





/* Links */

a.blogsection:link, a.blogsection:visited {
	color: #000000; text-decoration: none; font-weight: normal;
	font-family:  Verdana, Arial, Helvetica, sans-serif;
	}



a.blogsection:hover {
	color: #FFFFFF;	text-decoration: underline;
	}



a.pathway:link, a.pathway:visited {
	color: #E0E0D3; text-decoration: none; 
	font-weight: bold;	
	font-size: 9px;
	font-family:  Verdana, Arial, Helvetica, sans-serif;
	}



a.pathway:hover {
	color: #ffffff;	
	text-decoration: none;
	font-weight: bold;
	}

	

a.weblinks:link, a.weblinks:visited {
	color: #FF9900; text-decoration: none; font-weight: normal;
	font-family:  Verdana, Arial, Helvetica, sans-serif;
	}



a.weblinks:hover {
	color: #999999;	text-decoration: underline;
	}



a.readon:link, a.readon:visited {
	color: #E0E0D3; 
	text-decoration: none; 
	font-weight: bold;
	font-family:  Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	}

a.readon:hover {
	color: #FFAC00;	
	text-decoration: none;
	}



.moduleheading {
	font: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold; 
	color: #E0E0D3;
	text-align: left;
	height: 18px;
	line-height: 18px;
	white-space: nowrap;
	width: 100%;
	}
table.moduletable th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000000;
	text-align: left;
	height: 14px;
	line-height: 14px;
	white-space: nowrap;
	width: 140px;
	border-bottom: 1px solid #9D9D9D;
	}


.componentheading {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
 	color: #ffffff;
	text-align:left;

	}



.boxheading {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
 	color: #023a5d;
	text-align:left;
	}



.button {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: bold;
	font-size: 11px;
	background: #BF6000;
	color: #EDEDED;
	border-style: solid;
	border-top-width: 1px; 
	border-right-width: 1px; 
	border-bottom-width: 1px; 
	border-left-width: 1px;
	border-color: #0D82C8;
	} 



.inputbox {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #1E66A2;
	background: #E0E0D3;
	border: 1px solid;
	}



.slogan {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
 	color: #FF6600;
	}	



.searchsite {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: bold;
 	color: #ffffff;
	}

	

/** category text format and links **/

.category {
	color: #ffffff; 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px; 
	font-weight: bold; 
	text-decoration: none;
	}



a.category:link, a.category:visited {
	font-family: Verdana, Arial, Helvetica, sans-serif;	
	color: #E0E0D3; 
	font-weight: bold;
	}


a.category:hover {
	color: #FFAC00;
	}

	

.poll {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #e0e0e0;
	line-height: 14px
	}

	

.sectiontableentry1 {
	background-color : #D2BE4F;	
	}



.sectiontableentry2 {
	background-color : #867722;
	}



.sectiontableheader {
	background-color : ##D2BE4F;
	color : #FFFFFF;
	font-weight : bold;
	}

	

.small {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFAC00;
	text-decoration: none; 
	font-weight: bold;
	}



.createdate {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
	text-decoration: none; 
	font-weight: normal;
	}



.modifydate {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
	text-decoration: none; 
	font-weight: normal;
	}

			

ul {
	margin: 0px 0px 0px 0px;
	}



li { 
	list-style: inside url(images/M_images/arrow.png) 3px;
	list-style-image: url(images/M_images/arrow.png);
	}



.fase4rdf {
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 11px; color: #000000; font-weight: normal;
	}



a.fase4rdf:link {
	font-size: 11px; font-weight: normal; color: #FF9900;
	}



a.fase4rdf:hover {
	font-weight: bold; color: #808080;
	}	



table.searchintro {
  	background-color: #8B8B8B;
	}



table.contact {
	background-color: #D2BE4F;
	}



table.contact td.icons {
	background-color: #8B8B8B;
	}



table.contact td.details {
	background-color: #808080;
	font-size: 10px;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #ffffff;
	}

.datetime {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #515151;
	text-decoration: none; 
	font-weight: normal;
	}	
	
.yopsbiz {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #E0E0D3;
	font-size: 9px;
	text-decoration: none;
	}

Kannst du mir noch sagen, wo ich den Background-Link einfügen muss?

lG
Stefan

**upstream** · 24.03.2006 14:41

Bei dir scheint es dieser eintrag zu sein

a.mainmenu:link, a.mainmenu:visited {

Schreib doch da einfach mal noch background: url(../images/bild.gif) no-repeat; dazu

Wenn du die Buttons so behalten möchtest, gäbe es auch eine Möglichkeit.

Erstelle das Mainmenu genau so wie wenn du es später für die Seite verwenden möchtest. Baue aber im Template die Bilder ein und verlinke diese mit der richtigen URL (die du ja aus dem mainmenu kennst)

Thema: Button in der Navigation

LinkBack

Themen-Optionen

Thema durchsuchen

Anzeige

Button in der Navigation

Ähnliche Themen

Button zu groß

Probs mit Layout und Grafiken bei der Navigation

"Beitrag melden" Button - Missbrauch

"Beitrag melden" Button - Missbrauch

Wechselnde Navigation?

Lesezeichen

Lesezeichen

Berechtigungen