Aide sur du xhtml

Fermé
Leslie - 3 juin 2009 à 12:46
 Leslie - 3 juin 2009 à 17:34
Bonjour a tous,


Je tatonne pour créer mon site parce que ca m'intéresse de comprendre et je bloque sur un alignement de div.

Voici mon code html, pas trop long:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>
<title>Styliste - Infographiste</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="essai" href="essai.css" />
</head>


<body>

<div id="menu">

<div class="element_menu">
<a href="stylisme.html"style="text-decoration:none">Stylism e</a>
</div>

<div class="element_menu">
<a href="imprimés.html"style="text-decoration:none">Imprimé s</a>
</div>

<div class="element_menu">
<a href="cv.html"style="text-decoration:none">CV</a>& lt;/li>
</div>

<div class="element_menu">
<a href="contact.html"style="text-decoration:none">Contact& lt;/a>
</div>

</div>

</body>
</html>


Et le CSS qui va avec:

body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: !!!url(!!!"logo.jpg");
background-repeat: no-repeat;
background-position: center;
}


/* Le menu */

#menu
{
float: right;
width: 120px;
}

.element_menu
{
color: rgb(147,148,150);
font-family: "Georgia", serif, Comic Sans MS, Trebuchet MS;
text-align: center;
font-size: medium;
border: none;
margin-bottom: 20px;
font-weight: bold;
}


/* Quelques effets sur les menus */

.element_menu a
{
color: rgb(147,148,150);
}

.element_menu a:hover
{
color:teal;
}

Je crois que c'est assez clair et pas trop complexe. Mon souci c'est que je veux aligner horizontalement les liens "stylisme" "imprimés"... J'ai trouvé des solutions pour ca, genre le tableau, mais si je réduis ma fenêtre ces éléments-là bougent, alors que mon image de fond reste bien fixe, avec ce système de div, les liens restent bien en place mais je n'arrive pas a les aligner.

J'ai bcp entendu parler de flux mais je ne sais pas ce que c'est...donc je sais pas en quoi ca concerne mon problème.

Enfin ces liens je souhaite les placer dans un cadre qui est formé par mon image de fond, pour cela je ne peux pas mettre "align" mais je dois donner des "coordonnées", ma question est simple: est-ce que suivant les ordinateurs des internautes les éléments seront placés a différents endroits ? car ca va poser probleme...

merci pour votre aide

5 réponses

Natio78 Messages postés 719 Date d'inscription vendredi 9 novembre 2007 Statut Membre Dernière intervention 27 mai 2013 96
3 juin 2009 à 14:52
pourquoi est ce que tu créés un div pour chaque lien de ton menu?
tu devrais juste garder ton <div class=menu> et mettre tes liens dedans ça suffirait amplement non?
0
Optimal-effect Messages postés 14 Date d'inscription mercredi 3 juin 2009 Statut Membre Dernière intervention 12 mars 2010 1
3 juin 2009 à 15:10
Salut

Essaye à partir de ça, à mettre à ton goût bien sûr et à compléter selon tes préférences

Dans ton fichier css
div#menu
{
display: block;
position: absolute;
width: /* taille de ton bloc menu */;
height: /* taille de ton bloc menu */;
/* positionne avec les options top, left, margin-top, margin-left... */
}

div#menu ul
{
display : inline; /* important */
float : left;
position : relative;
margin-top: 0px;
}

div#menu ul li
{
display : block;
float : left;
width : /* taille de tes onglets */;
height : /* taille de tes onglets */;
}

Dans ton fichier html :

<div id="menu">
<ul>
<!-- N'oublie pas les points-virgule dans les styles="", une bonne pratique -->
<li><a href="stylisme.html" style="text-decoration:none;">Stylisme</a> </li>
<li><a href="imprimes.html" style="text-decoration:none;">Imprimés</a></li> <!-- Et enlève les accents dans tes fichiers html (remplace imprimés.html par imprimes.html) -->
<li><a href="cv.html" style="text-decoration:none;">CV</a></li>
<li><a href="contact.html" style="text-decoration:none;">Contact</a></li>
</ul>
</div>

Et surtout, étudie bien le code pour le comprendre...

Bye
0
Yes merci !!

en fait aligner n'est pas le problème, en fait mon vrai souci c'est que quand je réduis ma fenêtre mmon image de fond s'adapte pour etre toujours au milieu, je voudrais que mes liens (stylisme, imprimés...) soient toujours placés au même endroit par rapport a mon cadre (qui est l'image en fond).

ca vous parle ? c'est possible ?

merci de l'aide en tout cas !
0
Optimal-effect Messages postés 14 Date d'inscription mercredi 3 juin 2009 Statut Membre Dernière intervention 12 mars 2010 1
3 juin 2009 à 15:57
Ah ok, alors normalement avec { position: fixed; } ton bloc menu sera fixe sur l'écran. Le reste bougera mais ton menu sera toujours fixe

C'est ça ? Ou j'ai encore rien compris ;-D
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
T'inquiète c'est pas toi qui a rien compris, parce qu'au départ je cherchais aussi a aligner mes éléments (d'une autre façon que celles que j'avais trouvé)

alors pour "position: fixed;" je peux pas te dire si c'est ok, parce que je vois pas exactement ou le mettre pour que ca s'applique a mon menu, parce que j'ai plein de balises qui traitent du menu dans mon fichier CSS...

rah trop dur pour moi, de toute façon ej vais tout reprendre depuis le début...mais ca peut m'aider pour la suite


Merci
0