• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

verschiedene Hintergrundbilder aufs li, a oder sogar span?

N

Nikita

Mitglied
Hallo liebe Community,

ich habe folgendes Problem ich habe eine Layoutvorlage bekommen in der das Menü so aussehen soll :

layout_allgemein Kopie.jpg

jetz habe ich per PS die schrägen quadrate gesliced und schaffe es iwie nicht die Bilder so anzuordnen ohne das komplette Menü durcheinander zu würfeln.
hier der Link zu der Seite Willkommen - Webportal www.eichmann.level9.de/level9_cms vill kann mir jemand sagen wie ich es machen muss damit es so aussieht wie es soll, ich weis es nämlich einfach nich^^

danke schoneinmal im vorraus =)
 
du kannst doch jedem li, a oder span eine eigene id geben und den Hintergrund dann jeweils im Stylesheet festlegen
<li id="eins"> ...
 
ja das problem is nur ich arbeite mit einem cms, und die idee mit den ids hatte ich auch bereits nur is dann das problem, dass ich nicht vorraussehen kann wieviele Menüpunkte der Kunde später haben möchte, sprich ich kann ja nicht bis unenedlich viele ids vergeben und per css anpassen weist??
 
Meine erste Idee wäre, zunächst die Menü-Texte in die Grafiken zu integrieren und dann jede Grafik exakt mittels CSS zu positionieren und mittels Verwendung der z-Ebene übereinander zu legen. Je weiter rechts, desto höher die Z-Ebene.

Idee 2. Nimm das ganze Menü als Hintergrundbild mit einem Image map
 
NetAktiv schrieb:
Meine erste Idee wäre, zunächst die Menü-Texte in die Grafiken zu integrieren und dann jede Grafik exakt mittels CSS zu positionieren und mittels Verwendung der z-Ebene übereinander zu legen. Je weiter rechts, desto höher die Z-Ebene.

Idee 2. Nimm das ganze Menü als Hintergrundbild mit einem Image map
Zum Vergrößern anklicken....

so kann ichs ja leider nicht machen da ich ja wie schon gesagt nicht weis wie viele Menüpunkte der Kunde später hinzufügt und vorallem weis ich nich wie diese dann heissen sollen deswegen geht das ja leider nich so einfach :/
 
wenn du nicht weißt wieviele Menüpunkte der Kunde haben möchte, kannst du prinzipiell auch keine verschieden farbigen Menüpunkte nehmen
 
und wenn ich halt sage ok ich nehm ein und dieselbe farbe so wie ich ja jetz auf der page schon habe, wie verwirkliche ich das ganze dann??
 
Wenn der Kund meint, er trägt nur in einer DB-Tabelle einen neuen Menüpunkt ein, den Text, den Link und die Farbinfos und der Rest wird dynamisch erzeugt, dann musst das halt machen. Aber erst brauchst mal eine Lösung, die manuell eine feste Anzahl Menüpunkte unterstützt und funktioniert. Nicht gleich nach den Sternen greifen, erst mal untersuchen, was mit welchen Mitteln machbar ist. Hoffentlich hast nicht zu viel versprochen und einen Festpreis vereinbart :-).
 
NetAktiv schrieb:
Wenn der Kund meint, er trägt nur in einer DB-Tabelle einen neuen Menüpunkt ein, den Text, den Link und die Farbinfos und der Rest wird dynamisch erzeugt, dann musst das halt machen. Aber erst brauchst mal eine Lösung, die manuell eine feste Anzahl Menüpunkte unterstützt und funktioniert. Nicht gleich nach den Sternen greifen, erst mal untersuchen, was mit welchen Mitteln machbar ist. Hoffentlich hast nicht zu viel versprochen und einen Festpreis vereinbart :-).
Zum Vergrößern anklicken....

haha ich hab zum glück gar nix versprochen oder verhandelt xD ich bin nur die die das ganze umsetzt^^
habs jetz aber hinbekommen, danke an euch alle die versucht haben zu helfen =)
 
super dass DU nun weißt, wie es geht. Die anderen, die diesem Thema gefolgt sind, müssen das ja nicht wissen und wenn einer später das gleiche Problem hat, soll er halt von vorne anfangen.
 
oh sry völllig vergessen^^
brauchst nich gleich so patzig zu werden :O

hier der css code :

Code: 
* {margin:0; padding:0;}

body{background-color:#ffffff;font-size:12px; font-family:arial;}

h1 {font-size:16px;}
h2 {font-size:14px;}

#wrapper {margin:0 auto; width:1000px;}

#Menue {
     height:90px;    
     width:975px; 
     margin-left:15px;
}

