Bonjour, je vous contact car j'ai un petit soucis comme vous allez pouvoir le constater dans le code suivant, mon menu se trouve après mon corps et se met automatiquement en dessous du dernier article écrit.
Pouvez vous me conseiller ou m'indiquer la marche a suivre pour que celui-ci se trouve en haut de page ? merci
Structure => Cliquez ici <=
Affichage du probléme => Cliquez ici <=
Structure HTML5
Structure CSS3
Voila pour bien exposer le problème on peut donc voir que sur l'image, le menu se met automatiquement en dessous du dernier article. Evidemment si il y a plusieurs articles il se met tous en bas. On ma orienter sur un autre forum, hier soir sur un problème de gabarit et de place du au white_space mais j'ai mal saisi le concept. C'est a dire que j'ai effectuer quelques tests avec une largeur plus grand pour le corps et la struct_global mais cela na pas bouger.
Est ce réellement un soucis de white_space car j'ai suivi ce tuto ici mais cela na pas vraiment arranger la chose. Merci.
Je préfère prévenir également, je débute en HTML/CSS et je m’entraîne donc en reproduisant des site web existant. Le site en question est dayz-network. Je le dit de peur de me faire lapider avant ^^
J'ai également colorer mes différents div, ect... Se qui en ressort est rien a priori car même si je donne une taille fixe a mon article (650px) il y a la place pour le menu mais celui-ci ne remonte pas.
Autre forum ou le problème a été exposer
Edit: Vous remarquerez que j'ai fait une petite erreur dans la structure (l'image), le aside du haut est transformer en nav et le article_menu est devenu aside.
Modifié par Eito33 (24 Apr 2014 - 15:48)
Pouvez vous me conseiller ou m'indiquer la marche a suivre pour que celui-ci se trouve en haut de page ? merci
Structure => Cliquez ici <=
Affichage du probléme => Cliquez ici <=
Structure HTML5
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Test Design</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<div id="struct_global"> <!-- DEBUT STRUCT_GLOBAL -->
<div id="header"> <!-- DEBUT HEADER -->
<img class="logo"src="images/logo.png" alt="Logo" />
<div id="nav"> <!-- DEBUT NAV -->
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Admin</a></li>
</ul>
</div> <!-- FIN NAV -->
</div> <!-- FIN HEADER -->
<div id="corps"> <!-- DEBUT CORPS -->
<div id="pub"> <!-- DEBUT PUB -->
<img class="pub" src="images/pub.png" alt="pub" />
</div> <!-- FIN PUB -->
<div id="banniere_news">
<p>NEWS :</p>
</div>
<div id="article"> <!-- DEBUT ARTICLE -->
<img class="img_article" src="images/images_articles.png" alt="image"/>
<div id="sous_news">
<span class="commentaires">Le 24/04/2013 - Eito</span>
</div>
<p>La mise à jour 0.33 de DayZ Standalone qui était prévue pour après-demain sort finalement avec un peu<br />
d'avance et pas mal de changements par rapport à ce qui avait été intialement annoncé. Disponible dès à <br />
présent, vous pourrez retrouvez tous les détails du patch sur notre page dédiée aux chang... <a href="#">Lire la suite »</a></p>
<img class="barre_article" src="images/barre_news.png" alt="barre_sous_news"/>
</div> <!-- FIN ARTICLE -->
<div id="aside"> <!-- DEBUT MENU 1 -->
<h1>Derniers Articles</h1>
<img src="images/articles_types_1.png" alt="img_article" id="img_article" />
<p>Articles 1-2014</p>
<p>Lorem ipsum dolor sit amet, vivamus sed libero nec mauris pulvinar facilisis ut non sem.</p>
<img src="images/articles_types_1.png" alt="article_type_1" id="img_article" />
<p>Articles 1-2014</p>
<p>Lorem ipsum dolor sit amet, vivamus sed libero nec mauris pulvinar facilisis ut non sem.</p>
</div> <!-- FIN MENU 1 -->
</div> <!-- FIN CORPS -->
<div id="footer"> <!-- DEBUT FOOTER -->
<p>Eito ©</p>
</div> <!-- FIN FOOTER -->
</div> <!-- FIN STRUCT_GLOBAL -->
</body>
</html>Structure CSS3
@charset "utf-8";
/*****************************/
/* BALISE DEBUGS */
/*****************************/
/*
table {background-color: lightgray}
td, th {background-color: gray}
div {background-color: beige}
form {background: bisque}
input, select, textarea {background-color: salmon}
h1, h2, h3, h4, h5, h6, p {background-color: darkkhaki}
ul {background-color: lightsteelblue}
li {background-color: silver}
* {margin:0px; padding:0px;}
*/
/*****************************/
/* BALISE GENERAL */
/*****************************/
body {margin: 0px; padding:0px;}
p {text-align:justify;}
/*****************************/
/* STRUCT GENERAL */
/*****************************/
#struct_global {background-color:#dadada; width:auto; height:100%; margin:auto; overflow:auto;} /* Contient le HEADER */
/*****************************/
/* HEADER / NAV */
/*****************************/ /* OK - 23/04/2014 + VERIF NAV */
/* HEADER */
#header {background:url(../images/header.png); width:auto; height:172px;}
.logo {display:block;margin:auto;}
/* NAV */ /* A REVOIR POUR LES a:hover + Verif compatibilté navigateur + vérif résolution d'écran*/
#nav {text-align:center;}
#nav ul {list-style-type:none;}
#nav li {display:inline;}
#nav a {display:inline-block; width:auto; font-size:20px; color:#FFF; text-decoration:underline; padding-top:3px; margin-right:20px;}
/*****************************/
/* PUB */
/*****************************/
#pub {background-color:#FFFFFF; width:1080px; height:120px; margin:auto;}
.pub {display:block; margin:auto; padding-top:10px;}
/*****************************/
/* BODY */
/*****************************/
#corps {background-color:#FFFFFF; overflow:auto; width:1080px; height:auto; margin:auto;}
/*****************************/
/* NEWS */
/*****************************/
#banniere_news {background:url(../images/sous_news.png); width:650px; height:50px; margin-left:10px; margin-bottom:20px;} /* A verifier pour la petite marge en dessous la pub */
#banniere_news p {text-align:center; padding-top:15px;}
/*****************************/
/* Articles */
/*****************************/
#article {margin-left:10px; margin-right:50px;}
#article p {margin-top:10px; text-align:justify;}
#article a {color:#969696;}
#sous_news {background:url(../images/sous_news.png); width:650px; height:50px;}
.commentaires {padding-top:10px;} /* METTRE EN PLACE LES MARGES */
.img_article {width:650px; height:325px;}
.barre_article {width: 650px; height:2px; margin-top:25px; margin-bottom:45px;}
/*****************************/
/* ASIDE */
/*****************************/
#aside {float:right; width: 300px; height:360px; margin-right:10px; background:#FFF; box-shadow: 0px 2px 5px #1c1a19; border-radius: 5px;}
#aside p {color:#000; float:right;}
#aside img {float:left;}
/*****************************/
/* FOOTER */
/*****************************/
#footer {background:url(../images/footer.png); height:117px;}
#footer p {text-align:center; font-size:20px; color:#FFF; padding-top:15px;} /* VERIFIER LA MARGE ENTRE FOOTER ET LE CORPS */Voila pour bien exposer le problème on peut donc voir que sur l'image, le menu se met automatiquement en dessous du dernier article. Evidemment si il y a plusieurs articles il se met tous en bas. On ma orienter sur un autre forum, hier soir sur un problème de gabarit et de place du au white_space mais j'ai mal saisi le concept. C'est a dire que j'ai effectuer quelques tests avec une largeur plus grand pour le corps et la struct_global mais cela na pas bouger.
Est ce réellement un soucis de white_space car j'ai suivi ce tuto ici mais cela na pas vraiment arranger la chose. Merci.
Je préfère prévenir également, je débute en HTML/CSS et je m’entraîne donc en reproduisant des site web existant. Le site en question est dayz-network. Je le dit de peur de me faire lapider avant ^^
J'ai également colorer mes différents div, ect... Se qui en ressort est rien a priori car même si je donne une taille fixe a mon article (650px) il y a la place pour le menu mais celui-ci ne remonte pas.
Autre forum ou le problème a été exposer
Edit: Vous remarquerez que j'ai fait une petite erreur dans la structure (l'image), le aside du haut est transformer en nav et le article_menu est devenu aside.
Modifié par Eito33 (24 Apr 2014 - 15:48)