Problème d'alignement de carré (<div>)

Résolu

deadangel04 Messages postés 118 Statut Membre -
deadangel04 Messages postés 118 Statut Membre - 14 nov. 2014 à 16:21

Bonjour,
Alors voila j'ai un petit probleme en effet, j'ai commencera creer un site mais ca fait un moment que ces divs me pose problème alors voila:

Comme vous pouvez le voir, les 2 cadres ne se mettent pas sur la meme horizontale... c'est la tout mon problème alors si vous savez comment faire je vous en serai très reconnaissant! :)

voila mon code:

/**** CARRE BLANC*****/
.carre_blanc{
margin:auto;
width:730px;
background-color:white;
padding:20px;
float: none;
-moz-border-radius: 30px 30px 9px 9px;
-webkit-border-radius:  30px 30px 9px 9px;
}

.carre{
width:70px;
height:500px;
background:#069;
margin:auto;
padding:30px;
border-radius:5px;
float:left;
}

Afficher la suite

7 réponses

Réponse 1 / 7
Gamer-Actu Messages postés 413 Statut Membre 35

Salut ^^,
si .carre est le truc gris qui flotte à gauche ton erreur vient du fait que tu as justement mis un "float:left;"
0
1. deadangel04 Messages postés 118 Statut Membre 34
  
  Le ".carre" est le rectangle de droite(bleu foncé) et .carre blanc est celui du milieu(le blanc^^) du coup si j'enleve le float:left; il me met mon rectangle au centre de la page...
  
  0
2. Gamer-Actu Messages postés 413 Statut Membre 35
  
  Ah oui non d'accord je viens de comprendre ce que tu voulais, excuses moi ^^
  Du coup essayes plutôt de remplacer le float:none par un float : center et si ça ne marche pas encore il va falloir que tu y aille à grand renfort de "position:relative/absolute/fixed/etc...", y en a pas bcp teste un peu ça devrait marcher ;)
  
  0
3. deadangel04 Messages postés 118 Statut Membre 34
  
  marche toujours pas :(
  
  0
4. Gamer-Actu Messages postés 413 Statut Membre 35
  
  Tu as essayé de bidouiller avec les position ?
  Sinon donne moi le HTML incriminé aussi et demain je te filerai un code qui marche (enfin si quelqu'un ne le fait pas avant)
  
  0

deadangel04 Messages postés 118 Statut Membre 34

Mon code Html:

<html>
 <HEAD>
 <meta charset="UTF-8">
 <link href="css/style.css" rel="stylesheet" type="text/css" />
 </HEAD>

 
<body bgcolor="#0099FF">
<center>
<ul id="nav">
<li class="current"><a href="#">Accueil</a></li><!-- n1 -->
<li><a href="#">Projets</a><!-- n1 -->
 <ul>
  <li><a href="#">Scripts <img src="images/multi.png" border="0" width="15" height="15" align="absmiddle"></a><!-- n2 -->
   <ul>
    <li><a href="#">Javascript</a></li><!-- n3 -->
    <li><a href="#">jQuery</a></li><!-- n3 -->
   </ul>
  </li>
  <li><a href="#">Diaporamas <img src="images/multi.png" border="0" width="15" height="15" alt="" align="absmiddle"></a><!-- n2 -->
   <ul>
    <li><a href="#">jQuery</a></li><!-- n3 -->
    <li><a href="#">Flash</a></li><!-- n3 -->
   </ul>
  </li>
  <li><a href="#">Lightbox</a></li><!-- n2 -->
  <li><a href="#">Kits graphiques</a></li><!-- n2 -->
 </ul>
</li>
<li><a href="#">Multi-Niveaux</a>
 <ul>
  <li><a href="#">niveau 1 <img src="images/multi.png" border="0" width="15" height="15" alt="" align="absmiddle"></a>
   <ul>
    <li><a href="#">Niveau 2</a></li>
    <li><a href="#">Niveau 2 <img src="images/multi.png" border="0" width="15" height="15" alt="" align="absmiddle"></a>
     <ul>
      <li><a href="#">Niveau 3</a></li>
      <li><a href="#">Niveau 3</a></li>
      <li><a href="#">Niveau 3</a></li>
     </ul>
    </li>
    <li><a href="#">Niveau 2</a></li>
   </ul>
  </li>
  <li><a href="#">Niveau 1</a></li>
  <li><a href="#">Niveau 1</a></li>
  <li><a href="#">Niveau 1 <img src="images/multi.png" border="0" width="15" height="15" alt="" align="absmiddle"></a>
   <ul>
    <li><a href="#">Niveau 2</a></li>
    <li><a href="#">Niveau 2</a></li>
    <li><a href="#">Niveau 2</a></li>
   </ul>
  </li>
 </ul>
</li> 
<li><a href="#">Liens</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="carre_blanc"><!--Début du carré blanc-->
</br></br></br></br>
</div><!--Fin du carré blanc -->
<div class="carre">jnkj
</div>
</div>



</Body>

Et mon code css:

/**** CARRE BLANC*****/
.carre_blanc{
margin:auto;
width:730px;
background-color:white;
padding:20px;
float: center;
-moz-border-radius: 30px 30px 9px 9px;
-webkit-border-radius:  30px 30px 9px 9px;
}
html, body {
   height:100%;
}
.carre{
width:70px;
height:500px;
background:#069;
margin:auto;
padding:30px;
border-radius:5px;
float:left;
position : absolute;
}

Réponse 3 / 7
Pitet Messages postés 2845 Statut Membre 530

Salut,

Peux tu décrire plus précisément ce que tu souhaites (voir un dessin) ?
0
Réponse 4 / 7
mhd91800 Messages postés 498 Date d'inscription Statut Membre Dernière intervention 6

quand tu dis la même horizontal c'est quoi ? tu veux que le gris soit dans le blanc ?
0
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Réponse 5 / 7
deadangel04 Messages postés 118 Statut Membre 34

Je souhaite que le carre bleu et le carre blanc se mettent sur la meme horizontale mais je veux que le carre blanc reste sous le menu, meme si on dezoome avec la roulette(au centre)
0
1. mhd91800 Messages postés 498 Date d'inscription Statut Membre Dernière intervention 6
  
  remplace ton margin:auto par un margin-top : -10px ou plus sur ton carré blanc pour le faire remonté voir
  
  0
Réponse 6 / 7
mhd91800 Messages postés 498 Date d'inscription Statut Membre Dernière intervention 6

ensuite sache que les truc du genre
"<li><a href="#">Scripts <img src="images/multi.png" border="0" width="15" height="15" align="absmiddle"></a>"
même si c'est un gain de temps c'est pas trop conseillé...c'est plus simple et ça évite bcp de soucis quand tu sépare ton CSS de ton html...c'est ce que je fait persos.

j'ai renommé <link href="css/style.css" car tu à du mettre ton fichier css dans un sous dossier..
même en le renommant ta page ne s'affiche correctement sur mon navigateur

il faudrait que tu envoie tes images insérer stp :=)
0
Réponse 7 / 7
mhd91800 Messages postés 498 Date d'inscription Statut Membre Dernière intervention 6

Voilà ce que j'ai obtenue tu verra qu'il y'a un peut de ton corde qui s'affiche dans le carré blanc donc ça doit fonctionner logiquement car sans le margin-top je l'ai en dessous
0
1. deadangel04 Messages postés 118 Statut Membre 34
  
  Merci je teste ca en rentrant vers 18h
  
  0

Problème d'alignement de carré (<div>)

7 réponses

Discussions similaires

Newsletters