Problème d'alignement

Fermé
Ewi-Kun Messages postés 2 Date d'inscription vendredi 25 mars 2016 Statut Membre Dernière intervention 26 mars 2016 - 25 mars 2016 à 14:04
 Utilisateur anonyme - 26 mars 2016 à 14:34
Bonjour,

Je m'excuse d'avance, peut-être que la solution est trop évidente mais je comprends vraiment pas.

Déjà voici un screen et vous allez voir de suite le soucis : https://nsa37.casimages.com/img/2016/03/25/160325021014341741.png

Mon menu à droit ne s'aligne pas à côté de mon menu de news à gauche. Or le menu gauche + droite ne dépasse pas la longueur de mon global, donc il n'y a pas de raison qu'il apparaisse dessous. Mes images combinés ne dépassent pas non plus la taille de mon global. Ce que je comprends pas c'est pourquoi à gauche sa s’aligne parfaitement et pas à droite. De même que mon pied de page lui aussi est parfaitement aligné.

Voici mon code CSS :

/************************************************************ DÉFINITIONS GÉNÉRALES ************************************************************/
/* GLOBALITÉ DE LA PAGE */
  • {

padding: 0;
margin: 0;
}

/* BODY */

body {
font: .8em/1.1em "Tahoma", "Bitstream Vera Sans", sans-serif;

}

/* GLOBAL */
div#global {
width: 974px;
margin: auto;
overflow: hidden;
}

/* LIENS */
a { text-decoration: none; }
a img { border: none; }

/************************************************************ CONTENU ************************************************************/


/* MENU NEWS */
div#menunews {
margin: 0 0 0 0px;
float: left;
width: 637px;

}

/* Divers DROITE */
div#menudroite {
margin: 0 0 0 0;
float: right;
width: 300px;

}

/************************************************************ PIED DE PAGE ************************************************************/
div#pieddepage {
width: 974px;
clear: both;
overflow: hidden;
padding: none;
}



Malgré le fait que je lui dise d'aller à droite pour être collé à l'autre il refuse. Ce que je comprends pas c'est que j'ai déjà fait un site en utilisant ça et ça a fonctionné très bien. Alors pourquoi là ça me refuse l'alignement ?

J'ai également vérifié que mes balises <div> avec le bon nom donc ce n'est pas ça non plus. Si quelqu'un pouvait m'apporter une solution je le remercie d'avance ! :)

Bonne journée à vous, et merci à ceux qui tenteront de m'aider :)

3 réponses

Utilisateur anonyme
26 mars 2016 à 00:19
Falut l'ami !!!

A mon avis tu ne devrais pas utiliser les float, moi j'aurais fait un truc genre pour une structure HTML comme ca :
<div class=container">
  <div class="sideBarLeft">
    ...
  </div>
  <div class="page">
    ...
  </div>
</div>

<style>
.container{display : block; width : 974px; margin : 0;}
.sideBarLeft{display : inline-block; width : 300px; vertical-align : top;margin : 0}
.page{display : inline-block; width : 637px; vertical-align : top;margin : 0}
</style>


utilise plustot les display inline block avec un vertical align a top

Tiens moi au jus
0
Ewi-Kun Messages postés 2 Date d'inscription vendredi 25 mars 2016 Statut Membre Dernière intervention 26 mars 2016
Modifié par Ewi-Kun le 26/03/2016 à 12:33
Merci pour ta réponse rapide ! :)

En soit ça me fait la même chose qu'avec le CSS, c'est-à-dire que je peux positionner le block à droite comme je le souhaite mais il refuse de remonter en haut pour ce placer à côté du block de gauche. Je comprends vraiment pas, mon dernier design je l'avais codé de la même façon et ça marché parfaitement, et là ça bloque je ne sais pourquoi ...

Voici le code de ma page si jamais ça peut aider et que l'erreur vient de là :



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="title" content="#" />
<meta name="description" content="#" />
<meta name="keywords" content="# , livre , edition , editer , auteur , bouquin , ecrire , vendre , son , autoedition" />
<meta name="owner" content="#" />
<meta name="author" content="#" />
<title> # - Ecrivez. Vendez. Profitez.</title>
<link rel="stylesheet" href="index-style.css" />



</head>


<body>

<!--////////////////////////////////////////////////// CONTENEUR GLOBAL //////////////////////////////////////////////////-->



<!--/////////////////////////////////////////////// BANNIERE & MENU ///////////////////////////////////////////////-->




<?php include("menu.php"); ?>





<div id="global">

<!--////////////////////////////////////////////////// MENU CENTRAL ET MENU DROITE ////////////////////////////////-->

<div id="menunews">



<br />

<img src="img/index_alaune.png"><br />
<?php include("alaune.php"); ?>

<br/><br /><br />









</div>


<div id="menudroite">

<br /><br />

<h1>

<?php include("sociaux.php"); ?>

<br /><br />



<?php include("dernier_livres_magazines.php"); ?>


<br /><br />

<?php include("top-des-ventes.php"); ?>

</h1>


</div>

<!--////////////////////////////////////////////////// MENU CENTRAL ET MENU DROITE ////////////////////////////////-->

<div id="pieddepage">

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<?php include("pied-de-page.php"); ?>
<br />
</div>

</div>


</body>

</html>

0
Utilisateur anonyme
26 mars 2016 à 14:34
héberge ca quelque part et envoie moi l'url je te corrige ca car la je ne vois pas
0