Hovereffect in div container zentrieren

stw · #1 (**permalink**) 25.08.2006, 17:26

Hallo,

ich brauche mal wieder hilfe für mein kleines webprojekt.
bisher geht alles ganz gut, ich habe nur noch ein finales problem:

(ich bezieh mich ab hier auf den code unten - hoffe jemand kann damit was anfangen

)

wenn ich mit der maus über ein thumbnail gehe, wird es auch - so wie es soll - groß angezeigt. nun möchte ich aber die anzeige des großen bildes im galleriecontainer unter dem thumbcontainer zentrieren (wichtig für hochformat/querformat). aber ich bekomms nicht hin!
wie muß ich die sache anpacken?

sekundäres problem ist das das browserfenster einen horizontalen scrollbalken hat - aber ich vermute einen zusammenhang mit problem #1.

hier mal mein bsp code: (im moment nur für FF ...)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Click4Fun Start</title>
<meta name="author" content="Stephan">
<style type="text/css">

a{
font-family:Tahoma;
font-size:1.0em;
color:#a8a896;
font-weight:normal;
}

a.link {
display:block;
width:100px;
padding: 5px;
padding-left: 25px;
background-color:#ededd4;
/*border:1px solid #000000;*/
margin-left:15px;
margin-top:2px;
text-align:left;
text-decoration:none;
}

a.link:hover {
color: white;
background-color: darkgray;
}

.centercontainer{
width:760px;
height:550px;
/*border:solid 1px black;*/
margin:20px auto;
text-align:left;
}

.logocontainer{
width:754px;
height:30px;
margin:2px;
/*border:1px solid darkgray;*/
font:georgia;
font-size:1.8em;
color:76766a;
text-align:right;
}

.menuecontainer{
width:150px;
height:505px;
margin-left:2px;
margin-top:2px;
/*border:solid 1px gray;*/
float:left;
text-align:center;
font:tahoma;
font-size:1.0em;
color:#a8a896;
}

.galleriecontainer{
width:600px;
height:505px;
border:1px solid grey;
margin-right:2px;
margin-top:2px;
float:right;
text-align:center;
}

.thumbcontainer{
width:590px;
height:80px;
margin: 1px auto;
/*margin-left:10px;*/
/*margin-top:1px;*/
/*border:solid 1px black;*/
text-align:center;
overflow:auto;
}




.thumbnail img{
border: 1px solid white;
margin: 1px;
-moz-opacity:0.5;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
/*border: 1px solid black;*/
-moz-opacity:1.0;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
/*background-color: #acb1a2;*/
/*padding: 1px;*/
/*left: -1000px;*/
/*border: 1px solid gray;*/
visibility: hidden;
/*color: black;*/
/*text-decoration: none;*/
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 1px;
/*padding: 1px;*/
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
/*top: 120px;    *//*position where enlarged image should offset vertically */
/*left: 120px; *//*position where enlarged image should offset horizontally */
/*z-index: 50;*/
}

</style>

</head>
<body bgcolor="#ededd4"
text-align="center">

<div class="centercontainer">

         <div class="logocontainer">

         CLICK4FUN

	</div>

         <div class="menuecontainer">

	<a class="link" href="people.html">People</a>

	<a class="link" href="children.html">Children</a>

	<a class="link" href="fashion.html">Fashion</a>

	<a class="link" href="fineart.html">Fine Art</a>
	<br>
	<br>
	<a class="link" href="#nogo">Studio</a>

	<a class="link" href="#nogo">Philosophy</a>

	<a class="link" href="#nogo">Contact</a>

	<a class="link" href="#nogo">Editorial</a>

         </div>

         <div class="galleriecontainer">

                 <div class="thumbcontainer">

                 <a class="thumbnail" href="#thumb"><img src="tree_thumb.jpg" width="100px" height="70px" border="0" alt="tree_thumb" /><span><img src="tree.jpg" alt="tree" /></span></a>

		<a class="thumbnail" href="#thumb"><img src="ocean_thumb.jpg" width="100px" height="70px" border="0" alt="ocean_thumb" /><span><img src="ocean.jpg" alt="ocean" /></span></a>

		<a class="thumbnail" href="#thumb"><img src="sushi2_thumb.jpg" width="100px" height="70px" border="0" alt="sushi2_thumb" /><span><img src="sushi2.jpg" alt="sushi2" /></span></a>

		<a class="thumbnail" href="#thumb"><img src="horses_thumb.jpg" width="100px" height="70px" border="0" alt="horses_thumb" /><span><img src="horses.jpg" alt="horses" /></span></a>

                 <a class="thumbnail" href="#thumb"><img src="tree_thumb.jpg" width="100px" height="70px" border="0" alt="tree_thumb" /><span><img src="tree.jpg" alt="tree" /></span></a>

                 </div>

	</div>




</div>





</body>
</html>

danke schon mal,

gruß

