Aller au contenu

Problème CSS

ThinK

Par ThinK
dans (X)HTML et CSS

 Partager

Sujets conseillés

ThinK

ThinK

Posté
Posté (modifié)

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é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'é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é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 "rétro" va vous permettre de découvrir ou rédecouvrir cette série unique qui est devenue la référence des jeux de foots virtuels.<br />
     - La rubrique "fichier option" contient tout le nécessaire pour modifier PES sans avoir à le faire manuellement.<br />
	Bonne visite;)</p>
	<h1>25/12/2005</h1>
   <p>Toute l'équipe vous souhaite de joyeuses fêtes !</p>
	<h1>20/11/2005</h1>
   <p>Nous sommes à la recherche de partenaires afin d'agrandir la MiniComWeb et cré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ésentes dans PES. Vous allez pouvoir modifier les noms fictifs présent dans la version originale par les vrais noms. Enjoy;) </p>
	<h1>11/11/2005</h1>
   <p>Ouverture du site après pas mal d'heures de travail. Le site devrait connaître de nouvelles rubriques prochainement toutefois il est présentable sous cette version qui dispose du minimum. Pour participer à l'agrandissement du site, rejoignez nous sur le forum : proposez vos idées, vos articles qui pourrons intégrer le site des leurs acceptations.</p>
	<h1>08/11/2005</h1>
   <p>Ouverture du forum disponible via le bouton "Accéder au forum". Vous y trouverez une communauté accueillante et toute l'aide nécessaire si le site lui même ne répond pas à votre problè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;
}

Modifié par ThinK
Lien vers le commentaire
Partager sur d’autres sites
captain_torche

captain_torche

Posté
Posté

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.com/css/css_reference.asp

Sinon, ton site est très sympa.

Lien vers le commentaire
Partager sur d’autres sites
Dudu

Dudu

Posté
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites
ThinK

ThinK

Posté
  • Auteur
Posté

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 ?

Lien vers le commentaire
Partager sur d’autres sites
Dudu

Dudu

Posté
Posté
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 ?

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

Lien vers le commentaire
Partager sur d’autres sites
Monique

Monique

Posté
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...