Webmaster Hub: Problème CSS - Webmaster Hub

Aller au contenu

Page 1 sur 1
  • Vous ne pouvez pas commencer un sujet
  • Vous ne pouvez pas répondre à ce sujet

Problème CSS Noter : -----

#1 L'utilisateur est hors-ligne   ThinK 

  • Groupe : Membre
  • Messages : 9
  • Inscrit(e) : 27-janvier 06
  • Société:MiniComWeb

  Posté 23 février 2006 - 15:00

Après avoir crée une page valide xhtml 1.1, je me heurte à différents problèmes ...

Tout d'abord sous IE, on remarque un espace entre le header et la barre intermédiaire juste en dessous.
Ensuite j'aimerais que le menu a gauche descende jusqu'au footer afin qu'il n'existe plus cet espace vide entre les 2.
J'aimerais aussi connaitre le code a ajouter pour que IE n'entoure pas mes images avec un lien d'une bordure bleu comme il le fait actuellement.
En dernier ressort j'aimerais mettre un fond a ma page centré et qui se répète en suivant l'axe des y.

Merci de m'aider je suis plutôt novice en la matière :unsure:

Voici le lien du site biensur : MiniComWeb valide

PS : Si vous saviez aussi comment on enlève l'espace entre les titres <h1> et la suite ... :mellow:

index.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<title>MiniComWeb : Fanatic PES Fan</title>
</head>
	
<body>
	<div id="header_g">
	<img src="bt_accueil.jpg" style="display:block;" alt="Retour à l'accueil" width="249" height="27" />
	<img src="header_g.jpg" style="display:block;" alt="" width="249" height="112" />
	</div>	
	<div id="header_d">
	<img src="header_hd.jpg" style="display:block;" alt="" width="501" height="110" />
    <img src="header_md.jpg" alt="" width="252" height="29" /><img src="bt_forum.jpg" alt="Accéder au forum" width="249" height="29" />	
	</div>	
	<div id="sous_header">
	</div>
	<div id="menu">
	<img src="jeu.jpg" style="display:block;" alt="" width="167" height="24" />
	<br/>
	<img src="puce.jpg" alt="" width="10" height="5" />
	<a href="index.html"> Accueil</a><br/>
	<img src="puce.jpg" alt="" width="10" height="5" />
	<a href="jeu/news.html"> News</a><br/>
	<img src="puce.jpg" alt="" width="10" height="5" />
	<a href="jeu/video.html"> Vid&eacute;os</a><br/>
	<img src="puce.jpg" alt="" width="10" height="5" />
	<a href="jeu/screen.html"> Screenshots</a><br/>
	<img src="puce.jpg" alt="" width="10" height="5" />
	<a href="jeu/fecran.html"> Fonds d'&eacute;crans</a><br/>
	<img src="puce.jpg" alt="" width="10" height="5" />
	<a href="jeu/gestes.html"> Gestes techniques</a><br/>
	<img src="puce.jpg" alt="" width="10" height="5" />
	<a href="jeu/retro.html"> R&eacute;tro</a><br/><br/>
	<img src="modif.jpg" style="display:block;" alt="" width="167" height="24" />
	<br/>
	<img src="puce.jpg" alt="" width="10" height="5" />
	<a href="modif/files.html"> Fichier option</a><br/>
	<img src="puce.jpg" alt="" width="10" height="5" /> 
	<a href="modif/clubs.html"> Nom des clubs</a><br/>
	<img src="puce.jpg" alt="" width="10" height="5" /> 
	<a href="modif/stades.html"> Noms des stades</a><br/>
	<img src="puce.jpg" alt="" width="10" height="5" />
	<a href="modif/coup.html">Noms des coupes</a><br/><br/>
	<img src="autres.jpg" style="display:block;" alt="" width="167" height="24" />
	<br/>
	<img src="puce.jpg" alt="" width="10" height="5" />
	<a href="autres/ekip.html"> L'equipe du site</a><br/><br/>
	<img src="part.jpg" style="display:block;" alt="" width="167" height="24" />
	<br/>
	<a href="http://www.clanrac.com/" class="Style6"><img src="http://60gp.ovh.net/~clanracc//ftptohttp/racsmall2.jpeg" alt=""/></a>
	</div>
	<div id="contenu">
   <img src="news.jpg" style="display:block;" alt="" width="570" height="25" />
   <h1>29/01/2006</h1>
   <p>2 nouvelles rubriques ont fait leur apparition des aujourd'hui :<br />
     - La rubrique &quot;r&eacute;tro&quot; va vous permettre de d&eacute;couvrir ou r&eacute;decouvrir cette s&eacute;rie unique qui est devenue la r&eacute;f&eacute;rence des jeux de foots virtuels.<br />
     - La rubrique &quot;fichier option&quot; contient tout le n&eacute;cessaire pour modifier PES sans avoir &agrave; le faire manuellement.<br />
	Bonne visite;)</p>
	<h1>25/12/2005</h1>
   <p>Toute l'&eacute;quipe vous souhaite de joyeuses f&ecirc;tes !</p>
	<h1>20/11/2005</h1>
   <p>Nous sommes &agrave; la recherche de partenaires afin d'agrandir la MiniComWeb et cr&eacute;e des liens entre fans de PES. Si vous souhaitez devenir partenaire de la MiniComWeb, contactez nous via cette adresse : think_AT_minicomweb.com </p>
	<h1>14/11/2005</h1>
   <p>Voici enfin la liste des coupes pr&eacute;sentes dans PES. Vous allez pouvoir modifier les noms fictifs pr&eacute;sent dans la version originale par les vrais noms. Enjoy;) </p>
	<h1>11/11/2005</h1>
   <p>Ouverture du site apr&egrave;s pas mal d'heures de travail. Le site devrait conna&icirc;tre de nouvelles rubriques prochainement toutefois il est pr&eacute;sentable sous cette version qui dispose du minimum. Pour participer &agrave; l'agrandissement du site, rejoignez nous sur le forum : proposez vos id&eacute;es, vos articles qui pourrons int&eacute;grer le site des leurs acceptations.</p>
	<h1>08/11/2005</h1>
   <p>Ouverture du forum disponible via le bouton &quot;Acc&eacute;der au forum&quot;. Vous y trouverez une communaut&eacute; accueillante et toute l'aide n&eacute;cessaire si le site lui m&ecirc;me ne r&eacute;pond pas &agrave; votre probl&egrave;me. Rejoignez nous vite;)</p>
	<br />
	</div>
	<div id="footer">
	</div>
