Largeur fluide ?

Bonjour,

J'ai tripatouillé le site de mon Club dont l'affichage est géré par un "P....n" de CCS et je n'arrive pas à trouver le paramètre à regler pour avoir un affichage correct

Voici l'url de mon site: http://www.tennisbouliac.com/welcome/index.php

quand je le regarde sur mon PC tout est nickel, par contre si je regarde avec un PC ayant un ecran different c'est la cata

Voici le CSS qui apparemment contrôle l'affichage et je suis completement perdu, si qu"lqu'un pouvais jeter un coup d'oeil car je suis certain qu'il y a juste un parametre a régler, mais je ne trouve pas:

/* Initialisation CSS */ 

html, body { /* OU * { MAIS CA PEUT ETRE ASSEZ PERTURBANT  [cligne] */ 
margin: 0; 
padding: 0; 
border: 0; 
} 


/* police par défaut de tout le site */ 

html, body { 
background-color: #FFFFFF; 
margin: 0; 
padding: 0; 
} 
body { 
font-size: 0.8em; 
font-family: Verdana, Arial, Helvetica, sans-serif; 
color: #000000; 
font-weight: normal; 
} 


/* lien par défaut */ 

a { 
color: #FF0000; 
text-decoration: none; 
} 
a:hover { 
color: #FF8000; 
background: #FFFFFF; 
text-decoration: none; 
} 


/* liste par défaut */ 

ul { 
list-style-type: square; 
margin: 0; 
padding-left: 0.5em; 
} 


/* titres par défaut */ 

h1 { 
font-size: 1.6em; 
} 
h1, h1 a { 
color: #006699; 
font-weight: bold; 
} 
h2 { 
font-size: 1em; 
} 
h2, h2 a { 
color: #669900; 
font-weight: bold; 
} 

h3 { 
font-size: 1.2em; 
} 
h3, h3 a { 
color: #990066; 
font-weight: bold; 
} 
h1, h2, h3 { 
margin: 0; 
padding: 0.5em 0; 
} 


/* image par défaut */ 

img { 
border: 0; 
} 


/* Agencement des pages */ 

#conteneur { 
width: 96%; 
margin: 2%; 
background-color: #FFFFFF; 
border: #000000 1px solid; 
} 

#header { 
height: 170px; 
background-color: #FFFFFF; 
border: 0; 
padding: 0.5em; 
} 

#banniere { 
float: right; 
width: 66%; 
margin: 10px 0; 
text-align: center; 
font-size: 2em; 
font-weight: bold; 
} 

#haut { 
height: 3em; 
background-color: #DFDFDF; 
border: 0; 
padding: 0; 
} 

#centre { 
background-color: transparent; 
margin-left: 11.2em; /* pour colonne gauche */ 
/* margin-right: 15%; 
*/ /* pour colonne droite */ 
/*border-left: #000000 1px solid;*/ 
padding: 0.5em; 
min-height: 400px; 
} 

* html #centre { 
height: 400px; /* hack uniquement interprété par IE Win+Mac */ 
} 

#gauche { 
float: left; 
width: 11.1em; /* largeur environ égale à marge gauche de #centre */ 
/*border-right: #000000 1px solid;*/ 
background-color: transparent; 
padding-bottom: 0.5em; 
} 

#droite { 
float: right; 
width: 15%; /* largeur égale à marge droite de #centre */ 
background-color: #FFFFFF; 
text-align: center; 
line-height: 200px; 
font-size: 1em; 
} 

#bas { 
clear: both; 
position:relative; 
background-color: #DFDFDF; 
border: 0; 
padding: 0.5em; 
text-align: center; 
} 
#bas ul { 
display: inline; 
border-right: 2px solid #000000; 
} 
#bas ul li { 
border-left: 2px solid #000000; 
display: inline; 
padding-right: 0.6em; 
padding-left: 1em; 
} 
#bas a { 
color: #006699; 
} 
#bas a:hover { 
color: #FF8000; 
} 

#conception { 
display:inline; 
position:absolute; 
right:10px; 
top:3px; 
color:#006699; 
font-size:0.7em; 
} 

#pied { 
height: 0.5em; 
background-color: #FF8000; 
border: 0; 
padding: 0.5em; 
text-align: center; 
margin-bottom:1px; 
} 
#pied a { 
color: #FF8000; 
font-weight: bold; 
} 


/* temp.html */ 

div.menugauchetitre { 
clear: left; 
width:11.15em; 
color: #FFFFFF; 
font-weight: bold; 
background: #006699; 
height: 1.5em; 
margin-bottom: 1em; 
padding-left: 0; 
padding-top: 0.19em; 
text-align: center; 
} 
div.menugauchetitre span { 
font-size: 1.1em; 
} 

div.menugauchecontenu { 
clear: left; 
width:11.1em; 
color: #000000; 
font-weight: bold; 
line-height: 1.2em; 
margin-bottom: 1em; 
} 
div.menugauchecontenu a {color: #006699; font-weight: normal;} 
div.menugauchecontenu a:hover {color: #FF8000; background: #FFFFFF; font-weight: normal;} 


/* pages.html */ 

#mentete { 
width: 100%; 
height: 1.6em; 
background: #006699; 
} 
#entete { 
float: left; 
padding-top: 0.2em; 
padding-left: 1em; 
color: #FFFFFF; 
font-weight: normal; 
background: #006699; 
} 
#entete a { 
color: #FFFFFF; 
} 
#entete a:hover { 
color: #FF8000; 
} 

#entetepage { 
float: right; 
padding-top: 0.2em; 
padding-right: 1em; 
color: #FFFFFF; 
font-weight: bold; 
text-align: right; 
background: #006699; 
} 
#entetepage a {color: #FFFFFF; font-weight: normal;} 
#entetepage a:hover {color: #FF8000; font-weight: normal;} 


/* page accueil */ 

#accueil { 
width: 98%; 
} 

/* 
#editoacc { 
width: 98%; 
padding: 0.5em; 
}*/ 

#editoacc{ 
float:left; 
width:68%; 
padding:0.5em 
} 

/* 
#rubriques1 { 
width: 98%; 
padding: 0.5em; 
border-top: #000000 1px solid; 
} 
*/ 
#rubriques1 { 
float:right; 
width:23%; 
BORDER:#003366 1px dotted; 
padding:0.5em; 
background:#EEE 
} 

#rubriques1 h1 {display: inline;} 

#rubriques2 { 
padding: 0.5em; 
width: 98%; 
border-top: #000000 1px solid; 
} 

#rubriques2 ul {list-style-type: none; margin: 0; padding-left: 0.5em;} 
#rubriques2 a {color: #000000;} 
#rubriques2 a:hover {color: #FF8000;} 
#rubriques2 img {} 

Bref Si une ame charitable pouvait m'aider car je sent que je vais tout casser

Bien à vous,
Jcomprenrien
Modifié par jcomprenrien (08 Nov 2009 - 11:10)

Bonjour,

1) merci d'éditer ton titre (en éditant ton premier message) afin qu'il signifie quelque chose. "Largeur fluide ?" me semble pas mal.

2) ton site est en grande partie fluide en largeur. C'est un chouette challenge mais c'est très casse-gueule à moins de savoir à tout moment ce que tu fais ...
Fluide parce qu'il fait référence à des largeurs en pourcentage (96%, etc) au lieu de classiques pixels.
Le premier souci que je vois, c'est que tes images dans le code HTML indiquent

<img border="0" src="http://start5g.ovh.net/~tennisbo/templates/temp/img/baniere3.jpg" width="1200" height="164">

et en l'absence d'unité c'est par défaut des pixels. Il faudrait que tu indiques un pourcentage pour width (et euh sous réserve, à tester, etc rien pour height sinon l'image va évidemment être déformée)

3) Y a quelques navigateurs qui comprennent pas de la même façon que les autres 2%+2%+96% ou d'autres additions ... (ça peut faire 100.01% et hop barre d'ascenseur horizontale). Test ... et bingo IE6 et 7 sont décidément trop prévisibles

4) C'est quelqu'un qui t'en veut qui a décidé de travailler en largeur fluide ?

Bonjour et merci de t'interresser à mon PB

Nan apparement personne m'en veut j'ai juste voulu entrer dans la cours des grands en utilisant un portail Php assez sympa avec des skins tout simplement trop complexes pour moi

D'aprés toi, si je modifie mon code Html

a écrit :
Il faudrait que tu indiques un pourcentage pour width (et euh sous réserve, à tester, etc rien pour height sinon l'image va évidemment être déformée)

Je dois mettre combien dans la valeur Width ???

Merci

Alors tu as un div#header dans lequel il y a un div#logo dans lequel il y a un p qui contient ton image et rien d'autre
Si tu indiques width="100%", ce sera 100% de la largeur du paragraphe.
Aucune indication de largeur, bordure ni marges pour ce dernier ; comme c'est un élément de type block il occupe toute la largeur de son conteneur càd #logo
Aucune indication (styles CSS) non plus pour #logo, il fait donc la largeur de #header
#header a des marges internes (padding) de 0.5em à gauche et à droite. Il occupe donc (100%-1em) de #conteneur.

Si tu veux que ton logo fasse la largeur de #conteneur (qu'il touche les bordures G et D de ce dernier), enlève le padding G et D et fixe 100% pour la largeur de l'image.

#header {
padding: 0;
} 

Ah oui ça fonctionne pas de suite parce que ton image est dans un paragraphe qui a par défaut des marges de

p { /* fixé par la plupart des navigateurs à cette valeur, sinon le texte serait illisible ! */
margin: 1em 0;
}

Il faut aussi enlever cette marge:

#logo p {
margin: 0;
}

Ensuite il y a un espace blanc entre l'image et le menu. Je suppose que ça vient des proportions de l'image mais essaie de supprimer le height: 170px;
Au pire remplace-le par min-height: 170px; car un visiteur en 1600x1200 va louper un quart du bas de l'image ! (en 1280 ça fait pile 169px de haut)

Idem pour le height: 3em; du div contenant le menu
Place un

#diviseVerticalGauche {
clear: both
}

pour pas que ça vienne empiéter sur le menu (?) et remplace height par min-height, pour commencer.

Pour tester avec un grand écran de petites résolutions: extension Web Developer Toolbar avec Firefox (Redimensionner)
Avec un petit écran de grandes résolutions: http://viewlike.us/

Des gabarits qui tiennent, garantis par Florent V. : http://www.alsacreations.com/static/gabarits/ (4, 5 ou 6 pour la largeur fluide ?)

Pour IE, essaie de remplacer la marge sur le conteneur:

#conteneur {
margin: 2% auto;
}

ce qui centrera horizontalement ton conteneur et devrait enlever l'ascenseur horizontal.
EDIT: parce que soit IE fait une erreur d'arrondi (et il a le droit en fait), soit les 1px de bordure + 2%+2%+96% = 100% + 2px > 100% . Ca vient peut-être très bêtement de la bordure mais j'ai pas testé.
Modifié par Felipe (08 Nov 2009 - 13:49)

Waouuuu , je te remercie pour toutes ces infos que je vais essayer de mettre en pratique

Je te tiens au courant

Merci encore pour ta cyber générosité
@+

Je t'en prie, c'est le genre d'erreur ou problème qu'on détecte en 30 secondes quand on l'a déjà rencontré (la première fois c'est plutôt 2 H à tatonner ...)
Pour margin: qqch auto; tu peux regarder centrage horizontal d'éléments de type bloc

Et pour l'image, fais plutôt référence si possible à :
src="/templates/temp/img/baniere3.jpg" (templates est bien à la racine de ton site)
ou
src="http://www.tennisbouliac.com/templates/temp/img/baniere3.jpg"
car ça te permettra de changer d'hébergement chez OVH ou de partir de chez OVH sans tout casser. "http://start5g.ovh.net/..." c'est forcément pas très pérenne ...
Modifié par Felipe (09 Nov 2009 - 17:05)