XHTMLforum - Bilder bzw. Text werden bei a:hover 'falsch' verschoben.

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Bilder bzw. Text werden bei a:hover 'falsch' verschoben. (http://xhtmlforum.de/showthread.php?t=57844)

Bilder bzw. Text werden bei a:hover 'falsch' verschoben.

Hallo,
ich bin ganz neu hier und habe auch nur wenig Ahnung von CSS und muss deswegen immer wild rumprobieren aber folgendes Problem konnte ich einfach nicht lösen:

Ich habe 5 Links auf der Startseite eingefügt. Immer wenn ich mit der Maus über einen der Links fahre (a:hover), erscheint am rechten Rand jeweils ein anderes Foto. Nur mit "display:block;Position:relative;" habe ich es geschafft, dass die Bilder an der richtigen Stelle angezeigt werden, egal ob ich das Browserfenster vergrößere oder verkleinere... .

Das Problem daran ist, dass dabei aber auch alle folgenden Links an den unteren Bildrand verschoben werden und sie so kaum noch zu erreichen sind, mal vom Aussehen abgesehen. Die Varianten display & position anders zu konfigurieren, hat immer dazu geführt, dass die Bilder dann beim vergrößern/verkleinern des Browsers falsch platziert wurden.

Das ganze kann man sich hier anschauen: Villetta Pelikan - Portal die CSS-Datei ist die http://villetta-pelikan.de/styles/portal.css

Ich hoffe mir kann jemand helfen.
Schon mal Danke
Vinny

Zitat:

Zitat von vinny (Beitrag 439936)

...Nur mit "display:block;Position:relative;" habe ich es geschafft, dass die Bilder an der richtigen Stelle angezeigt werden, egal ob ich das Browserfenster vergrößere oder verkleinere... .

Die Position ist so aber von der Schriftgröße abhängig.
Gebe #contentwrap #mitte #navbutton .default img besser position: absolute;
und dem Container #mitte #dreiviertelfenster position: relative;

...Perfekt!!! - hat geklappt.

Hallo plastiko

das ist ja super - so hat's bestens geklappt! Leider verstehe ich gar nicht warum. Ich hätte es fürs nächste mal gerne auch nachvollzogen...Aber auf jeden Fall tausend Dank, für den kompakten Tipp und die superschnelle Antwort!!! :)

PS: Sorry für meine verspätete Antwort-ich war einige Zeit weg...

vinny

Hallo zusammen,

ich bin am Aufbau einer Steuerung.

Ich habe das Problem, wenn ich mit der Maus drüber wegfahren :hover bewegt sich das Bild bzw. auch der Text der unter dem Bild ist. Ich habe es in der CSS auch schon mit z-index, auch mit absolut:position probiert. Aber dann habe ich das Problem, wenn ich das Fester vom Browser kleiner mache bleibt das Bild aber nicht in der Mitte .Das möchte ich aber nicht. Vllt. könnt Ihr mir ja bitte helfen? Danke schon im voraus.

Ich möchte es am liebsten, dass wenn ich mit der Maus über die Steuerung fahre, dass das Bild und der Text fest verankert bleiben u. nicht verrutschen jedesmal
Vielen Dank für eure Hilfe schonmal im Voraus.

Gruß Enrico

HTML
<body>

<h1>Dart</h1>

<div id="steuerung">
<nav>
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="#">Geschichte</a>
<li><a href="#">News</a>
<ul>
<li><a href="#">Angebote01</a></li>
<li><a href="#">Angebote02</a></li>
</ul>
</li>
<li><a href="#">Mannschaften</a></li>
</ul>
</nav>
</div>

<div id="bild" >
<img src="willkommen3.png" width="500" height="400" border="0" />
</div>

</body>

Cascading Style Sheet
h1{
color: #150185;
text-align: center;
}

nav ul ul {
display: none;

}

nav ul li:hover > ul {
display: block;
}

#bild{

background-position: center;

}

#steuerung, #steuerung a {
color: #A5685B;
font-size: 20px;
}