Bilder fixieren, auf einem Punkt erscheinen

A

amberrachel

Mitglied
Hallo ihr lieben

durch die hilfe in dem formun habe ich nun meine Bilder mit hover gros gemacht, doch imer nur wnnich über ein bild fahrne so dass sie nun wenn ich beim unterst hin komme es nur nich hal sichebar ist.
Meine Frage kan ich die bilder so machen das sie scrollbar sind nach unten aber imer auf der rechten Seite so gezeit werden dass sie am gleich ort gezeiht sind so in der mitte?

lg
rahel
 
Hi,

hast du bitte mal einen Link zu deiner Seite?

Denn nach meinem Lösungsansatz von vergangener Nacht kann ich gerade überhaupt nicht nachvollziehen, weshalb das unterste Bild beim Vergrößern im Fenster nicht mehr sichtbar sein sollte.

mfg Maik
 
Tja, hochladen würde ich mal sagen, denn es erleichtert die konkrete Hilfestellung ungemein, wenn das Problem begutachtet werden kann.

Bis dahin lass mich mal raten: Von dem vergrößerten Bild am unteren Ende des Browserfensters ist sein unterer Teil nicht sichtbar.

Ergo könntest du beispielsweise für das <body>-Element einen unteren Innenabstand festlegen, der die Höhendifferenz zwischen der kleinen und großen Bildanzeige beträgt - beispielsweise:

CSS: 
body {
padding-bottom: 100px;
}

Und schau mal bitte, dass du zukünftig deine Beiträge vor dem Abschicken nochmal auf Tippfehler überprüfst, die du da am laufenden Band produzierst, und mitunter zum Verständnis ein mehrfaches Lesen der einzelnen Sätze erfordern - vielen Dank! ;)

mfg Maik
 
danke werde ich versuchen leider kan ich die seite nicht selber auf schalten da ssie nicht immoent öffentlich sein darf

also hier die sachen die ich habe html und eine externes css
hoffe das hilft?

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  <html>
  <head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link type="text/css" rel="stylesheet" href="../../css/framemitte.css" />

 <title>Titel</title>
 
 <style type="text/css">

a img.hoverClass 
{
    display:block;
    width:150px;
    height:100px;
	float: center;
	position: absolut;

}

a:hover 
{  /* Für IE6 */
    border:none;
}

a:hover img.hoverClass 
{display:block;
    width:320px;
    height:230px;
}position:absolute;bottom:-110px;left:32px;

width:300px;

padding:1px;
font:normal 14px verdana, sans-serif;}

/*--Spezialangaben für den Internet Explorer 7--*/
*+html #galerie a:hover { z-index: 1;}
*+html #galerie li{position: static;}
*+html #galerie a {position: relative;}

/*--Spezialangaben für den Internet Explorer 6--*/
*html #galerie a:hover {display: block; z-index: 1;}
*html #galerie li{position: static;}
*html #galerie a {position: relative;} 

</style> 

   </head>
 
<body bgcolor="#dddddd">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">

 <tr>
  <td><img src="bilder/Reaktor_Teil.jpg" alt="Reaktor_Bearbeitung" width=200 height=140/>

 </td>
  <td><p class="kopfleiste"> Zitat<br />
							
</a></td>
 </tr>
 <tr>
  <td colspan="2" align=center>  <p><h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Spruch</h2> </td><p />
 </tr>
 <tr>
  <td colspan="2">
  <p class= "text">
sdf
<a href="bilder/Puffer 001.jpg"><img src="bilder/Puffer 001.jpg" class="hoverClass" ...></a>   </p>
sdf
<a href="bilder1.JPG"><img src="bilder1.JPG" class="hoverClass" ...></a>   </p>
ds
<a href="bilder2.JPG"><img src="bilder2.JPG" class="hoverClass" ...></a>   </p>
sdf
<a href="bilder3.JPG"><img src="bilder3.JPG" class="hoverClass" ...></a>   </p>
sdfsf
<a href="bilder4.JPG"><img src="bilder4.JPG" class="hoverClass" ...></a>   </p>
</p>
    <p class="fussleiste">&copy; 2010 </p>
	</td>
  </tr>
</table>

CSS
CSS: 
body /*gilt für ganzer Text aus es gibt Ausnahmen wie die unteren aufzeigen, dann gelten diese.*/
	{		/* Text formatierung*/
			font-family: Veranda, Geneva, Arial, Sans-serif;
			background-color: #dddddd;
			color: #000066; 
			font-size: 14px;
			font-weight: normal;
			padding: 25px;
			padding-left: 80px;
			margin: 0px;
			/*für Rahmen*/
			border-color:#0333ff;
			border-style: solid; 
			border-width: 5px;
		
#bild1{		
		border-width: thin;
		border-style: solid;
		border-color: #0333ff;}

						 
#mitte {	font-weight: bold;
				font-size: 130%;
				padding: 55px;
				border-width: thin;
		border-style: solid;
		border-color: yellow;}
		
				
.h1 {		font-size: 250%; 

				
p.untertittel{	font-size: 150%;
			Padding-left: 230px;
				}
				

p.text{		font-size: 110%;
}

p.textklein {font-size: 98%;
}
				}


p.fussleiste{font-size: 0.5em;}
 
Zuletzt bearbeitet von einem Moderator:
*hüstel*

Hast du die Funktionalität der Seite schonmal in einem Browser überprüft, der nicht aus Redmond stammt?

Erstaunlich, wie tolerant der IE deine unzähligen Syntax-Fehler in beiden Stylesheets wegschluckt, und deren Code überhaupt ausführt :suspekt:

Bei Unklarheiten bitte http://jigsaw.w3.org/css-validator/ konsultieren, denn ich möchte jetzt nicht auf jeden einzelnen Fehler näher eingehen, da dies hier den Rahmen sprengen würde.

Naja, wie auch immer, auf jeden Fall lag ich mit meiner Vermutung richtig, und hab dir die Lösung aufgezeigt.

mfg Maik
 
Wundert es dich bei dieser Positionsangabe, die das Element um 110px in den nicht einsehbaren Bereich des unteren Fensterrands verschiebt?

CSS: 
bottom:-110px;

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück