proggen.org

Verfasst: **Do Aug 15, 2013 7:56 pm**

Hallo zusammen,
ich arbeite immernoch an dem Weinshop für einen Freund.
Dieses Mal geht es darum, das ein Bild als Link fungieren und sich ändern soll wenn man mit der MAus darüber geht/darauf klickt.
Da ich für den Link, ohne Inhalt, keine Größe festlegen konnte und ich nur weiß wie ich das Hintergrundbild per CSS ändere, habe ich
Ein transparentes Bild genommen und verändere über CSS das Hintergrund Bild.
Das sieht im Code so aus:
HTML Dokument (main.html):

Code: Alles auswählen

<a href="Sackgasse.html" class="konzept"><img src="img/Transparenz.png" width="332" height="52" /></a>

(width="332" height="52" wird noch in die CSS-Datei ausgelagert)
CSS Dokument:

Code: Alles auswählen

a.konzept:link {background-image: url('img/01_konzeptnormal.png');background-position:center;}
a.konzept:visited {background-image: url('img/01_konzeptnormal.png');background-position:center;}  
a.konzept:hover {background-image: url('img/02_konzeptmouseover.png');background-position:center;} 
a.konzept:active {background-image: url('img/03_konzeptklicken.png');background-position:center;}

Das Problem ist, dass das Hintergrund Bild, egal was ich mache, nur im unteren Bereich angezeigt wird.
Hat da einer eine Idee was ich Falsch mache?

Hier ist das gesammte Projekt (Nur html und CSS verwendet):
http://www.file-upload.net/download-796 ... I.rar.html

mfg
Empire

Verfasst: **Do Aug 15, 2013 9:04 pm**

Sorry, ich bin für's Downloaden zu blöd.
Einmal kam eine Software, die ich nicht haben wollte, beim anderen Download-Link wurde ein Film gezeigt.

Ansonsten würde ich bei mal was wie
a.konzept { min-width: 332px; min-height: 52px; }
ausprobieren und
<a class="konzept"> </a>
probieren.

Bei der Background-position würde ich nichts angeben.

Kannst Du nachvollziehen, ob Du noch von irgendwo her ein padding, border oder margin erbst?

Verfasst: **Fr Aug 16, 2013 8:52 am**

Wenn Du im CSS ein

Code: Alles auswählen

a.konzept{padding-top:41;background-repeat:no-repeat;}

bzw. ein

Code: Alles auswählen

a.kontackt{padding-top:42;background-repeat:no-repeat;}

einträgst, sieht es besser aus.

btw: kontackt ??

Verfasst: **Fr Aug 16, 2013 10:23 am**

Ich habe jetzt mal folgendes damit angestellt.

Im HTML habe ich jeden Link mit einem DIV umgeben:

Code: Alles auswählen

 <div class="menu">
				<div class="konzept">
					<a href="Sackgasse.html"></a>
				</div>
				<div class="kontakt">
					<a href="Sackgasse.html"></a>
				</div>
				<div style="height:52px; width=364px;float:left;">
					<a href="Sackgasse.html">
						<img src="img/07_jetztbestellennormal.png" width="364" height="52"/>
					</a>
				</div>
			</div>

Den ersten beiden DIVs habe ich jeweils eine eigene Klasse verpasst:

Code: Alles auswählen

.konzept
{
	height:52px;
	width:332px;
	background-image: url('img/01_konzeptnormal.png');
	background-position:center;
	float: left;
}
.konzept a
{
	display:block;
	height:100%;
}
.konzept a:link {background-image: url('img/01_konzeptnormal.png');background-position:center;}      /* unvisited link */
.konzept a:visited {background-image: url('img/01_konzeptnormal.png');background-position:center;}  /* visited link */
.konzept a:hover {background-image: url('img/02_konzeptmouseover.png');background-position:center;}  /* mouse over link */
.konzept a:active {background-image: url('img/03_konzeptklicken.png');background-position:center;}  /* selected link */

.kontakt
{
	height:52px; 
	width:337px; 
	background-image: url('img/04_kontaktnormal.png');
	background-position:center;
	float:left; 
}

.kontakt a
{
	display:block;
	height:100%;
}

.kontakt a:link {background-image: url('img/04_kontaktnormal.png');background-position:center;}
.kontakt a:visited {background-image: url('img/04_kontaktnormal.png');background-position:center;}
.kontakt a:hover {background-image: url('img/05_kontaktmouseover.png');background-position:center;}
.kontakt a:active {background-image: url('img/06_kontaktklicken.png');background-position:center;}

Bei mir haben die Links anschließend die richtige Höhe. Das transparente Bild habe ich komplett entfernt. Für den "Jetzt Bestellen" Button habe ich es jetzt nicht gemacht, funktioniert aber genauso.

Ich hoffe, dass es ungefähr das trifft, was du dir vorgestellt hast

.

Verfasst: **Sa Aug 17, 2013 4:35 pm**

GilbertDurs Lösung passt perfckt, danke.

@Xin: Es ist der Button über "Tipp: Pic Upload!".

@All: Danke für die schnelle Hilfe!

mfg
Empire

proggen.org

[CSS] Hintergrund Bild

[CSS] Hintergrund Bild

Re: [CSS] Hintergrund Bild

Re: [CSS] Hintergrund Bild

Re: [CSS] Hintergrund Bild

Re: [CSS] Hintergrund Bild