5568 sujets

Sémantique web et HTML

Débutant essayant de coder un design ;p

Bonjour tout le monde !
Je suis un petit nouveau ici et j'ai vraiment besoin de votre aide.
Je m'explique : j'essaye depuis asser longtemps de coder mes designs que je réalise sur Photoshop. J'avais une vieille technique plutôt bancale avec FrontPage 2003 (en faisant pleins de tableaux etc), mais j'aimerai vraiment apprendre un codage plus propre utilisant du CSS et du XHTML ;p

Voila le design que j'essaye de coder (en jpg):
[Modération : Image trop grande] http://www.easy-upload.net/fichiers/jet2.2010818163411.jpg

J'ai préalablement découper toutes les images sous photoshop en partie distincte : les images fixes (comme le header, le menu, et le footer), et les images qui vont se répéter (le corps).
Cependant je suis bloqué (et oui xD) pour le placement de la barre de menu (en dessous du header) car j'aimerais pouvoir écrire dessus, que ça soit centrer et tout le bazard Smiley ravi
Et ainsi faire de même avec le reste du design.

J'ai déja commencé a "coder" le header ici => http://addictxetn.free.fr/simply/


Voila voila Smiley cligne
J'espère que ma "demande d'aide" a été comprise Smiley confused


Etienne. Smiley smile
Modifié par Laurie-Anne (02 Sep 2010 - 10:03)
J'ai déja tout lu Smiley decu
Mais le "truc" c'est qu'en utilisant du CSS tout simple comme :
menu
{
	width: 1024px ;
	height: 51px ;
	background: url(images/jet2_02.png) no-repeat ;
	margin-top: 260px ;
	text-indent: -5000px ;
}

Et que j'insère dans le <body> comme ça :
<div id"menu" align="center"><center>Blah blah</center></div>


Et bah ça me donne ça => http://addictxetn.free.fr/simply/ Smiley confus
Désolé de poster a tout va, mais ça m'agace Smiley murf
Bonjour petit scarabée [ Yoda style = on ]

<div id="menu" align="center"> c'est peut être mieux Smiley lol

Sinon quelques remarques en passant:
- align=center est déprécié (il me semble)
- <center> est aussi déprécié Smiley lol
- un attribut alt manque à ton image, surtout qu'elle contient du texte qui pour moi est plutôt important (le titre de ton site) qui ne sera pas référencé par les navigateurs

Courage Smiley smile


Edit : Muuhaha le chaton est plus rapide Smiley langue
Modifié par saiko_sama (18 Aug 2010 - 17:37)
Hello...

Il y a un petit souci sur ton attribut id, tu as oublié le = entre id et #menu.

Sinon, pourquoi utiliser l'attribut align et une balise center?
Tu peux simplifier en 

<div id="menu">Blah blah</div>


avec le text-align qui va bien dans ta css.

Autre question, pourquoi utilise tu text-indent? Remplacement de texte en image?

EDIT: Grillé Smiley sweatdrop
Modifié par Florian_R (18 Aug 2010 - 17:24)
Florian_R a écrit :
Autre question, pourquoi utilise tu text-indent? Remplacement de texte en image?


Bonne question, je croit que ça viens d'un tuto ^^'

Merci pour vos conseils, je m'y met dessuite ;p
Je doit vraiment passer pour un noob mais là ça m'échappe oO =>
Partie CSS :
<!--
header
{
	background-image: url(images/jet2_01.png);
	background-repeat: no-repeat;
	width: 1024px;
	height: 260px;
	margin:auto;
	margin-top: 0px;
}
body
{
	margin: 0px;
	text-align: center;
	background-color:#ede9df;
	margin:auto;

}

a:link { color:#000000; text-decoration:none; font-weight:normal; font-size:10pt; font-family:Myriad Pro; }
a:hover { color:#000000; text-decoration:none; font-weight:bold; }
a:visited { color:#000000; text-decoration:none; font-weight:bold; }

menu
{
	margin-top: 260px ;
	width: 1024px ;
	height: 51px ;
	background: url(images/jet2_02.png) no-repeat;
	text-align: center
}
-->


Partie HTML :
<body>
<div id="header"></div>
<div id="menu">Blah blah</div>

</body>


Résultat :
http://addictxetn.free.fr/simply/

... Je dois vraiment m'y prendre mal Smiley lol
En tout cas merci a tout ceux qui prennent la patience d'aider un noob comme moi Smiley confused
addictxetn a écrit :
Je doit vraiment passer pour un noob mais là ça m'échappe oO =>

Il faut bien débuter...

Sinon, ton souci est du au fait que tu as omis le # devant tes id dans ta css.
Un article sympa pour débuter sur les sélecteurs css
Modifié par Florian_R (18 Aug 2010 - 17:47)
Yeah merci beaucoup Florian_R Smiley lol
On arrive a quelque chose de potable : http://addictxetn.free.fr/simply/
Mis a part le fait que ça soit complètement décalé xD
Mais je pense que ça se trouve dans des tutos déjà présent sur le site ce genre d'ajustement ;D

EDIT: j'ai essayer les balises "
margin-left: 70px;
" dans mon CSS sur le #corps, mais aucun changement ... Smiley ohwell
Des idées ? Smiley confused
Modifié par addictxetn (18 Aug 2010 - 18:01)
No problemo.

Sinon, 
#menu, #corps {margin: 0 auto}


Ou encore tu englobes header, menu et corps dans un conteneur global, et c'est à lui que tu assignes marge et largeur.

C'est la pratique courante.
Florian_R a écrit :
No problemo.

Sinon, 
#menu, #corps {margin: 0 auto}


Ou encore tu englobes header, menu et corps dans un conteneur global, et c'est à lui que tu assignes marge et largeur.

C'est la pratique courante.


Eheh tu as devancer ma question ;p
J'essaye de suite ;D
Désoler pour le double post, mais je recherche depuis un ma dernière réponse un tuto pour "l'alignement du texte en CSS" mais je trouve jamais ce que je "cherche" ...

J'aimerais aligner le texte que j'ai mit sur mon site en définissant les "marges" a ne pas dépasser (j'ai essayer avec un truc dans le genre et ça a tout bousillez : 
p {
 width:200px;
 padding:40px;
 margin:auto;
 }

et je l'ai insérer devant et derrière mon texte avec 
<p></p>
mais le résultat n'y était pas xD
Désolé pour le "flood" :S
Normalement ça devrait le faire pourtant. Tu peux remettre à jour ton site en ligne avec ton code modifié?
Mdr, autant pour moi, j'avais juste expérimenter un truc en plus qui a pas vraiment marché tout à l'heure Smiley confused
Merci encore a tous et a toute pour votre réactivité et votre aide !
Je posterais si je rencontre d'autres problèmes eheheh Smiley lol
Salut,
Je sait pas si c'est ton serveur mais ton site est lourd à charger alors dans le doute, pense à optimiser tes images Smiley cligne
salut tout le monde.
pour optimiser une création Ps pour le web,fireworks vous sera d'une grande utilités.il est fait pour ça et ,en plus, vous pouvez y importer le fichier ps avec calques et effets.
Sujet clos
Aller à