✔ Text über einem Bild (ohne absolute)

[DerMilchmann]

Also in der linken unteren Ecke befindet sich ein Bild und zwar ein Planet den ich als background-image definiert habe rechts daneben (durch margin left) ein text und zwar contitech.de.
dies soll gleichzeitig ein link sein.
beide elemte sowohl der text als auch das bild sollen sich beim drübergehen mit der maus verändern
contitech soll statt grau weiss werden und der planet gelb (worldr.gif)
wie mach ich das ohne dass es so aussieht wie jetzt?
Danke im vorraus

achja und die abstände (zur linken seite) der schrift würde ich gern noch etwas größer haben, jedoch aber nicht den gelben hintergund

 

[Maik]

Wenn das DIV #world mit Text ein Link soll, dann nutze doch gleich das a-Element.

Um den Linktext weiter nach links einzurücken, erhöhe den padding-left-Wert (= linker Innenabstand) und verringere die Breitenangabe um diesen hinzuaddierten Wert, damit die Box ihre Breite (140 Pixel) beibehält:

a#world:link, a#world:visited {
background-image: url(world.gif);
background-repeat:no-repeat;
margin-left:2px;
margin-top:22px;
padding-left:45px; /* 40+5px */
padding-top:6px;
display:block;
width:95px; /* 100-5px */
height:29px;
font-size:10px;
background-color:#333333;
}

a#world:hover {
background-image: url(worldr.gif);
color:#FFFFFF;
}

<a href="#Legal" id="world" class="link2">contitech.de</a>

Und bitte achte in deinen Beiträgen auf die Groß-und Kleinschreibung, so wie du es zuvor unter Beweis gestellt hast.

 

[DerMilchmann]

Danke danke danke danke!!
Mein letztes Problem is das Navigationsmenu.
Es geht darum, dass ich den linken Abstand der Schrift zum linken Rand des Browserfensters gerne etwas größer hätte änlich wie auf der ContiTech - Australia

 

[Maik]

Dann lese bitte nochmal meinen letzten Beitrag aufmerksam durch und wende die Technik auf das entsprechende HTML-Element des Navigationsmenüs an.

Ansonsten empfehle ich dir SELFHTML: Stylesheets (CSS) zum Einstieg in die Formatierungssprache CSS und als Nachschlagewerk

 

[DerMilchmann]

Hi da bin ich wieder nun meine nächste Frage,
wieso funktioniert mein sheet im Ie aber im Firefox nicht.
Es geht um den schwarzen Hintergrund der im IE den Text umschließt und im Firefox nnicht!
wie immer füge ich anbei meine arbeit an!
MEGAUPLOAD - One-Click Webhosting

 

[Maik]

Erweitere mal das Stylesheet mit folgender Regel:

div.clear {
clear: both;
}

Und füge das DIV .clear im HTML-Quelltext nach den beiden floatenden Elementen ein:

<div id="products"><p class="text">
<b>Air Springs Systems</b>
<br>ContiTech Air Spring Systems is a manufacturer of components and complete systems for adjustable suspensions in commercial vehicles, buses and rail vehicles, as well as for the support of stationary machinery and foundations. We are the No. 1 supplier of commercial vehicle air springs in Europe, and No. 2 worldwide.<br><br>
<a href="#Contact"><img src="more2_ico_bo2.gif"></a> Business Unit ContiTech Air Spring Systems</p>
<img class="bild" src="lufe_kl.jpg" >

<div class="clear"></div>
</div>

 

[DerMilchmann]

Vielen vielen lieben dank michaelsinterface
Ich bin grad in einem 2 wöchigen Praktikum und wenn ich gut bin bekomm ich auch am Anschluss eine Ausbildung als Medienoperator.
Deswegen war für mich, vor allem, deine Hilfe sehr wichtig, aber auch vielen dank an dich fanste.
Ich hänge die komplette Seite nochmal an, wenn du Lust und Zeit hast kannste die dir mal angucken und mir sagen in welchen Bereichen ich mich verbessern muss oder was ich genau besser hätte lösen können. Vielen dank im Borraus!
MEGAUPLOAD - One-Click Webhosting

 

[Maik]

Ich empfehle dir, die CSS-Formatierungen komplett in eine CSS-Datei auszulagern, damit du bei zukünftigen Layoutänderungen nicht jedes einzelne HTML-Dokument öffnen mußt, um in den style-Attributen der jeweiligen Elemente die CSS-Angaben zu überarbeiten.