5568 sujets

Sémantique web et HTML

Problèmes affichage html 5

code HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<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>
<!--fin onglet-->
<!--Le problème entre le trait et on l'onglet sa élargit la taille des onglet et son pa la taille qui devrait etre -->
<!--trait qui sépare le logo et qui est en sous de l'onglet-->
<hr style="width: 100%;background-color: black; height: 1px;" />


<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>
<!-- Mon slider affiche qu'une image mes pas les 2 autres-->
<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 sr="logo.jpg" alt="logo toucan.jpeg"/>
</div>
<div class="item"><img sr="logo.jpg" alt="logo toucan.jpg"/>
</div>
<div class="item"><img sr="logo.jpg" alt="logo toucan.jpg"/>
</div>

</div>
</div>
</div>
<a href="#article1">1</a>
</div>
<a href="#article3">3</a>
</div>
<a href="#article2">2</a>
</div>

</div>
</div>
<!--centrer et dans le cadre le copyright en bas page-->
</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;
/*Le début du slider,je veux agrandir mon slider sans le deformer*/
}
.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;

}
Modifié par fenneck (28 Apr 2016 - 20:20)
Bonjour,

Tout d'abord ça serait bien que tu mettes ton code entre les balises prévues à cet effet.
Ensuite, un petit "Bonjour" et un minimum d'explications sur le problème que tu rencontres ne serait pas de trop.
N'hésite pas aussi à faire des efforts sur l’orthographe et la tournure des phrases, parce que là franchement c'est pénible à lire.
En plus commencer sa première phrase en considérant les forumeurs comme de potentiels "voleurs" ça le fait moyen quand même...
Sujet clos
Aller à