Suche im Forum:
Suchen


Autor Nachricht
Beitrag24.06.2013 um 20:31 (UTC)    
Titel: Slider Positionierung funzt nicht?

Hallo Leute,
brauch mal wieder ein paar optimierungs Tipps.
Ich habe den Slider Code von Daniel (www.omba.de.tl) auf meiner Startseite "Home" eingefügt. Soweit funktioniert er auch nur mit der Positionierung auf der Seite habe ich Probleme.

Der Slider wird links auf der Seite positioniert, ich hätte ihn aber gerne mittig.
Über den Editor kann ich zwar die Position ändern aber dann wird er so verschoben, dass es nicht mehr passt?
Im Code habe ich versucht mit "center" zu arbeiten aber da tut sich nichts.

Zum schauen www.aikidotvd.de oder hier der Code:

Ich hoffe ihr könnt mir helfen?

Gruß aikidotvd

----------------------------------------------------------------------------------------------------------
Zitat:
<style type="text/css">
<!--

.clear {clear:both;}

#gallery {position:relative; height: 300px; }

#gallery a {float:left; position:absolute; }

#gallery a img {border:none;}

#gallery a.show {z-index:500;}

#gallery .caption {
z-index: 600;
background-color: #;
color: #000;
height: 100px;
width: 100%;
position: absolute;
bottom: 0; }

#gallery .caption .content {margin:5px;}

#gallery .caption .content h3 {margin:0; padding:0; color:#1DCCEF; }
--></style><br />
<h2 style="text-align: left;"><strong>Hier ein paar Aufnahmen von der Haaaaner Kerb.....</strong></h2>
<div>&nbsp;</div>
<div id="gallery">
<div style="text-align: left;"><a href="#"><img width="375" height="500" src="http://img.webme.com/pic/a/aikidotvd/haanerkerb201310.jpg" rel="&lt;h3&gt;" alt="Grass Blades" /></a><a href="#"><img width="400" height="300" src="http://img.webme.com/pic/a/aikidotvd/haanerkerb20132.jpg" rel="&lt;h3&gt;" alt="Grass Blades" title="" /></a><a href="#"><img width="400" height="300" src="http://img.webme.com/pic/a/aikidotvd/haanerkerb20131.jpg" rel="&lt;h3&gt;" alt="Grass Blades" title="" /> </a><a href="#"><img width="400" height="300" src="http://img.webme.com/pic/a/aikidotvd/haanerkerb20133.jpg" rel="&lt;h3&gt;" alt="Grass Blades" title="" /> </a><a href="#"><img width="400" height="300" src="http://img.webme.com/pic/a/aikidotvd/haanerkerb20134.jpg" rel="&lt;h3&gt;" alt="Grass Blades" title="" /> </a><a href="#"><img width="400" height="300" src="http://img.webme.com/pic/a/aikidotvd/haanerkerb20135.jpg" rel="&lt;h3&gt;" alt="Grass Blades" title="" /> </a><a href="#"><img width="300" height="300" src="http://img.webme.com/pic/a/aikidotvd/haanerkerb20136.jpg" rel="&lt;h3&gt;" alt="Grass Blades" title="" /> </a><a href="#"><img width="400" height="300" src="http://img.webme.com/pic/a/aikidotvd/haanerkerb20137.jpg" rel="&lt;h3&gt;" alt="Grass Blades" title="" /> </a><a href="#"><img width="400" height="300" src="http://img.webme.com/pic/a/aikidotvd/haanerkerb20138.jpg" rel="&lt;h3&gt;" alt="Grass Blades" title="" /> </a><a href="#"><img width="400" height="300" src="http://img.webme.com/pic/a/aikidotvd/haanerkerb20139.jpg" rel="&lt;h3&gt;" alt="Grass Blades" title="" /> </a></div>
<div class="caption">
<div class="content">&nbsp;</div>
</div>
</div>
<div class="clear">&nbsp;</div>



Edit by Matsk: BB-Codes eingefügt -> Verbesserte Darstellung.


Zuletzt bearbeitet von aikidotvd am 25.06.2013, 07:07, insgesamt einmal bearbeitet
Beitrag25.06.2013 um 06:07 (UTC)    
Titel:

Heyho,
ich habe einmal deinen Code abgewandelt und die Stelle markiert, die die Positionierung ermöglicht:

Zitat:
<style type="text/css">
<!--

.clear {clear:both;}

#gallery {position:relative; height: 300px; left: 23%;}

#gallery a {float:left; position:absolute; }

#gallery a img {border:none;}

#gallery a.show {z-index:500;}

#gallery .caption {
z-index: 600;
background-color: #;
color: #000;
height: 100px;
width: 100%;
position: absolute;
bottom: 0; }

#gallery .caption .content {margin:5px;}

#gallery .caption .content h3 {margin:0; padding:0; color:#1DCCEF; }
--></style><br />
<h2 style="text-align: left;"><strong>Hier ein paar Aufnahmen von der Haaaaner Kerb.....</strong></h2>
<div>&nbsp;</div>
<div id="gallery">
<div style="text-align: left;"><a href="#"><img width="375" height="500" src="http://img.webme.com/pic/a/aikidotvd/haanerkerb201310.jpg" rel="&lt;h3&gt;" alt="Grass Blades" /></a><a href="#"><img width="400" height="300" src="http://img.webme.com/pic/a/aikidotvd/haanerkerb20132.jpg" rel="&lt;h3&gt;" alt="Grass Blades" title="" /></a><a href="#"><img width="400" height="300" src="http://img.webme.com/pic/a/aikidotvd/haanerkerb20131.jpg" rel="&lt;h3&gt;" alt="Grass Blades" title="" /> </a><a href="#"><img width="400" height="300" src="http://img.webme.com/pic/a/aikidotvd/haanerkerb20133.jpg" rel="&lt;h3&gt;" alt="Grass Blades" title="" /> </a><a href="#"><img width="400" height="300" src="http://img.webme.com/pic/a/aikidotvd/haanerkerb20134.jpg" rel="&lt;h3&gt;" alt="Grass Blades" title="" /> </a><a href="#"><img width="400" height="300" src="http://img.webme.com/pic/a/aikidotvd/haanerkerb20135.jpg" rel="&lt;h3&gt;" alt="Grass Blades" title="" /> </a><a href="#"><img width="300" height="300" src="http://img.webme.com/pic/a/aikidotvd/haanerkerb20136.jpg" rel="&lt;h3&gt;" alt="Grass Blades" title="" /> </a><a href="#"><img width="400" height="300" src="http://img.webme.com/pic/a/aikidotvd/haanerkerb20137.jpg" rel="&lt;h3&gt;" alt="Grass Blades" title="" /> </a><a href="#"><img width="400" height="300" src="http://img.webme.com/pic/a/aikidotvd/haanerkerb20138.jpg" rel="&lt;h3&gt;" alt="Grass Blades" title="" /> </a><a href="#"><img width="400" height="300" src="http://img.webme.com/pic/a/aikidotvd/haanerkerb20139.jpg" rel="&lt;h3&gt;" alt="Grass Blades" title="" /> </a></div>
<div class="caption">
<div class="content">&nbsp;</div>
</div>
</div>
<div class="clear">&nbsp;</div>


Anstatt von 23% kannst du natürlich auch andere Angaben verwenden ;-)

Beste Grüße,
Mats
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de