Navigation: Link-Fläche ist größer als der Button

**DaKaTotal** · 29.03.2006 10:17

Das Template der Homepage, an der ich zur Zeit bastele, habe ich selbst zusammengebaut, allerdings habe ich das Grundgerüst der Navigation aus dem Standard-Template Rhuk Solarflare ii übernommen (da dies eigentlich genau so ist, wie wir es brauchen) und die Größe und Farbe verändert. Dies hat soweit ganz gut geklappt.

Problem:
Beim genaueren Hinsehen kann man erkennen, dass der Button kleiner ist als die Fläche, die verlinkt wird...
Wenn ich auf den Button (mit gehaltener Maustaste) klicke, dann erkennt man an der gepunkteten Umrandung die Größe des Link-Feldes (siehe Bild unten)... Dies ist einfach (um exakt 198 Pixel) breiter als der eigentliche Button

Wie bekomme ich diese "Verlinkte Fläche" auf die Größe des Buttons?
In der css Datei habe ich keine passenden Werte gefunden (habe nach den Zahlenwerten 190 bis 205 gesucht) und auch einen Eintrag gefunden, wo es stehen könnte...

**upstream** · 29.03.2006 10:23

Zu finden sein müssten diese Einstellungen bei a.mainlevel. Ich könnte mir vorstellen, dass dieser Effekt mit margin, padding, with und display block zusammenhängt.
Tritt das nur im IE oder FF auf oder sieht es in beiden gleich aus.
Schau doch mal ob du mit meinen Infos weiter kommst und sonst wäre es hilfreich, deine css-Datei zu sehen.

**DaKaTotal** · 29.03.2006 11:03

Jetzt wirds interessant... Im FireFox ist es so, wie ich oben beschrieben habe, und im Internet Explorer funktioniert es normal...

Ich habe einmal ein bisserl mit den Werten herumgespielt, aber bin leider nicht weiter gekommen...

Hier ist einmal der Auszug der css

HTML-Code:

/* CSS Document */

html {
	height: 100%;
}

body {
	height: 100%;
	margin-bottom: 1px;
}

.clr {
	clear: both;
}

.outline {
  border: 1px solid #cccccc;
  background: #ffffff;
	padding: 2px;
}

#buttons_outer {
	width: 635px;
  	margin-bottom: 2px;
	margin-right: 2px;
	float: left;

}

#buttons_inner {
	border: 1px solid #cccccc;
	height: 21px;
}

#pathway_text {
  overflow: hidden;
	display: block;
	height: 25px;
	line-height: 25px !important;
	line-height: 22px;
	padding-left: 4px;
	border: 1px solid #ccc;
	margin-bottom: 2px;
}

#pathway_text img {
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 6px;
}

#buttons {
	float: left;
	margin: 0px;
	padding: 0px;
	width: auto;
}


ul#mainlevel-nav
{
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.8em;
}

ul#mainlevel-nav li
{
	background-image: none;
	padding-left: 15px;
	padding-right: 15px;
	float: left;
	margin: 0;
	font-size: 11px;
	line-height: 21px;
	white-space: nowrap;
	border-right: 1px solid #cccccc;
}

ul#mainlevel-nav li a
{
	display: block;
	padding-left: 0px;
	padding-right: 0px;
	text-decoration: none;
	color: #333333;
	background: transparent;
}

#buttons>ul#mainlevel-nav li a { width: auto; }

	ul#mainlevel-nav li a:hover
{
	color: #fff;
	background: #345EC6;
}


#search_outer {
	float: left;
	width: 165px;
}

#search_inner {
  border: 1px solid #cccccc;
	padding: 0px;
  height: 21px !important;
  height: 23px;
  overflow: hidden;
}

#search_inner form {
  padding: 0;
  margin: 0;
}

#search_inner .inputbox {
	border: 0px;
	padding: 3px 3px 3px 5px;
	font-family: arial, helvetica, sans-serif;
	font-size: 11px;
	color: #345EC6;
}

