Centrer les photos portrait sur un slider par benoitharle - page 1

Bonjour,

j'ai un slider ou j'ai mis des photos portrait et paysage, seulement les photos portrait se mettent à droite du slider... super!

savez-vous comment je dois changer le code css pour qu'il me les centre?

merci

Dossier/

CSS/

skin 1/

style.css

iview.css

reset.css

styles.css

IMG/

JS/

photos/

slideshow.html

code html slideshow.html:

<!DOCTYPE html>
<html>
    <head>
        <title>iView&trade; v2.0</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="css/styles.css" />
        <link rel="stylesheet" href="css/iview.css" />
        <link rel="stylesheet" href="css/skin 1/style.css" />
        <script src="js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="js/raphael-min.js"></script>
        <script type="text/javascript" src="js/jquery.easing.js"></script>

        <script src="js/iview.js"></script>
        <script>
            $(document).ready(function(){
                $('#iview').iView({
                    pauseTime: 7000,
                    directionNav: false,
                    controlNav: true,
                    tooltipY: -15
                });
            });
        </script>

    </head>

    <body>
<div id="cont">
        <div id="header">
            <div class="container">
                <h1 class="logo">Celine Photographie</h1>
     
                <div id="nav">
                    <ul>
                        <li class="active"><a href="Acceuil.html">ACCEUIL</a></li>
                        <li><a href="Bebes.html">BEBE</a></li>
                        <li><a href="Baptemes.html">BAPTEME</a></li>
                        <li><a href="Grossesses.html">GROSSESSE</a></li>
                        <li><a href="Marriages.html">MARRIAGE</a></li>
                    </ul>
                </div>
            </div>
        </div>

    <div class="container">
        <div id="iview">
            <div data-iview:image="photos/Jade et aaron/DSC_0013.jpg" data-iview:transition="slice-top-fade,slice-right-fade">
                <!-- photo 1 -->
            </div>

            <div data-iview:image="photos/Jade et aaron/DSC_0022.jpg" data-iview:transition="zigzag-drop-top,zigzag-drop-bottom" data-iview:pausetime="3000">
                <!-- photo 2 -->
            </div>

            <div data-iview:image="photos/Jade et aaron/DSC_0028.jpg" data-iview:type="video" data-iview:transition="strip-right-fade,strip-left-fade">
                <!-- photo 3 -->
            </div>

            <div data-iview:image="photos/Jade et aaron/DSC_0040.jpg">
                <!-- photo 4 -->
            </div>

            <div data-iview:image="photos/Jade et aaron/DSC_0042.jpg">
                <!-- photo 5 -->
            </div>

            <div data-iview:image="photos/Jade et aaron/DSC_0051.jpg">
                <!-- photo 6 -->
            </div>
           
            <div data-iview:image="photos/Jade et aaron/DSC_0060.jpg">
                <!-- photo 7 -->
            </div>
           
            <div data-iview:image="photos/Jade et aaron/DSC_0072.jpg">
                <!-- photo 8 -->
            </div>
           
            <div data-iview:image="photos/Jade et aaron/DSC_0078.jpg">
                <!-- photo 9 -->
            </div>
           
            <div data-iview:image="photos/Jade et aaron/DSC_0079.jpg">
                <!-- photo 10 -->
            </div>
           
            <div data-iview:image="photos/Jade et aaron/DSC_0082.jpg">
                <!-- photo 11 -->
            </div>
           
            <div data-iview:image="photos/Jade et aaron/DSC_0094.jpg">
                <!-- photo 12 -->
            </div>
           
            <div data-iview:image="photos/Jade et aaron/DSC_0099.jpg">
                <!-- photo 13 -->
            </div>
           
            <div data-iview:image="photos/Jade et aaron/DSC_0106.jpg">
                <!-- photo 14 -->
            </div>
           
            <div data-iview:image="photos/Jade et aaron/DSC_0144.jpg">
                <!-- photo 15 -->
            </div>
           
            <div data-iview:image="photos/Jade et aaron/DSC_0166.jpg">
                <!-- photo 16-->
            </div>
        </div>
    </div>

    <div class="copy">Made by <a href="http://iprodev.com/">Hemn Chawroka</a>.<br>Copyright &copy 2012. All rights reserved.</div>
</div>

<div id="background-image">
    <img src="img/bg1.jpg" width="1820" height="1024" />
</div>
<script type="text/javascript" src="js/jquery.fullscreen.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#background-image").fullscreenBackground();
    });
</script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-30854466-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
    </body>
</html>

code CSS styles.css:

@import url('http://fonts.googleapis.com/css?family=Ubuntu:regular,italic,bold,bolditalic&subset=cyrillic,greek,latin');

