Mal wieder eine CSS-Frage

Computer: Software & Programmierung HTML & CSS
1

Hallo Experten,

ich habe ein paar Bilder in div-Elementen gebunkert, die zu allen Seiten jeweils am Rand ausgerichtet sind. Dazu hätte ich 2 Fragen.

1.Wie kann ich die DIV-Elemente so ausrichten, dass sie aneinander andocken und sich nicht überlappen. Ich habe noch das Problem, dass ich bei position:absolute immer vom Rand aus ausrichten muss. Anders hat es bisher nicht funktioniert.

2.Kann man eventuell ohne Javascript realisieren, dass Bilder bei einem hover in der Mitte des Browserfensters und größer angezeigt werden?

Danke im Voraus.

2

Hallo mmmmm :smile:

position:absolute hebt das Element aus dem normalen Fluss raus. Dazu musstest du eben rechnen, damit es nicht zur Überlappung kommt.
Heißt *einander* nebeneinander oder untereinander?

Was spricht gegen einer relativen Positionierung?

Hover mit Bild muss nicht unbedingt mit JS gemacht werden, das kannst du auch mit CSS machen.

So z.B. http://host.sonspring.com/hoverbox/

Kannst du uns den Quelltext posten, damit wir exakter wissen was genau du *angestellt hast? :smile:

Gruß
Maja

3

Hallo Maja,

hier der Code (sound_on ist nur ein Beispielbild)

DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01//EN“
„http://www.w3.org/TR/html4/strict.dtd“>

Gallerie
a:hover#link1 span {display:block; position:absolute; left:400px; top:300px; width:160px; height:110px; border:1px solid #000;}

#left {
background-image: none;
background-repeat: no-repeat;
background-position: center center;
position:absolute;
text-align:center;
color:#FFFFFF;
top:5px;
bottom:5px;
left: 5px;
width: 200px;
height: 98%;
border: 1px solid;
}
#right {
background-image: none;
background-repeat: no-repeat;
background-position: center center;
position:absolute;
text-align:center;
color:#FFFFFF;
top:5px;
bottom:5px;
right: 5px;
width: 205px;
height: 98%;
border: 1px solid;
}
#top {
ackground-image: none;
background-repeat: no-repeat;
background-position: center center;
position:absolute;
text-align:center;
color:#FFFFFF;
top:5px;
bottom:5px;
left: 207px;
right: 205px;
width: 64%;
height: 150px;
border: 1px solid;
}
#bottom {
background-image: none;
background-repeat: no-repeat;
background-position: center center;
position:absolute;
text-align:center;
color:#FFFFFF;
bottom:9px;
left: 207px;
right: 205px;
width: 64%;
height: 150px;
border: 1px solid;
}
img{
margin-top:25px;
}

a{
margin-top:25px;
}
.hover{
width:150px;
height:100px;
}
a:hover{
width:150px;
height:100px;
}
#top_bottom_pics{
margin-left:15px;
}

Vielen Dank für deine Hilfe. Die angegebene Galerie schaut wirklich gut aus. Bei meinem Aufbau habe ich auch z.B. die Änderungen bei einer anderen Auflösung nicht beachtet. Es könnte also bei dir etwas anders aussehen.

4

Hallo mmmmmmm

also ganz vorab möchte ich dich drauf hinweisen, daß es schwierigkeiten bringt manche Sachen fix zu positionieren und andere relativ (divs).

Ein anderes Problem ist sicherlich, daß das große Bild in der Mitte NICHT in einem weiteren Div ist.

Aber das nur so am Rande.

Damit sich deine Divs nicht überlappen solltest du „float“ verwenden.
Und vorsichtig mit mehreren unterschiedlichen Float-Eigenschaften.

lg
aya