Titre: Problème d'affichage html 5 et css3
Posté par: fenneck le le 06-11-2013 a 13:31:30
Bonjour, à tous et à toutes.
Mon premier problème: J'ai créer un Slider avec 3 boutons mais les boutons sont pas aligner.
Voici le html :<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="coda-slider-2.0.css" type="text/css" media="screen" />
</head>
<body>
<div id="Box"</div>
<img src="../Documents/logolamy.jpg" alt="lamylogo.jpg"/>
<div class="wrapper">
<div id="article1">
<div id="article2">
<div id="article3"></a></li>
<div class="sliderContainer">
<div class="content">
<div class="item"><img src="logo toucan.jpg" alt="logo toucan.jpeg"/>
</div>
<div class="item"><img src="logo toucan.jpg" alt="logo toucan.jpg"/>
</div>
<div class="item"><img src="logo toucan.jpg" alt="logo toucan.jpg"/>
</div>
</div>
</div>
<a href="#article1">1</a>
</div>
<a href="#article2">2</a>
</div>
<a href="#article3">3</a></div>
<h2> ® Copyright 2013 LAMY C'reation</h2>
</div>
</div>
</body>
</html>
Voici le css: ( utiliser pour les deux images)
#onglet{
margin: 0;
padding: 0;
list-style: none;
}
#onglet li a { /* modifie la taille des onglets*/
height: 20px;/*largeur*/
width:20px;
float:right;
background: black;
color: #fff;
}
li {
margin: 0px;
list-style:none;
float: right;
font-size: 20px;
}
img {/*modifier la taille du logo LAMY C'retion*/
margin:0px;
height: 150px;/*largeur*/
width:250px; /*longeur*/
margin-left:200px;
margin-right:auto;
}
#Box/*la forme du site rectangulaire*/
{ background:white;
margin:auto;
padding:auto; /*auto centre la page*/
height:616px;
width:650px;
border:1px solid black;
}
h2{ /* Copyright*/
color:Silver;
font-style:italic;
font-size: 14px;
top:90px;
}
#content-slider {
width: 650px;
overflow: hidden;
height: 300px;
}
body{
background:white;
color:black;
font-family:Arial, verdana;
font-size:14px;
margin: 200px;/*descend le bloc vers le bas*/
bottom:40px;
}
/* Du wrapper: ligne 51 à 185 le SLIDER mini-galerie*/
.wrapper{
margin:50px auto;
width:350px;
text-align:center;
}
.content{
position:absolute;
background:white;
top:0px;
left:-10px;
height:200px;
width:1200px;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
clear:both;
}
.item{
float:left;
width:300px;
height:200px;
position:relative;
}
#article1, #article2, #article3, #article4{
overflow:hidden;
background:white;
width:300px;
height:305px;
margin:0 auto;
position:relative;
}
#article1:target .content{
left:-10px;
}
.sliderContainer{
position:relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border:1px solid black; /*contour du slider ou du cadre*/
height:220px;
width:280px;
overflow:hidden;
}
#article2:target .content, #article3:target .content, #article4:target .content{
-webkit-transform: translate(-300px, 0px);
-moz-transform: translate(-300px, 0px);
-o-transform: translate(-300px, 0px);
-ms-transform: translate(-300px, 0px);
transform: translate(-300px, 0px);
}
#article3:target .content{
-webkit-transform: translate(-600px, 0px);
-moz-transform: translate(-600px, 0px);
-o-transform: translate(-600px, 0px);
-ms-transform: translate(-600px, 0px);
transform: translate(-600px, 0px);
}
#article4:target .content{
-webkit-transform: translate(-900px, 0px);
-moz-transform: translate(-900px, 0px);
-o-transform: translate(-900px, 0px);
-ms-transform: translate(-900px, 0px);
transform: translate(-900px, 0px);
}
a{
margin: auto 50px;
color:white;
text-decoration: none;
text-indent:-5000px;
background-color:white;
width:3px;
height:18px;
padding:8px;
padding-top:0px;
-moz-border-radius: 50%;
-webkit-border-radius: 390px;
border-radius: 390px;
}
#article4 a,#article3 a, #article2 a, #article1 a{
width:22px;
height:15px;
padding:8px 0;
padding-top:0px;
-moz-border-radius: 50%;
-webkit-border-radius: 390px;
border-radius: 390px;
position:absolute;
bottom:40px;
left:55px;
}
#article2 a{
position:absolute;
bottom:10px;
left:105px;
}
#article3 a{
position:absolute;
bottom:10px;
left:155px;
}
#article4 a{
position:absolute;
bottom:10px;
left:205px;
}
#article1:target> a, #article2:target> a, #article3:target> a, #article4:target> a{
background:black;
color:black;
}
/*change les cercles ou boutons de couleurs*/
a:hover{
background:blue;
color:white;
}
.item img{
margin:auto;
margin-top:22px;
width:200px;
height:150px;
}
ul#main_photo {
overflow:hidden;
width:550px;
height:950px;
margin:1em auto;
position:relative;
list-style:none;
}
ul#main_photo img {
opacity:0;
width:588px;
height: 200px;
margin:auto;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
ul#main_photo img:target {
opacity:1;
}
footer {
height:95%;
position:fixed;
width:75%;/*longueur*/
bottom:0;
left:0;
}
div#thumb_center {
width:70%;
margin:auto;
text-align:center;
top:10px;
}
div#cadre {
padding:5px;
width: 14%;
text-align:center;
margin:5px;
float:left;
}
div#cadre img {
width: 100%;
opacity:0.7;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
div#cadre img:hover {
opacity:1;
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
padding:0px;
z-index:3;
}
Si vous cherchez le css c'est celui qui est juste au-dessus, le même pour la ère et la 2 ème photo.
Faire rentrer la galerie dans le cadre et faire apparaître correctement les onglets entre le logo et la galerie.
Voici l'image:
Voici html: <!DOCTYPE html>
<html>
<head>
<title>LAMY C'reation</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="coda-slider-2.0.css" type="text/css" media="screen" />
</head>
<body>
<div id="Box"</div>
<img src="../Documents/logolamy.jpg" alt="lamylogo.jpg"/>
<ul id="onglet"> <!--Grande Vignette-->
<li><a href="Contact.html">Contact</a></li>
<li><a href="Portfolio.html">Portfolio</a></li>
<li><a href="Index.html">Accueil</a></li>
</div>
<center><h1>Portfolio</h1></center>
<ul id="main_photo"><!--Petite Vignette-->
<li><img src="logo toucan.jpg" alt="logo toucan.jpg" id="0" /></li>
<li><img src="img/1.jpg" alt="1" id="1" /></li>
<li><img src="img/2.jpg" alt="2" id="2" /></li>
<li><img src="img/3.jpg" alt="3" id="3" /></li>
<li><img src="img/4.jpg" alt="4" id="4" /></li>
<li><img src="img/5.jpg" alt="5" id="5" /></li>
<footer>
<div id="thumb_center">
<div id="cadre"> <a href="#0"> <img src="logo toucan.jpg" alt="logo toucan.jpg" /></a> </div>
<div id="cadre"> <a href="#1"> <img src="img/1.jpg" /></a> </div>
<div id="cadre"> <a href="#2"> <img src="img/2.jpg" /></a> </div>
<div id="cadre"> <a href="#3"> <img src="img/3.jpg" /></a> </div>
<div id="cadre"> <a href="#4"> <img src="img/4.jpg"/></a> </div>
<div id="cadre"> <a href="#5"> <img src="img/5.jpg" /></a> </div>
</div>
</footer>
<h2> ® Copyright 2013 LAMY C'reation</h2>
</body>
</html> :) |
Titre: Re:Problème d'affichage html 5 et css3
Posté par: burtgummer le le 06-11-2013 a 14:47:12
Bonjour,
vous pourriez expliquer plus en détails ce que vous souhaitez, quels sont vos pbs, ... ?
cdt |
Titre: Re:Problème d'affichage html 5 et css3
Posté par: fenneck le le 06-11-2013 a 14:53:07
Mon 1 problème c'est que mes onglets (Accueil,Portfolio,Contact) s'affiche pas correctement,ils .Soit sa peut etre le trait entre les onglets et le slider.
Mon 2 ème je voudrais agrandir mon slider en css3 et il m'affiche une image et pas les deux autres. |
Titre: Re:Problème d'affichage html 5 et css3
Posté par: burtgummer le le 06-11-2013 a 14:55:12
| Pouvez-vous donner l'url ou alors le code source des différents fichiers car ceux poster ne sont pas correct ou manquant ? |
Titre: Re:Problème d'affichage html 5 et css3
Posté par: fenneck le le 06-11-2013 a 15:18:49
Bonjour,
Je suis nouveau, comment on met les balises pour le code ?
Voici le code html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LAMY C'reation</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="coda-slider-2.0.css" type="text/css" media="screen" />
</head>
<body>
<!-- Veut que la taille du cadre soit pareille en haut en laissant un petit peu blanc-->
<div id="Box"</div>
<img src="../Documents/photo.jpg" alt="photo.jpg"/>
<!-- Onglets en noir text blanc-->
<ul id="onglet">
<li><a href="Contact.html">Contact</a></li>
<li><a href="Portfolio.html">Portfolio</a></li>
<li><a href="Index.html">Accueil</a></li>
<div id="Box"</div>
<img src="../Documents/logolamy.jpg" alt="lamylogo.jpg"/>
<hr style="width: 100%;background-color: black; height: 1px;" />
<br/>
<h2>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="coda-slider-2.0.css" type="text/css" media="screen" />
</head>
<body>
<div class="wrapper">
<div id="article1">
<div id="article2">
<div id="article3">
<div id="article4">
<div class="sliderContainer">
<div class="content">
<div class="item"><img src=".jpg" alt="logo toucan.jpg/>
</div>
<div class="item"><img src="../Documentsphoto.jpg" alt="photo.jpg/>
</div>
<div class="item"><img src="http://localhost/monsite/application/images/slideshow/3.jpg" alt="3"/>
</div>
<div class="item"><img src="http://localhost/monsite/application/images/slideshow/4.jpg" alt="4"/>
</div>
</div>
</div>
<!-- <a href="#article4">4</a>-->
</div>
<a href="#article3">3</a>
</div>
<a href="#article2">2</a>
</div>
<a href="#article1">1</a>
</div>
</div>
<h2> © Copyright 2013 LAMY C'reation</h2><!--pour faire le logo copyright maintener la touche ALT et taper 0169-->
</body>
</html>
Code css:
hr{
width: 100%;
background-color: black;
height: 1px;
}
.ligne
{
border-width : 0 0 1px;
border-style : solid;
}
#Box
{ background:white;
margin:auto;
padding:auto; /*auto centre la page*/
height:700px;
width:950px;
border:1px solid black;
}
img {
margin:50px;
height: 200px;/*largeur*/
width:250px; /*longeur*/
margin-left:350px;
margin-right:auto;
}
#onglet{
margin: 0;
padding: 0;
list-style: none;
}
#onglet li a {
float:right;
padding: 5px 20px;
margin-left:2px;
background: black;
color: #fff;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
}
}
li {
margin: 0px;
padding:20px;
list-style:none;
float: right;
font-size: 20px;
}
#content-slider {
width: 650px;
overflow: hidden;
height: 300px;
}
body{
background:white;
color:black;
font-family:Arial, verdana;
font-size:14px;
}
.wrapper{
margin:20px auto;
width:350px;
text-align:center;
}
.content{
position:absolute;
background:white;
top:0px;
left:-10px;
height:200px;
width:1200px;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
clear:both;
}
.item{
float:left;
width:300px;
height:200px;
position:relative;
}
#article1, #article2, #article3, #article4{
overflow:hidden;
background:white;
width:300px;
height:305px;
margin:0 auto;
position:relative;
}
#article1:target .content{
left:-10px;
}
.sliderContainer{
position:relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border:1px solid black; /*contour du slider ou du cadre*/
height:220px;
width:280px;
overflow:hidden;
}
#article2:target .content, #article3:target .content, #article4:target .content{
-webkit-transform: translate(-300px, 0px);
-moz-transform: translate(-300px, 0px);
-o-transform: translate(-300px, 0px);
-ms-transform: translate(-300px, 0px);
transform: translate(-300px, 0px);
}
#article3:target .content{
-webkit-transform: translate(-600px, 0px);
-moz-transform: translate(-600px, 0px);
-o-transform: translate(-600px, 0px);
-ms-transform: translate(-600px, 0px);
transform: translate(-600px, 0px);
}
#article4:target .content{
-webkit-transform: translate(-900px, 0px);
-moz-transform: translate(-900px, 0px);
-o-transform: translate(-900px, 0px);
-ms-transform: translate(-900px, 0px);
transform: translate(-900px, 0px);
}
a{
margin: auto 50px;
color:white;
text-decoration: none;
text-indent:-5000px;
background-color:white;
width:38px;
height:18px;
padding:8px;
padding-top:0px;
-moz-border-radius: 50%;
-webkit-border-radius: 390px;
border-radius: 390px;
}
#article4 a,#article3 a, #article2 a, #article1 a{
width:22px;
height:15px;
padding:8px 0;
padding-top:0px;
-moz-border-radius: 50%;
-webkit-border-radius: 390px;
border-radius: 390px;
position:absolute;
bottom:40px;
left:55px;
}
#article2 a{
position:absolute;
bottom:10px;
left:105px;
}
#article3 a{
position:absolute;
bottom:10px;
left:155px;
}
#article4 a{
position:absolute;
bottom:10px;
left:205px;
}
#article1:target> a, #article2:target> a, #article3:target> a, #article4:target> a{
background:black;
color:black;
}
/*change les cercles ou boutons de couleurs*/
a:hover{
background:blue;
color:white;
}
.item img{
margin:auto;
margin-top:22px;
width:200px;
height:150px;
} |
Titre: Re:Problème d'affichage html 5 et css3
Posté par: burtgummer le le 06-11-2013 a 15:24:48
vous avez posté la même chose qu'avant. Il manque du code (la balise html de ce qui est apparement votre 1ère n'est pas fermée par exemple)
vous utilisez deux feuilles de style mais sur votre post vous mettez tous les csss ensemble, ...
Donnez-nous l'url du site si vous souhaitez que l'on voit directement le pb et que qq vous aide
cdt |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|