Titre: Infos, comment faire?
Posté par: damb341 le le 27-10-2011 a 11:06:08
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 :
[url=http://imageshack.us/photo/my-images/809/forumxt.jpg/]
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 |
Titre: Re:Infos, comment faire?
Posté par: damb341 le le 27-10-2011 a 12:39:56
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 :
[url=http://imageshack.us/photo/my-images/412/forum2hn.jpg/]
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
|
Titre: Re:Infos, comment faire?
Posté par: damb341 le le 27-10-2011 a 13:12:17
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;" >
|
Titre: Re:Infos, comment faire?
Posté par: Pad le le 27-10-2011 a 19:08:21
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
}
|
|
|
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|