#header_outer {
	text-align: left;
	border: 0px;
	margin: 0px;
}

#header {
	float: left;
	padding: 0px;
	margin-right: 2px;
	width: 635px;
	height: 150px;
	background: url(../images/header_short.jpg) no-repeat;
}

#top_outer{
	float: left;
	width: 165px;
}

#top_inner {
  border: 1px solid #cccccc;
	padding: 2px;
  height: 144px !important;
  height: 150px;
  overflow: hidden;
  float: none !important;
  float: left;
}

#left_outer {
  float: left;
	margin-top: 2px;
	width: 203px;
}

#left_inner {
  border: 1px solid #cccccc;
	padding: 2px;
  float: none !important;
  float: left;
}

#content_outer {
	padding: 0px;
	margin-top: 0px;
	margin-left: 2px;
	/** border: 1px solid #cccccc; **/
	float: left;
	width: 635px;
}

#content_inner{
  float: none !important;
  float: left;
  padding: 0;
  padding-top: 2px;
  margin: 0;
}

table.content_table {
  width: 100%;
	padding: 0px;
	margin: 0px;
}

table.content_table td {
	padding: 0px;
	margin: 0px;
}


#banner_inner {
	float: left;
	padding: 0px;
	height: 70px;
}

#poweredby_inner {
	float: right;
	padding: 0px;
	margin-left: 0px;
	height: 70px;
}

#right_outer {
	margin-left: 2px;
	width: 165px;
}

#right_inner {
  float: none !important;
  float: left;
  border: 1px solid #cccccc;
  padding: 2px;
}


.user1_inner {
	border: 1px solid #cccccc;
  float: none !important;
  float: left;
	margin: 0px;
	padding: 2px;
}

.user2_inner {
	border: 1px solid #cccccc;
  float: none !important;
  float: left;
	margin: 0px;
	padding: 2px;
}

table td.body_outer {
	padding: 2px;
	border: 1px solid #cccccc;
}

.maintitle {
	color: #ffffff;
	font-size: 40px;
	padding-left: 15px;
	padding-top: 20px;
}

.error {
  font-style: italic;
  text-transform: uppercase;
  padding: 5px;
  color: #cccccc;
  font-size: 14px;
  font-weight: bold;
}

/** old stuff **/

.back_button {
	float: left;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/subhead_bg.png) repeat-x;
  padding: 0px 10px;
  line-height: 20px;
  margin: 1px;
}

.pagenav {
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 10px;
  line-height: 20px;
  margin: 1px;
}

.pagenavbar {
	margin-right: 10px;
	float: right;
}

#footer {
	text-align: center;
	padding: 3px;
}

ul
{
margin: 0;
padding: 0;
list-style: none;
}

li
{
line-height: 15px;
padding-left: 15px;
padding-top: 0px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
background-position: 0px 2px;
}

td {
	text-align: left;
	font-size: 13px;
}



body {
	margin: 0px;
	height: 100%;
	padding: 0px;
	font-family: Arial, Helvetica, Sans Serif;
	line-height: 120%;
	font-size: 12px;
	color: #333333;
	background: #315EC3;
}

/* Joomla core stuff */
a:link, a:visited {
	color: #345EC6; text-decoration: none;
	font-weight: bold;
}

a:hover {
	color: #B2CAEB;	text-decoration: none;
	font-weight: bold;
}

table.contentpaneopen {
  width: 100%;
	padding: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
	margin: 0px;
}

table.contentpaneopen td {
   padding-right: 5px;
}

table.contentpaneopen td.componentheading {
	padding-left: 4px;
}



table.contentpane {
  width: 100%;
	padding: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
	margin: 0px;
}

table.contentpane td {
	margin: 0px;
	padding: 0px;
}

table.contentpane td.componentheading {
	padding-left: 4px;
}

table.contentpaneopen fieldset {
	border: 0px;
	border-bottom: 1px solid #eee;
}

