kleines CSS-problem

synaptic

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


<html>
<head>
	<title>Untitled</title>
	<style type="text/css">
#wrapperdiv{
overflow:hidden;
width:585px;


}
 #showdiv{
	float:left;
  }

#showdiv img{
 	width:405px;
 	height:254px;
 	float:left;
  }

#prevdiv{
	background:#F5F4F1;
	height:254px;
 	width:173px;
 	float:right;
  }

#galnavi{
tex-align:right;
padding-left:405px;


}


#galnavi h4{
  background:#F5F4F1;
  font-size:115%;
  font-weight:bold;
  width:173px;
  text-align:center;
  clear:both;
  margin:0px;
  padding:0px 0px 9px 0px;

  }


.navipic_r{
padding:0px 10px 0px 10px;
display:inline;
}


.navipic_l{
padding:0px 10px 0px 10px;
float:left;
}


.hoverthumb {
        -moz-opacity:0.5;                           /* nn>4 ? */
         filter:Alpha(opacity=50, finishopacity=50); /* ie */ 
         height:80px;
	     width:80px;
		 margin-left:6px;
		 margin-bottom:7px;
		 float:left;
  }

.normalthumb{
		 height:80px;
	     width:80px;
		 margin-left:6px;
		 margin-bottom:7px;
		 float:left;
  }  
	</style>
</head>


<body>
<script type="text/javascript">
bilder = new Array();


function hoverpic(obj){
		var targetpic = document.getElementById("anzeigepic");
		var aktuell = obj.id;

		targetpic.src=bilder[aktuell].src;
		obj.className="hoverthumb";
}


function normalpic(obj){
   var aktuell = obj.id;
   var targetpic = document.getElementById("anzeigepic");
   targetpic.src=bilder[0].src;
   obj.className="normalthumb";


}




</script>
		<h2>Aktuelle Galerie: Testgalerie2</h2>

		<div id="wrapperdiv"><noscript>[b]<big>Aktivieren sie bitte JAVASCRIPT für volle Funktionalität der Bildergalerie</big>[/b]</noscript>


		
		<div id="showdiv">
			[img]http://local.www.wulf-berger.de/public/WUBE/image/image/11999708401199970878.JPG[/img]
		</div>


		<div id="prevdiv">


		    <script type="text/javascript">


				bilder[0] = new Image();
				bilder[0].src = "/public/WUBE/image/image/11999708401199970878.JPG"



		    </script>



						
			[img]/public/WUBE/image/thumbnail/11999708401199970860.png[/img]


			


		    <script type="text/javascript">


				bilder[1] = new Image();
				bilder[1].src = "/public/WUBE/image/image/11999625321199962917.JPG"



		    </script>



						
			[img]/public/WUBE/image/thumbnail/11999625321199962552.png[/img]



		    <script type="text/javascript">


				bilder[2] = new Image();
				bilder[2].src = "/public/WUBE/image/image/11999624751199962933.JPG"



		    </script>



						
			[img]/public/WUBE/image/thumbnail/11999624751199962512.png[/img]



		    <script type="text/javascript">


				bilder[3] = new Image();
				bilder[3].src = "/public/WUBE/image/image/11999706781199970728.JPG"



		    </script>



						
			[img]/public/WUBE/image/thumbnail/11999706781199970701.png[/img]


			


		    <script type="text/javascript">


				bilder[4] = new Image();
				bilder[4].src = "/public/WUBE/image/image/11999708831199970936.JPG"



		    </script>



						
			[img]/public/WUBE/image/thumbnail/11999708831199970914.png[/img]



		    <script type="text/javascript">


				bilder[5] = new Image();
				bilder[5].src = "/public/WUBE/image/image/11999624461199962957.JPG"



		    </script>



						
			[img]/public/WUBE/image/thumbnail/11999624461199962457.png[/img]



		<script type="text/javascript">
		  hoverpic(document.getElementById("0"));
		  document.getElementById("0").className="normalthumb";
		</script>


		




		
	</div> 

		<div id="galnavi">
			<h4>[url='#'][img]http://home.arcor.de/synaptic/hier/Pfeil_l.gif[/img][/url]  Seite 2 von 3  [url='#'][img]http://home.arcor.de/synaptic/hier/Pfeil_r.gif[/img][/url]</h4>


		</div>
	</div>
</div>


</body>
</html>

Alles anzeigen

sieht dann so aus: http://home.arcor.de/synaptic/hier/css-prob.html

ist hier jetzt etwas verschoben das "design" im projekt steht das alles richtig, naja fast^^

mein problem sind die beiden pfeile unter der vermeindlcihen galerie... die müssten sozusagen zum rand des umliegenden divs den gleichen abstand haben, auch wenn sich die h4-überschrift ändert.. also selbst bei seite 12 von 13 sollten die pfeile da bleiben wo sie von anfang an sind (sonst springen die und das will ich vermeiden)

wenn jemand ne idee hat und das in kürze wäre ich sehr froh!

sonst hilf mir sejuma!

No0ob

float:left ?
float:right ?

synaptic

schon probiert... aber iregdnwie wills des net so, wie es soll.. die beiden pfeile sollen nen abstand von 10 pixeln zum rand des umfassenden DIV...
da sich die zahlen ändern (seite 2/3 oder 1/5) ändern sich ja auch die abstände der schrift zu den pfeilen...
gibt es da nicht ne möglichkeit das irgendwie so zu machen, daß die FIX sind?

ode rmuss ich dann mit position:relative arbeiten?

edit; die pfeile werden automatisch generiert, sobald man mehr galerie-seiten hat...

also bei 6 bildern passiert nichts, bei 7 kommt ein pfeil, bei 13 bildern kommen beide pfeile ins spiel, sobald man auf seite 2 von 3 ist..

sejuma

So in etwa sollte es (im IE7) hinhauen. Den Bilderpfad musst du nochmal anpassen, hatte ich zum Testen geändert.

CSS

Code

#galnavi h4{ 
  background:#F5F4F1; 
  font-size:115%; 
  font-weight:bold; 
  width:100px; 
   margin:0px; 
  padding:0; 

  } 


.navipic_r{ 
padding:0px 10px 0px 10px; 
float: right;
display:inline; 
} 


.navipic_l{ 
padding:0px 10px 0px 10px; 
float:left; 
}

Alles anzeigen

HTML:

Code

<div id="galnavi"> 
         [url='#'][img]Pfeil_l.gif[/img][/url][url='#'][img]Pfeil_r.gif[/img][/url]<h4>  Seite 2 von 3 </h4>  
</div>

Wenn links und rechts gefloatet ist, kommt das nicht gefloatete Element nicht in die Mitte, wie von der Anordnung her eigentlich logisch, sondern ans Ende.

synaptic

danke an alle, die sich dem prob angenommen haben!
musste jedoch (wie ich anfangs auch vermutet hatte) transparente gifs nehmen, um den platz vor-auszufüllen, da die linkpfeile ja per if-anweisung serverside eingefügt werden....

Tags