Feste Breite

Lieber Besucher, herzlich willkommen bei: cms2day Forum - Community & Support rund ums cms2day. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

Erik71

Anfänger

Beiträge: 7

CMS Version: 3.9.0

Wohnort: Lohne

Sonntag, 18. Oktober 2009, 12:58

Feste Breite

Hallo zusammen. Ich habe ein Problem, bei dem ich trotz Forensuche noch keine Lösung gefunden habe.
Ich benutze das Template Excution und möchte den Links im Hauptmenü eine feste Breite zuweisen, z.B. 200px.
Siehe hier
Wenn ich jedoch in der CSS Datei eine Breitenangabe mache, ändert sich nicht. Könnte mir jemand weiterhelfen?
Habe auch mal den Teil der CSS angehängt, der für das Menü zuständig ist.
Bedanke mich Vorraus.

/* - MENU - */

#menulayer {

width: 770px;
height: 40px;
background: #transparent url(../images/menu.png) no-repeat;
margin: 0px;
padding: 0px;
text-align: right;
overflow: hidden;
position: relative;
margin-top: -40px;
z-index: 2;

}

#menulayer #menu {

width: 770px;
height: 40px;
margin: 0px;
padding: 0px 20px 0px 0px;
text-align: right;
overflow: hidden;
line-height: 35px;
background: transparent;
color: #52575D;
font-weight: bolder;
position: absolute;
top: 0px;
right: 0px;
z-index: 3;

}

#menulayer #menu ul {

margin: 0px auto;
padding: 0px;

}

#menulayer #menu li {

display: inline;
list-style: none;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;

}

#menulayer #menu li a {

text-decoration: none;
height: 40px;
width: 200px;
font-size: 11px;
line-height: 37px;
padding: 10px 10px 10px 10px;
background: transparent;
color: #52575D;
font-weight: bold;

}

#menulayer #menu li a:hover {

text-decoration: underline;
height: 40px;
width: 200px;
font-size: 11px;
line-height: 37px;
padding: 10px 10px 10px 10px;
background: transparent;
color: #52575D;
font-weight: bold;

}

#menulayer #menu li a.aktiv, #menulayer #menu li a.aktiv:hover {

text-decoration: none;
height: 40px;
width: 200px;
font-size: 11px;
line-height: 37px;
padding: 10px 10px 10px 10px;
background: transparent;
color: #52575D;
font-weight: bold;

}

Zum Seitenanfang

lotterfriends

Anfänger

Beiträge: 49

CMS Version: 3.9.9.4

Paypal:

Sonntag, 18. Oktober 2009, 21:44

du kannst ihnen eine feste breite zuweisen indem du sie als Block darstellst, das machst du mit:

	Quellcode
1	display:block;

Zum Seitenanfang

Erik71

Anfänger

Beiträge: 7

CMS Version: 3.9.0

Wohnort: Lohne

Montag, 19. Oktober 2009, 16:29

Erstmal Danke für die Antworten. Ja sinnvoll ist es sicherlich nicht, den Links ne feste Breite zuzuordnen und 200px war auch nur ein Beispiel. Jedoch würde ich gerne jedem Menüpunkt eine Grafik als Hintergrund zuorden, die alle die gleiche Breite haben sollten, damit man die komplette Grafik auch siet und sie nicht abgeschnitten wird. In dieser Art
min-width zeigt leider auch keine Wirkung, hatte ich auch schon versucht. Und wenn ich statt display:inline display:block angebe, verschwinden 2 von meinen 3 Menüpunkten und nur der erste ist sichtbar.
Gibt es vielleicht eine andere Möglichkeit, die Grafiken einzubinden?

Grüße

Zum Seitenanfang

lotterfriends

Anfänger

Beiträge: 49

CMS Version: 3.9.9.4

Paypal:

Montag, 19. Oktober 2009, 22:24

ich hab mal auf die schnelle ein kleines Beispiel zusammen gefrickelt damit du weißt was er meint,
vielleicht hilft es dir ja. Habs auf die schnelle nur in FF getestet

Quellcode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
	<link rel="stylesheet" type="text/css" href="http://lotterfriends.de/css/reset.css" />
	<style>
	<!--
	ul { height:35px; border-bottom:1px solid #0A60A2;}
	a { font-family:arial; text-decoration:none; color:#000;}
	a:hover { color:#fff;}
	li { margin-top:10px; margin-left:3px; padding:0px 9px; background: url(links.gif) no-repeat; float:left;}
	li a { height:25px;	display:block; background: url(mitte.gif) repeat-x;}
	span { background: url(rechts.gif) no-repeat top right; padding:1px 18px;}
	-->
	</style>
  </head>
  <body>
	<!-- Navi -->
    <ul>
      <li><a href='#'><span>link</span></a></li>
      <li><a href='#'><span>link2</span></a></li>
    </ul>
  </body>
</html>

die drei Bilder sind im Anhang

»lotterfriends« hat folgende Bilder angehängt:

Zum Seitenanfang

emet

Admin & Support

Beiträge: 2 530

Wohnort: Rhein/Main

Paypal:

Dienstag, 20. Oktober 2009, 14:41

Geht aber auch ohne Span mit 2 Bildern.

Rechtes Bild ist Ecke und nach Links max. Breite als Größe angelegt.
Linkes Bild ist nur die Ecke.

Jetzt mal ohne die ganzen Formatierungen ringsum.