NivoSlider Größe anpassen.

[Rigor]

Hallo erstmal. Dies ist mein erster Post hier in diesem Forum und gleichzeitig auch meine erste Frage, hoffe ihr könnt mir helfen. :)

Ich bastel zur Zeit an einer Website und möchte dort den Nivo-Slider einbauen.

link: http://www.tischlerei-perschon.de

Ich habe lange herumprobieren müssen um die Größe des Sliders auf 615x305px zu bekommen. Am Ende habe ich einfach den ganzen Container in einen weiteren Container (<div class="diashow">)gesteckt und dem die Größe zugewiesen.
Wie man jedoch erkennen kann, kann ich auf die Pfeile links und rechts der Bilder nicht zugreifen, da sich die nicht richtig aktivieren lassen. Hat jemand eine Idee woran das liegt und wie ich das ändern kann?

Hier der Code:
//HTML
<div class="diashow">
<div class="slider-wrapper theme-default">
<div class="ribbon">
</div>
<div id="slider" class="nivoSlider">
<img src="bilder/home_slideshow/IMG_2121.jpg"/>
<img src="bilder/home_slideshow/IMG_2122.jpg"/>
<img src="bilder/home_slideshow/IMG_2127.jpg"/>
<img src="bilder/home_slideshow/IMG_2130.jpg"/>
<img src="bilder/home_slideshow/IMG_2131.jpg"/>
<img src="bilder/home_slideshow/IMG_3067.jpg"/>
</div>
</div>
</div>

//CSS
.diashow {
width: 615px;
margin-right: 5px;
float: left;
}
#slider {
width: 615px;
height: 305px;
}
.nivoSlider {
position:relative;
width:615px;
height:305px;
overflow: hidden;
}


Edit: Ok durch herumprobieren habe ich nun zumindest die Fehlerquelle gefunden, es ist die Drop-Down Navigation.
Die Navi habe ich per <iframe> eingebunden.
Hat jemand eine idee was ich tun kann, damit die Navi und der Slider sich nicht mehr ins Gehege kommen?
Im Prinzip würde es mir auch reichen, wenn ich die Vor- und Zurück Pfeile der Slideshow einfach nach unten setzen könnte. Also an den unten Bildrand. Nur leider weiß ich nicht, wie das geht.

Hier der Code dazu:

iframe {
height: 250px;
width: 930px;
position: relative;
z-index: 99;
}

 

[bdt600]

Die Navi habe ich per <iframe> eingebunden.

Warum?

Im Prinzip würde es mir auch reichen, wenn ich die Vor- und Zurück Pfeile der Slideshow einfach nach unten setzen könnte.

In der nivo-slider.css findest du das

.nivo-directionNav a {
   position:absolute;
   top:45%;
   z-index:9;
   cursor:pointer;
}

Den Wert von top einfach höher setzen

 

[Rigor]

Vielen dank schon mal für die Antwort. Ich probiere das gleich mal aus sobald ich wieder zugriff auf meine Dateien habe.

Die Navigation habe ich per iframe eingebunden, damit ich eventuelle Anderungen in der Navigation nicht für jede Unterseite der Website extra machen muss (falls mal ein Menüpunkt hinzukommt, bzw entfernt wird).

Gibt es da auch bessere Lösungen? (bin noch nicht so bewandert im programmieren)

 

[bdt600]

Gibt es da auch bessere Lösungen?

Ich benutze mittlerweile immer PHP. Bei einer neuen Homepage erstelle ich einmal das Layout und zerlege dann die HTML-Datei in einzelne Bereiche, w.z.B. Header, Banner, Menü, Content und Footer. Für jede Seite ändere ich dann nur noch den Content und fertig. Da bei einfachen Seiten nicht wirklich viel PHP-Kenntnisse erforderlich sind, bekommt das auch ein Anfänger relativ schnell hin. Meine index.php sieht dann ungefähr so aus:

<?php
   include ('./includes/header.html');
   include ('./includes/banner.html');
   include ('./includes/menu.html');
   include ('./includes/index.html');
   include ('./includes/footer.html');
?>

Das ist jetzt alles etwas vereinfacht dargestellt, aber vom Prinzip kommt man damit sogar hin.

 

[Chronos]

Vielen dank schon mal für die Antwort. Ich probiere das gleich mal aus sobald ich wieder zugriff auf meine Dateien habe.

Die Navigation habe ich per iframe eingebunden, damit ich eventuelle Anderungen in der Navigation nicht für jede Unterseite der Website extra machen muss (falls mal ein Menüpunkt hinzukommt, bzw entfernt wird).

Gibt es da auch bessere Lösungen? (bin noch nicht so bewandert im programmieren)

Du könntest bspw. Template benutzen. Das habe ich zwar auch noch nicht oft gemacht aber wenn dann habe ich das mit PHP gemacht.
Ganz grob könnte man sagen, du schreibst dir ein Template in PHP mit deinem Menü

<?php
    echo '<nav></nav>';
?>

Un diese Datei/dieses Template kannst du dann mit include auf deiner Hauptseite einbinden.
Das nur mal in etwa wie man das machen könnte.

 

[Rigor]

So, hatte nun Gelegenheit den Tipp von bdt600 auszuprobieren und es hat perfekt geklappt. Vielen Dank dafür! Thread kann somit als abgeschlossen gemarked werden @mods.

Das mit dem PHP scheint ne wirklich gute Idee zu sein, nur hab ich da überhaupt keinen Schimmer, bin momentan auch noch mit CSS und Jquery gut beschäftigt.
Wie komme ich denn da am besten rein? Erstmal einfach die PHP Basics pauken?