18015 sujets

Questions générales et questions de débutants

Positionnement CSS

Bonjour,

Voila mon souci c'est que j'arrive pas à positionner correctement un cadre à côté d'un autre sans tout décaler j'ai chercher plusieurs techniques avec la propriété float ect...

Voici une image pour plus de détails :
upload/50417-Impr.ecran.png

code html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
<title>Test</title>
</head>


<body>
<div id="bloc_page">
<header>
<p id="titre"></p>
<p id="titre1">Serveur privé</p>
</header>
<nav>
<ul id="menu">
<li id="lien1"><a href="#">Accueil</a></li>
<li id="lien2"><a href="#">Photo</a></li>
<li id="lien3"><a href="#">Présentation</a></li>
<li><a href="#">Divers</a></li>
</ul>
</nav>
<section>
<article id="article1">
<h3>Titre</h3>
<p>Le mode créatif (ou créative) permet au joueur de construire et de détruire les blocs instantanément à volonté.
Il n'y a pas de fabrication d'objet.</p>
</article>
<article id="article2">
<h3>Titre</h3>
<p>Le mode créatif (ou créative) permet au joueur de construire et de détruire les blocs instantanément à volonté.
Il n'y a pas de fabrication d'objet.</p>
</article>
</section>
</div>
</body>

</html>

code css :

body
{
font-family: Comic Sans MS, Trebuchet MS, Courier New , Verdana ;
background-color: #fffacd ;
}

#bloc_page
{
margin: auto ;
width: 900px ;
background-color: #6b8e23 ;
}


header
{
border: 2px solid #bdb76b ;
background-color: #ffebcd ;
height: 100px ;
width: 690px ;
margin: auto ;
background: url(http://imageshack.us/a/img13/1111/uvz.png) no-repeat left top #ffebcd;
}

#titre
{
background: url(http://imageshack.us/a/img199/2735/v3yy.png) no-repeat ;
height: 78px;
width: 365px;
margin-left: 210px ;
margin-top: 5px ;
float: left ;
}
#titre1
{
line-height: 110px ;
}

#menu
{
display: block ;
margin: auto ;
border: 2px solid #bdb76b ;
margin-top: 5px ;
width: 690px ;
height: 35px ;
padding: 0 ;
list-style-type: none ;
background-color: #ffebcd ;
}

#menu li
{
float: left ;
text-align: center ;
}

#menu li a
{
width: 171px ;
line-height: 35px ;
font-size: 1em ;
letter-spacing: 1px ;
color: #000000 ;
display: block ;
text-decoration: none ;
}

#lien1
{
border-right: 2px solid #bdb76b ;
}

#lien2
{
border-right: 2px solid #bdb76b ;
}

#lien3
{
border-right: 2px solid #bdb76b ;
}
#menu li a:hover
{
background: url(http://www.colorhexa.com/6b8e23.png) repeat-x ;
}

h3
{
text-align: center ;
}

#article1
{
border: 2px solid #bdb76b ;
margin-top: 5px ;
margin-left: 103px ;
text-align: justify ;
padding: 10px ;
background-color: #ffebcd ;
width: 300px ;
}

#article2
{
border: 2px solid #bdb76b ;
margin-top: 5px ;
margin-left: 103px ;
text-align: justify ;
padding: 10px ;
background-color: #ffebcd ;
width: 300px ;
}
Modifié par anthony42 (24 Jun 2013 - 14:00)
Bonjour,
Es-tu sûr de ton margin-left à 103px dans #article2?
A mon avis, tu devrais le supprimer. Là il cherche à mettre ton bloc "article2" à 103px à droite de ton dernier bloc (donc "article1"), mais comme ça dépasse par rapport à ton conteneur englobant (bloc_page), il te le met automatiquement en dessous.
Bonjour.

a écrit :
Voila mon souci c'est que j'arrive pas à positionner correctement un cadre à côté d'un autre sans tout décaler j'ai chercher plusieurs techniques avec la propriété float ect...

Détailler le ect... (écrire etc.) aurait peut-être aidé à connaître les différentes techniques que tu as essayées.

Par ailleurs, la propriété float n'est plus qu'une technique parmi d'autres pour positionner des éléments de type bloc les uns à côté des autres, et ce n'est peut-être pas la plus indiquée pour ce que tu veux faire.

Tu peux consulter les articles suivants sur Alsa :

http://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html

http://www.alsacreations.com/tuto/lire/608-initiation-positionnement-css.html

http://www.alsacreations.com/actu/lire/491-nouveau-tutoriel-maitriser-le-positionnement-css-dans-toutes-les-situations.html

http://www.alsacreations.com/tuto/lire/610-Mise-en-page-CSS-avancee-grace-a-la-propriete-display.html

Bonne continuation.

PS : ça serait sympa, si la chose est possible, de ne publier que le code en rapport avec le problème.
Modifié par thierry (26 Jun 2013 - 14:57)
Sujet clos
Aller à