[Résolu]Site illisible en texte grand du navigateur.

Bonjour à tous,
j'ai essayé de conceptionner la mise en page d'un site rien qu'en css, mais voilà je recontre quelques soucis, je pense m'y être mal pris étant donné que c'est la première fois que je n'utilise pas de tableaux html mais juste du css.

En mettant la taille du texte dans affichage en "Grande" "Très grande" ou "Petite" "Très petite", le site devient illisible, il ne fonctionne qu'en taille "Moyenne" du navigateur.

Voici l'url:
http://aroh.free.fr/musculazone

CSS (désolé pour le flood)

/* Body */
#body {
color: #000000;
background:#2E2D2E;
margin: 0; /* pour éviter les marges */
text-align: center; /* pour corriger le bug de centrage IE */
}
pre {
overflow: auto;
}

html pre {
width: 810px;
}

#page {
width: 810px;
margin-left: 0 auto;
margin-right: 0 auto;
margin: 0 auto;
padding: 0 auto;
right: 0 auto;
position: relative;
}
	
/* Body */ 

/* Form */
input { border: 1px 1px 1px 1px; border-color: #000; border-style: dotted; background: #565448; cursor: pointer; }

textarea { border: 1px 1px 1px 1px; border-color: #000; border-style: dotted; background: #565448; cursor: pointer; }
/* Form */

/* Liens */
a  {
	color:#DDD6CB; 
	text-decoration: none; 
	font-weight: bold; 
	font: 1em "Trebuchet MS", helvetica, sans-serif ; 
}

a:hover, a:active {
	color:#FF8A00; 
	text-decoration: none; 
	font-weight: bold; 
	font: 1em "Trebuchet MS", helvetica, sans-serif ;
}
/* Liens */


/* Titre & sous-titres */
.source_date {
font: 0.8em "Trebuchet MS", helvetica, sans-serif;
font-style: italic;
display: block;
width: 700;
position: relative;
left: 0px;
margin: 0px;
text-align: right;

}

#footerchargement {
color: #9c9c9c;
font: 0.7em "Trebuchet MS", helvetica, sans-serif ;
}


#footer {
padding-right: 10px; font: 0.8em "Trebuchet MS", helvetica, sans-serif ; color: #3C3C3C; }

.conteneur_bold {
	font-weight: bold;
	font: 0.9em "Trebuchet MS", helvetica;
	color: #FFFFFF;
	text-decoration: none;
}
/* Titre & sous-titres */


/* Tableaux, colonnes, rangées... */ 
#top {
font: 0.8em "Trebuchet MS", helvetica, sans-serif;
display: block;
vertical-align: top;
background: url('img/header.jpg');
width: 810px;
height: 175px;
}

.conteneur {
vertical-align: TOP;
text-align: center;
}

.conteneur_t {
display: block;
width: 700;
position: absolute;
left: 85px;
margin: -6px;
font: 1.2em "Trebuchet MS", helvetica, sans-serif;
color: #CC9500;
text-align: left;
}

.conteneur_t2 {
display: block;
width: 600px;
position: absolute;
left: 215px;
margin: -6px;
font: 1.2em "Trebuchet MS", helvetica, sans-serif;
color: #CC9500;
text-align: left;
}


.table_c {
margin-left: 0 auto;
margin-right: 0 auto;
margin: 0 auto;
padding: 0 auto;
right: 0 auto;
position: relative;
width: 700px;
font: 0.9em "Trebuchet MS", helvetica, sans-serif;
color: #F4EBDA;
text-align: justify;
}

.tables1 {
border :0;
border-collapse: collapse;
}

td {
padding: 0em;
}

#footertd {
display: block;
width: 810px;
height: 40px;
vertical-align: bottom;
text-align: right;
background: url('img/footer.jpg');
}

#spacer {
width: 810px;
height: 20px;
background: url('img/spacehead.jpg');
}

#conteneur_p1 {
padding-left: 5px ;
padding-right: 4px;
vertical-align: TOP;
text-align: center;
}

#conteneur_p2 {
width: 800px;
border: 0px;
background: url('img/bgc.jpg');
vertical-align: TOP;
text-align: left;
}

.justify { text-align: justify; padding-left: 0px; padding-top: 0px; padding: 0px; margin: 0px; padding-right: 0px; }

.conteneur_page {
width: 620px;
border: 0px;
display: block;
padding-left: 10px;
padding-right: 5px;
background: url('img/bgc.jpg');
vertical-align: TOP;
text-align: justify;
font: 1em "Trebuchet MS", helvetica, sans-serif; color: #ffffff;
}

.conteneur_left {
width: 146px;
padding-left: 8px;
vertical-align: TOP;
text-align: left;
font: 1em "Trebuchet MS", helvetica, sans-serif; color: #c0c0c0; 
}

.leftcorner { 
width: 146px; height: 22px; display:block; background: url('img/left_corner.jpg');
}

.sous_corner { 
width: 146px; height: 22px; display:block; background: #565448;
}


.txtlc {
width:140; display: block; position: absolute; top: 195px; left: 30px;
font: 0.9em "Trebuchet MS", helvetica, sans-serif; color: #000; font-weight: bold;
}

/* Tableaux, colonnes, rangées... */
  

/* Java*/
noJs{display: none;}
/* Java*/

/* Menu dynamique*/
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu dl {
width: 6.5em;
float: left;
margin: 0px;
}

#menu{/* placement du menu */
position: absolute;
top: 155px;
left: -5px;
z-index:100;
width: 100%; /* correction pour Opera */
height:0; /* bug IE */
} 

#menu dt { /* titres */
cursor: pointer;
margin: 1px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 0px;
margin: 0;
padding: 0;
}

#menu li {
 list-style-type: none;
 text-align: left;
}
#menu li a, #menu dt a { /* liens */
 color: #000;
 text-decoration: none;
 display: block;
 height: 100%;
 border: 0;
 font: 1em "Trebuchet MS", helvetica, sans-serif;
 font-weight: bold;
}
#menu li a:hover, #menu dt a:hover { /* liens survolés */
 background: #ECE2C8;
}

#menu dd {/* partie dynamique */
 width: 11em;
 border: 2px solid #F0E8DD;
 display:none;
 position: absolute;
 z-index: 100;
 background: #FFBA00 url('img/bgmenu.jpg');
}

#prelude {
	width: 120;
	position: absolute;
	top: 155px;
	right: 7px;
	padding: 0;
	margin: 0;
	color: #0099CC;
	text-align: center;
}

#prelude a:link, #prelude a:visited {
font-size: 1em;
font-weight: bold;
color: #DDD6CB;
text-decoration: none;
}

#prelude a:hover { color: #000000; text-decoration: none; }
/* Menu dynamique*/

Modifié par neraul (27 May 2007 - 23:03)

Salut,

neraul a écrit :
j'ai essayé de conceptionner la mise en page

Concevoir çà sera plus correct

Le problème vient du fait que ton site n'est pas extensible. Un petit tour dans la FAQ et les tutoriels
Modifié par Mikachu (27 May 2007 - 22:08)

merci, je vais regarder.

j'ai utilisé les attributs "pt" au lieu de "em" pour la taille du texte, elle n'est plus modifiable ainsi

Salut,

neraul a écrit :
j'ai utilisé les attributs "pt" au lieu de "em" pour la taille du texte, elle n'est plus modifiable ainsi

Hélas, hélas

C'est une très mauvaise idée, c'est exactement ce qu'il ne faut pas faire.

Ce n'est pas spécialement la taille des textes qui n'est pas modifiable. Ce qui n'est pas modifiable c'est la situation du visiteur, il est piégé dans ce que tu imposes.
Modifié par Christian Le Bouler (27 May 2007 - 23:35)