Holger (HMR) · #2 (**permalink**) 25.08.2006, 17:32

vielletcht hilft das:

.thumbnail:hover{
background-color: transparent;
margin:0 auto;
}

stw · #3 (**permalink**) 25.08.2006, 17:39

nope, leider nicht, das bild wird wie vorher direkt neben dem thumb aufgemacht.

ich dachte eigentlich, das es was mit

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;

zu tun hat. aber ein "relative" öffnet die bilder dann nur noch im thumbcontainer.

ich kann natürlich mit dem (auskommentierten) offset arbeiten. aber dann sind eben die hochformatigen bilder nicht mehr zentriert.

vielleicht ist ja das konzept grundsätzlich falsch und ich sollte nur mit einem galeriecont. arbeiten. aber wie dann die thumbs plazieren? ein float:top gibts ja nicht.

heiko_rs · #4 (**permalink**) 25.08.2006, 17:50

Zum Zentrieren eine Klasse zuweisen (eine genügt, für das Bildformat, das seltener vorkommt).

stw · #5 (**permalink**) 25.08.2006, 17:52

ähem, kannst du das spezifizieren?

klasse zuweisen kann ich bestimmt rausfinden irgendwo...
aber wie zentrier ich dann?

Holger (HMR) · #6 (**permalink**) 25.08.2006, 17:56

hmmm...

das postition:absolut brauchst du für das vissibility:hidden?
vielleicht klaptt es mit display:none; ohne positionierung

aufbau:

<container1>
<container2>
<links>
<span mit bild>
</link>
</container>
</container>

sehe ich das richtig?
dann würde das bild ÜBER den vorhandenen THUMBS liegen,
hmmm..
.. kann ich auch nur spekulieren..
bild: display:inline;
<link> text-align:center
und alle einen z-index

position anstelle: absolute - > relative

aber ich glaube das wird so nix, die <links> müssten dann wahrscheinlich bereits zentriert sein.

oder alles postition:absolute mit psoitionsangaben..

stw · #7 (**permalink**) 25.08.2006, 18:03

das muß ich erstmal wirken lassen

also es funktioniert ja, wenn ich für links und oben einen offset angebe. aber dann sind ja
a) die hochformat bilder nicht mehr zentriert, und
b) siehts dann wohl bei unterschidlichen auflösungen anders aus 8was ein eigenes thema ist - ich muß es natürlich noch für IE und so anpassen. aber es soll ja erstmal überhaupt gehen, damit ich das prinzip verstehe.

irgendwie bezieht sich ja das "absolut" oder "relativ" aufs parent element. was bei mir das body tag zu sein scheint. ich würd ja aber gern den galeriecont als elternelement haben.

heiko_rs · #8 (**permalink**) 25.08.2006, 18:07

Zitat:

Zitat von stw

ähem, kannst du das spezifizieren? klasse zuweisen kann ich bestimmt rausfinden irgendwo... aber wie zentrier ich dann?

Definiere die Position des Bildformates, das häufiger vorkommt. Für das andere vergib eine Klasse mit eigener Position.

Eine "automatische" Zentrierung scheitert an der vertikalen, denn da geht es nunmal nur mit "Tricks".

stw · #9 (**permalink**) 25.08.2006, 18:41

dh ich positioniere zb das querformat mit einem links/oben offset (position:absolut) und für die hochformatbilder mach ich eine klasse und positionier das dann ähnlich?

hm, ich hab das gefühl ich weiß was du meinst, aber irgendwie bin ich mir nicht sicher wie ich das umsetzen soll.

kannst du mir da ein bsp geben oder nen link zum nachlesen?

ps. mit dem offset hab ich ja das problem der unterschiedlichen positionierung bei unterschiedlichen bildschirmauflösungen. wie kann ich das umgehen?

heiko_rs · #10 (**permalink**) 25.08.2006, 19:00

Zitat:

Zitat von stw

ich positioniere zb das querformat mit einem links/oben offset (position:absolut) und für die hochformatbilder mach ich eine klasse und positionier das dann ähnlich?

Ja, für Hochformat paßt Du die left/top-Werte an.

Zitat:

Zitat von stw

mit dem offset hab ich ja das problem der unterschiedlichen positionierung bei unterschiedlichen bildschirmauflösungen.

Ein übergeordnetes Element bekommt position: relative; (ohne weitere Angaben), dann werden die Bilder an diesem ausgerichtet.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Website responsive, div container zentrieren	sabrina79	CSS	4	11.07.2018 21:15
DIV Container automatisch untereinander einordnen	dfb001	CSS	1	06.11.2014 15:23
Beschränkung div container?	cyberoner1	CSS	5	21.03.2009 20:09
DIV Container zentrieren?	The Sayan	CSS	1	09.07.2006 19:41
Div 100% hoch dynamische Breite zentrieren	TheBigfoot	CSS	4	10.12.2004 13:27