5568 sujets

Sémantique web et HTML

bien le salut a vous Smiley smile
voila je prépare une page xhtml et j'ai un probleme d'imbrication de balise <div> .
premierement je sais que l'imbrication des balises est possible en xhtml .
la technique que j'essaye d'utilisé est la suivante :
<div id="corp">
<div id="corp01">
<div id="corp02">
</div>
</div>
</div>
en xhtml cela est corect non?

maintenant du coté du css
je dois donnée une largeur a la balise pricipale <div id="corp">
#corp
{
width:700px;
float-left;
}
puis pour pour appliqué un style css a la balise <div id="corp01> je dois utilise le css suivant :
#corp corp01
{
display:block;
float:right;
width:300px;
margin-top:20px;
}
ma maniere de procedé est elle correcte concernant les id ?
amicalement adel Smiley smile
Modifié par adel01 (03 Mar 2009 - 10:28)
Bonjour adel01,
Si tu souhaites imbriquer des div les uns dans les autres, oui, c'est la bonne démarche.
En revanche, ton code est bourré de fautes de frappe (id sans fermeture de quotes, id dans le html différent de celui dans les css,…).

De plus, il faut correctement écrire ton message!
Modérateur
Salut,

Apparement, tu as fait quelques corrections au sujet du code et ton code html me parait valide. Cela me semble correct du côté CSS. J'ai toutefois un doute sur le ciblage de tes div. Perso, je préfère aller droit au but. ex :


#corp01{
  display:block;
  float:right;
  width:300px;
  margin-top:20px;
}


Par contre, j'ai l'impression que tu n'aurais pas dû imbriqué comme cela tes div ou que tu t'es trompé lors de l'assignation du float:left et float:right. Je ne vois pas tout à fait ton gabarit final. Enfin, j'ai ma petite idée mais je peux me trompé. Donc je préfère m'abstenir.


++

NB : Peux tu SVP mettre ton code suivant la règle 13 du forum. Cela permet de mieux parcourir ton code. Smiley smile
Modifié par Nolem (01 Mar 2009 - 23:32)
adel01 a écrit :
premierement je sais que l'imbrication des balises est possible en xhtml.
Oui. En précisant que les règles sont très précises. D'une manière générale les éléments de type bloc peuvent contenir des éléments de type en-ligne et d'autres éléments de type bloc alors que les éléments de type en-ligne ne peuvent contenir que d'autres éléments de type en-ligne (voir la structure des balises bloc et en-ligne ainsi que les exceptions et en bonus un outil bien pratique qui résume tout cela : http://giminik.developpez.com/xhtml/index.php ).

adel01 a écrit :
ma maniere de procedé est elle correcte concernant les id ?
Non : il aurait fallu utiliser #corp #corp01 et plus simple encore #corp01 puisqu'un id est unique. En complément voir :
* Quelle est la différence entre une classe et un id.
* Cascade CSS et priorité des sélecteurs.
* les sélecteurs.

Au passage le display:block est inutile puisqu'il est implicite lorsque l'on utilise le float.


Sinon (et comme précisé déjà 2 fois Smiley smile ) : pour conserver une bonne lisibilité des messages sur le forum, il est demandé d'utiliser les balises code pour présenter le code source des exemples.
Pourrais-tu éditer ton message pour te conformer à cette règle de mise en forme ?
Merci d'avance. Smiley cligne
Modifié par Heyoan (02 Mar 2009 - 00:12)
Bonjour,

Vais encore passer pour un chipoteur. Smiley ravi

Heyoan a écrit :
Non : il aurait fallu utiliser #corp #corp01 et plus simple encore #corp01 puisqu'un id est unique.


Le "non" est un peu direct Smiley smile . Certes un id est unique mais peut représenter un élément différent d'un document à un autre (c'est pas forcément pertinent c'est juste possible). Ce qui offre des possibilités de personnalisation CSS & de manipulation JS intéressante.

Ceci dit, en effet, il ne faut pas abuser de l'attribut id (mais des fois on a pas le choix Smiley cligne ).

Romain
yodaswii a écrit :
Vais encore passer pour un chipoteur. Smiley ravi
Non, non ! Smiley biggol Smiley ravi


PS :

@adel01 > c'est bien de passer ton sujet en [résolu] mais ça serait sympa de donner signe de vie à ceux qui prennent le temps de te répondre (et au passage de tenir compte de ma demande de mise en forme). Comme indiqué dans la règle 18 du forum Alsacréations n'est pas un fast-food ! Smiley ohwell
Modérateur
yodaswii a écrit :

...
Ce qui offre des possibilités de personnalisation CSS & de manipulation JS intéressante.
...


Salut,

Peux tu être plus explicite svp ? Je ne comprend pas vraiment ce que tu veux entendre par là. Attention, je n'ai pas vraiment de connaissance en js.

++
Nolem a écrit :
Peux tu être plus explicite svp ? Je ne comprend pas vraiment ce que tu veux entendre par là.
yodaswii me rappelait (fort à propos Smiley biggrin !) qu'on peut envisager d'avoir un même nom d'id dans plusieurs documents et le cibler différemment (CSS ou JS) en fonction d'un conteneur différent.

Par exemple :

page1.html
<body id="truc">
<div id="global">
...
</div>
</body>
page2.html
<body id="muche">
<div id="global">
...
</div>
</body>
css
#truc #global { background-color: blue; }
#muche #global { background-color: cyan; }

<hs>
SVP s'emploie pour s'il vous plaît mais pour s'il te plaît je verrais plutôt STP Smiley biggol
</hs>
Bonjour tout le monde,

Pour ma part, je préfère utiliser des class plutôt que des id ... les id étant plutôt réservé pour le dev' Smiley smile

Au final tu aurais très bien pu faire:

page1.html
<body class="truc">
<div class="global">
...
</div>
</body>


page2.html
<body class="muche">
<div class="global">
...
</div>
</body>


css
.truc .global { background-color: blue; }

.muche .global { background-color: cyan; }
Thibow a écrit :
Pour ma part, je préfère utiliser des class plutôt que des id ... les id étant plutôt réservé pour le dev' Smiley smile


'mande pardon, c 'est quoi cette nouvelle id(ée) ?
Modérateur
Salut,

@Heyoan : Maintenant, c'est plus clair pour moi. Il faut dire, quand j'ai posé la question, j'étais un peu creuvé. En ce moment, je me paie des morceaux de fatigues. Néanmoins, je te remercie de cette petite précision. Smiley smile

Thibow a écrit :

Pour ma part, je préfère utiliser des class plutôt que des id ... les id étant plutôt réservé pour le dev' smile


Je te propose de lire ceci . Tu vas comprendre que ta pratique est erronnée. Smiley cligne

++
Modifié par Nolem (11 Mar 2009 - 21:36)