XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   eine grafik über andere legen (http://xhtmlforum.de/showthread.php?t=59950)

keyboardY 23.01.2010 17:04

eine grafik über andere legen
 
Hallo Leute,
ich habe vor einigen Tagen angefangen mich mit CSS zu beschäftigen und eine Seite damit aufzubauen. Bisher klappte alles ganz gut, aber jetzt steh ich vor einem Problem das ich als Laie einfach nicht ohne Hilfe hinbekomme. Habe auch schon gegoogelt und hier gesucht aber nix gefunden :( .
Also hier mein Problem (kann mich leider nicht mit den ganzen "div" und so Fachbegriffen ausdrücken weil ich gar nicht weiß wofür das alles steht):

Ich habe versucht (wie z.B. beim Ipone wenn man eine neue Nacricht hat) eine Grafik über eine andere zu legen. dabei muss in der Grafik die im Vordergrund ist aber auch Text rein (Zahlen). Die Grafik die im Hintergrund liegt habe ich mit einem "hover" ausgestattet also das die sich dann ändert wenn man drauffährt (sry nochmal wegen meine Fachsprache :| ).


Ich bin leider mit meiner Idee nicht weit gekommen, das mit dem Hover klappt aber ich bekomme die eine Grafik einfach nicht vor die andere sondern nur umgekehrt.

Hier mein css Code (menu-new = Vordergrund Grafik, menu1 = Hintergrund Grafik):

Code:

#menu-new {
    font-weight:bold;
        color: #ffffff;
        font-size: 13px;
    text-align: center;
          line-height: 23px;
        font-family: "Calibri", "Arial", "Verdana";

    margin-top: -10px;
    margin-bottom: auto;
    margin-right: auto;
    margin-left: auto;
    text-align: center;

    background: url('images/menu-new 3.png');
    width: 25px;
    height: 26px;
}       
       




.menu1 {
    margin-top: 10px;
    margin-bottom: auto;
    margin-right: auto;
    margin-left: auto;
    text-align: center;

    display:block;
    width: 52px;
    height: 40px;
    background: url('images/menu.png');
    background-position: 0px 0px;
    text-decoration: none;
    line-height:10px;
}
.menu1:hover {
    background-position: 0px -41px;
}

Und dann noch HTML:

HTML-Code:

<div id="menu-new">99</div><a href="#" class="menu1">
Hoffe ihr könnt mir helfen :unsure:

Thielo 23.01.2010 17:28

Ohne jetzt direkt dir eine Lösung zu nennen ( ja ich bin so doof ;) ) hier mal ein Denkanstoß:

du hast die Grafik und in der Grafik die "andere" Grafik die den text enthält, das ganze soll klickbar sein..
HTML-Code:

<a class="button" href="#"><span>formatiere mich in mir steht die Zahl!</span></a>

keyboardY 23.01.2010 18:03

ja, wie man einen Link einstellt ist mit schon klar :) ,aber es ist immer die flasche grafik im vordergrund...

Cocoon 23.01.2010 18:21

Zitat:

Zitat von keyboardY (Beitrag 456660)
ja, wie man einen Link einstellt ist mit schon klar :) ,aber es ist immer die flasche grafik im vordergrund...

Er wollte dir nur den Aufbau des HTML hinsichtlich des CSS näher bringen.

Kombiniere mal sein HTML mit diesem CSS. ;)

Code:

a.button {
  display: block;
  width: 100px;
  height: 100px;
  background: #ccc;
}

a.button:hover {
  background: #aaa;
}

a.button span {
  display: block;
  width: 30px;
  height: 30px;
  background: #eee;
}


Thielo 23.01.2010 18:24

bingo ;) man bin ich echt so schlecht zu durchschauen? ;)

keyboardY 23.01.2010 18:42

Ohh sry jetzt habe ich es verstanden tut mir leid. Danke für die Hilfe.
Jetzt nur noch eine Frage: ich habe im css ein Tab / Ding / Befehl /Anweisung (bitte korrekte Bezeichnung sagen :) ) erstellt die für alle Links zutrifft, also a und a:hover. Wie stelle ich das nun für die Zahl in der vorderen Grafik aus?

Cocoon 23.01.2010 18:53

Da zu gerade erst beginnst, dich mit CSS zu beschäftigen, empfehle ich dir dich ein wenig in die HTML/CSS Grundlagen einzulesen. :)

Zum Beispiel hier:

5.7 Hyperlinks gestalten - Little Boxes - Webseiten gestalten mit HTML und CSS


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:22 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023