@import url('reset.css');

* {
	padding: 0px;
	margin: 0px;
	font-family: 'Ubuntu', Tahoma;
	line-height: 100%;
	outline: none;
}

html {
	border: 0px;
	background:url(../img/bg1.jpg);  /*   no */
}

body {
	color: #FFF;
	font-size: 9pt;
	cursor: default;
}

.clear {
	clear: both;
	padding: 0px;
	margin: 0px;
	height: 0px;
}

a {
	text-decoration: none;
	cursor: pointer;
	color: #d0d9de;
}

a:hover {
	color: #FFF;
}

#cont {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 70;
	overflow: auto;
}

.copy {
	text-shadow: #111 1px 1px 0px;
	text-align: center;
	padding: 10px 0px;
	line-height: 150%;
}

/* ========================================================
   Top bar
   ===================================================== */
#header {
	z-index: 10000;
	height: 37px;
	line-height: 37px;
	padding-bottom: 2px;
	color: #ddd;
	text-shadow: 0 -1px black;
	background: url(../img/topbar.png) repeat-x;
	margin-bottom: 20px;
}
#header .container {
	width: 1004px;
	margin-left: auto;
	margin-right: auto;
}
#header a {
	line-height: 36px;
}
#header ul {
	list-style: none;
}
#header h1 {
	float: left;
	font-size: 16px;
}
#header h1, #header h1 a {
	color: #eee;
}
#header h1 a {
	display: block;
	text-decoration: none;
}
#header h1 a:hover {
	color: #fff;
}
#header #nav {
	float: right;
	border-left: 1px solid #2f4b56;
	border-left: 1px solid rgba(255, 255, 255, 0.05);
	border-right: 1px solid #111;
}
#header #nav li {
	float: left;
}
#header #nav a {
	height: 36px;
	display: block;
	padding: 0 15px;
	color: #d0d9de;
	border-left: 1px solid #191919;
	border-right: 1px solid #2f4b56;
	border-right: 1px solid rgba(255, 255, 255, 0.05);
	text-decoration: none;
	cursor: pointer;
}
#header #nav a:hover {
	background: url(../img/topbar-hover.png);
}
#header #nav a img {
	float: left;
	margin-right: 12px;
	margin-top: 11px;
}

#header #nav li.active a, #header #nav a:active {
	background: url(../img/topbar-active.png);
	border-right: 0;
	padding-right: 16px;
}
#header #nav span {
	display: inline-block;
	vertical-align: text-top;
	line-height: 16px;
	font-size: 11px;
	padding: 0 5px;
	color: #fff;
	text-shadow: 0 1px #902a27;
	border-radius: 2px;
	margin-left: 10px;
	background-color: #e93631;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f65d5f), color-stop(100%, #e93631));
	background-image: -webkit-linear-gradient(top, #f65d5f, #e93631);
	background-image: -moz-linear-gradient(top, #f65d5f, #e93631);
	background-image: -ms-linear-gradient(top, #f65d5f, #e93631);
	background-image: -o-linear-gradient(top, #f65d5f, #e93631);
	background-image: linear-gradient(top, #f65d5f, #e93631);
	-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.2);
}

div.header div img#logo {
	float: left;
}

sup {
	font-size: 13px;
}

code CSS style.css:

.container {
	display: block;
	width: 1060px;
	margin: 0px auto;
}

#iview {
	display: block;
	width: 1050px;						/* largeur de 1050px */
	height: 700px;						/* hauteur de 700px */
	background: #000;
	background: rgba(0, 0, 0, 0.7);
	padding: 5px;
	border-radius: 5px;
	position: relative;
	-webkit-box-shadow: 0 38px 30px -18px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 38px 30px -18px rgba(0, 0, 0, 0.5);
	box-shadow: 0 38px 30px -18px rgba(0, 0, 0, 0.5);
	margin: 0px auto;
}

#iview .iviewSlider {
	display: block;
	width: 1050px;						/* largeur de 1050px */
	height: 700px;						/* hauteur de 700px */
	overflow: hidden;
	border-radius: 4px;
}

.iview-controlNav {
	position: absolute;
	bottom: 30px;
	left: 128px; 						/* marge de 160px */
	height: 44px;
}

.iview-controlNav a {
	text-indent: -9999px;
}

.iview-controlNav a.iview-controlPrevNav {
	float: left;
	width: 50px;
	height: 44px;
	background: url('../../img/slider-controls.png') no-repeat;
}

.iview-controlNav a.iview-controlNextNav {
	float: left;
	width: 50px;
	height: 44px;
	background: url('../../img/slider-controls.png') no-repeat -50px 0px;
}