.MainMenue {
     width:935px; 
     float:left; 
     margin-left:5px; 
     padding-left:15px;
     font-size:14px;
}

.Submenue {
    padding-left: 15px; 
    padding-right: 15px;
    background-color:#E5EAF3; 
    float:left;
}

#Headline {
     background-image:url(http://www.butzke.level9.de/level9_cms/layout/LayoutAllgemein/ueberschrift_back_10.png);
     width:983px;  
     height:30px; 
     background-repeat:no-repeat;
}

#Content {width: 983px;}

.Inhalt {
    padding: 10px; 
    width: 640px; 
    float:left;
}

.Newsbereich {
    float:right;
    background-color:#E5EAF3;
    padding: 0 15px;
    width: 180px;
}

.headlineH2 {font-size:12px;}

.clear{clear:both;}

/*Menue*/

#menuelayout_id_13 { padding:0; }
#menuelayout_id_13 ul{ list-style-type:none; float: left;}
#menuelayout_id_13 ul li { 
                       background-position: center top; text-align:center;position:relative; float: left;margin-left:-15px; list-style-type:none; height:73px; width:120px;    
                       background-image: url(http://www.butzke.level9.de/level9_cms/layout/LayoutAllgemein/button_dunkleblau_04.png);
                       background-repeat:no-repeat;}
#menuelayout_id_13 ul li span{}
#menuelayout_id_13 ul li a{    font-weight:bold; color: #FFFFFF;
    position: relative;
    text-decoration: none;
    top: 20px; }
#menuelayout_id_13 ul li.active {    margin-left:-30px !important; background-image:url(http://www.butzke.level9.de/level9_cms/layout/LayoutAllgemein/button_rot_02.png);
                                                 background-repeat:no-repeat;height: 93px; width:140px;   color: #FFFFFF; font-size: 18px; } 
#menuelayout_id_13 ul li a.active {
    position: relative;
    right: 10px;
    top: 63px; }
#menuelayout_id_13 ul li.has_child.active li {display:block;}

#menuelayout_id_13 ul li ul li {display:none; background-image:none;}

und html-code

Code: 
<div id="wrapper">
  <div id="Menue">
    <div class="MainMenue">###MENUE-ID:22###</div>
  </div>
  <div id="Headline"></div>
  <div id="Content">
     <div class="Submenue">###MENUE-ID:23###</div>
    <div class="Inhalt">###MAINAREA###</div>
    <div class="Newsbereich">###NEWSAREA###</div>
  <div class="clear"></div>
  </div>
</div>
 
Den Code hätte es nicht unbedingt gebraucht. Es hätte gereicht, zu sagen, dass du von deinen ursprünglichen Forderungen abgerückt bist, jeden Menüpunkt andersfarbig einzufärben und der Rest i.w. so wie vorgeschlagen. Ein Problem bleibt dann natürlich wegen der festen Breite der Menüpunkte, nämlich die Beschriftung, die darf nicht zu lang werden, wie deine Schnabeltassen zeigen.
 
ja das stimmt dieses Problem bleibt bestehen ich denke ich werde das Bild in 2 teilen, den einen Teil verlängern und dann jeweils ein Bild auf das a und eins auf li legen dann sollte das Problem auch behoben sein
 
Ich mache es ohne Bilder, habe aber natürlich im Prinzip das gleiche Problem. In der CSS bekommt der Menüpunkt (<li>) eine feste Breite und wenn der Text zu lang wird und mit keine sinnvolle Abkürzung einfällt, dann überschreibe ich das etwas unsauber mit einem zusätzlichen style-Attribut direkt beim Link. Aber ich muss es auch nicht zu professionell machen und hab auch kein großartig schlechtes deswegen, schließlich ist das style auch optisch sehr nahe am Menütext, der bei mir nicht aus einer DB kommt, sondern hardcoded in html-formatierten Textdateien. Käme er aus einer Datenbank, dann müsste man eventuell mit dem text noch die Linkbreite speichern und dann über PHP dynamisch zusammen mit dem Text zur Erstellung des Menüs verwenden.
 
ja gut das is kla dann. ich muss es aber mit bildern machen^^ leider -.-' hab auch grad ausversehen die styles für das menü gelöscht und war kurz vorm verzweifeln und dann viel mir wie schuppen von den augen, dass ich ja gott sei dank gestern hier den kompletten code gepostet hab :D
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben