5568 sujets

Sémantique web et HTML

salut a tous deja bonne fete a tous

les fete de noel fini je me suis remit a mon site voila papa noel ne ma maleuresement pas amener une grand connaissance du xhtml lol

donc j'ai 2 soucis le premier :

je n'arrive pas a placé mais 3 boutons qui sont completement à droite

2 eme probleme mon copyrigth :

qui ce met en lien je ne sais pour quelle raison lol donc soligner en bleu et tout le tralala

rendu :

http://images3.hiboox.com/vignettes/5207/t58dquf3.jpg

Code:

XHTML:

<!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>Bienvenue sur mon Portfolio !</title>
	   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="style.css" />
   </head>
   <body>
	<div id="menu">
		<div class="menu_gauche">
			<ul>
				<li><a href="page1.html">Accueil</li>
				<li><a href="page2.html">Biographie</li>
				<li><a href="page3.html">Portfolio</li>
			</ul>
		</div>
		<div class="menu_droite">
			<ul>
				<li><a href="page1.html">Livre d'or</li>
				<li><a href="page2.html">Partenaire</li>
				<li><a href="page3.html">Contact</li>
			</ul>
		</div>
		<div class="bouton_home">
		</div>
		
		<div class="bouton_livre">
		</div>
		
		<div class="bouton_contact">
		</div>
	</div>	
	
	<div id="header">
		<div class="logo">
		</div>

		<div class="web">
		</div>

		<div class="dessin">
		</div>

		<div class="flyer">
		</div>

		<div class="autre">
		</div>
	</div>
	<div id="footer">
		<p>Copyright © 2007 Florian CERDA. Tous droits réservés</p>
	</div>
   </body>
</html>


CCS:


body
{
background-color: #262626;
}
/* mon menu 1*/
#menu
{
position: absolute;
left: 100px;
top: 43px;
}

#menu a
{
text-decoration: none;
color: #7f8080;
font-style: bold;
font-family: MoolBoran, Calibri;
font-size: 24px;
}

#menu a:hover
{
color: #4bcee6;
}

#menu ul
{
list-style-image: url("images/plus.png");
}

.menu_gauche
{
position: absolute;
left: 0px;
top: 0px;
}

.menu_droite
{
position: absolute;
left: 108px;
top: 0px;
}

.bouton_home
{
width: 59px;
height: 59px;
position: absolute;
left: 373px;
top: 65px;
background-image: url("images/home.jpg");
}

.bouton_livre
{
width: 59px;
height: 59px;
position: absolute;
left: 447px;
top: 65px;
background-image: url("images/livre.jpg");
}

.bouton_livre
{
width: 59px;
height: 59px;
position: absolute;
left: 514px;
top: 65px;
background-image: url("images/contact.jpg");
}

/*header*/

#header
{
position: absolute;
top: 168px;
left: 0px;
}

.logo
{
width: 387px;
height: 166px;
background-image: url("images/logo.jpg");
}

.web
{
width: 187px;
height: 79px;
background-image: url("images/web.jpg");
position: absolute;
top: 0px;
left: 394px;
}

.dessin
{
width: 187px;
height: 79px;
background-image: url("images/dessin.jpg");
position: absolute;
top: 0px;
left: 590px;
}

.flyer
{
width: 186px;
height: 78px;
background-image: url("images/flyer.jpg");
position: absolute;
top: 88px;
left: 394px;
}

.autre
{
width: 187px;
height: 78px;
background-image: url("images/autres.jpg");
position: absolute;
top: 88px;
left: 590px;
}

/*footer*/

#footer
{
position: absolute;
top: 325px;
left: 110px;
}

#footer p
{
text-decoration: none;
color: #7f8080;
font-style: bold;
font-family: MoolBoran, Calibri;
font-size: 18px;
}
Bonjour,

Pour le deuxième problème, cela vient sans doute du fait que tu ne refermes aucun des liens de ton menu (à chaque fois tu as une balise <a> ouvrante mais pas de balise </a> fermante).

Pour le premier problème... eh bien, je vois six boutons en tout dans la partie de droite, et rien qui me dise comment ils devraient être placés.
Un peu de précisions (et si elle existe l'URL de la page...) ne ferait pas de mal. Smiley cligne
Modifié par Florent V. (27 Dec 2007 - 10:18)
Pour le positionnement des boutons, d'après ton code HTML et CSS, tu devrais normalement obtenir quelque chose de correct.

Il faudrait que tu puisses nous montrer la page en ligne. Avec juste le code HTML et le code CSS, il nous manque au moins les images pour tenter de reconstituer le problème en local (en plus, c'est chi... fastidieux).
Simple erreur dans le code CSS:
.bouton_[#red]livre[/#]
{
width: 59px;
height: 59px;
position: absolute;
left: 447px;
top: 65px;
background-image: url("images/livre.jpg");
}

.bouton_[#red]livre[/#]
{
width: 59px;
height: 59px;
position: absolute;
left: 514px;
top: 65px;
background-image: url("images/contact.jpg");
}

Je pense que la deuxième classe devrait être "bouton_contact".

Au passage, pour des éléments uniques on utiliser plutôt un identifiant (attribut HTML id, sélecteur CSS de type #mon_identifiant) qu'une classe.
Modifié par Florent V. (27 Dec 2007 - 19:02)
Et autre chose: normalement, il ne faudrait pas passer par une image de fond mais plutôt par une image dans le code HTML, avec texte alternatif qui va bien. C'est à dire qu'au lieu d'avoir une div vide on pourrait avoir:

<ul id="boutons-ronds">
	<li>
		<a href="index.html" title="Page d'accueil">
			<img src="home.png" alt="Accueil" />
		</a>
	</li>
	<li>...</li>
	<li>...</li>
</ul>
(Je ne détaille pas les deux derniers li.)
On utilise toujours le même positionnement, mais on vire l'image de fond pour utiliser un vrai contenu à la place (contenu perceptible par les moteurs de recherche, notamment...).
Bonsoir Flow,

Tu n'es plus très loin Smiley cligne
Prends en compte la remarque de Florent concernant le bouton_livre (*2) et joue ensuite avec le positionnement des différents éléments, ton premier lien n'est plus disponible, mais je parviens à faire quelque chose de cohérent (sous Firefox, IE7 et IE6) en extrapolant un peu ce que je vois sur ton second lien Smiley cligne
Le cadre autour de tes boutons c'est voulu ?
Bon courage, persévères un peu, il n'y a pas de raison pour que tu ne parviennes pas à tes fins Smiley cligne
En cas d'échec, nous te guiderons vers la solution Smiley cligne

Bonnes fêtes de fin d'année.
non le cadre n'est pas voulut mais sa je pence savoir comment le lever mais la je vois pas trop comment faire je vais continuer mes recherche Smiley smile
flow a écrit :
voila j'ai mis a jour sur le meme lien le resultat c'est pas trop sa lol


Ben... euh oui, forcément:

1. Tu n'as pas respecté la structure HTML que je te proposais (une liste de trois items, et pas trois listes d'un seul item...).
2. Tu n'as pas corrigé ton code CSS (tu as toujours un sélecteur en double...).
3. Enfin, tu as gardé le title "Page d'accueil" et le texte alternatif "Accueil" pour les trois boutons! Bien entendu, il fallait adapter à la fonction de chaque bouton, sinon c'est du grand n'importe quoi.

Un peu d'inattention, peut-être? Smiley cligne

Sinon, pour le cadre autour des images, un simple a img {border: none;} devrait faire l'affaire.

Ah oui, une dernière chose: attention aux styles hérités de div#menu. Il y a à priori de nombreux styles appliqués aux deux premières listes qui devraient être appliquées directement à ces listes et pas à div#menu ul ou div#menu li.
Florent V. a écrit :


Ben... euh oui, forcément:

1. Tu n'as pas respecté la structure HTML que je te proposais (une liste de trois items, et pas trois listes d'un seul item...).
2. Tu n'as pas corrigé ton code CSS (tu as toujours un sélecteur en double...).
3. Enfin, tu as gardé le title "Page d'accueil" et le texte alternatif "Accueil" pour les trois boutons! Bien entendu, il fallait adapter à la fonction de chaque bouton, sinon c'est du grand n'importe quoi.

Un peu d'inattention, peut-être? Smiley cligne

Sinon, pour le cadre autour des images, un simple a img {border: none;} devrait faire l'affaire.

Ah oui, une dernière chose: attention aux styles hérités de div#menu. Il y a à priori de nombreux styles appliqués aux deux premières listes qui devraient être appliquées directement à ces listes et pas à div#menu ul ou div#menu li.


Voila j'ai rectifié toutes mes petites erreurs d'inattention.
Mais quand je place le code que tu me propose mon menu ce met en colonne ce qui est logique, il doit manquer une ligne dans le css pour le mettre en ligne non ?

enssuite en effet mon menu hérite des style #menu, #menu ul mais je n'est pas trop comprit comment éviter sa ?
Argh c'est pas possible, faut tout faire soi-même...

Le code que je proposais ci-dessus est une base à adapter. Je pense que tu le réalises bien, mais si tu tentais l'adaptation par toi-même ça serait pas mal non plus...

Enfin bref, voici les deux pistes intéressantes pour réaliser cette adaptation:
- soit on oublie les styles (et notamment ceux pour le positionnement) qui avaient été créés pour chacun des trois boutons, et on positionne un seul bloc (le ul) à l'endroit voulu, et on s'arrange pour avoir des boutons à l'horizontale;
- soit on récupère ces styles pour les appliquer, par exemple, à chaque li.

Dans le deuxième cas, il faut donc partir du code suivant:
<ul id="boutons-ronds">
	<li id="bouton_home">
		<a href="index.html" title="Page d'accueil">
			<img src="home.png" alt="Accueil" />
		</a>
	</li>
	<li id="bouton_livre">
		<a href="index.html" title="Livre d'or">
			<img src="home.png" alt="Livre d'or" />
		</a>
	</li>
	<li id="bouton_contact">
		<a href="index.html" title="Contact">
			<img src="home.png" alt="Contact" />
		</a>
	</li>
</ul>


Dans le premier cas, on positionne directement ul#boutons-ronds et on gère le positionnement des li de la manière suivante (par exemple):
ul#boutons-ronds {
	position: absolute;
	left: 373px;
	top: 55px;
	width: 300px;
	margin: 0;
	padding: 0;
	list-style: none;
}
ul#boutons-ronds a img {border: none;}
ul#boutons-ronds li {
	display: inline;
}


Voili voilou.
merci beaucoup!

du coup pour éclaicir un peut mon code j'ai voulus faire pareil pour le header car il y aura aussi des liens dessus voici le resultat lol.

pas trés trés bien aligné on va dire lol je comprend pas pourquoi ils ne se mettent pas en ligne alros que je l'es bien dit dans le css!
Modifié par flow (28 Dec 2007 - 18:45)
Flow,

Je trouve tout cela un poil "compliqué"...
Bref...
Pour avoir des images parfaitement alignées, on veillera à avoir des images de tailles identiques... Smiley cligne

Il faudrait également que tu "aères" un peu tout ça
*placer ton menu_droite à 150px par exemple
*éventuellement définir une dimension menu_li, je ne sais absolument pas si c'est lié, mais il y a un retour à la ligne pour "livre d'or" sous IE7 (et non, rien à signaler sous IE6 Smiley eek ) que j'ai résolu en donnant une dimension de 150px à menu_li... Smiley ohwell va comprendre Charles...(ceci dit, il y a certainement une très bonne explication ?!)
*
font-family: MoolBoran, Calibri;
C'est certainement très joli, mais je ne suis pas certain que cette police soit très répandue...en tout cas, je n'en dispose pas chez moi...
*Ton image plus.png ne passe évidemment ps sous IE6, un petit gif avec ta couleur de fond fera très bien l'affaire...(pour éviter les bidouillages de 20 km pour pas grand chose....)
*J'oubliais ton pied de page qu'il faudrait "baisser " un poil, toujours pour IE7 et son copain IE6 (top:350px par exemple...)
Voili, voilou...
Modifié par 6l20 (28 Dec 2007 - 21:27)
6l20 a écrit :
Flow,

Je trouve tout cela un poil "compliqué"...
Bref...
Pour avoir des images parfaitement alignées, on veillera à avoir des images de tailles identiques... Smiley cligne

Il faudrait également que tu "aères" un peu tout ça
*placer ton menu_droite à 150px par exemple
*éventuellement définir une dimension menu_li, je ne sais absolument pas si c'est lié, mais il y a un retour à la ligne pour "livre d'or" sous IE7 (et non, rien à signaler sous IE6 Smiley eek ) que j'ai résolu en donnant une dimension de 150px à menu_li... Smiley ohwell va comprendre Charles...(ceci dit, il y a certainement une très bonne explication ?!)
*
font-family: MoolBoran, Calibri;
C'est certainement très joli, mais je ne suis pas certain que cette police soit très répandue...en tout cas, je n'en dispose pas chez moi...
*Ton image plus.png ne passe évidemment ps sous IE6, un petit gif avec ta couleur de fond fera très bien l'affaire...(pour éviter les bidouillages de 20 km pour pas grand chose....)
*J'oubliais ton pied de page qu'il faudrait "baisser " un poil, toujours pour IE7 et son copain IE6 (top:350px par exemple...)
Voili, voilou...


VIVE IE LOL
a écrit :
VIVE IE LOL

Désolé pour la médiocre qualité des images, là n'est pas le "but"...

Opera :
upload/12813-opera.gif

Firefox :
upload/12813-firefox.gif

IE7 :
upload/12813-ie7.gif

IE6 : mêmes "imperfections" que sur IE7 + le soucis du png
upload/12813-ie6.gif

Soit, Vive IE Smiley lol ...

Si tu ne positionnes pas correctement tes éléments, peut importe le navigateur, le rendu risque de ne pas être celui désiré...
Si tes images ne font pas la même taille, l'alignement sera difficilement "carré", quel que soit le navigateur...
Si ton visiteur n'a pas la police que tu renseignes dans ta css sur son ordinateur, la navigateur prendra celle par défaut, celle qui lui semble la plus proche, quid du rendu que tu imaginais ?...
Après c'est un choix, celui d'en rire également Smiley cligne
Si ton portefolio n'a pas vocation "professionnelle", pas de soucis, sinon cela fait un poil pas tout à fait soigné, fini, léché, pro quoi Smiley lol ...
Bonnes fêtes Smiley cligne