.iview-controlNav div.iview-items {
	float: left;
	padding: 0px 10px 0px 10px;
	height: 44px;
	background: url('../../img/nav-bg.png');
}

.iview-controlNav a.iview-control {
	padding: 0px;
	float: left;
	width: 11px;
	height: 12px;
	background: url('../../img/bullets.png') no-repeat;
	line-height: 0px;
}

.iview-controlNav a.iview-control.active {
	background-position: 0px -12px;
}

.iview-caption {
	background: url('../../img/caption-bg.png');
	color: #FFF;
	border-radius: 3px;
	padding: 10px 15px;
	font-family: Verdana;
	font-size: 12px;
	text-shadow: #000 1px 1px 0px;
}

.iview-caption.caption1 {
	font-size: 36px;
	font-weight: bold;
	height: 45px;
}

.iview-caption.caption2 {
	background: #00b4ff;
	font-size: 36px;
	font-weight: bold;
	text-shadow: none;
}

.iview-caption.caption3 {
	background: #FFF;
	color: #000;
	font-size: 26px;
	text-shadow: none;
}

.iview-caption.caption4 {
	font-size: 22px;
	font-weight: bold;
}

.iview-caption.caption5 {
	background: #c4302b;
	box-shadow: rgba(0, 0, 0, 0.7) 10px 10px 15px 0px;
	font-size: 20px;
	font-weight: bold;
	text-shadow: none;
}

.iview-caption.caption6 {
	font-size: 18px;
}

.iview-caption.caption7 {
	text-align: left;
	font-size: 11px;
	color: #888;
	border-radius: 0px;
}

.iview-caption.caption7 div {
	line-height: 200%;
}

.iview-caption.caption7 h3 {
	margin-bottom: 20px;
	color: #FFF;
}

.iview-caption.blackcaption {
	background: #000;
	box-shadow: rgba(0, 0, 0, 0.7) 10px 10px 15px 0px;
	text-shadow: none;
}

#iview-preloader {
	border: #666 1px solid;
	width: 150px
}

#iview-preloader div {
	background: #666;
}

.iview-controlNav div.iview-items ul li {
	padding: 0px;
	float: left;
	width: 11px;
	height: 12px;
	margin: 3px;
	margin-top: 16px;
	line-height: 0px;
}

#iview #iview-tooltip {
	display: none;
	position: absolute;
	background: url('../../img/tooltip.png') no-repeat;
	width: 124px;
	height: 90px;
	bottom: 30px;
	left: -67px;
	padding: 10px;
	z-index: 100;
}

#iview #iview-tooltip div.holder {
	display: block;
	width: 124px;
	height: 84px;
	overflow: hidden;
	border-radius: 2px;
}

#iview #iview-tooltip div.holder div.container {
	display: block;
	width: 4000px;
}

#iview #iview-tooltip div.holder div.container div {
	float: left;
	display: block;
	overflow: hidden;
	width: 124px;
	height: 84px;
	left: -50%;
	text-align: center;
}

#iview #iview-tooltip div.holder div.container div img {
	height: 84px;
	margin: 0 auto;
}

code CSS reset.css:

/* html5doctor.com Reset Stylesheet v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
body {
    line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}
nav ul {
    list-style:none;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
input, select {
    vertical-align:middle;
}

code CSS iview.css:

/* The slider */
.iviewSlider {
	overflow: hidden;
}

/* The timer in the Slider */
#iview-timer {
	position: absolute;
	z-index: 100;
	border-radius: 5px;
	cursor: pointer;
}

#iview-timer div {
	border-radius: 3px;
}

/* The Preloader in the Slider */
#iview-preloader {
	position: absolute;
	z-index: 1000;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border: #000 1px solid;
	padding: 1px;
	width: 100px;
	height: 3px;
}
#iview-preloader div {
	float: left;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	height: 3px;
	background: #000;
	width: 0px;
}

/* The strips and boxes in the Slider */
.iview-strip {
	display:block;
	position:absolute;
	z-index:5;
}
.iview-block {
	display:block;
	position:absolute;
	z-index:5;
}

/* Direction nav styles (e.g. Next & Prev) */
.iview-directionNav a {
	position:absolute;
	top:45%;
	z-index:9;
	cursor:pointer;
}
.iview-prevNav {
	left:0px;
}
.iview-nextNav {
	right:0px;
}

/* Control nav styles (e.g. 1,2,3...) */
.iview-controlNav {
	position:absolute;
	margin-left:-120px;
	z-index:9;
}
.iview-controlNav a {
	z-index:9;
	cursor:pointer;
}
.iview-controlNav a.active {
	font-weight:bold;
}
.iview-controlNav .iview-items ul {
	list-style: none;
}
.iview-controlNav .iview-items ul li {
	display: inline;
	position: relative;
}
.iview-controlNav .iview-tooltip {
	position: absolute;
}

