[TopBar] compatible avec plusieurs resolutions

**sletis** · 19/03/2009, 13h56

Salut, j aurais vraiment besoin d'aide je suis resté toute la soirée sur le problème en espérant qu'au réveil la solution serait venu d'elle même!
... BEN... rien!!!

voila ma page ( c est un topbar ) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <style type="text/css">
  #header {
  /*background-color: orange;*/
 
    /* border-bottom: 4px solid #D7D4CB; */
}
#topmid2{width:142px;height:58px;margin-left:0;margin-right:60px;display:block;float:left;background-color:blue;}
#topmid4{width:670px; height:58px;margin-left:auto;margin-right:auto;display:block;background-color:green;}
#topmid6{width:163px;height:58px;display:block;float:right;margin-left:0px;background-color:red;}
#container{}  
#header-inside {
  width: 1024px;
  margin: 0 auto;
}
 
</style>
  </head>
  <body>
  <div id="container">
<div id="test">
  <div id="topmid2"></div>
</div>
<div id="header">
 <div id="topmid6"></div>
<div id="header-inside">
 
<div id="topmid4"></div>
 
</div>
 
</div>
</div>
  </body>
</html>

donc ouvrez la page et redimensionnez manuellement votre fenetre!

je voudrais que la barre rouge s'arrete lorsque la résolution passe à 1024, je veux qu'elle fasse pareil que la barre verte.

Bon en gros une fois le scrollbar horizontal lancé je voudrais que ma top barre ne puisse plus bouger! là le problème est que la barre rouge passe au dessus de la barre verte

SIOUPLè De l'aaaaaaaaaaiide

**sletis** · 19/03/2009, 14h16

up!

bon j ai un élément de reponse c est surement du à ma barre rouge qui possède un attribut float: right c est clair qu'avec ca elle suit la partie droite de la fenetre puisque je l'ai positionné la!

en faite je voulais qu'elle suive la fenetre jusqu'à la résolution 1024 en suite qu'elle perde peut etre cet attribut!

l'attribut clear : right permettrait peut etre d annuler le flottement mais le soucis est que je vois pas ou l'appliquer!

Edit: si cela peut aider à m'aider :
[link]
http://books.google.gp/books?id=YNHl...um=1&ct=result [/link]

**Erwan31** · 19/03/2009, 14h16

Bonjour,
commence par déclarer un doctype complet (avec URI) qui ne fait pas basculer les navigateurs graphiques en mode de rendu Quirks (non standard).
A priori, au vu de ton code (sans attribut de présentation), un DTD srict HTML4 serait plus adapté:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Désolé pas trop le temps de me pencher sur ton problème

**sletis** · 19/03/2009, 14h23

Envoyé par Erwan31

Bonjour,
commence par déclarer un doctype complet (avec URI) qui ne fait pas basculer les navigateurs graphiques en mode de rendu Quirks (non standard).
A priori, au vu de ton code (sans attribut de présentation), un DTD srict HTML4 serait plus adapté:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Désolé pas trop le temps de me pencher sur ton problème

merci pour le doctype moi je gardais celui par défaut généré par pspad m'enfin

aurais-tu quand meme un élément de réponse pas la peine de t'y pencher je me documenterais si nécessaire

**Ethyde** · 19/03/2009, 15h04

Bonjour,

en fait c'est la conjonction de 2 choses qui font l'effet que tu as :

- tes div #topmid6 et #topmid4 sont dans le même conteneur #header
- #topmide6 est en float.

Ceci dit la mention display:block dans chaque de tes div ne sert à rien , une div est par définition un élément de type block.

A mon sens, il serais plus esthétique, et logique, que lors d'un redimensionnement en 1024 tes deux block latéraux se déplace, ou alors de prévoir que le site reste sur une largeur par défaut de 1024px.

**sletis** · 19/03/2009, 15h14

Envoyé par Ethyde

Bonjour,

en fait c'est la conjonction de 2 choses qui font l'effet que tu as :

- tes div #topmid6 et #topmid4 sont dans le même conteneur #header
- #topmide6 est en float.

Ceci dit la mention display:block dans chaque de tes div ne sert à rien , une div est par définition un élément de type block.

A mon sens, il serais plus esthétique, et logique, que lors d'un redimensionnement en 1024 tes deux block latéraux se déplace, ou alors de prévoir que le site reste sur une largeur par défaut de 1024px.

oui je sais qu'il y a quelques erreurs dans le code! :s

considérons ta solution des deux blocs latéraux qui se déplacent puis-je stopper leurs déplacements à la résolution 1024 lorsque la scrollbar apparait?

**Ethyde** · 19/03/2009, 16h14

Envoyé par sletis

oui je sais qu'il y a quelques erreurs dans le code! :s

considérons ta solution des deux blocs latéraux qui se déplacent puis-je stopper leurs déplacements à la résolution 1024 lorsque la scrollbar apparait?

Hum je dirait que c'est possible en contraignant toute les dimension avec des mention min-width, mais cela vas rendre ton site relativement rigide ce qui n'est pas vraiment une bonne idée.

N.B. : Ceci dit, par exemple, tu ne peu pas détecter l'apparition d'un ascenseur sur le coté cela dépend du poste client, de sa config etc. De même un écran configurer en résolution 1024*768 peut très bien avoir des plugin divers qui réduise la zone d'affichage. Enfin bon la je m'égare :p

**sletis** · 19/03/2009, 18h32

Envoyé par Ethyde

Hum je dirait que c'est possible en contraignant toute les dimension avec des mention min-width, mais cela vas rendre ton site relativement rigide ce qui n'est pas vraiment une bonne idée.

N.B. : Ceci dit, par exemple, tu ne peu pas détecter l'apparition d'un ascenseur sur le coté cela dépend du poste client, de sa config etc. De même un écran configurer en résolution 1024*768 peut très bien avoir des plugin divers qui réduise la zone d'affichage. Enfin bon la je m'égare :p

ah je connaissais pas min-width le probleme est que ie 6 n est pas compatible et à part firefox aucun autre naviguateur y est compatible!

la je me suis lancé dans un de ses bricolages!! lol

[TopBar] compatible avec plusieurs resolutions

CSS

Discussions similaires

Partager

Partager