Autor |
Nachricht |
bergmann
Threadersteller
Dabei seit: 05.08.2004
Ort: -
Alter: 45
Geschlecht:
|
Verfasst Do 02.03.2006 13:30
Titel [CSS] Menü beliebig vergrößern |
|
|
Hallo,
ich habe hier ein Navigationsmenü das eine Hintergrundfarbe hat.
Sieht so aus:
.nav_main {
font-size: 0.8em;
color: #040000;
background-color: #CCCCCC;
border-bottom: 1px solid #000000;
width: 170px;
padding-left: 15px;
padding-top:2px;
padding-bottom:2px;
}
Wenn ich die Schriftgröße verändere, ändert sich zwar die Schrift in der Größe, jedoch skaliert sich die Hintergrundfarbe in der Breite nicht. Ich möchte gerne, das die größte Breite des Eintrages, also z.B. das Wort "Veranstaltungen" die maßgebende Breite ist. Derzeit sieht es so aus, das der Hintergrund sich dem jeweiligen Wort anpasst, es gibt also bei Schriftgrößenänderung über das "normale" Maß hinaus unregelmäßige Felder.
Wahrscheinlich liegt es an der festgelegten Breite, weiß einer Abhilfe?
Danke
|
|
|
|
|
Mr. Bungle
Dabei seit: 02.03.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 02.03.2006 15:55
Titel
|
|
|
Du musst die auch eine Breite angeben, sonst geht da nix.
z.B.: width: 100%;
für width kannst du folgende Werte nehmen:
auto -> wäre in deinem fall notwenig
Längenangabe
Prozentangabe
Inherit
Nur so am Rande, Menüs würde ich Aufzählungen bauen, das ist einfacher und lässt den Quelltext übersichtlicher aussehen. Kleines Beispiel:
HTML
Code: | <ul id="nav">
<li class="off"><a href="#">Renaissance</a>
<ul>
<li><a href="#">Brunelleschi</a></li>
<li><a href="#">Alberti</a></li>
<li><a href="#">Palladio</a></li>
<li><a href="#">Michelangelo</a></li>
<li><a href="#">Bramante</a></li>
</ul></li> |
CSS
Code: | #nav li {
/* floaten der Hauptlistenpunkte */
margin: 0;
float: left;
display: block;
padding-right: 15px;
}
#nav li.off ul, #nav li.on ul {
/* Verstecken der Untermenüs */
display: none;
}
#nav li a {
/* Für alle Links in der Liste */
color: #f90;
font-weight: bold;
display: block;
height: 15px;
width: 100px;
border: 1px solid #29497b;
padding: 5px;
} |
Nur so als Beispiel, falls es dir was hilft...
cheers, Mr. Bungle
Zuletzt bearbeitet von Mr. Bungle am Do 02.03.2006 16:00, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
seal
Dabei seit: 31.07.2005
Ort: Pfalz
Alter: 41
Geschlecht:
|
Verfasst Do 02.03.2006 17:42
Titel
|
|
|
Arbeite bei width mit dem Wert em anstatt px, dann skaliert sich "der Hintergrund" (das Element) mit der Schrift. Hier natürlich auch em verwenden, aber das hast du ja
|
|
|
|
|
Benutzer 4545
Account gelöscht
Ort: -
|
Verfasst Mo 29.10.2007 09:51
Titel
|
|
|
hab das gleiche problem, aber es klappt nicht mit dem em und auch n icht mit dem auto!!
was ist da noch falsch? (ist jetzt der ausgangscode)
Code: |
.menu_partner ul
{list-style-type:none; text-decoration:none;}
.menu_partner ul a
{height:50px;
padding: 0px 0px 0px 0px; margin:10px 0px 0px 3px; line-height:18px;}
.menu_partner ul li a
{list-style-type:none; text-decoration:none; height:50px; border: 1px solid #006699;
padding: 0px 0px 0px 0px; margin:10px 0px 0px 3px; line-height:18px; width:160px}
.menu_partner ul li ul li a
{list-style-type:none; text-decoration:none; height:50px; border: 1px solid #006699;
left: 0px; padding: 0px 0px 0px 0px; margin:10px 0px 0px -15px; width:160px}
|
Code: | <div class="menu_partner">
<ul>
<li><a href="#">Das sind wir</a></li>
<li><a href="#">Bestellformulare</a></li>
<li><a href="kollektion_rollo.htm">Rollo</a></li>
<li><a href="#">Vertikal</a></li>
<ul>
<li><a href="kollektion_vertikal.htm">Kollektion</a></li>
<li><a href="montageanl_vertikal.htm">Montageanleitungen</a></li>
</ul>
<li><a href="#">Plissee</a></li>
<li><a href="#">Jalousie</a></li>
<li><a href="#">Flächenvorhang</a></li>
<li><a href="#">Zubehör</a></li>
<li><a href="#">Schiene</a></li>
<li><a href="#">Stil</a></li>
<li><a href="#">Raffrollo</a></li>
</ul></div> |
Zuletzt bearbeitet von am Mo 29.10.2007 09:52, insgesamt 2-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
wie erstelle ich diesen menü effekt bzw. das gesammte menü?
CSS Menü - Finde nicht das richtige Menü
Flashseite vergrößern
Apfel+ zum Vergrößern
MovieClip gleichmässig vergrößern
bilder vergrößern bei mouseover
|
|