Problème d'alignement de carré (<div>)
Résolu
deadangel04
Messages postés
112
Date d'inscription
Statut
Membre
Dernière intervention
-
deadangel04 Messages postés 112 Date d'inscription Statut Membre Dernière intervention -
deadangel04 Messages postés 112 Date d'inscription Statut Membre Dernière intervention -
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:
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>)
- Metre carré clavier ✓ - Forum Bureautique
- 2 au carré symbole iphone ✓ - Forum iPhone
- Signe au carré - Forum iPad
- Parenthese carré ✓ - Forum MacOS
- Symbole racine carré clavier téléphone ✓ - Forum iPhone
7 réponses
Salut ^^,
si .carre est le truc gris qui flotte à gauche ton erreur vient du fait que tu as justement mis un "float:left;"
si .carre est le truc gris qui flotte à gauche ton erreur vient du fait que tu as justement mis un "float:left;"
Mon code Html:
Et mon code css:
<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;
}
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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)
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 :=)
"<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 :=)
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 ;)
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)