</body>
</html>


style.css :
/* CSS Document */

body
{
	width: 750px;
	margin: auto;
	background: #5A8045
}

h1
{
	font-size: 12px;
	font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
	color: #EEAF02;
}

a
{
	font-size: 12px;
	font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
	color: #000000;
}

#header_g
{
   float: left;
   width: 249px;
   height: 139px;
}

#header_d
{
	float: right;
	width: 501px;
	height: 139px;
}

#sous_header
{
	float: left;
	width: 750px;
	height: 36px;
	background-image: url(header_bas.jpg);
}

#menu
{
	float: left;
	width: 167px;
	background-color: #D9D9D9;
	font-size: 12px;
	font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
	color: #000000;
	padding: 3px
}

#contenu
{
	float: right;
	width: 571px;
	background-color: #EAEAEA;
	font-size: 12px;
	font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
	color: #000000;
	background-image: url(fond_texte.jpg);
	background-repeat: repeat-y;
	padding: 3px
}
#footer
{
	float: right;
	width: 750px;
	height: 21px;
	background-image: url(footer.jpg);
	background-repeat: no-repeat;
}

Ce message a été modifié par ThinK - 23 février 2006 - 15:06.

0

#2 L'utilisateur est hors-ligne   captain_torche 

  • Danacol / Orangina rouge
  • Groupe : Admin
  • Messages : 6 658
  • Inscrit(e) : 08-février 06
  • Genre:Homme
  • Localisation:Savigny / Orge

Posté 23 février 2006 - 15:16

Pour manipuler les marges entre les éléments, utilise l'attribut margin

margi: marge_des_4_cotes;

ou

margin: marge_haut, marge_droite, marge_bas, marge_gauche;

ou encore

margin: marge_haut_bas, marge_gauche_droite;

et, tu peux juste spécifier chacune des marges avec

margin-top, margin-right, margin-bottom et margin-left.

Pour enlever le contour bleu des images contenues dans un lien, tu vas rajouter ça dans ton CSS :
a img {
border: 0;
}


Tu pourras trouver une référence des balises CSS2 ici : http://www.w3schools...s_reference.asp

Sinon, ton site est très sympa.
Vous avez rêvé cette nuit ? Partagez vos rêves sur l'Onironaute !
Bijoux fantaisie
Recherche nounou
0

#3 L'utilisateur est hors-ligne   ThinK 

  • Groupe : Membre
  • Messages : 9
  • Inscrit(e) : 27-janvier 06
  • Société:MiniComWeb

