texte decalé dans div en float
texte decalé dans div en float - HTML/CSS - Programmation
Marsh Posté le 27-03-2017 à 11:22:33
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;
}
-----------------------------------------
Marsh Posté le 29-03-2017 à 15:24:37
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.
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 texte
- Centrage float etc... :D
- recupérer une chaine de texte d'un variable FOR
- Coloration de code dans un texte
- Vba word en-tête image + texte
Marsh Posté le 18-03-2017 à 18:08:21
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 ...