mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 07:28 Benutzername: Passwort: Auto-Login

Thema: [CSS] Menü beliebig vergrößern vom 02.03.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [CSS] Menü beliebig vergrößern
Autor Nachricht
bergmann
Threadersteller

Dabei seit: 05.08.2004
Ort: -
Alter: 45
Geschlecht: Männlich
Verfasst Do 02.03.2006 13:30
Titel

[CSS] Menü beliebig vergrößern

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
Mr. Bungle

Dabei seit: 02.03.2006
Ort: -
Alter: -
Geschlecht: -
Verfasst Do 02.03.2006 15:55
Titel

Antworten mit Zitat Zum Seitenanfang

Du musst die auch eine Breite angeben, sonst geht da nix.

z.B.: width: 100%;

für width kannst du folgende Werte nehmen:

Guck rechts! auto -> wäre in deinem fall notwenig
Guck rechts! Längenangabe
Guck rechts! Prozentangabe
Guck rechts! 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:

Guck rechts! 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>


Guck rechts! 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
  View user's profile Private Nachricht senden
Anzeige
Anzeige
seal

Dabei seit: 31.07.2005
Ort: Pfalz
Alter: 41
Geschlecht: Männlich
Verfasst Do 02.03.2006 17:42
Titel

Antworten mit Zitat Zum Seitenanfang

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 Lächel
  View user's profile Private Nachricht senden
Benutzer 4545
Account gelöscht


Ort: -

Verfasst Mo 29.10.2007 09:51
Titel

Antworten mit Zitat Zum Seitenanfang

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
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.