Posté 23 février 2006 - 15:59

Je n'arrive pas a enlever mon espace meme en ajoutant :
margin: 0px;
a tous mes div ...
0

#4 L'utilisateur est hors-ligne   Dudu 

  • Groupe : Admin
  • Messages : 3 797
  • Inscrit(e) : 09-avril 05

Posté 23 février 2006 - 16:10

Salut,

Plusieurs choses dans l'ordre:
  • Tu parles de voir le site sous IE mais théoriquement IE n'accepte pas l'XHTML 1.1 avec un Content-type "application/xhtml+xml". Comment fais-tu ? :huh:
  • Tu te compliques la vie avec ton iso 8859-1. L'encodage par défaut utilisé par l'XHTML Strict est l'UTF-8 qui te permettra d'enlever tous tes entités HTML pour les remplacer par les vraies lettres éèàôî. D'ailleurs si tu veux vraiment travailler en XHTML 1.1 il te manque le prologue xml au-dessus du DOCTYPE ;)
  • Pour les marges extérieures, il faut utiliser margin. Pour les marges intérieures, c'est padding
  • Tes listes sur le côté ne sont pas sémantiques et t'obligent à répéter l'image "puce.jpg". Ce n'est pas comme çà qu'il faut faire ! Remplaces l'HTML par çà
    <ul><li>Accueil</li><li>News</li><li>Vidéo</li><li>
    Screenshots</li><li>Fonds d'écran</li><li>Gestes techniques</li><li>Retro</li></ul>
    et rajoutes çà dans le CSS
    #menu ul li {list-style: disc url(puce.jpg); padding-left: 10px;}
    

  • Pour ton fond d'écran centré il te faudra une règle CSS comme celle-ci
    body {background: #5a8045 url(fond-d-ecran.jpg) repeat-y 50%;}
    
PS: aucun code que je donne n'a été testé. Ce n'est pas du "prêt-à-l'emploi" et çà te demandera sûrement un effort minime d'intégration pour que tout soit parfait ;)

Bon courage.
0

#5 L'utilisateur est hors-ligne   ThinK 

  • Groupe : Membre
  • Messages : 9
  • Inscrit(e) : 27-janvier 06
  • Société:MiniComWeb

Posté 23 février 2006 - 16:25

Merci pour tout, juste une autre question :
Quesque je dois ajouter alors dans le head pour travailler en xhtml strict ? Parce que je trouve pas de site qui donne exactement ce qu'il faut copier coller ... N'y a t'il pas des modèles ?
0

#6 L'utilisateur est hors-ligne   Dudu 

  • Groupe : Admin
  • Messages : 3 797
  • Inscrit(e) : 09-avril 05

Posté 23 février 2006 - 22:26

ThinK, le jeudi 23 février 2006, 16h25, dit :

Merci pour tout, juste une autre question :
Quesque je dois ajouter alors dans le head pour travailler en xhtml strict ? Parce que je trouve pas de site qui donne exactement ce qu'il faut copier coller ... N'y a t'il pas des modèles ?
<{POST_SNAPBACK}>
Comme je le dis dans mon précédent message, il manque juste un prologue XML :)

Comment faire du bon XHTML par Karl Dubost, membre du w3c
Servir du XHTML 1.0 (mais c'est valable aussi pour XHTML 1.1) sur le site du w3c
0

#7 L'utilisateur est hors-ligne   Monique 

  • Le Web à tous
  • Groupe : Hubmaster
  • Messages : 3 952
  • Inscrit(e) : 19-août 03
  • Genre:Femme
  • Localisation:rue Georges Mabile, Havré
  • Société:Webatou

Posté 24 février 2006 - 08:37

Bonjour,

Je commence par te poser une question... pourquoi as-tu choisi d'utiliser XHTML 1.1 ?

A mon avis, au vu du code que tu as donné, tu n'en as pas besoin... et comme son usage est encore assez périlleux (voir XHTML 1.0 strict ou 1.1), il vaut mieux l'éviter dans ce cas.
Amicalement,
Monique
en campagne pour des sites de qualité, conformes aux standards et accessibles... avec mon navigateur préféré (Firefox) et les Bonnes pratiques qualité pour les sites Web (Opquast)
Webatou : accessibilité et qualité des sites Web
0

Partager ce sujet :


Page 1 sur 1
  • Vous ne pouvez pas commencer un sujet
  • Vous ne pouvez pas répondre à ce sujet

1 utilisateur(s) en train de lire ce sujet
0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)