Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1883 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  texte decalé dans div en float

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

texte decalé dans div en float

n°2297901
alexbel800
Posté le 18-03-2017 à 18:08:21  profilanswer
 

bonjour
 
le texte de mon div placé en float:gauche est décalé d'une ligne vers le bas
 
voici le code html:
 
<div id="prod">
 <div id="l1">
  <div id="l1g">
   <p>Parapharmacie:</p>
   <ul>
   <li><a href="avene.php">Avene</a></li>
   <li><a href="uriage.php">Uriage</a></li>
   <li><a href="boots.php">boots</a></li>
   <li><a href="innoxa.php">Innoxa</a></li>
   <li><a href="gamme-phyto.php">Phyto</a></li>
   </ul>
  </div>
 
  <div id="l1d">
   <p>Bébés</p>
   <ul>
   <li><a href="mustela.php">Mustela</a></li>
   <li><a href="novalac.php">Lait Novalac</a></li>
   </ul>
  </div>
 </div>
 
 <div id="l2">  
  <div id="l2g">
 </div>  
 
 
et mon css:
 
#prod
{
margin-top: 20px;  
margin-left: 170px;
margin-bottom: 20px;  
padding: 5px;  
color: black;
border: 2px solid silver;  
width:730px;
}
 
#l1
{
background-color:black;
width:710px;
}
 
#l1g
{
font-size: 20px;
float:left;
margin-left: 10px;
width : 350px;
height: 200px;
margin-right: 80px;
background-color:blue;
}
 
#l1d
{
font-size: 20px;
text-align: ;
margin-left:50%;
width : 350px;
height: 200px;
margin-right: 80px;
background-color:red;
}
 
Mes blocs se placent correctement, le texte de div l1d est collé au haut du bloc
Le probléme vient du texte du div l1g qui est décalé vers le bas dans le bloc
 
Si j'enléve le float, le texte revient à la bonne place (mais mes blocs ne le sont plus!)
 
Si quelqu'un pouvait m'aider ...

mood
Publicité
Posté le 18-03-2017 à 18:08:21  profilanswer
 

n°2298283
jerem94400
Posté le 27-03-2017 à 11:22:33  profilanswer
 

Voilà comment j'aurais fais moi, en espérant t'avoir aidé.
------------------------------------------------------
HTML :
 
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <link rel="stylesheet" type="text/css" href="css/style.css">
  <title>.</title>
</head>
  <body>
 
 
 
<div class="prod">
 <div class="l1">
  <div class="l1g">
   <p>Parapharmacie:</p>
   <ul>
     <li><a href="avene.php">Avene</a></li>
     <li><a href="uriage.php">Uriage</a></li>
     <li><a href="boots.php">boots</a></li>
     <li><a href="innoxa.php">Innoxa</a></li>
     <li><a href="gamme-phyto.php">Phyto</a></li>
   </ul>
  </div>
 
  <div class="l1d">
   <p>Bébés</p>
   <ul>
   <li><a href="mustela.php">Mustela</a></li>
   <li><a href="novalac.php">Lait Novalac</a></li>
   </ul>
  </div>
 </div>
 
 <div class="l2">  
  <div class="l2g">
</div>  
 
 
  </body>
</html>
 
-----------------------------------------------
CSS :
 
a {
 text-decoration: none;
}
 
.l1 {
 display: flex;
 justify-content: center;
}
 
.l1d {
 background-color: red;
 padding: 20px;
}
 
.l1g {
 background-color: yellow;
 padding: 20px;
}
 
-----------------------------------------

n°2298343
alexbel800
Posté le 29-03-2017 à 15:24:37  profilanswer
 

merci beaucoup jerem
en ajoutant juste le padding ça fonctionne, je n'y avais pas pensé
merci de m'avoir donné de ton temps
 
ps: désolé, je n'avais pas réagi que je laissais des noms de marques, ce n'était absolument pas fait exprès. Je serai plus vigilent la prochaine fois.

n°2298370
jerem94400
Posté le 30-03-2017 à 11:13:35  profilanswer
 

Je t'en prie, bonne continuation.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  texte decalé dans div en float

 

Sujets relatifs
Texte qui suit image !transformer un fichier texte en XML
changement de font-family de texte selectionnétexte sous une image
Modifier un texteCentrage float etc... :D
recupérer une chaine de texte d'un variable FORColoration de code dans un texte
Vba word en-tête image + texte 
Plus de sujets relatifs à : texte decalé dans div en float


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR