Guide informatique hardware En1heure.com
Articles phares : Quelle alimentation PC | Choisir son ecran LCD PC

Chercher un sujet :

Passer un menu en tab en xhtml

Support HTML / XHTML / CSS et validation de vos sites aux standards du Web.

Messages: 32
Inscription: Ven Avr 02, 2004 6:04 pm
Localisation: Bordeaux
Passer un menu en tab en xhtmlMessagePosté: Ven Avr 02, 2004 6:09 pm

Eh eh, c'est moi qui post le premier message !

Bon voilà mon soucis :

J'ai un menu qui est fait de trois choses :

en haut : une image qui fait le titre
au milieu : le contenu avec une image en background qui s'agrandi avec le contenu
en bas : une image qui fait le footer

Tout ca fait avec un tableau en html (border, cellspacing, cellpadding à 0)

Je passe tout ca en xhtml + css

J'arrive à faire le milieu avec un div et un background dans le css mais comment coller le l'image du titre et du footer ?

Pour les items du menu, je veux faire un liste, je mets ca dans le div ?

Ca en fait des questions pour un premier post !

Vous avez compris quelque chose ??? :^^:

P.S : le(s) menus sont visibles dans la version html sur le site de mon profil
Avatar de l’utilisateur
Administrateur
Messages: 1614
Inscription: Ven Mar 26, 2004 7:16 am
Localisation: /var/www/
Passer un menu en tab en xhtmlMessagePosté: Ven Avr 02, 2004 7:47 pm

Bonjour Ideezik,
Si j'ai bien compris ton site est composé de 3 couches superposées. Un header, le contenu juste en dessous et le footer pour finir.
Pour le passer en XHTML / CSS et se débarassser des tableaux pour la mise en page il te suffit de procéder ainsi :

Dans ta page XHTML
Code: Tout sélectionner
<div class="header">Ici le titre</div>
<div class="article">Ici le contenu de la page, son article</div>
<div class="footer">Ici le bas de page</div>


Et dans la page CSS (les tailles données sont des exemples)
Code: Tout sélectionner
.header {
height:91px;
width:750px;
background_image:url("./images/header.png");
}

.article {
width:750px;
background_image:url("./images/header.png");
text-align:justify;
}

.footer {
height:10px;
}


Et comme tu peux le voir la page est beaucoup plus légère que si tu utilisais les tableaux.

Si tu as le moindre problème n'hésite pas à demander ;)

Messages: 32
Inscription: Ven Avr 02, 2004 6:04 pm
Localisation: Bordeaux
Passer un menu en tab en xhtmlMessagePosté: Sam Avr 03, 2004 7:12 am

Comment faire pour ne pas faire des divs dans des divs dans des divs ???
Comment reproduire les deux traits verticaux (cadre du site) qui sont actuellement des <td bgcolor=black width=1> avec un colspan pour qu'ils prennent toute la hauteur du site.

Je pose des questions, mais faut pas croire, je bosse et j'avance sur le xhtml !!!

Merci pour votre aide :P
Avatar de l’utilisateur
Administrateur
Messages: 1614
Inscription: Ven Mar 26, 2004 7:16 am
Localisation: /var/www/
Passer un menu en tab en xhtmlMessagePosté: Sam Avr 03, 2004 8:33 am

Comment faire pour ne pas faire des divs dans des divs dans des divs ?

Ca tu ne peux pas faire autrement !
div crée un bloc et span crée un élément dans une ligne.
Qu'est ce qui te dérange avec les div ?

Comment reproduire les deux traits verticaux (cadre du site) qui sont actuellement des <td bgcolor=black width=1> avec un colspan pour qu'ils prennent toute la hauteur du site.

Pour les traits il te faudra définir des bordures.
Par exemple pour la bordure de l'article il te faut, en CSS :
Code: Tout sélectionner
.article {
border-left:solid 1px #000;
border-right:solid 1px #000;
}


Je pose des questions, mais faut pas croire, je bosse et j'avance sur le xhtml !

Aucun problème, le forum est là pour ça ;) Les questions sont les bienvenues.

Pour ce qui est du menu en liste c'est une très bonne idée.
Dans le fichier XHTML il suffit de faire une liste :
Code: Tout sélectionner
<ul>
<li>Accueil</li>
<li>Nouveautés</li>
<li>Article</li>
<li>Contact</li>
(...)
</ul>


Ensuite, comme pout tout élément, tu peux tout mettre en forme avec le CSS.
Voici un exemple :
Code: Tout sélectionner
ul {
margin:0px;
padding:0px;
width:130px;
}

li {
list-style-type:none;
padding-top:0.5em;
padding-bottom:0.5em;
display:block;
background:#999;
color:#fff;
}

list-style-type:none; permet de ne pas afficher la puce dans la liste.
display:block; impose de faire de chaque élément <li> un bloc.

L'unité "em" signifie "taille proportionnelle par rapport à celle de la police".
Donc 1em = taille de la police.
2em = deux fois la taille de la police.

Voilà !

Messages: 99
Inscription: Mer Avr 07, 2004 4:14 pm
Localisation: Mâcon
Passer un menu en tab en xhtmlMessagePosté: Mer Avr 07, 2004 5:12 pm

j'aimerais préciser, suite à la lecture/compréhension de cet article, que les div ne sont pas indispensables... 8)

par exemple, vous pouvez très bien donner l'apparence d'un div de hauteur 100px sur une largeur de 100px, avec fond bleu, à une liste <ul>.

Vive, après l'apprentissage des normes, la mise en pratique de l'accessibilité ;)
Avatar de l’utilisateur
Administrateur
Messages: 1614
Inscription: Ven Mar 26, 2004 7:16 am
Localisation: /var/www/
Passer un menu en tab en xhtmlMessagePosté: Mer Avr 07, 2004 5:30 pm

Oui puisque toutes les balises HTML / XHTML sont paramétrables à souhait. C'est de cette manière que j'ai crée le sommaire des sites En1heure (<li> définies en taille et couleur)

Messages: 32
Inscription: Ven Avr 02, 2004 6:04 pm
Localisation: Bordeaux
Passer un menu en tab en xhtmlMessagePosté: Mer Avr 07, 2004 5:40 pm

Merci pour l'astuce ! Je vais tester !
C'est bon, pour le reste, j'ai réussi... Y'a plus qu'Opera qui me fait une hauteur différente sur mes <input>, je vais continuer à chercher pourquoi !

David

Retourner vers HTML / XHTML / CSS



Chercher un sujet :


cron