.button {
  color: #345EC6;
  font-family: Arial, Hevlvetica, sans-serif;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 5px;
  line-height: 18px !important;
  line-height: 16px;
  height: 26px !important;
  height: 24px;
  margin: 1px;
}

.inputbox {
	padding: 2px;
	border:solid 1px #cccccc;
	background-color: #ECF2FF;
}

.componentheading {
	background: url(../images/subhead_bg.png) repeat-x;
	color: #666666;
	text-align: left;
	padding-top: 4px;
	padding-left: 4px;
	height: 21px;
	font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;

}

.contentcolumn {
	padding-right: 5px;
}

.contentheading {
	height: 30px;

	color: #345EC6;
	font-weight: bold;
	font-size: 14px;
	white-space: nowrap;
}



.contentpagetitle {
	font-size: 13px;
	font-weight: bold;
	color: #cccccc;
	text-align:left;
}

table.searchinto {
	width: 100%;
}

table.searchintro td {
	font-weight: bold;
}

table.moduletable {
	width: 100%;
	margin-bottom: 5px;
	padding: 0px;
	border-spacing: 0px;
	border-collapse: collapse;
}

div.moduletable {
	padding: 0;
	margin-bottom: 2px;
}

table.moduletable th, div.moduletable h3 {
	background: url(../images/subhead_bg.png) repeat-x;
	color: #666666;
	text-align: left;
	padding-left: 4px;
	height: 21px;
	line-height: 21px;
	font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;
	margin: 0 0 2px 0;
}

table.moduletable td {
	font-size: 11px;
	padding: 0px;
	margin: 0px;
	font-weight: normal;
}

table.pollstableborder td {
  padding: 2px;
}

.sectiontableheader {
  font-weight: bold;
  background: #f0f0f0;
  padding: 4px;
}

.sectiontablefooter {

}

.sectiontableentry1 {
	background-color : #FFFFFF;
}

.sectiontableentry2 {
	background-color : #f9f9f9;
}

.small {
	color: #999999;
	font-size: 11px;
}

.createdate {
	height: 15px;
	padding-bottom: 10px;
	color: #999999;
	font-size: 11px;
}

.modifydate {
	height: 15px;
	padding-top: 10px;
	color: #999999;
	font-size: 11px;
}

table.contenttoc {
  border: 1px solid #cccccc;
  padding: 2px;
  margin-left: 2px;
  margin-bottom: 2px;
}

table.contenttoc td {
  padding: 2px;
}

table.contenttoc th {
  background: url(../images/subhead_bg.png) repeat-x;
  color: #666666;
	text-align: left;
	padding-top: 2px;
	padding-left: 4px;
	height: 21px;
	font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;
}

a.mainlevel:link, a.mainlevel:visited {
	display: block;
	background: url(../images/menu_bg.png) no-repeat;
	vertical-align: middle;
	font-size: 12px;
	font-weight: bold;
	color: #ccc;
	text-align: left;
	padding-top: 5px;
	padding-left: 18px;
	height: 20px !important;
	height: 25px;
	width: 100%;
	text-decoration: none;
}

a.mainlevel:hover {
	background-position: 0px -25px;
	text-decoration: none;
	color: #fff;
}

a.mainlevel#active_menu {
	color:#fff;
	font-weight: bold;
}

a.mainlevel#active_menu:hover {
	color: #fff;
}

a.sublevel:link, a.sublevel:visited {
	padding-left: 1px;
	vertical-align: middle;
	font-size: 11px;
	font-weight: bold;
	color: #345EC6;
	text-align: left;
}

a.sublevel:hover {
	color: #900;
	text-decoration: none;
}

a.sublevel#active_menu {
	color: #333;
	text-decoration: bold;
}

.highlight {
	background-color: Yellow;
	color: Blue;
	padding: 0;
}
.code {
	background-color: #ddd;
	border: 1px solid #bbb;
}

form {
/* removes space below form elements */
	margin: 0;
 	padding: 0;
}

