Bildpositionierung

Status
Nicht offen für weitere Antworten.

quidnovi

Erfahrenes Mitglied
Hi, ich bin's wieder

Habe eine Bildergalerie, in der die Thumbs oben bei Klick drunter größer dargestellt werden.

Nun habe ich noch einen Rahmen mit Breite und Höhe festgelegt (den ich mit top:...px; positioniere), in dem die angeklickten Bilder "bottom" erscheinen sollen - nur diese sind immer oben in diesem Rahmen.

Im Internet habe ich bezüglich "horizontaler" Positionierung von Bildern nix gefunden.

Zum besseren Verständnis habe ich einen Screenshot gemacht.

Hier der Quelltext:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title></title>
<style type="text/css">

/* needed for IE to make :active state work first time */
a, a:visited {color:#000;} 

/* Thumbnails */
a.gallery, a.gallery:visited {
	display:block; 
	display:inline-block; 
	color:#000; 
	text-decoration:none; 
	border:1px solid #000; 
	width:71px; 
	height:69px; 
	float:left; 
	margin:4px; 
	z-index:50;
	}
a.slidea {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-01.jpg);}
a.slideb {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-02.jpg);}
a.slidec {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-03.jpg);}
a.slided {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-04.jpg);}
a.slidee {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-05.jpg);}
a.slidef {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-06.jpg);}
a.slideg {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-07.jpg);}
a.slideh {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-08.jpg);}
a.slidei {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-09.jpg);}
a.slidej {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-10.jpg);}
a.slidek {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-11.jpg);}
a.slidel {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-12.jpg);}
a.slidem {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-13.jpg);}
a.sliden {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-14.jpg);}

a.gallery em, a.gallery span {
	display:none;
	}
	a.gallery:hover {
	border:1px solid #fff;
	}


/* Gallery all */
#container_top {
	position:relative;
	width:600px; 
	height:500px; 
	background:white; 
	border:0px solid #a49188; 
	margin:1em auto;
	}

#container_top img {
	border:0; bottom: 0px;
	}
#container_top .thumbs {
	position:absolute; 
	left:0; 
	top:0;
	}

/*
#container_top a.gallery:hover span {
	display:block;
	position:absolute; 
	width:600px; 
	height:50px; 
	top:110px; 
	left:5px; 
	padding:5px;
	font-style:italic; 
	color:#fff; 
	z-index:100;
	border:0px solid #a49188; 
	}
*/

#container_top a.gallery:hover span:first-line {
	font-style:normal; 
	font-weight:bold; 
	font-size:1.1em; 
	color:#000;
	}

#container_top a.gallery:active, #container_top a.gallery:focus {
	border:1px solid #000;
	}

#container_top a.gallery:active em, #container_top a.gallery:focus em {
	display:block; 
	position:absolute;
	width:480px;
	height:300px;
	top:196px; 
	left:50px; 
	color:#000; 
	border:1px solid red;
	z-index:50;
	background-color: #ffffff;
	text-align: center;
	bottom: 0px;
	}

#container_top h1 {
	clear:both; 
	margin:0; 
	padding-top:400px;
	text-align:center; 
	font-family: georgia, "times new roman", serif; 
	font-size:3em; 
	font-weight:normal; 
	color:#fff;
	}

#container_top h1 em {
	font-size:0.6em; 
	color:#000;
	}


</style>


</head>

<body>
<div id="container_top">
<div class="thumbs">
<a class="gallery slidea" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-01.jpg" /></em></a>
<a class="gallery slideb" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-02.jpg" /></em></a>
<a class="gallery slidec" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-03.jpg" /></em></a>

<a class="gallery slided" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-04.jpg" /></em></a>
<a class="gallery slidee" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-06.jpg" /></em></a>
<a class="gallery slidef" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-07.jpg" /></em></a>
<a class="gallery slideg" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-08.jpg" /></em></a>
<a class="gallery slideh" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-09.jpg" /></em></a>
<a class="gallery slidei" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-10.jpg" /></em></a>

<a class="gallery slidej" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-11.jpg" /></em></a>
<a class="gallery slidek" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-12.jpg" /></em></a>
<a class="gallery slidel" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-13.jpg" /></em></a>
<a class="gallery slidem" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-14.jpg" /></em></a>
<a class="gallery sliden" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-15.jpg" /></em></a>

</div>
<table width="600" height="500" cellspacing="0" cellpadding="0" border="0">
 <tr>
  <td width="47" height="330" valign="bottom">
   <img src="http://stot.linux3.webhome.at/fotos/texte-website.jpg">
  <td align="center" valign="bottom" height="300">
   <img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-01.jpg" width="367" height="267" />
  </td>
 </tr>
</table>
</div>

</body>
</html>


Wie schon erwähnt, habe ich nix dergooglt, darum bitte ich Euch, mir die richtige Richtung zu weisen.

thx im voraus
 

Anhänge

  • 26869attachment.jpg
    26869attachment.jpg
    49,1 KB · Aufrufe: 38
Probier es mal mit folgender Selektor-Erweiterung, um die Grafiken am unteren Elementrand zu positionieren:

Code:
#container_top a.gallery:active em img, #container_top a.gallery:focus em img {
        position: absolute;
        bottom: 0;
        left: 40px;
        }
 
Schönen guten Morgen,

vielen Dank michaelsinterface, das funktioniert prächtig!!

Jetzt kann es sein, daß ich mich noch einmal melde, denn diesen Code muß ich analysieren. Verstehe ihn noch nicht.

Auf alle Fälle ist das Problem gelöst!

Arbeitsreichen Tag noch allen :-)
 
Guten Morgen quidnovi ;)

Zur Erläuterung: Ich habe diese Selektoren

Code:
#container_top a.gallery:active em, #container_top a.gallery:focus em
jeweils um das img-Element erweitert, um für die Grafiken eine Positionierung innerhalb des em-Elements vornehmen zu können.

Ich wünsche dir ebenfalls einen guten Start in die neue Woche ;)
 
Status
Nicht offen für weitere Antworten.
Zurück