High-Tech Santé Médecine Droit-Finances

Auto-Entrepreneur

Comment faire ?

Rechercher : dans
Par :

Bloc css et resolution d'ecran

Dernière réponse le 8 jui 2009 à 13:22:25 foyout, le 13 aoû 2007 à 20:51:49 
 Signaler ce message aux modérateurs

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

Configuration: Windows XP
Firefox 2.0.0.6

Meilleures réponses pour « bloc css et resolution d'ecran » dans :
[Webmaster] Adapter un site à toutes les résolutions, le centrer VoirUne question récurrente sur ce forum est "Comment adapter mon site à la résolution du visiteur ? Quelle résolution choisir ?" Pas besoin de se compliquer la vie pour ça ! Comment faire Il suffit d'appliquer une largeur relative (=qui change selon...
IPhone - L'écran tactile ne répond plus VoirProblème J'ai un iPhone neuf mais l'écran tactile reste bloqué, impossible de faire quoi que ce soit y compris de répondre à un appel. Comment le débloquer ? Solution Rester appuyé sur le bouton Home + le bouton verrouiller pendant 10 ou 15...
Posez votre question Répondre

1

Dalida, le 13 aoû 2007 à 21:41:00

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).
[ Mathieu ] 

Il y a surement des pandas pour ne dépendre de rien

   
Répondre à Dalida

2

nherment, le 13 aoû 2007 à 21:50:43

<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".
Is hell endothermic or exothermic ?

   
Répondre à nherment

3

Gihef, le 14 aoû 2007 à 00:41:47

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>
 

   
Répondre à Gihef

4

foyout, le 22 aoû 2007 à 22:46:14
  • +1

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

   
Répondre à foyout

5

adminrateur, le 4 jun 2009 à 18:21:52

Parfait !!

   
Répondre à adminrateur

6

 Cbast7, le 8 jui 2009 à 13:22:25

Je viens de l'enlevez et mon bloc est parti à droite, toujours pas centrer en 1024

   
Répondre à Cbast7
Posez votre question Répondre
Ils ont besoin de votre aide