ilch Forum » Allgemein » HTML, PHP, SQL,... » Hintergrund vom Drop Down Menü

Geschlossen
  1. #1
    User Pic
    Rookie Mitglied
    Registriert seit
    23.02.2009
    Beiträge
    52
    Beitragswertungen
    0 Beitragspunkte
    Hallo zusammen,

    ich habe diese Frage vor einieger Zeit schonmal gestellt. Man konnte sie mir aber nicht direkt beantworten lächeln

    Ich habe auf unserer Page ein Drop Down Menü eingefügt was auch super funktioniert etc.

    Was ich aber noch gerne hätte ist dass der Hintergrund des Drop Downs nicht undurchsichtig ist. also nicht komplett schwarz sondern durchsichtig.

    ich weis dass ich dafür eine png datei mit 30% Deckkraft erstellen muss. Das habe ich auch gemacht.

    Aber wie füge ich diesen Hintergrund in das Menü ein? Ich habe mal einiges ausprobiert mir backgroud-image: url... etc.

    Allerdings ohne erfolg. Vielleicht habe ich auch die falsche Stellen benutzt. Könnt ihr mir da weiterhelfen?

    Anbei die css für das Dropdownmenü:

    body {
    	margin:0px; background-image: url('include/designs/design_57-silber/images/bg.gif');
    	
    }
    .head {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 20px; }
    .head2 {font-size: 10px; color: #6DC903; font-weight: bold; }
    
    #dropmenudiv{
    border-left:1px solid black; border-right:1px solid black; border-top:1px solid black; border-bottom:0px solid black; position:absolute;
    line-height:18px;
    z-index:100; font-style:normal; font-variant:normal; font-weight:normal; font-size:11px; font-family:Verdana
    }
    
    #dropmenudiv a{
    width: 100%;
    display: block;
    text-indent: 2px;
    border-bottom: 1px solid black;
    padding: 1px 0;
    text-decoration: none;
    font-weight: bold;
    }
    
    #dropmenudiv a:hover{ /*hover background color*/
    background-color: grey;
    }



    verwendete ilchClan Version: 1.1

    betroffene Homepage: externer Link
    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    Devil Mitglied
    Registriert seit
    02.02.2006
    Beiträge
    2.094
    Beitragswertungen
    21 Beitragspunkte
    body{
    margin:0px; 
    background-image: url(images/bg.gif);}
    
    .head{
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 20px;}
    
    .head2{
    font-size: 10px; 
    color: #6DC903; 
    font-weight: bold;}
    
    #dropmenudiv{
    background-image:url(*PFAD*);
    border-left:1px solid black; 
    border-right:1px solid black; 
    border-top:1px solid black; 
    border-bottom:0px solid black; 
    position:absolute;
    line-height:18px;
    z-index:100; 
    font-style:normal; 
    font-variant:normal; 
    font-weight:normal;
    font-size:11px; 
    font-family:Verdana;}
    
    #dropmenudiv a{
    background-image:url(*PFAD*);
    width: 100%;
    display: block;
    text-indent: 2px;
    border-bottom: 1px solid black;
    padding: 1px 0;
    text-decoration: none;
    font-weight: bold;}
    
    #dropmenudiv a:hover{ /*hover background color*/
    background-color: grey;}


    *PFAD*
    Wenn du jetzt die style.css hast und einen Ordner der Images heißt, muss der Pfad beispielsweise so lauten:

    background-image:url(images/*bildname*.png);

    *Groß-kleinschreibung beachten.


    Wenn du jetzt die style.css hast und einen Ordner der Images heißt und das Bild nochmals in einem Unterordner ist, muss der Pfad beispielsweise so lauten:

    background-image:url(images/*ORDNERNAME*/*bildname*.png);



    Zuletzt modifiziert von Devil am 25.03.2009 - 10:34:52
    Wer zuletzt lacht, hat den schlechtesten Ping.
    0 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    Rookie Mitglied
    Registriert seit
    23.02.2009
    Beiträge
    52
    Beitragswertungen
    0 Beitragspunkte
    also ist das definitiv dieser befehl?

    background-image:url(*PFAD*);


    hm.. ich glaube das so gemacht zu haben. aber ich probier es heute abend nochmal aus.

    muss die *.png datei dabei interlaced (oder wie das heisst) sein?

    greetz


    Zuletzt modifiziert von Rookie am 25.03.2009 - 10:57:47
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    Devil Mitglied
    Registriert seit
    02.02.2006
    Beiträge
    2.094
    Beitragswertungen
    21 Beitragspunkte
    So benutze ich den Befehl in meiner .css...und es funkts zwinker


    BEISPIEL:

    PNG Datei = "test.png"

    Verzeichnis:

    -Design_Rookie
    --Images
    ---test.png
    --index.htm
    --style.css

    background-image:url(Images/test.png);



    Interlaced = Aufbau des Bildes...man sieht z.b. wie sich das Bild langsam aufbaut und immer schärfer wird.


    Zuletzt modifiziert von Devil am 25.03.2009 - 15:12:05
    Wer zuletzt lacht, hat den schlechtesten Ping.
    0 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    Rookie Mitglied
    Registriert seit
    23.02.2009
    Beiträge
    52
    Beitragswertungen
    0 Beitragspunkte
    alles klar. dann probiere ich das heute abend mal aus.

    danke dir!

    greetz
    0 Mitglieder finden den Beitrag gut.
  6. #6
    User Pic
    Devil Mitglied
    Registriert seit
    02.02.2006
    Beiträge
    2.094
    Beitragswertungen
    21 Beitragspunkte
    Okay. ^^
    Wer zuletzt lacht, hat den schlechtesten Ping.
    0 Mitglieder finden den Beitrag gut.
  7. #7
    User Pic
    Rookie Mitglied
    Registriert seit
    23.02.2009
    Beiträge
    52
    Beitragswertungen
    0 Beitragspunkte
    hey,

    also ich habe es gestern mal getestet. aber bei mir funktioniert es einfach nicht!

    vielleicht kann sich ja einer mal meine index.htm anschauen und gucken was ich falsch gemacht habe.

    grüße
    0 Mitglieder finden den Beitrag gut.
  8. #8
    User Pic
    Devil Mitglied
    Registriert seit
    02.02.2006
    Beiträge
    2.094
    Beitragswertungen
    21 Beitragspunkte
    DROPDOWN MENÜ...oder?:
    <table border="0" cellpadding="0" cellspacing="0" width="1003">
    		<tbody><tr>
    			<td><a href="default.htm" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu1, '152px')" onmouseout="delayhidemenu()"><img src="include/images/navi/main.jpg" border="0" width="152" height="23"></a></td>
    
                <td><a href="default.htm" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu2, '152px')" onmouseout="delayhidemenu()"><img src="include/images/navi/clan.jpg" border="0" width="152" height="23"></a></td>
                <td><a href="default.htm" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu3, '152px')" onmouseout="delayhidemenu()"><img src="include/images/navi/community.jpg" border="0" width="152" height="23"></a></td>
                <td><a href="default.htm" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu4, '152px')" onmouseout="delayhidemenu()"><img src="include/images/navi/server.jpg" border="0" width="152" height="23"></a></td>
    			<td><a href="default.htm" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu5, '152px')" onmouseout="delayhidemenu()"><img src="include/images/navi/stuff.jpg" border="0" width="152" height="23"></a></td>
    			<td><img src="include/images/navi/right.jpg" border="0" width="243" height="23"></td>
            </tr>
        </tbody></table>


    Soweit ich sehe hast du keine ID& Classe angegeben...?
    body {
    	margin:0px; background-image: url('include/images/navi/dropdown_mitte.png');
    	
    }
    .head {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 20px; }
    .head2 {font-size: 10px; color: #6DC903; font-weight: bold; }
    
    #dropmenudiv{
    background-image: url('include/images/navi/dropdown_mitte.png');
    border-left:1px solid black; 
    border-right:1px solid black; 
    border-top:1px solid black; 
    border-bottom:0px solid black; 
    position:absolute;
    line-height:18px;
    z-index:100; 
    font-style:normal; 
    font-variant:normal; 
    font-weight:normal; 
    font-size:11px; 
    font-family:Verdana
    }
    
    #dropmenudiv a{
    background-image: url('include/images/navi/dropdown_mitte.png');
    width: 100%;
    display: block;
    text-indent: 2px;
    border-bottom: 1px solid black;
    padding: 1px 0;
    text-decoration: none;
    font-weight: bold;
    }
    
    #dropmenudiv a:hover{ /*hover background color*/
    background-color: grey;
    }
    
    		*{ color:#FFFFFF;}


    wieso hast du das in der index.htm drin? Und nicht in der Style.css...


    Zuletzt modifiziert von Devil am 26.03.2009 - 19:50:11
    Wer zuletzt lacht, hat den schlechtesten Ping.
    0 Mitglieder finden den Beitrag gut.
  9. #9
    User Pic
    Rookie Mitglied
    Registriert seit
    23.02.2009
    Beiträge
    52
    Beitragswertungen
    0 Beitragspunkte
    sorry.. bin in html leider noch in den ersten gehversuchen lachen bin froh dass ich das menü überhaupt hinbekommen habe lachen

    kannst du mir auf die sprünge helfen?
    wie mache ich das mit der ID und wo?

    kann ich den style einfach in die style.css unten dran hängen? klappt das dann auch?

    greetz
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten