Bloc css et resolution d'ecran

Résolu
foyout -  
Cbast7 Messages postés 118 Statut Membre -
bonjour,

je solicite à nouveau votre aide pour un souci de bloc css et de resolution d'ecran sur Firefox (il n'y a pas le probleme sur IE)
Voila ma page: http://fandevincentclerc.free.fr/page.htm
Sur mon ordi en resolution 1280X800 je n'ai pas de probleme, mais en 1024 par 768, le bloc central se repete à gauche, apres la colone rouge. Ce n'est pas tres grave, mais si y'avais un moyen d'eviter la repetition ca serait pas plus mal.
merci d'avance

++

Foyout
A voir également:

6 réponses

Réponse 1 / 6
foyout Messages postés 25 Statut Membre 2
 
bonjour,

desolé de repondre si tard mais j'ai eu pas mal de boulot et j'ai pas pu me pencher beaucoup sur le site.
Alors, j'ai utilisé la technique de mettre un conteneur et ca marche, merci beaucoup.
Pour les autres remarques, j'ai fait les modif, merci pour votre aides

Bye

Foyout
2
Réponse 2 / 6
nherment Messages postés 94 Statut Membre
  
<html><!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd"> 
<head>

<!--[if lt IE 7]>
<style type="text/css">
div {
width: 770px;
width:expression(document.body.clientWidth <= 600? "600px": "auto" );
}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css">
div {
width:expression(document.body.clientWidth >= 1000? "1000px": "auto" );
}
</style>
<![endif]-->
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/hqtml; charset=iso-8859-1">
</head>

<style type="text/css">

#colonne1 {
	margin-top: 160px;
    float: left;
	width: 15%;
	height: 100%;
	background: #FF0000;
}

#colonne2 {
	margin-top: 160px;
	float: right;
	width: 15%;
	height: 100%;
	background: #FF0000;
}
	
#haut {
	margin-top: 0;
	height: 80px;
	background: #000000;
}

#centre {
	margin-top: 80px;
	background: #000000;
	height: 100%;
	width: 100%;
	margin-left: 15%;
	margin-right: 15%;
	max-width: 1000px;
	min-width: 700px;
}

a.vertical {
	color: white;
	background-color: #000000;
	text-decoration: none;
	font-weight: bold;
	text-align: center;
	padding: 4px;
	border: 1px outset #c0c0c0;
    display: block;
    width: 100px;
}

a.vertical:hover {
    background-color: #999999;
    background-image: url(aqua.jpg);
    border: 1px inset #c0c0c0;
}

</style>
</head>
<body bgcolor="#FF0000">
<div id="colonne1">...</div>
  <dl></dl>

<div id="colonne2">...</div>
<div id="haut">...</div>
<div id="centre">...</div>
</body></html>


Deux fois tu fermes la balise "head".
1
Réponse 3 / 6
adminrateur
 
Parfait !!
1
Réponse 4 / 6
Dalida Messages postés 7114 Statut Contributeur 923
 
salut,

en premier un conseil : développe sous FF (le plus respectueux des standards, Opera est encore meilleur) et teste ensuite sous IE sinon tu ne t'en sortiras pas.

à la lecture de ton code je me fais les réflexions suivantes :

• [html] : il faut placer les éléments dans l'ordre (header, colonne gauche, contenu, colonne droite) ;

• [css] : n'utilise pas de règle embarqué ;

• [css] : pour faire des colonnes faisant toute la hauteur il faut utiliser la technique des fausses colonnes, le {height: 100%;} peut être trompeur car il s'agit de 100% de la largeur et la hauteur peut le dépasser ;

• [css] : pour les colonnes il vaudrait mieux utiliser une valeur fixe (obligatoire pour une fausse colonne).
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
Gihef Messages postés 5165 Statut Contributeur 2 779
 
Bonjour à vous,

Et puis ta page souffre d'autres problèmes :

— <html> doit se placer après le DOCTYPE
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd"> 
<html>

— Le Content-Type est plutôt en html
<meta http-equiv="Content-Type" content="text/h q tml; charset=iso-8859-1">

— Et les dimensions !
#colonne1  15%
#colonne2  15%
#centre   100% + 15% + 15% de marges
soit      160%
Pas plus de 100% (-;


— Pour tes tests utilise des couleurs différentes dans chaque élément.



Un exemple à tester :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<!--[if lt IE 7]>
<style type="text/css">
div {
width: 770px;
width:expression(document.body.clientWidth <= 600? "600px": "auto" );
  }
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css">
div {
width:expression(document.body.clientWidth >= 1000? "1000px": "auto" );
  }
</style>
<![endif]-->
  <title>Proposition pour bloc css et resolution d'ecran</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

  <style type="text/css">
  html, body {
    background-color : #b22222;
    height: 100%;
    text-align : center;
    }
  #haut {
    margin-top: 0;
    height: 80px;
    background-color: #000;
    }
  
  #contenu {
    position : relative;
    margin : 0 auto;
    height: 100%;
    max-width: 1000px;
    min-width: 700px;
    border : 1px solid #ffd700;
    }
  
  #gauche {
    float: left;
    margin-top: 160px;
    width: 15%;
    height: 100%;
    background-color: #20b2aa;
    }
  
  #centre {
    float: left;
    margin-top: 80px;
    height: 100%;
    width: 60%;
    margin-left: 5%;
    margin-right: 5%;
    /*max-width: 1000px;
    min-width: 700px;*/
    background-color: #cd853f;
    }
  
  #droite {
    float: right;
    margin-top: 160px;
    width: 15%;
    height: 100%;
    background-color: #b0c4de;
    }
    
  #bas {
    clear : both;
    background-color: #fff;
    /*visibility : hidden;
    display : none;*/
    }

  </style>
</head>
<body>
  <div id="haut">...</div>
  <div id="contenu">
    <div id="gauche">...</div>
    <div id="centre">...</div>
    <div id="droite">...</div>
  </div>
  <div id=bas>...</div>
</body>
</html>
0
Réponse 6 / 6
Cbast7 Messages postés 118 Statut Membre 21
 
je viens de l'enlevez et mon bloc est parti à droite, toujours pas centrer en 1024
0