28234 sujets

CSS et mise en forme, CSS3

[Résolu] Placer des liens par rapport à une image de fond

Pages :
Bonjour,

après avoir lu et fait pas à pas le tuto "faire son site en 5 étapes" (et après en avoir lu plein d'autres) il me reste une grande question:

j'ai mis dans mon fichier css une image de fond qui représente un cadre, elle est parfaitement centrée et lorsque je réduis ma fenêtre, elle reste centrée.
Dans le coin en haut a droite du cadre de l'image (et non de la page) je souhaite mettre plusieurs liens alignés horizontalement. J'y arrive grace a mon fichier html qui se présente sous forme de "ul" et "li" entre deux balises "div", comme dans le tuto. Je trouve pas de moyen efficace pour placer mes liens exactement où je veux dans le cadre (sauf avec un margin-top et margin-left....) et surtout quand je diminue ma fenêtre les liens ne restent pas placés où j'avais dis (ce qui est normal je le conçois) mais suivent la largeur de ma fenêtre. je voudrais donc qu'ils restent en haut a droite de mon cadre, sans bouger, comme des petits soldats.

Qu'en pensez-vous ? comment aligner mes liens dans le cadre formé par une image de fond et comment les empêcher de bouger ?

Je suis toute débutante alors parlez-moi avec des mots simples pour que je vous comprenne... Smiley ohwell

Merci pour votre aide.
Modifié par Leslie (10 Jul 2009 - 10:17)
Hello Leslie et bienvenue, Smiley smile

à priori il faut mettre l'élément UL en float:right. Quoi qu'il en soit il faut toujours montrer son code lorsqu'on pose une question car sinon les réponses ont toutes les chances d'être approximatives (l'idéal étant un lien vers une page en ligne). Smiley cligne

Au passage on ne place pas un élément (HTML) par rapport à une image de fond (CSS) mais par rapport à un autre élément (HTML).
Modifié par Heyoan (04 Jun 2009 - 04:57)
Merci Heyoan !

en fait avec float, je me retrouve avec mes liens a cheval sur mon cadre et non alignés.

Je pense rependre ma première page depuis le début, je cherche a faire un truc apparemment compliqué alors que je débute en html.

Pour te rendre compte, je cherche exactement a avoir cet effet là:

http://www.camillebellet.com/illustration.html

avec les images et tout, mais mes liens sont alignés dans le cadre et non au dessus.

Le truc c'est que je comprends pas comment sur ce site les liens ont été positionné...

Rah je ne sais plus quoi faire parce qu'en suivant les tutos pas à pas, je me retrouve avec des trucs bancals parce qu'ils mettent une bannière en en tete alors que moi je veux rien d'autre que mon image de fond avec mes liens, puis je m'attaquerai aux images (a droite sur le site)

Quiconque peut m'aider sera béni ! lol

Merci
Bonjour Leslie,

Ce qui est bien avec ton exemple c'est qu'il montre ce qu'il faut faire pour ne pas etre accessible... Smiley cligne
Quand Heyoan dit
a écrit :
Quoi qu'il en soit il faut toujours montrer son code lorsqu'on pose une question car sinon les réponses ont toutes les chances d'être approximatives (l'idéal étant un lien vers une page en ligne).

Il parle de t'a page personnelle (du moins je crois). Car l'exemple que tu nous donne permet de savoir ce que tu veux, mais ta page perso en ligne permettrait de voir ou tu en est et comment t'aider precisement. Smiley smile
Salut,

vu que je compte un peu tout refaire, partir de zéro, je voulais pas trop donner mon code, mais je comprends, donc je vous donne TOUT ! Smiley cligne

En fait j'ai un cyber-coup de blues parce que je vois que ce que j'ai fait ne marche pas, du coup je traine les pieds a donner mon code. Mais je suis décidée a y arriver alors on y va !!

code html:
<!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="design" href="design.css" />
   </head>
   <body>
 <ul id="menu_horizontal">
  <li><a href="stylisme.html"style="text-decoration:none">stylisme</a></li>
  <li><a href="imprimés.html"style="text-decoration:none">imprimés</a></li>
  <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>

   </body>
</html>



et code CSS:
body
{
   background-image: url("pagelogo.jpg");
   background-repeat: no-repeat;
   background-position: center;
   }

a
{
  color: rgb(147,148,150);
   font-size: medium;
   text-align: left;
   font-family: "Georgia", serif, Comic Sans MS, Trebuchet MS;
   text-transform: capitalize;
}

a:visited 
 { color: rgb(147,148,150);}
 
a:hover 
{ color:teal;}

a:active 
{ color:teal;}
   
ul
{
   width: 350px;
   font-weight: bold;
   border: none;
   text-align: left;
   margin-top: 60px;
   margin-right: 250px;
   float: right;
}
ul#menu_horizontal li { 
display : inline;
padding : 0 0.5em; /* Pour espacer les boutons entre eux */
list-style-type : none;
}


