✔ Problem mit Hintergrundbild von Link und seltsame Anzeige im IE

Status
Nicht offen für weitere Antworten.
Vektor

Vektor

Erfahrenes Mitglied
Hallo zusammen,

ich versuche mich gerade an einer kleinen privaten Homepage. Nun habe ich mit einiger hilfe aus dem Internet schon fast die ganze Seite mit CSS gelayoutet. Doch nun habe ich noch zwei Probleme.

Und zwar möchte ich ganz unten auf meiner Seite ein Bild einfügen, auf dem ein Link zur Impressum-Seite steht. Nun habe ich versucht das ganze wie bei meinen Buttons per CSS zu machen, aber mein Hintergrundbild wird "abgeschnitten" und der Link nicht zentriert.

Hier mal mein Seitencode:
HTML: 
<body style="text-align:center;">

<div id="Wrapper">

	<div id="Logo"> 
		<img src="Bilder/Logo.gif" width="763" height="160">
	</div>
	
	<div id="Navigation">
		<a class="link" href="#">News</a> 
		<a class="link" href="#">About</a>
		<a class="link" href="#">Members</a> 
		<a class="link" href="#">Matches</a>
		<a class="link" href="#">Server</a> 
		<a class="link" href="#">Links</a>
		<a class="link" href="#">Guestbook</a>
	</div>
	
	<div id="Hintergrund">
		<p>Dies ist ein kleiner Testsatz...</p>
	</div>

	<div>
		<a class="Impressum" href="#">Impressum</a>
	</div>
	
</div>

</body>
Code: 
<style type="text/css">

	body { 
		background-color:#333333;
	}
	
	#wrapper {
		width: 763px;
		margin: 0 auto;	
	}
	
	#Logo {
		margin: 10px auto 2px
	}
	
	#Hintergrund {
		height:60%;
		background:#636363;
		width:763px;
		margin:29px auto 0px;
		text-align:center;
	}
	
	a {
		float:left;
		font-family:Verdana;
		font-size:15px;
		color:#000000;
		font-weight:bold;
	}
	
	a.link {
		display:block;
		margin:0px auto 2px auto;
		width:109px;
		height:25px;
		border:0px solid #000000;
		text-decoration:none;
		background-image:url(http://localhost/Bilder/Navi/Button-Normal.gif);
	}
	
	a.link:hover {
		color:#ff0000;
		background-image:url(http://localhost/Bilder/Navi/Button-Hover.gif);
	}
	
	a.Impressum {
		display:block;
		margin:0px;
		witdh:763px;
		height:56px;
		border:0px solid #000000;
		background-image:url(http://localhost/Bilder/Unten.gif);
	}
	
</style>
Außerdem möchte ich gerne nicht das gesamte Hintergrundbild als Link haben, sondern nur den Text darauf. Geht das überhaupt mit CSS?

Mein zweites Problem was ich habe, ist dass mein Layout im IE 6 absolut verschoben aussieht. Hier mal ein Vergleichsbild: Link
Besonders dass ein Teil des letzten Links noch in der zeile darunter angezeigt wird, stört mich enorm. Habe aber keine Ahnung was ich dagegen tun kann. Habe das auf dem Bild noch besonders markiert.

Ich hoffe ihr könnt mir helfen und danke euch schon mal im vorraus..
 
Der Link zur Seite wäre tatsächlich ganz hilfreich, damit man auch einen Blick auf die eingebundenen Bilder werfen kann ;)

Ansonsten häng die Seite mit den Bildern hier als ZIP-Datei an.
 
Jupp...hier ist der Link

Testseite
Das Bild für den Impressum-Link ist übrigens 763px breit und 56 px hoch.
 
Zuletzt bearbeitet:
Du solltest in der Online-Version die Grafik-URIs anpassen, denn "http://localhost/..." macht da wenig Sinn ;)
 
So habe die Links auch noch angepasst (Bin schon total verwirrt ;-))
Hab ich was auf den Augen oder wo ist der ID-Selektor Navigation in der CSS-Deklaration?
Zum Vergrößern anklicken....
Das habe ich nach langem probieren rausgelöscht da ich das letzendlich für unnötig fand, da es auch ohne funktioniert. Ich hoffe dass das nix mit meinen Problemen zu tun hat. Bin absoluter anfänger in CSS...deshalb bin ich da total ratlos.
 
Am nicht-vorhandenen ID-Selektor #Navigation liegt es nicht ;)

Setz mal die Hintergrundgrafik folgendermaßen ein:

Code: 
#footer {
width: 763px;
height:56px;
background-image:url(http://www.headshot-hunters.de/Bilder/Unten.gif);
}

Code: 
<div id="footer">
      <a class="Impressum" href="#">Impressum</a>
</div>
 
Wunderbar...so zeigt er immerhin den footer an...nur der Link sollte noch zentriert werden. Hab das mit text-align:center; versucht, aber das hat nicht geklappt.

Ich lad mal die neue version hoch.

Danke bis hierhin.
 
Sollte so funktionieren:

Code: 
#footer {
width: 763px;
height:56px;
background-image:url(http://www.headshot-hunters.de/Bilder/Unten.gif);
text-align:center;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück