Besoin d'aide CSS

[Sebastien]

J'ai un souci avec mon site http://s.billard.free.fr/annuaire ... on m'a dit qu'une barre de scroll horizontal apparaissait en 800*600 (pas testé). Serait il possible qu'une âme charitable regarde le code source suivant et me dise les valeurs à utiliser pour que le site tienne dans un bloc centré de 728 pixels de large (banniere adwords) sans bousiller l'apparence actuelle du site? je connais que dalle au positionnement CSS

Un backlink offert pour toute aide

<?

include ("style.php");

?>

BODY {font-family: <? echo $text_face?>; font-size: <? echo $text_size?>px; color: <? echo $text_color?>; background: <? echo $side_background_color?>; margin: 0px}

A:link {color: <? echo $link_color?>}

A:visited {color: <? echo $link_color?>}

A:hover {color: <? echo $link_mouseover_color?>}

FORM {margin: 0px}

INPUT {clear: left}

H1 {width: 100%; font-size: <? echo $highlight_text_size?>px; font-weight: bold; margin: 0px}

P {margin:0px; margin-top:10px}

.main {position: relative; left:20%; height: 100%; width: 720px; font-size: <? echo $text_size?>px; background: <? echo $main_background_color?>; padding: 40px 40px 20px; border: 2px <? echo $main_border_color?>; border-style: none solid; margin-left: -130px}

.logo {background-image: url("<? echo $logo_url?>"); background-repeat: no-repeat; background-position: top right}

.logo a {width: 728px; height: <? echo $logo_height?>px}

.heading {width: 728px; padding: 10px 0px 15px; border-bottom: 1px solid <? echo $highlight_border_color?>}

.heading_path {font-size: <? echo $text_size?>px; padding-top: 5px}

.search {width: 728px; padding: 15px 0px; border-bottom: 1px solid <? echo $highlight_border_color?>}

.search_controls {float: left}

.search_controls_text {width: 249px; height: 20px; font-family: <? echo $text_face?>; font-size: <? echo $text_size?>px; padding: 2px 4px}

.search_controls_button {width: 140px; height: 21px; font-size: <? echo $text_size?>px; font-family: <? echo $text_face?>; background: <? echo $button_background?>}

.search_add {float: right}

.search_add a {padding-left: 3px}

.text {width: 728px; padding: 15px 0px; border-bottom: 1px solid <? echo $highlight_border_color?>}

.text_path {font-size: <? echo $highlight_text_size?>px; font-weight: bold}

.text_text {}

.text_block {padding-top: 10px}

.form {width: 728px; padding: 15px 0px; border-bottom: 1px solid <? echo $highlight_border_color?>}

.form_text {}

.form_controls {padding-top: 10px}

.form_controls_text {width: 300px; height: 20px; font-family: <? echo $text_face?>; font-size: <? echo $text_size?>px; padding: 2px 4px}

.form_controls_radio {position: relative; top: 2px; left: -4px}

.form_controls_button {width: 200px; height: 21px; font-family: <? echo $text_face?>; font-size: <? echo $text_size?>px; background: <? echo $button_background?>}

.categories {width: 728px; background: <? echo $highlight_background?>; padding: 15px 20px; border: 1px solid <? echo $highlight_border_color?>; border-top: 0px; overflow: hidden}

.categories_text {}

.categories_block {padding-top: 10px}

.categories_blocks {}

.categories_blocks_left {width: 231px; padding-top: 10px; padding-right: 15px; float: left; clear: both}

.categories_blocks_right {width: 231px; padding-top: 10px; float: left}

.categories_category {font-size: <? echo $highlight_text_size?>px; display: block}

.categories_category_title {font-size: <? echo $highlight_text_size?>px; font-weight: bold; color: <? echo $text_color?>; display: inline}

.pages {width: 728px; padding: 15px 0px; border-bottom: 1px solid <? echo $highlight_border_color?>; overflow: hidden}

.pages_results {}

.pages_page {margin-top: 10px}

.pages_page_title {font-size: <? echo $highlight_text_size?>px; font-weight: bold; display: inline}

.pages_page_category {display: inline}

.pages_page_description {display: block}

.pages_page_url {display: block;}

.options {width: 640px; text-align: right; padding: 15px 0px; border-bottom: 1px solid <? echo $highlight_border_640or?>}

.links {width: 728px; padding: 15px 0px 0px}

.alert, .alert:link, .alert:visited {color: red; display: inline}

[Monique]

Bonjour,

C'est un problème de largeur de tes blocs, qui devrait être résolu en utilisant des unités relatives (%), ce qui réglerait aussi le problème d'affichage dans Mozilla.

Essaie ceci :

.main {position: relative; left:20%; height: 100%; width: 75%; font-size: <? echo $text_size?>px; background: <? echo $main_background_color?>; padding: 40px 40px 20px; border: 2px <? echo $main_border_color?>; border-style: none solid; margin-left: -130px}

margin-left: -130px je ne comprends pas son rôle... essaie en le supprimant

.heading {width: 100%; padding: 10px 0px 15px; border-bottom: 1px solid <? echo $highlight_border_color?>}

.heading_path {font-size: <? echo $text_size?>px; padding-top: 5px}

et le même principe pour les autres blocs contenu dans main

PS : ce n'est pas pour un backlink

[Sebastien]

Merci beaucoup monique, j'ai bidouillé un peu serait il possible que tu testes avant d'essayer tes suggestions j'avais oublié de changer une valeur pour la feuille de style netscape.

Le site devrait egalement etre visible en 800*600 car il y avait pour certaines personnes un scrolling horizontal.

Dans mes liens j'ai d'ores et deja mis le Hub

[Monique]

Cette fois, c'est tout bon dans Mozilla et FireFox

mais il reste un décalage dans Opera...

[LaurentDenis]

La page échoue également sous konqueror, IE5mac...

C'est le bon vieux problème du box-model qui ressort.

En résumé, à cause d'une interprétation défectueuse du mode de calcul des largeurs/hauteurs dans IE5, les navigateurs plus récents ont deux modes de calculs rivaux des largeurs/hauteurs. Ils adoptent l'un ou l'autre selon le type de standard de la page (HTML / XHTML / strict / transitional ...).

Pour approfondir, voir http://openweb.eu.org/articles/dimensions_boites_css/

Opera (et les autres ci-dessus) utilise ici le mode de calcul "IE", où la largeur disponible dans le conteneur "main" est trop petite pour le contenu.

Solution expéditive : Faire passer Opera en mode "strict" de calcul des largeurs, à l'aide d'une règle CSS3:

.main {

box-sizing: content-box;

}

ça ne règle le problème que pour Opera 7+

Solution de fond : supprimer le padding pour le conteneur main, le remplacer par une marge équivalente appliquée aux div intérieures ; virer la largeur spécifiée pour les div intérieures.

ça donne grossièrement :

.main {

position : relative;

left : 20%;

min-height : 100%;

width : 728px;

font-size : 10px;

background : white;

padding : 25px 0 20px 0;

border : 0 none #333333;

border-style : none solid;

margin-left : -130px;

}

.heading {

padding : 10px 0 15px 0;

margin: 0 15px;

border-bottom : 1px solid #d9d9d9;

}

.search {

margin: 0 15px;

padding : 15px 0;

border-bottom : 1px solid #d9d9d9;

}

.text {

margin: 0 15px;

padding : 15px 0;

border-bottom : 1px solid #d9d9d9;

}

.form {

margin: 0 15px;

padding : 15px 0;

border-bottom : 1px solid #d9d9d9;

}

.categories {

margin: 0 15px;

background : #f7f7f7;

padding : 15px 0;

border : 1px solid #d9d9d9;

border-top : 0 none inherit;

overflow : hidden;

}

.pages {

margin: 0 15px;

padding : 15px 0;

border-bottom : 1px solid #d9d9d9;

overflow : hidden;

}

etc...

A affiner... Mais ça règlera le problème pour tous les navigateurs.

En fait, autant éviter les positionnements en largeur au pixel près : c'est l'intérêt des unités relatives (em, %) qui facilitent la mise au point d'un design "fluide" qui variera d'un navigateur à l'autre, sans dégradation gênante cependant.

D'autre part, il faudrait supprimer le javascript de détection du navigateur, erroné et inutile, la même feuille pouvant être servie à tous... Et gros défaut : la page n'est plus stylée si javascript est désactivé dans le navigateur

Modifié 30 Mars 2004 par LaurentDenis