J'ai testé avec Mozilla et vu que mon arrière plan sort de la fenetre par le haut Smiley sweatdrop donc bon....
En fait j'ai trouvé des tutos qui disent comment mettre une image en arrière plan, mais je n'ai pas défini la taille de ma page, ni la taille de mon arrière plan, et SURTOUT je ne sais pas qu'elle taille doit avoir mon arrière plan avant que je le code dans CSS....donc encore bcp de choses a voir hein....jsuis pas sortie !

Mais merci pour les pistes que vous pourrez me donner !

Leslie
Alors alors....
Leslie a écrit :
....donc encore bcp de choses a voir hein....jsuis pas sortie !
Effectivement il y as des choses à voir.... mais comme tout le monde et moi le premier Smiley murf Mais c'est pas trop méchant.

Pour le code HTML, il est propre à la petite chose près que ici:
<div id="site">
<ul id="menu_horizontal">
<li><a href="stylisme.html"style="text-decoration:none">stylisme</a></li>
  <li><a href="imprimés.html"style="text-decoration:none">imprimés</a></li>
  <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>

on préfèrera enlever le style="text-decoration:none" pour le mettre dans le fichier css. Sinon le reste est simple et sans problème. Au passage j'ai rajouté une div pour que tu puisse faire la suite.

Le fichier css:

1. Premier conseil que je te donne, il faut d'abord positionner les éléments avant de les décorer. J'entend par là que les hover, visited,... c'est pour la suite pour s'amuser Smiley smile

2.Il faut définir la taille de ton site. Plusieurs solutions s'offre à toi. Soit tu fait un site complètement "free" qui s'adapte automatiquement à la largeur et la hauteur de la fenêtre du navigateur soit tu limite de manière un pus stricte. Pour plus d'informations tu peut aller ici
Par rapport au site que tu nous présente il te faut un width et un height fixent. Pour te donner une idée si tu utilise firefox, télécharge le module complémentaire qui s'appelle Measurelt.

Ensuite il faut définir le positionnement de ton site. Car la il a une taille mais il n'est pas positionné dans ton navigateur. De ce fait naturellement il va être en haut à gauche. Toujours par rapport au site que tu nous indique, il faut que tu le centre. Pour cela un margin:0px auto; fera parfaitement l'affaire.

Une fois fait cela te donne quelque chose comme :
#site{
height:Xpx;
width: Xpx;
background-image: url() ;
margin: 0px auto;
font-size: 1em; /* A mettre de préférence dans le css du body */
font-family: Verdana, DejaVu Sans, Bitstream Vera Sans, Geneva, sans-serif;/* A mettre de préférence dans le css du body */
}


Pour la hauteur et la largeur tu remplace les X par des chiffres, un pour la hauteur et un pour la largeur (les prends pas au piff c'est pas un loto Smiley langue ). Le plus facile étant que ton image soit de même taille que la div id="site". La taille du texte sera à modifier selon tes besoins et font-family aussi. Pour ça il y as quelques bon tutaux et articles dans la rubrique apprendre que tu peux choisir en haut à droite.

Ensuite je te conseil ce tuto qui est très simple et très bien fait pour faire un menu qui sera d'abord verticale puis par un tour de display:inline deviendra horizontal (Il faut bien tout lire car c'est pas aussi easy Smiley lol mais ça reste simple)

