kostenloser Webspace werbefrei: lima-city

Vinaora Nivo Slider mittig zentrieren

lima-city → Forum → Die eigene Homepage → Homepage Allgemein

all alpha auto beschreibung bild blocken boxen code cursor display filter http image index moment pointer position text url verzeichnis
  1. Autor dieses Themas

    sta-testseite

    sta-testseite hat kostenlosen Webspace.

    14:48, 17.1.2015
    Hallo,

    ich möchte den Vinaora Nivo Slider mittig zentrieren, egal welche größe das bild hat, im Moment wenn ich es auf auto setze vergrößer mir Vinaora Nivo Slider das Bild proportional auf die ganze seite, setze ich z.b. feste größen an wie 400px auf 800px ist das nur links und nicht mittig wie ich es eigentlich haben möchte.

    Was kann ich verbessern? http://sta-testseite.lima-city.de/index.php/gemeindeleben

    Hoffe ich hab die richtige datei

    aus verzeichnis (/sta-testseite/media/mod_vt_nivo_slider/themes/default)

    /*
Skin Name: Nivo Slider Default Theme
Skin URI: http://nivo.dev7studios.com
Description: The default skin for the Nivo Slider.
Version: 1.3
Author: Gilbert Pellegrom
Author URI: http://dev7studios.com
Supports Thumbs: true
*/

