Analyse code HTML 5/CSS ! - Centrer -
Noé Pitrois-Cruz
Bonjour à tous les passionnés de codage,
je vous écris aujourd'hui car, étant en deuxième année d'école de commerce, je dois réaliser un blog concernant le voyage erasmus que je vais effectuer au second semestre. Ayant quelques notions en codages HTML et CSS, j'ai donc choisi de créer mon blog de toute pièce.
Je rencontre un problème avec l'esthétique de mon menu "article". En effet, j'aimerais qu'en cliquant sur un des articles de mon blog, l'article s'affiche sur presque la totalité de l'écran et non qu'il reste au centre. Malgré plusieurs tentatives, l'article peut s'étendre uniquement sur la droite en modifiant la largeur et la longueur.
Voici mon code HTML5
<!DOCTYPE>
<html>
<head>
<title>Articles</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Little Boxes Menu or Navigation with jQuery - radnomly animate the menu items to show content, accodion like boxes menu" />
<meta name="keywords" content="jquery, boxes, menu, navigation, animate"/>
<link rel="stylesheet" href="Menuarticle.css" type="text/css" media="screen"/>
<style>
*{
margin:0;
padding:0;
}
h1{
color:#fff;
margin:40px 0px 20px 40px;
text-shadow:1px 1px 1px #555;
font-weight:normal;
}
a.back{
position:absolute;
bottom:5px;
right:5px;
}
.reference{
position:absolute;
bottom:5px;
left:5px;
}
.reference p a, a.back{
text-transform:uppercase;
text-shadow:1px 1px 1px #fff;
color:#666;
text-decoration:none;
font-size:16px;
font-weight:bold;
}
.reference p a:hover, a.back:hover{
color:#000;
}
</style>
</head>
<body>
<ul> <B>
<li><a href="file:///Users/Boz/Desktop/CSS&html/Blog%20Russie%20/Blog1.html">Home</a></li>
<li><a href="#news">Pictures</a></li>
<li><a href="file:///Users/Boz/Desktop/CSS&html/Blog%20Russie%20/Menuarticle.html">Articles</a></li>
<li style="float:right"> <a class="active" href="#about">Contact</a></li>
</ul> </B>
<div class="title">
<br> <br>
<div id="littleBoxes" class="littleBoxes">
<div class="boxlink bg1" style="top:0px;left:0px;">
<a href="">Article1</a>
<div class="boxcontent">
<p> Article 1 !!!
</p>
</div>
</div>
<div class="bg5" style="background-position:-90px 0;top:0px;left:95px;"></div>
<div class="bg5" style="background-position:-180px 0;top:0px;left:190px;"></div>
<div class="bg5" style="background-position:-270px 0;top:0px;left:285px;"></div>
<div class="bg5" style="background-position:0 -90px;top:95px;left:0px;"></div>
<div class="boxlink bg2" style="top:95px;left:95px;">
<a href="">Article 2</a>
<div class="boxcontent">
<p> Article 2
</p>
</div>
</div>
<div class="bg5" style="background-position:-180px -90px;top:95px;left:190px;"></div>
<div class="bg5" style="background-position:-270px -90px;top:95px;left:285px;"></div>
<div class="bg5" style="background-position:0 -180px;top:190px;left:0px;"></div>
<div class="bg5" style="background-position:-90px -180px;top:190px;left:95px;"></div>
<div class="boxlink bg3" style="top:190px;left:190px;">
<a href="">Article 3</a>
<div class="boxcontent">
<p> Article 3
</p>
</div>
</div>
<div class="bg5" style="background-position:-270px -180px;top:190px;left:285px;"></div>
<div class="bg5" style="background-position:0 -270px;top:285px;left:0px;"></div>
<div class="bg5" style="background-position:-90px -270px;top:285px;left:95px;"></div>
<div class="bg5" style="background-position:-180px -270px;top:285px;left:190px;"></div>
<div class="boxlink bg4" style="top:285px;left:285px;">
<a href="">Article 4</a>
<div class="boxcontent">
<p> Article 4
</p>
</div>
</div>
</div>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
/* object to save the initial positions of each box */
var divinfo = {"initial": []};
/* index of the selected / clicked box */
var current = -1;
/* we save the index,top and left of each one of the boxes */
$('#littleBoxes > div').each(function(){
var $this = $(this);
var initial = {
'index' : $this.index(),
'top' : $this.css('top'),
'left' : $this.css('left')
};
divinfo.initial.push(initial);
});
/* clcik event for the anchors inside of the boxes */
$('#littleBoxes a').bind('click',function(e){
var $this = $(this);
var $currentBox = $this.parent();
/* set a z-index lower than all the other boxes,
to see the other boxes animation on the top*/
$currentBox.css('z-index','1');
/* if we are clicking on a expanded box : */
if(current == $currentBox.index()){
/* put it back (decrease width,height, and set the top and left like it was before).
the previous positions are saved in the divinfo obj*/
$currentBox.stop().animate({
'top' : divinfo.initial[$currentBox.index()].top,
'left' : divinfo.initial[$currentBox.index()].left,
'width' : '90px',
'height' : '90px'
},800,'easeOutBack').find('.boxcontent').fadeOut();
$('#littleBoxes > div').not($currentBox).each(function(){
var $ele = $(this);
var elemTop = divinfo.initial[$ele.index()].top;
var elemLeft = divinfo.initial[$ele.index()].left;
$ele.stop().show().animate({
'top' : elemTop,
'left' : elemLeft,
'opacity' : 1
},800);
});
current = -1;
}
/* if we are clicking on a small box : */
else{
/* randomly animate all the other boxes.
Math.floor(Math.random()*601) - 150 gives a random number between -150 and 450.
This range is considering the initial lefts/tops of the elements. It's not the exact right
range, since we would have to calculate the range based on each one of the boxes. Anyway, it
fits our needs...
*/
$('#littleBoxes > div').not($currentBox).each(function(){
var $ele = $(this);
$ele.stop().animate({
'top' : (Math.floor(Math.random()*601) - 150) +'px',
'left': (Math.floor(Math.random()*601) - 150) +'px',
'opacity':0
},800,function(){
$(this).hide();
});
});
/* expand the clicked one. Also, fadeIn the content (boxcontent)
if you want it to fill the space of the littleBoxes container,
then these are the right values */
var newwidth = 395;
var newheight = 395;
$currentBox.stop().animate({
'top' : '0px',
'left' : '0px',
'width' : newwidth +'px',
'height': newheight+'px'
},800,'easeOutBack',function(){
current = $currentBox.index();
$(this).find('.boxcontent').fadeIn();
});
}
e.preventDefault();
});
});
</script>
</body>
</html>et voici mon code css
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.littleBoxes{
width:350px;
height:350px;
position: absolute; /* postulat de départ */
top: 50%; left: 50%; /* à 50%/50% du parent référent */
transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
}
.littleBoxes > div{
position:absolute;
width:90px;
height:90px;
text-align:center;
border:2px solid white; /* Bordure inter cellules,2 */
overflow:hidden;
background-color:#f7f7f7;
-moz-box-shadow:0px 0px 3px #555;
-webkit-box-shadow:0px 0px 3px #555;
box-shadow:0px 0px 3px #555;
background-position:center center;
z-index:999;
}
.littleBoxes div a{
text-transform:uppercase;
font-size: 18px;
font-weight:bold;
letter-spacing:-1px;
display:block;
line-height:90px;
text-decoration:none;
color:#fff;
background:#91EF4A url(../bgItem.png) repeat-x top left;
outline:none;
text-shadow:1px 1px 1px #888;
-moz-box-shadow:1px 1px 3px #777;
-webkit-box-shadow:1px 1px 3px #777;
box-shadow:1px 1px 3px #777;
}
.littleBoxes div.boxcontent{
width:334px;
height:246px;
text-align:left;
padding:10px;
font-size:16px;
background-color:#f0f0f0;
border:2px solid #fff;
margin:10px 0px 0px 10px;
text-shadow:1px 1px 1px #fff;
-moz-box-shadow:1px 1px 3px #777;
-webkit-box-shadow:1px 1px 3px #777;
box-shadow:1px 1px 3px #777;
opacity:0.8;
display:none;
}
.bg1, .bg2, .bg3, .bg4{
background-repeat:no-repeat;
}
.bg1{
background-image:url(../images/1.jpg);
}
.bg2{
background-image:url(../images/2.jpg);
}
.bg3{
background-image:url(../images/3.jpg);
}
.bg4{
background-image:url(../images/4.jpg);
}
.bg5{
background-image:url(../images/5.jpg);
}J'aimerai qu'en cliquant sur un de mes articles, dans les "littleboxes", l'artcile s'affiche sur une partie de la totalité de l'écran en laissant deux marges sur le coté.
Cependant,
Malgré les modifications déjà effectué, l'article ne veut pas bouger sur la gauche et je n'arrive pas à l'aggrandir.
Merci beaucoup pour votre Aide,
Très cordialement,
Un amateur !
ps (Je n'arrive pas à vous mettre en liens mon fichier html et je tiens à préciser que les "littleboxes" ne sont pas de moi, je les ai prises sur un site qui propose des menus gratuis !)