Sachant que ton fichier html est quasiment le même tu n'auras aucun mal à nous faire un beau menu en ligne en css. Smiley cligne

Si après ça tu n'as pas un menu en ligne et que tu as des soucis, bein tu pose les questions.... Smiley biggrin

Courage, une fois lancé on peut plus s'arrêter... Smiley langue

Désolé, mais je peut pas te modifier ton code css, (il as quelque bon truc) mais mon ordi me fait des siennes et une bonne lecture du tuto menu que je t'ai donner devrait te donner de bonne base.

Petit extra, je ne connaissais pas la méthode que tu met pour les couleurs avec rvb(356,...). Comme quoi moi aussi j'ai des choses à revoir ou à voir Smiley cligne
Modifié par Dim (04 Jun 2009 - 21:12)
J'ai enfin réglé mon souci d'ordi... Alala l'informatique c'est vraiment la bipe...

Bon du coup, je te propose ton code modifié.

Le HTML :
<!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="design" href="./design.css" />
   </head>
   <body>
   <div id="site">
 <ul id="menu_horizontal">
  <li><a href="stylisme.html">stylisme</a></li>
  <li><a href="imprimés.html">imprimés</a></li>
  <li><a href="cv.html">CV</a></li>
  <li><a href="contact.html">contact</a></li>
</ul>
</div>
   </body>
</html>

Lui il as pas bougé mise à part la div en plus.

Ensuite le CSS:

html{
margin: 0px; /*c'est pour bien caler des le départ */
padding: 0px; /*c'est pour bien caler des le départ */ 
font-size: 100%; /* Pour éviter un bug d'IE 6-7.*/
}


body
{
	/* généralement on défini ici, la typo du site qui est ensuite modifiable plus précisément comme pour ton menu. On défini aussi la taille de la police générale voir la couleur du background si il est pas blanc. */
}

#site{
background-image: url("pagelogo.jpg");
background-repeat: no-repeat; /* inutile si la hauteur et la largeur de 'image son égale à l'image de fond */
background-position: center;/* inutile si la hauteur et la largeur de 'image son égale à l'image de fond */	
width:960px; /* dimensions à modifier selon l'image ou le rendu que tu souhaite*/
height:400px;  /*dimensions à modifier selon l'image ou le rendu que tu souhaite*/ 
margin: 0 auto; /* permet de positionner ta div id site au milieu du navigateur  */
}

ul{
float: right;/* Positionne le menu à droite de son conteneur qui est la div site*/
width: 350px; /* Peut être judicieux de proposer ici une valeur variable tel que em ou % dans le cas ou ton texte serait très agrandi et qu'il aurait besoin de place */
font-weight: bold;
text-align: left;
margin-top: 60px;
}

ul#menu_horizontal li { 
display : inline;
padding : 0 0.5em; /* Pour espacer les boutons entre eux */
list-style-type : none;
}

a{
text-decoration:none;
color: rgb(147,148,150);
font-size: medium;
text-align: left;
font-family: "Georgia", serif, Comic Sans MS, Trebuchet MS;
text-transform: capitalize;
}

a:visited 
 { color: rgb(147,148,150);} 
a:hover 
{ color:teal;}
a:active 
{ color:teal;}


J'ai fait quelques rajout et j'en est enlevé un peu...
Questionne si tu comprend pas quelques chose.
Modifié par Dim (04 Jun 2009 - 21:05)
Re,

j'ajouterais quelques petites choses :

* tout d'abord, et même si le premier réflexe est de partir du rendu visuel à obtenir, un site est fait de contenu et donc d'éléments HTML.

* ces éléments doivent être choisis en fonction de leur sémantique.

* pour ce qui est de la présentation (et donc du CSS) il faut d'abord (re)voir les bases et ensuite passer du temps à comprendre le positionnement. La chose à retenir étant qu'il faut autant que possible laisser faire le flux : si ta liste de liens doit être placée au-dessus du cadre contenant le reste (titres, paragraphes, etc.) elle doit être placée avant le DIV qui contiendra ce contenu alors que si elle doit être placée en haut de ce cadre elle doit être placée au début du DIV.