.theme-default .nivoSlider {
	position:relative;
	background:#fff url(loading.gif) no-repeat 50% 50%;
	margin-bottom:10px;
	-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
	-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
	box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
.theme-default .nivoSlider a {
	border:0;
	display:block;
}

.theme-default .nivo-controlNav {
	text-align: center;
	padding: 20px 0;
}
.theme-default .nivo-controlNav a {
	display:inline-block;
	width:22px;
	height:22px;
	background:url(bullets.png) no-repeat;
	text-indent:-9999px;
	border:0;
	margin: 0 2px;
}
.theme-default .nivo-controlNav a.active {
	background-position:0 -22px;
}

.theme-default .nivo-directionNav a {
	display:block;
	width:30px;
	height:30px;
	background:url(arrows.png) no-repeat;
	text-indent:-9999px;
	border:0;
	opacity: 0;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
}
.theme-default:hover .nivo-directionNav a { opacity: 1; }
.theme-default a.nivo-nextNav {
	background-position:-30px 0;
	right:15px;
}
.theme-default a.nivo-prevNav {
	left:15px;
}

.theme-default .nivo-caption {
	font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
	color:#fff;
	border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
	color:#fff;
}

.theme-default .nivo-controlNav.nivo-thumbs-enabled {
	width: 100%;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled a {
	width: auto;
	height: auto;
	background: none;
	margin-bottom: 5px;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled img {
	display: block;
	width: 120px;
	height: auto;
}


    noch eine weitere datei aus verzeichnis
    /sta-testseite/media/mod_vt_nivo_slider/css

    glaube das ist die richtige :biggrin: hoffe ich :slant:

    /*
 * jQuery Nivo Slider v3.2
 * http://nivo.dev7studios.com
 *
 * Copyright 2012, Dev7studios
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */
 
/* The Nivo Slider styles */
.nivoSlider {
	position:relative;
	width:100%;
	height:auto;
	overflow: hidden;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
	max-width: none;
}
.nivo-main-image {
	display: block !important;
	position: relative !important; 
	width: 100% !important;
}

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:6;
	display:none;
	background:white; 
	filter:alpha(opacity=0); 
	opacity:0;
}
/* The slices and boxes in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:5;
	height:100%;
	top:0;
}
.nivo-box {
	display:block;
	position:absolute;
	z-index:5;
	overflow:hidden;
}
.nivo-box img { display:block; }

/* Caption styles */
.nivo-caption {
	position:absolute;
	left:0px;
	bottom:0px;
	background:#000;
	color:#fff;
	width:100%;
	z-index:8;
	padding: 5px 10px;
	opacity: 0.8;
	overflow: hidden;
	display: none;
	-moz-opacity: 0.8;
	filter:alpha(opacity=8);
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
.nivo-caption p {
	padding:5px;
	margin:0;
}
.nivo-caption a {
	display:inline !important;
}
.nivo-html-caption {
	display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
	position:absolute;
	top:45%;
	z-index:9;
	cursor:pointer;
}
.nivo-prevNav {
	left:0px;
}
.nivo-nextNav {
	right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
	text-align:center;
	padding:15px 0;
}
.nivo-controlNav a {
	cursor:pointer;
}
.nivo-controlNav a.active {
	font-weight:bold;
}



    Beitrag zuletzt geändert: 17.1.2015 15:49:48 von sta-testseite

  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. hechma

    Kostenloser Webspace von hechma

    hechma hat kostenlosen Webspace.

    12:19, 18.1.2015
    hallo sta-testseite,


    damit dein slider mittig auf der seite steht gibt es eine vielzahl von möglichkeiten. die einfachtse wäre wohl wenn du im css am ende diese auszeichnungen hinzufügst:
    .vt_nivo_slider {
	text-align:center;
}
#vtnivo100 {
	margin:0px auto;
}


    lg hechma
  4. Autor dieses Themas

    sta-testseite

    sta-testseite hat kostenlosen Webspace.

    16:02, 18.1.2015
    Super echt klasse es hat funktioniert :thumb:

    Vielen vielen dank, seit ner woche suche ich bei google die richtige lösung doch nichts passendes dabei...
    Das einzige problem bei deiner Lösung ist, dass die beschreibung des Bilder ebenfals zentriert läuft, aber das ist mir im moment echt egal :biggrin:

    Übrigens hab gemerkt das ich das in dieser Datei einfügen musste

    /sta-testseite/media/mod_vt_nivo_slider/css/nivo-slider.min.css 

    .nivoSlider{position:relative;width:100%;height:auto;overflow:hidden}
.nivoSlider img{position:absolute;top:0;left:0;max-width:none}
.nivo-main-image{display:block!important;position:relative!important;width:100%!important}
.nivoSlider a.nivo-imageLink{position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none;background:white;filter:alpha(opacity=0);opacity:0}
.nivo-slice{display:block;position:absolute;z-index:5;height:100%;top:0}
.nivo-box{display:block;position:absolute;z-index:5;overflow:hidden}
.nivo-box img{display:block}
.nivo-caption{position:absolute;left:0;bottom:0;background:#000;color:#fff;width:100%;z-index:8;padding:5px 10px;opacity:.8;overflow:hidden;display:none;-moz-opacity:.8;filter:alpha(opacity=8);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.nivo-caption p{padding:5px;margin:0}
.nivo-caption a{display:inline!important}
.nivo-html-caption{display:none}
.nivo-directionNav a{position:absolute;top:45%;z-index:9;cursor:pointer}
.nivo-prevNav{left:0}
.nivo-nextNav{right:0}
.nivo-controlNav{text-align:center;padding:15px 0}
.nivo-controlNav a{cursor:pointer}
.nivo-controlNav a.active{font-weight:bold}
.vt_nivo_slider {
    text-align:center;
}
#vtnivo100 {
    margin:0px auto;
}


    die andere war "nivo-slider.css" da ist nichts passiert nach dem ich es eingefügt hatte

  5. hechma

    Kostenloser Webspace von hechma

    hechma hat kostenlosen Webspace.

    23:12, 18.1.2015
    prima,


    du kannst das text-align des zweiten containers natürlich wieder auf links setzen um die beschreibung nicht zentriert zu haben:
    .vt_nivo_slider {
    text-align:center;
}
#vtnivo100 {
    margin:0px auto;
    text-align:left;
}


    lg hechma
  6. Autor dieses Themas

    sta-testseite

    sta-testseite hat kostenlosen Webspace.

    7:21, 19.1.2015
    Hab was angestellt der code geht nicht mehr, da ich sehr viele fehler hatte, hab ich kurzerhand ein neues Backup eingespielt und dabei gleichzeitig den Template "SJ Plus" aktualisiert und seit dem funtioniert der code nicht mehr, könntes du bitte nochmal auf die Webseite reinschauen?

    http://sta-testseite.lima-city.de/index.php/test

    habe dein code in "nivo-slider.min.css" und in "nivo-slider.css" am ende kopiert doch es wird nicht übernommen, cache habe ich geleert



    Beitrag zuletzt geändert: 19.1.2015 20:46:40 von sta-testseite

  7. hechma

    Kostenloser Webspace von hechma

    hechma hat kostenlosen Webspace.

    14:14, 21.1.2015
    ja anscheinend haben sich die ids geändert...
    versuchs mal so:

    .vt_nivo_slider {
    text-align:center;
}
.vt_nivo_slider > div {
    margin:0px auto;
    text-align:left;
}

    lg hechma
  8. Autor dieses Themas

    sta-testseite

    sta-testseite hat kostenlosen Webspace.

    23:22, 26.1.2015
    Super hat bestens geklappt :thumb:

    Danke nochmal

  9. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

Login zum Webhosting ohne Werbung!

Hast Du schon kostenlosen Webspace oder bist Du auf der Suche nach WordPress-Hosting mit Staging-Funktion und wp-cli? Jetzt günstige Prepaid Domains registrieren!