Infos, comment faire? - Forum HTML / CSS / XHTML

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Infos, comment faire?

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: Infos, comment faire? (Lu 1354 fois)

Infos, comment faire?
« sur: le 27-10-2011 a 11:06:08 »

damb341
Membre récent

Hors-Ligne

Sexe: Male

Messages: 23

Bonjour,

je suis désolé, par ma question qui pourrait être bête, mais étant débutant et voulant apprendre le html/css, j'ai voulu faire ça :

Au début, j'ai utiliser le système de l'image-map (je crois que c'est comme ça qu'on dit) ce qui marche très bien, mais finalement mettre des images dans une div, c'est pas compliqué.

Du coup j'ai voulu le faire directement via Dreamweaver en html et css. Comment dois je procédé? D'abord, découper mon image? faire des ul ou li? (sachant que j'en ai jamais utilisé)?

Connaissez vous des sites qui explique mon incompétence?

Je vous remercie beaucoup

Rapporter au modérateur

Parce qu'un forum c'est comme une école, on apprend par des grands, et quand nous devenons grand, nous aidons les plus petits.

Re:Infos, comment faire?
« Répondre #1 sur: le 27-10-2011 a 12:39:56 »

damb341
Membre récent

Hors-Ligne

Sexe: Male

Messages: 23

Finalement j'ai réussi, mais j'ai un probleme avec le texte. Sous Firefox, Opera et Safari (en gros partout ^^) le texte part un peu a droite. J'ai essayé avec une margin et un padding, mais rien... regardez :

Voici mon code html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<link rel="stylesheet" media="all" type="text/css" href="test.css" />
</head>

<body>

<div id="carre">
<ul id="menu">

<li>Pack action : Dites nous tout</li>
<li>Pack action : Dites nous tout</li>
<li>Pack action : Dites nous tout</li>
<li>Pack action : Dites nous tout</li>

</ul>
</div>
</body>
</html>

--------
Mon code css :

@charset "UTF-8";
/* CSS Document */

#carre {
   background-image:url(test.jpg);
   width:233px;
   height:158px;
}

#menu {
   padding-top:48px;
   padding-right:5px;
   font-family:Arial;
   font-size:13px;
   list-style-type:none;
   -moz-list-style-type:none;
   -o-list-style-type:none;
   -ms-list-style-type:none;
   -webkit-list-style-type:none;
   display:block;

}
li {
   line-height:27.5px;
   -moz-line-height:27.5px;
   -o-line-height:27.5px;
   -ms-line-height:27.5px;
   -webkit-line-height:27.5px;

}

Merci de bien vouloir m'aider à comprendre

« Dernière Édition: le 27-10-2011 a 12:44:02 par damb341 »

Rapporter au modérateur

Parce qu'un forum c'est comme une école, on apprend par des grands, et quand nous devenons grand, nous aidons les plus petits.

Re:Infos, comment faire?
« Répondre #2 sur: le 27-10-2011 a 13:12:17 »

damb341
Membre récent

Hors-Ligne

Sexe: Male

Messages: 23

Je ne sais pas comment on ferme un sujet mais il suffisait de faire ceci :

<ul id="menu" style="margin-left: -5px; padding-left: 35px;" >

Rapporter au modérateur

Parce qu'un forum c'est comme une école, on apprend par des grands, et quand nous devenons grand, nous aidons les plus petits.

Re:Infos, comment faire?
« Répondre #3 sur: le 27-10-2011 a 19:08:21 »

Pad
Modérateur Global

Hors-Ligne

Sexe: Male

Messages: 1391

je pense que c'est plutôt sur le style du <li> qu'il faut ajouter quelque chose du genre :

Code:

li {
line-height:27.5px;
-moz-line-height:27.5px;
-o-line-height:27.5px;
-ms-line-height:27.5px;
-webkit-line-height:27.5px;
width:100%;
padding:0;
margin:0;
}

et pour le <ul> rajouter :

#menu {
....
text-align:center
}