/* The captions in the Slider */
.iview-caption {
	position:absolute;
	z-index:4;
	overflow: hidden;
	cursor: default;
}

/* The video show in the Slider */
.iview-video-show {
	background: #000;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 101;
}
.iview-video-show .iview-video-container {
	position: relative;
	width: 100%;
	height: 100%;
}
.iview-video-show .iview-video-container a.iview-video-close {
	position: absolute;
	right: 10px;
	top: 10px;
	background: #222;
	color: #FFF;
	height: 20px;
	width: 20px;
	text-align: center;
	line-height: 29px;
	font-size: 22px;
	font-weight: bold;
	overflow: hidden;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}
.iview-video-show .iview-video-container a.iview-video-close:hover {
	background: #444;
}

-
Edité par benoitharle 1 août 2015 à 0:50:20

benoitharle

1 août 2015 à 0:46:15

stefde3

1 août 2015 à 10:50:23

bonjour,

t'as essayé de mettre un text-align:center sur tes li pour centrer tes photos ?

-
Edité par stefde3 1 août 2015 à 10:51:25

Le CSS ça peut craindre -->Conférence CSS3.CREATE

1 août 2015 à 21:16:23

non tu parle de quel code ?

2 août 2015 à 9:39:53

Bah.... regardes ton code tu as bien définis des ul li quelque part dedans non ?

en fait oui donc à toi de t'y retrouver dans tes codes et d'insérer la ligne que je t'ai donné dedans

3 août 2015 à 1:26:41

Euh oui dans le <div id="nav"> pour le menu "nav", code html slideshow.html & styles.css, mais je ne vois pas le rapport avec le slider ou alors je ne te suis pas du tout :euh:

Ps le code n'est pas de moi, je ne suis pas bon pour te sortir un code pareil, je suis juste débutant en html ...

C'est un slider tout fait que j'ai pris sur internet et je veux le modifier.

4 août 2015 à 10:02:27

ta question est bien de centrer tes images dans le slider ? Pourquoi tu me parles de div id="nav" ?

ça n'a rien à voir avec ton menu de navigation là !

donc dans ton css :

.iview-controlNav .iview-items ul li {
    display: inline;
    position: relative;
}

tu rajoutes en plus :

text-align:center;

ça va centrer tes images dans le slider.

Maintenant si tu comprends pas ce que je te dis, reprends les cours depuis le début car je ferai pas le travail à ta place

4 août 2015 à 21:24:06

Non je comprend ce que tu voulais dire mais c'est juste moi, j'etais sur le bon code html mais pas le bon code css ("styles" au lieu de "style" je devrais changer le nom pour éviter cela :euh: ) donc les seul liens que j'avais etaient ceux du div id="nav" dans le header .

Mais le text-align ne fonctionne pas les photos restent a gauche du slider.

5 août 2015 à 8:55:17

sans exemple en ligne difficile de voir de quoi il s'agit...

Surtout si en plus, le code est pas de toi

Héberges ton site quelque part comme sur hostinger c'est gratuit et t'as pas besoin d'un vrai nom de domaine.

Au moins on pourra voir ne live ce qu'est ton slider et ton problème.

7 août 2015 à 22:37:56

stefde3 a écrit:

sans exemple en ligne difficile de voir de quoi il s'agit...

Surtout si en plus, le code est pas de toi

Héberges ton site quelque part comme sur hostinger c'est gratuit et t'as pas besoin d'un vrai nom de domaine.

Au moins on pourra voir ne live ce qu'est ton slider et ton problème.

Salut excuse moi pour le retard mais j'ai repris le boulot et je prepare mon déménagement .... :'(

j'ai hebergé sur hostinger mais le slider ne s'affiche pas alors que sur mon navigateur il s'affiche je comprend pas pourquoi ?!?

8 août 2015 à 8:24:49

T'as pensé à tout héberger ?

-
Edité par stefde3 8 août 2015 à 8:25:05

8 août 2015 à 10:19:08

Bah oui j'ai mis tous comme dans mon pc (dossiers, fichiers, images, photos ...) avec la même arborescence, j'ai un cadre blanc avec l'icône d'une image mais rien qui saffice pour le slider. Je vais reverifier en rentrant ce midi

8 août 2015 à 10:22:41

Centrer les photos portrait sur un slider

Centrer les photos portrait sur un slider

Supprimer

Modérer

Signaler le message aux modérateurs