div.mosimage {
  border: 1px solid #ccc;
}

.mosimage {
  border: 1px solid #cccccc;
  margin: 5px
}

.mosimage_caption {
  margin-top: 2px;
  background: #efefef;
  padding: 1px 2px;
  color: #666;
  text-transform: normal;
  font-size: 10px;
  border-top: 1px solid #cccccc;
}

span.article_seperator {
	display: block;
	height: 1.5em;
}

**upstream** · 29.03.2006 12:07

Ich würde sagen, dass sich width: 100% und padding-left: 22px in die Quere kommen.
Hat mit dem Box-Modell-Problem zu tun. Schreibe doch mal an Stelle von padding-left die Eigenschaft text-indent hin. Und schau ob das Problem immer noch auftritt.

**DaKaTotal** · 29.03.2006 12:25

1.) padding-left: 22px gibt es nicht... Du meinst wahrscheinlich padding-left: 18px unter a.mainlevel, oder?

2.) Wenn ja, ich habe versucht, padding-left: 18px; in text-indent: 18px; umzuändern, klappt leider auch nicht...

3.) Ich habe auch nochmal mit width: 100% herumgespielt... Interessant ist es, dass beim Internet Exlorer damit alles funktioniert. Wenn ich nun width: 79% verwende, dann stimmt es zwar in FireFox, allerdings wird dadurch die Buttons im Internet Explorer wiederum wieder enger, was auch nicht sein sollte...
Alternativ habe ich es auch einmal probiert, statt einer Prozentzahl die korrekte px-Zahl herauszufinden, aber es entsteht das selbe problem....

**upstream** · 29.03.2006 12:30

Ja ich meinte den mit 18px. Hatte da was verwechselt.
Hast du die feste Breite (px) mit padding-left oder mit text-indent probiert?
Bei mir klappt es, wenn ich dem a.mainlevel eine feste Breite gebe und dabei den Text mittels text-indent einrücke.

**DaKaTotal** · 29.03.2006 12:48

Ich habe jetzt folgendes geschrieben:

HTML-Code:

	text-indent: 18px;
	width: 159px;

In FireFox klappt es jetzt so wie ich es will, im Internet Explorer stimmts zwar noch nicht ganz (wenn man mit der Maus bis zu 1 cm rechts von dem Button klickt ist immernoch ein Link vorhanden), aber es ist zumindest optisch kein Schönheitsfehler mehr vorhanden

Aber eine kleine Frage hätte ich noch interesse halber... Was ist der Unterschied zwischen text-indent und padding? Es bewirkt doch das selbe, oder?

Ansonsten danke für deine Hilfe! Ich bin selbst Administrator in einem größerem, gut besuchten Forum, und jemand wie du, der vielen und oft gute Tips und Hinweise gibt, gibt es leider nicht sehr oft

Vielen Dank!

**upstream** · 29.03.2006 12:54

Nun ich verweise dich am besten auf selfhtml padding und text-indent (schau doch mal welche Effekte auftreten wenn du display: block noch entfernst.)

:-) Vielen dank für dein Lob.

**DaKaTotal** · 29.03.2006 13:09

Zitat von upstream.li

(schau doch mal welche Effekte auftreten wenn du display: block noch entfernst.)

Jooo.... Dann siehts >>> so <<< aus

Naja, lass mers so wie es ist

Solange optisch alles stimmt, isses ja ok... den "übergroßen" Link im IE sieht man ja net

thx

Thema: Navigation: Link-Fläche ist größer als der Button

LinkBack

Themen-Optionen

Thema durchsuchen

Anzeige

Navigation: Link-Fläche ist größer als der Button

Erhielt Danksagungen von:

Ähnliche Themen

Button in der Navigation

Link in oberer Navigation aktiv lassen

Link für PDF, PRINT, und VERSENDEN Button?

Wechselnde Navigation?

wrapper link / und menü link

Lesezeichen

Lesezeichen

Berechtigungen