zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden eine grafik über andere legen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.01.2010, 16:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.01.2010
Beiträge: 12
keyboardY befindet sich auf einem aufstrebenden Ast
Idee 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.01.2010, 16:28
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.375
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

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>
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.01.2010, 17:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.01.2010
Beiträge: 12
keyboardY befindet sich auf einem aufstrebenden Ast
Standard

ja, wie man einen Link einstellt ist mit schon klar ,aber es ist immer die flasche grafik im vordergrund...
Mit Zitat antworten
  #4 (permalink)  
Alt 23.01.2010, 17:21
Benutzerbild von Cocoon
position: relative;
XHTMLforum-Mitglied
 
Registriert seit: 12.06.2009
Ort: Berlin
Beiträge: 156
Cocoon wird schon bald berühmt werden
Standard

Zitat:
Zitat von keyboardY Beitrag anzeigen
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;
}
Mit Zitat antworten
  #5 (permalink)  
Alt 23.01.2010, 17:24
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.375
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

bingo man bin ich echt so schlecht zu durchschauen?
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #6 (permalink)  
Alt 23.01.2010, 17:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.01.2010
Beiträge: 12
keyboardY befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #7 (permalink)  
Alt 23.01.2010, 17:53
Benutzerbild von Cocoon
position: relative;
XHTMLforum-Mitglied
 
Registriert seit: 12.06.2009
Ort: Berlin
Beiträge: 156
Cocoon wird schon bald berühmt werden
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Tooltip-Hoverbereich über Grafik legen maroni_chiantini CSS 2 02.07.2009 17:57
Grafik über Rahmen legen Steakfred CSS 6 18.11.2007 16:27
Grafik an bestimmter Stelle ohne position:absoult anzeigen? EPMS CSS 2 06.11.2007 15:57
Grafik unten rechts im div? rene090965 (X)HTML 11 09.08.2006 09:02


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