Problème de div en css
kitchi76
Messages postés
222
Statut
Membre
-
theshadoo Messages postés 878 Statut Membre -
theshadoo Messages postés 878 Statut Membre -
Bonjour,
Je vous explique mon problème.
Je suis en train de créer un site web mais j'ai de la difficulté avec les balises "div".En général,je m'en sors pas mal tout seul mais là je coince,je ne trouve pas de solutions.
Donc j'ai fait un div pour mon entete et dans cet entete,il y a 2 autres div que j'arrive à redimmensionner et à bouger à l'intérieur de mon div entete principal mais le problème est que je sais pas comment les rendre indépendant l'un de l'autre.Je m'explique:
Dés que j'essaye de donner un margin-top au premier,le deuxième descend en même temps et quand je fais un margin-top sur le deuxième,il prend sa position de départ sur le premier div et non sur la marge de l'entete principal.
Heu vous me suivez jusque là? :/
Bon,si oui,je vais vous montrer mes codes...Et si non,bin demandez moi,j'essaierais d'être plus clair.
Bon voici donc mon code HTML:
<!-- EN TETE -->
<center>
<div id="entete"> <--------entete général
<div id="textemenuimage"> <----------1er div
TITRE DE LA PAGE
</div>
<div id="retourmenu"> <----------2ème div
<a href="../index.html"> Retour au menu principal </a>
</div>
</div>
</center>
<!-- FIN -->
J'espère que le code est assez clair.
Voici maintenant mon code CSS:
#entete
{
color:white;
font-weight:bold;
height:100px;
width:1000px;
background:url('images/fond/banniere.png');
background-position:center;
border:2px solid red;
}
#textemenuimage
{
float:left;
width:300px;
margin-top:30px;
margin-left:350px;
border:2px solid red;
}
#retourmenu
{
float:right;
width:200px;
margin-right:50px;
border:2px solid red;
}
J'ai mis des bordures sur chaque div pour pouvoir les visualiser comme il faut.
Voilà les div "textemenuimage" et "retourmenu" ne sont pas indépendant l'un de l'autre,il y en a toujours un qui interagit dés que j'en modifie un autre.
Merci d'avance pour vos idées et votre aide.
Je vous explique mon problème.
Je suis en train de créer un site web mais j'ai de la difficulté avec les balises "div".En général,je m'en sors pas mal tout seul mais là je coince,je ne trouve pas de solutions.
Donc j'ai fait un div pour mon entete et dans cet entete,il y a 2 autres div que j'arrive à redimmensionner et à bouger à l'intérieur de mon div entete principal mais le problème est que je sais pas comment les rendre indépendant l'un de l'autre.Je m'explique:
Dés que j'essaye de donner un margin-top au premier,le deuxième descend en même temps et quand je fais un margin-top sur le deuxième,il prend sa position de départ sur le premier div et non sur la marge de l'entete principal.
Heu vous me suivez jusque là? :/
Bon,si oui,je vais vous montrer mes codes...Et si non,bin demandez moi,j'essaierais d'être plus clair.
Bon voici donc mon code HTML:
<!-- EN TETE -->
<center>
<div id="entete"> <--------entete général
<div id="textemenuimage"> <----------1er div
TITRE DE LA PAGE
</div>
<div id="retourmenu"> <----------2ème div
<a href="../index.html"> Retour au menu principal </a>
</div>
</div>
</center>
<!-- FIN -->
J'espère que le code est assez clair.
Voici maintenant mon code CSS:
#entete
{
color:white;
font-weight:bold;
height:100px;
width:1000px;
background:url('images/fond/banniere.png');
background-position:center;
border:2px solid red;
}
#textemenuimage
{
float:left;
width:300px;
margin-top:30px;
margin-left:350px;
border:2px solid red;
}
#retourmenu
{
float:right;
width:200px;
margin-right:50px;
border:2px solid red;
}
J'ai mis des bordures sur chaque div pour pouvoir les visualiser comme il faut.
Voilà les div "textemenuimage" et "retourmenu" ne sont pas indépendant l'un de l'autre,il y en a toujours un qui interagit dés que j'en modifie un autre.
Merci d'avance pour vos idées et votre aide.
A voir également:
- Problème de div en css
- Div c++ - Télécharger - Langages
- Remplacer #div/0 par vide ✓ - Forum Excel
- Enlever le soulignement d'un lien css ✓ - Forum CSS
- Css download - Télécharger - HTML
- Background color css ✓ - Forum CSS
3 réponses
Bonjour,
1) puis-je vous suggérer de ne plus utiliser <center> ??? C'est obsolète. On préférera:
<div style='text-align: center;'>..........</div>
2) ensuite, je vous suggère d'exploiter le positionnement en css comme expliqué ici:
http://html5.immo-scope.com/index.php?page=html5/miseEnPageAvecPositionnement
3) enfin, puis-je vous suggérer également de limiter la prolifération des DIVs...???
Pour ce faire, il existe de nouvelles balises HTML5 spécialement dédiées à une bonne structuration sémantique du code HTML:
http://html5.immo-scope.com/index.php?page=html5/premierePageHtml5
Votre en-tête deviendrait:
et le css qui va avec:
c'est pas plus lisible comme ça?
A peluche
un +1 sur mes commentaires - si vous avez apprécié - c'est gentil, merci.
1) puis-je vous suggérer de ne plus utiliser <center> ??? C'est obsolète. On préférera:
<div style='text-align: center;'>..........</div>
2) ensuite, je vous suggère d'exploiter le positionnement en css comme expliqué ici:
http://html5.immo-scope.com/index.php?page=html5/miseEnPageAvecPositionnement
3) enfin, puis-je vous suggérer également de limiter la prolifération des DIVs...???
Pour ce faire, il existe de nouvelles balises HTML5 spécialement dédiées à une bonne structuration sémantique du code HTML:
http://html5.immo-scope.com/index.php?page=html5/premierePageHtml5
Votre en-tête deviendrait:
<!-- EN TETE -->
<header>
<h1>TITRE DE LA PAGE</h1>
<nav>
<a href="../index.html"> Retour au menu principal </a>
</nav>
</header>
et le css qui va avec:
header {
text-align: center;
height:100px;
width:1000px;
background:url('images/fond/banniere.png');
background-position:center;
border:2px solid red;
}
header h1 {
color:white;
font-weight:bold;
float:left;
width:300px;
margin-top:30px;
margin-left:350px;
border:2px solid red;
}
header nav {
display: block;
}
c'est pas plus lisible comme ça?
A peluche
un +1 sur mes commentaires - si vous avez apprécié - c'est gentil, merci.
c'est pas logique... enfin du moins je comprends pas car tes balises sont bien indépendante l'une de l'autre.
Sous quel navigateur tu es ? tu ne peux pas mettre sur un hébergement fictif ton exemple car même en lisant ton code, c'est correct
Sous quel navigateur tu es ? tu ne peux pas mettre sur un hébergement fictif ton exemple car même en lisant ton code, c'est correct
Et comme ça fait pas si longtemps que j'ai débuté dans le html/css,est-ce que je peux le déplacer à ma guise n'importe ou dans la page ou dans mon entete?
Je ne connais pas bien ces balises.
En tout cas,je vais les essayer c'est sur et aller sur les liens que tu m'as donné pour en savoir plus.
Merci pour ta réponse,elle m'a éclairé sur la façon dont je m'y prenais (bien que je suis pas si pire :D ).
je m'en vais essayer,merci!
Y'a t-il un moyen pour que ça fonctionne sous explorer?
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Titre de ma page</title> <!--[if lte IE 8]><script src="js/ie.patch.js"></script><![endif]--> </head> <body> <article> <p>Bonjour tout le monde</p> </article> </body> </html>Le commentaire conditionnel tel qu'il est défini dans le code source ci-avant est opérationnel pour toutes les versions de IE antérieures à la version 8. Si la page web est chargée par un navigateur web IE (Internet Explorer) dont la version est antérieure à IE9, on charge le code contenu dans le fichier ie.patch.js dont le contenu est le suivant:
var e = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; < e.length; i++) { document.createElement(e[i]); }