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

Résolu/Fermé

deadangel04 Messages postés 112 Date d'inscription vendredi 28 mars 2014 Statut Membre Dernière intervention 2 août 2015 - Modifié par deadangel04 le 13/11/2014 à 23:46
deadangel04 Messages postés 112 Date d'inscription vendredi 28 mars 2014 Statut Membre Dernière intervention 2 août 2015 - 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;
}

A voir également:

Problème d'alignement de carré (<div>)
Point d'interrogation dans un carré ✓ - Forum Samsung
Parenthèse carré ✓ - Forum Clavier
Au carré symbole ✓ - Forum MacOS
Metre carré clavier ✓ - Forum Windows
Div c++ - Télécharger - Langages

7 réponses

Réponse 1 / 7

Gamer-Actu Messages postés 359 Date d'inscription dimanche 1 mai 2011 Statut Membre Dernière intervention 28 avril 2023 32
13 nov. 2014 à 23:28

Salut ^^,
si .carre est le truc gris qui flotte à gauche ton erreur vient du fait que tu as justement mis un "float:left;"

deadangel04 Messages postés 112 Date d'inscription vendredi 28 mars 2014 Statut Membre Dernière intervention 2 août 2015 34
13 nov. 2014 à 23:31

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...

Gamer-Actu Messages postés 359 Date d'inscription dimanche 1 mai 2011 Statut Membre Dernière intervention 28 avril 2023 32
14 nov. 2014 à 00:10

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 ;)

deadangel04 Messages postés 112 Date d'inscription vendredi 28 mars 2014 Statut Membre Dernière intervention 2 août 2015 34
14 nov. 2014 à 00:21

marche toujours pas :(

Gamer-Actu Messages postés 359 Date d'inscription dimanche 1 mai 2011 Statut Membre Dernière intervention 28 avril 2023 32
14 nov. 2014 à 00:24

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)

Réponse 2 / 7

deadangel04 Messages postés 112 Date d'inscription vendredi 28 mars 2014 Statut Membre Dernière intervention 2 août 2015 34
Modifié par deadangel04 le 14/11/2014 à 08:05

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 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
14 nov. 2014 à 11:56

Salut,

Peux tu décrire plus précisément ce que tu souhaites (voir un dessin) ?

Réponse 4 / 7

mhd91800 Messages postés 498 Date d'inscription lundi 19 décembre 2011 Statut Membre Dernière intervention 15 juin 2016 6
14 nov. 2014 à 13:11

quand tu dis la même horizontal c'est quoi ? tu veux que le gris soit dans le blanc ?

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 7

deadangel04 Messages postés 112 Date d'inscription vendredi 28 mars 2014 Statut Membre Dernière intervention 2 août 2015 34
14 nov. 2014 à 13:18

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)

mhd91800 Messages postés 498 Date d'inscription lundi 19 décembre 2011 Statut Membre Dernière intervention 15 juin 2016 6
14 nov. 2014 à 13:34

remplace ton margin:auto par un margin-top : -10px ou plus sur ton carré blanc pour le faire remonté voir

Réponse 6 / 7

mhd91800 Messages postés 498 Date d'inscription lundi 19 décembre 2011 Statut Membre Dernière intervention 15 juin 2016 6
Modifié par mhd91800 le 14/11/2014 à 13:28

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 :=)

Réponse 7 / 7

mhd91800 Messages postés 498 Date d'inscription lundi 19 décembre 2011 Statut Membre Dernière intervention 15 juin 2016 6
14 nov. 2014 à 13:39

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

deadangel04 Messages postés 112 Date d'inscription vendredi 28 mars 2014 Statut Membre Dernière intervention 2 août 2015 34
14 nov. 2014 à 16:21

Merci je teste ca en rentrant vers 18h

Discussions similaires

Signe au carré

Écrire le signe racine carrée sur le clavier d’un iPhone 5

Faire un crochet sur le clavier

Crochets carrés

parenthese crochet