zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hovereffect in div container zentrieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.08.2006, 18:26
stw stw ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.07.2006
Beiträge: 17
stw befindet sich auf einem aufstrebenden Ast
Standard Hovereffect in div container zentrieren

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ß
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.08.2006, 18:32
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 09.11.2004
Beiträge: 343
Holger (HMR) befindet sich auf einem aufstrebenden Ast
Standard

vielletcht hilft das:

.thumbnail:hover{
background-color: transparent;
margin:0 auto;
}
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.08.2006, 18:39
stw stw ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.07.2006
Beiträge: 17
stw befindet sich auf einem aufstrebenden Ast
Standard

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.

Geändert von stw (25.08.2006 um 18:42 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 25.08.2006, 18:50
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zum Zentrieren eine Klasse zuweisen (eine genügt, für das Bildformat, das seltener vorkommt).
Mit Zitat antworten
  #5 (permalink)  
Alt 25.08.2006, 18:52
stw stw ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.07.2006
Beiträge: 17
stw befindet sich auf einem aufstrebenden Ast
Standard

ähem, kannst du das spezifizieren?

klasse zuweisen kann ich bestimmt rausfinden irgendwo...
aber wie zentrier ich dann?
Mit Zitat antworten
  #6 (permalink)  
Alt 25.08.2006, 18:56
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 09.11.2004
Beiträge: 343
Holger (HMR) befindet sich auf einem aufstrebenden Ast
Standard

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..
Mit Zitat antworten
  #7 (permalink)  
Alt 25.08.2006, 19:03
stw stw ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.07.2006
Beiträge: 17
stw befindet sich auf einem aufstrebenden Ast
Standard



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.
Mit Zitat antworten
  #8 (permalink)  
Alt 25.08.2006, 19:07
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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".
Mit Zitat antworten
  #9 (permalink)  
Alt 25.08.2006, 19:41
stw stw ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.07.2006
Beiträge: 17
stw befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 25.08.2006, 20:00
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 20:29
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 17:53
Header entfernen tripple CSS 17 15.06.2010 16:41
Schriftfarbe in den Eintragungsfeldern von jforms Steveislucky CSS 2 16.03.2010 11:59
CSS Text nebeinander? carstiee09 CSS 13 13.11.2009 20:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:50 Uhr.