* une petite remarque pour finir : le media web n'est pas paginé (ce qui permet de faire défiler le contenu) et donc, sauf cas particulier, on ne doit pas fixer la hauteur (height) du bloc conteneur.
Purée ! je viens juste de voir vos réponses ! c'est génial, je regarde tout de plus près dans l'aprèm et je vous tiendrais au courant de l'avancée des travaux !

Pour l'instant j'ai lu les codes en diagonale. Inutile de dire que je comptais faire un site fixe, qui ne s'adapte pas a toutes les fenetres (enfin s'il pouvait rester centré sur tous les ordis....lol) parce qu'on m'a dit que c'était plutot compliqué, donc j'attends de réussir celui-là avant de me pencher sur le reste.

De plus, sachez que j'ai copié le code html du site que je vous ai montré (notemment pour le côté "portfolio") et que je l'ai adapté à ma sauce donc j'ai un tout nouveau code mais auquel je comprends peu de choses...Je le garde en réserve mais je reprendrai également celui que je vous avais donné pour voir les modifs.

Enfin je crois que mon souci reste le même puisque je souhaite placer mes liens par rapport a mon image de fond mais il a été dit que je ne pouvais pas baser du html sur des éléments css, donc cette partie-là je comprends toujours pas. Je m'interroge sur le fait de créer une sorte d'en-tête (un cadre, une bannière invisible)vide et mes liens viendraient se placer juste dessous...je sais pas si ca se fait.
Car ce que je capte pas dans le code du site que j'ai copié, c'est que les liens sont placés genre au tiers de la page et pas en haut à gauche alors que je n'ai pas de css...

Bon je vais de toute façon commencer par vos codes corrigés.

Merci c'est génial de recevoir de l'aide et un des réponses, sur d'autres forum on me laisse vraiment trop me débrouiller en m'indicant uniquement des tutos alors que j'en lis 12 par jours ! là au moins vous pointez mes erreurs et je peux étudier vos modifs pour tout comprendre !

Bonne journée !

Leslie
Bonjour,

je fais des recherches depuis des heures et ca me donne l'impression que ce que je veux faire n'est absolument pas possible.

Voici ce que je souhaite dans un premier temps:

Je précise que je veux faire un design fix et centré, je crois qu'on appelle ca "liquid".
J'ai une "background image" représentant un cadre (pas un vrai cadre codé et tout hein: une image de cadre) dans mon CSS, je l'ai centré avec un background-position: center" et je vois qu'elle reste centrée peu importe la résolution de l'ordi.
J'ai ensuite différents liens alignés horizontalement, que je veux DANS le cadre. Je veux que ces liens bougent suivant les résolutions, mais également qu'ils ne bougent pas ! Je m'explique: mon dernier lien est aligné contre la paroi droite du cadre en haut, et pour l'instant quand je réduis ma fenêtre, il bouge et se balade dans le cadre alors que je voudrais qu'il reste contre la paroi, donc qu'il ne bouge pas ! mais en même temps, je veux que quand on réduit la fenêtre, mon cadre se centre et mes liens devraient bouger avec pour rester contre la paroi droite de mon cadre.
Je précise qu'un "text-align: right" ou même un "float" ne fonctionne pas puisqu'il se superpose au cadre, j'imagine que c'est à cause de la non-définition de ma largeur de page...

Est-ce réellement possible de faire ce que je veux ? car contrairement au site que j'ai mis en lien, je veux une image de fond centrée.

De plus, j'ai beau chercher des choses sur la taille que je dois donner à ma page de départ (hauteur et largeur), je trouve rien qui m'explique réellementcomment faire ! j'ai bien lu le "Faire un site pour toutes les résolutions" sur ce site mais on ne développe que le design fluide, moi je veux pas que mon design s'élargisse, mais juste qu'il se centre (en même temps mes liens ne sont pas au centre...)

Pour la taille de ma page, je peux faire un 1024x968, c'est bien ca ? et je fais tout scroller.

Bon je vous laisse avec mes nombreuses interrogations...

