Ergebnis 1 bis 5 von 5

Thema: kleines CSS-problem

  1. #1
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard kleines CSS-problem

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    <head>
    	<title>Untitled</title>
    	<style type="text/css">
    #wrapperdiv&#123;
    overflow&#58;hidden;
    width&#58;585px;
    
    &#125;
     #showdiv&#123;
    	float&#58;left;
      &#125;
      
    #showdiv img&#123;
     	width&#58;405px;
     	height&#58;254px;
     	float&#58;left;
      &#125;
      
    #prevdiv&#123;
    	background&#58;#F5F4F1;
    	height&#58;254px;
     	width&#58;173px;
     	float&#58;right;
      &#125;
      
    #galnavi&#123;
    tex-align&#58;right;
    padding-left&#58;405px;
    
    &#125;
    
    #galnavi h4&#123;
      background&#58;#F5F4F1;
      font-size&#58;115%;
      font-weight&#58;bold;
      width&#58;173px;
      text-align&#58;center;
      clear&#58;both;
      margin&#58;0px;
      padding&#58;0px 0px 9px 0px;
      
      &#125;
    
    .navipic_r&#123;
    padding&#58;0px 10px 0px 10px;
    display&#58;inline;
    &#125;
    
    .navipic_l&#123;
    padding&#58;0px 10px 0px 10px;
    float&#58;left;
    &#125;
      
      
    .hoverthumb &#123;
            -moz-opacity&#58;0.5;                           /* nn>4 ? */
             filter&#58;Alpha&#40;opacity=50, finishopacity=50&#41;; /* ie */ 
             height&#58;80px;
    	     width&#58;80px;
    		 margin-left&#58;6px;
    		 margin-bottom&#58;7px;
    		 float&#58;left;
      &#125;
    	  
    .normalthumb&#123;
    		 height&#58;80px;
    	     width&#58;80px;
    		 margin-left&#58;6px;
    		 margin-bottom&#58;7px;
    		 float&#58;left;
      &#125;  
    	</style>
    </head>
    
    <body>
    <script type="text/javascript">
    bilder = new Array&#40;&#41;;
    
    function hoverpic&#40;obj&#41;&#123;
    		var targetpic = document.getElementById&#40;"anzeigepic"&#41;;
    		var aktuell = obj.id;
    		
    		targetpic.src=bilder&#91;aktuell&#93;.src;
    		obj.className="hoverthumb";
    &#125;
    
    function normalpic&#40;obj&#41;&#123;
       var aktuell = obj.id;
       var targetpic = document.getElementById&#40;"anzeigepic"&#41;;
       targetpic.src=bilder&#91;0&#93;.src;
       obj.className="normalthumb";
    
    &#125;
    
    
    </script>
    		<h2>Aktuelle Galerie&#58; Testgalerie2</h2>
    		
    		<div id="wrapperdiv"><noscript><big>Aktivieren sie bitte JAVASCRIPT für volle Funktionalität der Bildergalerie</big></noscript>
    
    		
    		<div id="showdiv">
    			[img]http&#58;//local.www.wulf-berger.de/public/WUBE/image/image/11999708401199970878.JPG[/img]
    		</div>
    		
    		
    		<div id="prevdiv">
    
    		    <script type="text/javascript">
    		   
    				
    				bilder&#91;0&#93; = new Image&#40;&#41;;
    				bilder&#91;0&#93;.src = "/public/WUBE/image/image/11999708401199970878.JPG"
    				
    
    		    </script>
    		    
    
    						
    			[img]/public/WUBE/image/thumbnail/11999708401199970860.png[/img]
    
    			
    
    		    <script type="text/javascript">
    		   
    				
    				bilder&#91;1&#93; = new Image&#40;&#41;;
    				bilder&#91;1&#93;.src = "/public/WUBE/image/image/11999625321199962917.JPG"
    				
    
    		    </script>
    		    
    
    						
    			[img]/public/WUBE/image/thumbnail/11999625321199962552.png[/img]
    			
    
    		    <script type="text/javascript">
    		   
    				
    				bilder&#91;2&#93; = new Image&#40;&#41;;
    				bilder&#91;2&#93;.src = "/public/WUBE/image/image/11999624751199962933.JPG"
    				
    
    		    </script>
    		    
    
    						
    			[img]/public/WUBE/image/thumbnail/11999624751199962512.png[/img]
    			
    
    		    <script type="text/javascript">
    		   
    				
    				bilder&#91;3&#93; = new Image&#40;&#41;;
    				bilder&#91;3&#93;.src = "/public/WUBE/image/image/11999706781199970728.JPG"
    				
    
    		    </script>
    		    
    
    						
    			[img]/public/WUBE/image/thumbnail/11999706781199970701.png[/img]
    
    			
    
    		    <script type="text/javascript">
    		   
    				
    				bilder&#91;4&#93; = new Image&#40;&#41;;
    				bilder&#91;4&#93;.src = "/public/WUBE/image/image/11999708831199970936.JPG"
    				
    
    		    </script>
    		    
    
    						
    			[img]/public/WUBE/image/thumbnail/11999708831199970914.png[/img]
    			
    
    		    <script type="text/javascript">
    		   
    				
    				bilder&#91;5&#93; = new Image&#40;&#41;;
    				bilder&#91;5&#93;.src = "/public/WUBE/image/image/11999624461199962957.JPG"
    				
    
    		    </script>
    		    
    
    						
    			[img]/public/WUBE/image/thumbnail/11999624461199962457.png[/img]
    			
    
    		<script type="text/javascript">
    		  hoverpic&#40;document.getElementById&#40;"0"&#41;&#41;;
    		  document.getElementById&#40;"0"&#41;.className="normalthumb";
    		</script>
    
    		
    
    
    		
    	</div> 
    	
    		<div id="galnavi">
    			<h4>[img]http&#58;//home.arcor.de/synaptic/hier/Pfeil_l.gif[/img]  Seite 2 von 3  [img]http&#58;//home.arcor.de/synaptic/hier/Pfeil_r.gif[/img]</h4>
    
    		</div>
    	</div>
    </div>
    
    </body>
    </html>
    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!
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  2. #2
    Kaiserliche Hoheit Avatar von No0ob
    Registriert seit
    02.01.2006
    Ort
    Nähe Frankfurt
    Beiträge
    1.500
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    float:left ?
    float:right ?

  3. #3
    Forum Guru
    Themenstarter
    Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard

    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..
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

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

    CSS
    Code:
    #galnavi h4&#123; 
      background&#58;#F5F4F1; 
      font-size&#58;115%; 
      font-weight&#58;bold; 
      width&#58;100px; 
       margin&#58;0px; 
      padding&#58;0; 
      
      &#125; 
    
    .navipic_r&#123; 
    padding&#58;0px 10px 0px 10px; 
    float&#58; right;
    display&#58;inline; 
    &#125; 
    
    .navipic_l&#123; 
    padding&#58;0px 10px 0px 10px; 
    float&#58;left; 
    &#125;
    HTML:

    Code:
    <div id="galnavi"> 
             [img]Pfeil_l.gif[/img][img]Pfeil_r.gif[/img]<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.

  5. #5
    Forum Guru
    Themenstarter
    Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard

    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....
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

Ähnliche Themen

  1. kleines problem
    Von Kyle im Forum HTML & CSS Forum
    Antworten: 12
    Letzter Beitrag: 02.08.2007, 11:47
  2. kleines Problem mit css
    Von nieselfriem im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 24.05.2007, 21:53
  3. kleines CSS Problem
    Von CHoTlMaL im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 13.04.2007, 20:27
  4. Kleines Problem
    Von Bamba im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 15.10.2006, 15:08
  5. Kleines Problem
    Von coach im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 06.04.2005, 21:35

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •