[CSS] Hintergrund Bild

Fragen zum Thema HTML, JavaScript, PHP
Antworten
Empire
Beiträge: 272
Registriert: Mo Jan 26, 2009 5:36 pm

[CSS] Hintergrund Bild

Beitrag von Empire » 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

Benutzeravatar
Xin
nur zu Besuch hier
Beiträge: 8858
Registriert: Fr Jul 04, 2008 11:10 pm
Wohnort: /home/xin
Kontaktdaten:

Re: [CSS] Hintergrund Bild

Beitrag von Xin » 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">&nbsp;</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?
Merke: Wer Ordnung hellt ist nicht zwangsläufig eine Leuchte.

Ich beantworte keine generellen Programmierfragen per PN oder Mail. Dafür ist das Forum da.

C@mper
Beiträge: 88
Registriert: Mo Nov 15, 2010 3:30 pm

Re: [CSS] Hintergrund Bild

Beitrag von C@mper » 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 ?? :shock:

GilbertDur
Beiträge: 105
Registriert: Fr Mär 01, 2013 10:31 am

Re: [CSS] Hintergrund Bild

Beitrag von GilbertDur » 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 :).

Empire
Beiträge: 272
Registriert: Mo Jan 26, 2009 5:36 pm

Re: [CSS] Hintergrund Bild

Beitrag von Empire » 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

Antworten