Leslie
Leslie a écrit :
Je précise que je veux faire un design fix et centré, je crois qu'on appelle ca "liquid".
Non : "liquid" (ou "fluide") correspond à une mise en page qui s'adapte à la résolution de l'écran. Smiley cligne

Je ne sais pas si tu as déjà vu les gabarits mais plusieurs proposent des conteneurs de largeur fixe et centrés. Concrètement il suffit d'utiliser un DIV et de lui fixer une largeur (par exemple width:960px) et de préciser des marges horizontales en auto (par exemple margin: 10px auto;)

Un petit exemple :
<!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" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css" media="screen">
html, body {
	font-size: 100%;
}

body {
	font-family: Georgia, "DejaVu Serif", "Bitstream Vera Serif", Norasi, serif;
	color: #666;
	font-size: 1em;
	background: blue;
	margin: 0;
	padding: 0;
}

#conteneur {
	width: 920px;
	margin: 20px auto;
	background: #66FF66;
	padding: 20px;
}

#menu {
	margin: 0;
	padding: 5px;
	text-align: right;
}

#menu li {
	display: inline;
	margin-left: 10px;
}

#menu li a {
	font-weight: bold;
	color: #6699FF;
	text-decoration: none;
}

#menu li a:hover,
#menu li a:focus,
#menu li a:active {
	color: #330000;
}
</style>
</head>
<body>
<div id="conteneur">
	<ul id="menu">
		<li><a href="lien1.php">Lien 1</a></li>
		<li><a href="lien2.php">Lien 2</a></li>
		<li><a href="lien3.php">Lien 3</a></li>
	</ul>
	<div id="contenu">
		<p>Du texte.</p>
		<p>Du texte.</p>
		<p>Du texte.</p>
	</div>
</div>
</body>
</html>


Pour l'exemple j'ai mis une couleur de fond mais pour faire un cadre (en prévoyant que la hauteur va varier en fonction du contenu) regarder cet article.
Leslie a écrit :
De plus, sachez que j'ai copié le code html du site...

Ca c'est pas bien Smiley nono Surtout quand on le comprend pas Smiley lol

Leslie a écrit :
Pour la taille de ma page, je peux faire un 1024x968, c'est bien ca ? et je fais tout scroller.

