Sujet Précédent Sujet Suivant

Bloc css et resolution d'ecran

Résolu/Fermé
foyout - 13 août 2007 à 20:51
Cbast7 Messages postés 112 Date d'inscription jeudi 31 janvier 2008 Statut Membre Dernière intervention 15 juin 2011 - 8 juil. 2009 à 13:22
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 Date d'inscription jeudi 25 janvier 2007 Statut Membre Dernière intervention 8 novembre 2008 2
22 août 2007 à 22:46
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 Date d'inscription mercredi 8 août 2007 Statut Membre Dernière intervention 7 septembre 2007
13 août 2007 à 21:50 
<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
4 juin 2009 à 18:21
Parfait !!
1
Réponse 4 / 6
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
13 août 2007 à 21:41
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 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
14 août 2007 à 00:41
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 112 Date d'inscription jeudi 31 janvier 2008 Statut Membre Dernière intervention 15 juin 2011 21
8 juil. 2009 à 13:22
je viens de l'enlevez et mon bloc est parti à droite, toujours pas centrer en 1024
0