Pour la hauteur sur mon ordi, ton site "scrollera" (c'est un verbe? Maintenant oui!) en hauteur mais ce n'est pas un problème (cf ce que Heyoan t'as déjà dit au dessus.). Pour la largeur il ne scrollera pas non plus mais se sera pile poile. A savoir mon écran 13" laisse libre à la page web environ 1063x571 (marque pages sorti sur la gauche). C'est grossièrement le plus petit qu'un utilisateur puisse avoir. Je voudrais cependant pas généraliser mon cas car il est certainement possible de trouver plus petit, mais ça doit pas être souvent. Donc 1024 pour la largeur c'est pas mal, la hauteur il faut avoir de bonne raison pour la laisser fixe.

Bonne continuation

Heyoan : Depuis quand tu écrit le css dans la page html??? Smiley cligne
Modifié par Dim (05 Jun 2009 - 23:01)
Dim a écrit :
C'est grossièrement le plus petit qu'un utilisateur puisse avoir.
Euh... ben non : cf. le salon Web Mobile.

Dim a écrit :
Heyoan : Depuis quand tu écrit le css dans la page html???
Chaque fois qu'il s'agit de faire une page de test qu'il suffit de copier / coller. Smiley cligne
Heyoan a écrit :
Euh... ben non : cf. le salon Web Mobile.

Oui je suis bien d'accord mais les petits truc tel que l'iphone (c'est le seul que je connais à vrais dire) redimensionnent le site pour leur écran... Donc la largeur du site passe dans la hauteur ou largeur de l'iphone (ca dépend comment on positionne l'iphone lol).

Après c'est plus l'art de faire de l'accessible en mettant des textes en em et quelques truc du genre qui permet de rendre le texte lisible dans ce genre de baladeur pour accroc de la connexion..., non?
C'est ce que j'ai crus comprendre en visitant mon "site" avec l'iphone d'un ami... (ce qui faut pas dire c'est que j'ai eu Smiley scared en voyant mon "site"...)

Par contre si on prend en compte ses internofiles tu fait un site de 50px de large... (Je plaisante bien sûr) Mais bon, je vais plus me pencher sur la question avant d'avoir des idées toutes faites à ce sujet Smiley sweatdrop
Bonjour à tous,

voici le résultat de mon travail de ces derniers jours. C'est beaucoup de temps passé pour pas grand chose mais bon, j'y vais pas à pas.

http://leslie.vidal.free.fr/

Mon souci c'est que mes liens se superposent au cadre et j'ai beau modifier la largeur ou les marges, je n'arrive pas à les positionner. Je ne sais pas si la largeur et hauteur dans "ul" serta quelque chose :

html{
margin: 0px; /*c'est pour bien caler des le départ */
padding: 0px; /*c'est pour bien caler des le départ */ 
font-size: 100%; /* Pour éviter un bug d'IE 6-7.*/
}


body
{
font-family: "Georgia", serif, Comic Sans MS, Trebuchet MS;
font-weight: bold;
text-align: right;	/* généralement on défini ici, la typo du site qui est ensuite modifiable plus précisément comme pour ton menu. On défini aussi la taille de la police générale voir la couleur du background si il est pas blanc. */
}

#site{
background-image: url("pagelogo.jpg");
background-repeat: no-repeat; /* inutile si la hauteur et la largeur de 'image son égale à l'image de fond */
background-position: center;/* inutile si la hauteur et la largeur de 'image son égale à l'image de fond */	
width:935px; /* dimensions à modifier selon l'image ou le rendu que tu souhaite*/
height:637px;  /*dimensions à modifier selon l'image ou le rendu que tu souhaite*/ 
margin: 0 auto; /* permet de positionner ta div id site au milieu du navigateur  */
}

ul{
float: right;/* Positionne le menu à droite de son conteneur qui est la div site*/
width: 935px;
margin: 20px auto;
padding: 20px; /* Peut être judicieux de proposer ici une valeur variable tel que em ou % dans le cas ou ton texte serait très agrandi et qu'il aurait besoin de place */
margin-top: 50px;
}

ul#menu_horizontal li { 
display : inline;
padding : 0 0.5em; /* Pour espacer les boutons entre eux */
list-style-type : none;
}

a{
text-decoration:none;
color: rgb(147,148,150);
font-size: medium;
}

a:visited 
 { color: rgb(147,148,150);} 
a:hover 
{ color:teal;}
a:active 
{ color:teal;}



Enfin mon dernier minuscule souci, c'est que sur mon ordi portable avec IE7, j'ai la barre du "scroll" et je voudrais que tout tienne sur une page à la place. J'ai testé sur un ordi plus grand, avec mozilla, et le résultat est satisfaisant, l'image ne "scroll" pas d'ailleurs (ou c'est un verbe, en tout cas pour moi).

Avez-vous des solutions ou des corrections pour mon travail ?

Merci bcp !

Leslie
Modifié par Leslie (08 Jun 2009 - 10:56)
Bonjour Leslie,

Alors dabord je pense que tu as besoin de lire quelques truc sur les margin et padding(Google est ton ami. je n'est pas de liens a te proposer pour le moment. Peut etre ce soir). Et au passage peut etre aussi sur les types inline et block des balises.

Ensuite par rapport a cela, il y as une erreur dans le css de ul.
Leslie a écrit :
ul{
float: right;/* Positionne le menu à droite de son conteneur qui est la div site*/
width: 935px;
margin: 20px auto;
padding: 20px; /* Peut être judicieux de proposer ici une valeur variable tel que em ou % dans le cas ou ton texte serait très agrandi et qu'il aurait besoin de place */
margin-top: 50px;
}

Tu defini deux fois le margin.
Le premier signifie que le margin top et bottom sont de 20px et celles de droite et gauche sont auto.
Le deuxieme dit que le margin-top est de 50px.
Le navigateur va choisir par defaut la dernier valeur qu'il trouvera, donc 50px.
Cependant il me semble que cela peut etre source de probleme et c'est surtout pas tres propre. On preferera donc regrouper tout ca sur une meme ligne avec quelque chose comme :
margin: 50px auto 20px auto;

Toute fois une explication sur l'inutilite des margin auto dans ton cas pour l'ul s'impose:
Ici ton ul est positionner a droite (float:right). Je voudrais pas dire une betise mais la balise ul est de type block. Elle prendra donc toute la largeur qui lui est possible de prendre sauf si tu lui donne une largeur max. Ce qui rend donc inutile les marges auto droite et gauche sauf si tu defini une largeur fix de l'ul. (c'est inutile dans ton cas et c'est deconseille) (j'espere que tu aura suivi Smiley langue )

De plus le padding est defini sur 20px pour tous les cotes. Essaye quelques chose d'autre en definissant chaque cote.
padding : haut droite bas gauche;
Cela donne par example padding: 0px 110px 0px 0px;
Ou plus simple margin-right:110px;
Tu lui propose donc davoir une marge interieure droite de 110px. Ce qui permet de decaler ton menu pour ne plus qu'il se superpose avec ton fond.

Ce que je dit ci-dessus est cependant a revoir puisque tu peu simplement uriliser le margin ou le padding pour positionner ton ul. Cela depend du rendu que tu souhaite.
Celon ce que je peux voir, le mieux dans ton cas est d'utiliser les margin : 70px 110px 0px 0px; et de supprimer les paddings.


Apres je pense qu'il serait plus logique de definir ce style css en particulier pour le menu et non pour l'ensemble des ul. Car il est probable que tu est a l'avenir d'autre ul dans ton contenu.
Remplace donc ul{...
par ul#menu_horizontal {....
Puisqu'il semble que tu lui est applique un id. Dans ce cas le style css que tu as defini sera uniquement valable pour l'ul de ton menu.

Leslie a écrit :
C'est beaucoup de temps passé pour pas grand chose

C'est toujours comme ca quand on apprend Smiley langue
Moi je viens de me remettre au php et je peux te dire que j'y passe quatre fois plus de temps si ce n'est pas 10 par rapport a quelqu'un qui maitrise le sujet.

a écrit :
Je ne sais pas si la largeur et hauteur dans "ul" serta quelque chose

Un peu de lecture sur le type "block ou inline" de la balise ul devrait t'aider a connaitre la reponse. (Desole pas de liens sur le sujet, mais tu devrait pouvoir trouver facilement sur alsa ou sinon sur google.)
Petite precision cependant. Ton ul prendra la largeur de son conteneur, soit site. Pour la hauteur il s'adapte a son contenu automatiquement ce qui est entierement conceille pour des questions d'accessibilite. Il suffi qu'un visiteur est une mauvaise vu et est parametre son navigateur pour avoir un texte en 24 pour que cela necessite plus de place.

a écrit :
c'est que sur mon ordi portable avec IE7, j'ai la barre du "scroll"

Qu'elles sont les dimensions de ton ecran? Apres je connais pas IE donc je sais pas trop.
Mais si ton site scroll en hauteur cela n'est pas une gene puisque tout est fait pour ca...

Bon je me suis relu plusieur fois histoire de pas dire trop de betise et d'etre un peu plus claire et j'espere donc avoir limiter la casse. Qu'une bonne ame me reprenne si j'ai dit quelque chose de mal... Smiley cligne .
Re !

merci Dim pour ta réponse. J'ai suivi tes conseils, sauf pour le "ul" a remplacer parce que j'ai pas tout tout compris. J'ai viré le padding qui sert a rien, et modifier les margin a la place, cependant j'ai beau modifier le margin-right, ca ne fait pas bouger mes liens d'un poil. En fait ils semblent bouger entre 0px et environ 100px où ils sont en ce moment, mais si j'augmente la marge, rien ne bouge, je ne comprends vraiment pas...

A bientot pour la suite...ah ah !
Hello,

hem... j'ai un peu l'impression d'avoir parlé dans le vide dans ce post puisque tu n'as tenu compte d'aucun de mes conseils. Smiley murf

Le contenu ne doit pas être une image en background css or c'est le cas pour ton nom, tes compétences et tes coordonnées. Je sais bien que tu es graphiste mais il faut tout de même partir du code html. Cela pourrait donner quelque chose comme :
<div id="global">
<div id="header">
   <h1><img src="nomprenom.jpg" alt="Nom Prénom" /></h1>
   <h2><img src="compétences.jpg" alt="compétence1 - compétence2 - compétence3" /></h2>
</div>
<div id="cadre">
   <ul id="menu>
      <li><a ...>lien 1</a></li>
      <li><a ...>lien 2</a></li>
      <li><a ...>lien 3</a></li>
   </ul>
   <p>Bla bla bla</p>
</div>
<div id="footer">
   <p><img src="coordonnees.jpg" alt="mes coordonnées" /></p>
</div>
</div>

Edit: et j'insiste : revoir les bases du css et du positionnement css est une étape obligatoire.
Modifié par Heyoan (08 Jun 2009 - 18:52)
Ah excuses-moi Heyoan !

j'avoue ne pas avoir été une très bonne élève, je n'avais pas tout compris, du coup j'avais un peu mis de coté tes conseils.

Par contre pour ce que tu me dis sur mon image d'arrière plan je n'avais pas du tout compris que j'avais ce genre de solution.
En fait tu me proposes de séparer mon image en plusieurs pour les insérer une a une dans mon html au lieu du css, c'est bien ca ? je n'aurais pas a écrire mes coordonnées etc en "vrai texte" n'est-ce pas ?

Pour le reste de tes conseils dans ton ancien post, j'ai l'impression de pas avoir fait d'erreur... à part en effet pour la hauteur du bloc conteneur, que j'enlèverai.

merci pour tes conseils et saches que si je ne respecte pas tout du premier coup, c'est souvent que je comprends pas, mais je reviens tout le temps sur ce post, que je relis pour le modifier constemment. Je tiens a faire un site bien et correct, qui respecte un maximum de règles, mais d'un site a l'autre, ou d'une personne a l'autre, on te conseille jamais la meme chose, c'est pas toujours évident.

A bientot
Leslie a écrit :
Par contre pour ce que tu me dis sur mon image d'arrière plan je n'avais pas du tout compris que j'avais ce genre de solution.
En fait tu me proposes de séparer mon image en plusieurs pour les insérer une a une dans mon html au lieu du css, c'est bien ca ? je n'aurais pas a écrire mes coordonnées etc en "vrai texte" n'est-ce pas ?
Eh bien comme il faut partir des éléments html (c'est le B.A.BA de l'accessibilité) et que tu souhaites mettre du contenu en images oui c'est bien ça : il faut utiliser des éléments IMG directement dans le code HTML.

Leslie a écrit :
Pour le reste de tes conseils dans ton ancien post, j'ai l'impression de pas avoir fait d'erreur... à part en effet pour la hauteur du bloc conteneur, que j'enlèverai.
Euh... oui : si on oublie qu'en l'état les éléments ne sont pas dans le code html... et donc qu'il n'y a aucune structure (notamment au niveau des titres)... et donc aucune sémantique. Smiley langue

Leslie a écrit :
Je tiens a faire un site bien et correct, qui respecte un maximum de règles, mais d'un site a l'autre, ou d'une personne a l'autre, on te conseille jamais la meme chose, c'est pas toujours évident.
Eh bien sur les sites qui "prêchent" le respect des standards et de l'accessibilité (Alsacréations, Openweb, etc.) il y a peu de chances que tu trouves d'énormes différences. Pour reprendre la notion de s'appuyer sur le code html et pas sur la présentation c'était déjà ce qui était dit dans le tuto que tu as cité dans ton premier post : Réalisation d'un design complet (XHTML / CSS) en 5 étapes.

Pour ce qui est de ne pas tout comprendre du premier coup je suis bien placé pour savoir que ça n'est pas évident et qu'il faut lire et relire, puis faire des tests et refaire des tests un bon nombre de fois avant d'avoir une vue d'ensemble à peu près cohérente. Smiley cligne
Modifié par Heyoan (09 Jun 2009 - 13:40)
Pages :
Sujet clos
Aller à