decalage bordure en css / difference IE et firefox

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  decalage bordure en css / difference IE et firefox

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: decalage bordure en css / difference IE et firefox (Lu 1815 fois)

decalage bordure en css / difference IE et firefox
« sur: le 21-12-2006 a 14:48:00 »

zopla
Membre récent

Hors-Ligne

Messages: 8

Bonjour,

J'aimerais faire un presentation en css qui se presenterai comme ceci avec des bordures identiques autour de chaque bloc:

1) Une premier bloc (div class "entete") tout en haut où j'y mettrai le titre du site. Il serait compris entre 2 espacement de 3% à droite et à gauche. Il prendrait toute la largeur restante et 15% en hauteur.

2) Un deuxieme bloc (div class "menu horizontal") en dessous de 10% en hauteur mais pour le reste identique au premier.

3) Un troisieme bloc (div class "menu vertical") situe en dessous, qui formerait un menu en vertical de largeur 12%. J'ai utilise la fonction float (left) pour le mettre sur la meme ligne que le bloc suivant:

4) Un quatrieme bloc (div class "contenu") situe à cote du precedent qui prendrai le reste de place (en soustrayant l'espacement de 3% par rapport au cote droit de la page). j'ai egalement utilise un float (left)

D'apres mon code ci dessous, j'ai un probleme avec les bordures car l'une d'elle depasse sur le cote droit de la page. Le seul moyen que j'ai trouve pour que ca ne depasse pas, c'est de reduire la taille de la bordure gauche du bloc 3 ainsi que la taille de la bordure droite du bloc 4.

Avez vous une solution pour obtenir des bordures identiques pour chaque bloc sous firefox?
J'aimerais continuer à utiliser des pourcentages pour les tailles des blocs si possible, chose que je n'arrive pas à faire pour la largeur des bordures d'ailleurs pour lesquels j'ai utilise des pixels.

A noter que sous IE ca passe pour les bordures droite et gauche mais par contre il y a un soucis pour la hauteur du bloc 3 differente de celle du bloc 4 : pourquoi?

Le code html:

Citation:
<html>
<head>
<title> exemple</title>
<link href="csstest.css" rel="stylesheet" type="text/css">
</head>

<body>

<div class="entete">

<pre>zezklrlkzerjk

sjdklfsdklf</pre> 

</div>

<div class="menuhorizontal"> 
<a href="">menu1</a>
<a href="">menu2</a>
<a href="">menu3</a>
</div>

<div class="menuvertical"> 
<a href="">menu1</a><br>
<a href="">menu2</a><br>
<a href="">menu3</a><br>
<br>ajzeklazke<br>
</div>

<div class="contenu"> 

</div>
</body>
</html>

Le code css:

Citation:
.entete {
position: relative;
width: 92%;
height: 15%;
top: 5%;
right: %;
bottom: 0%;
left: 3%;
background-color:#CCFF66;
border-left: solid 2px blue;
border-bottom: solid 1px blue;
border-top: solid 2px blue;
border-right: solid 2px blue;
}

.menuhorizontal {
position:relative;
width:92%;
height:10%;
top: 0%;
right: %;
bottom: 0;
left: 3%;
background-color:#33CCCC;
border-left: solid 2px blue;
border-bottom: solid 1px blue;
border-top: solid 1px blue;
border-right: solid 2px blue;

}

.menuhorizontal a {
padding-left:20%;
}

.menuvertical {
position: relative;
float:left;
width: 12%;
height:100%;
top: 0%;
right: 0%;
bottom: 3%;
left: 3%;
border-left: solid 2px blue;
border-bottom: solid 2px blue;
border-top: solid 1px blue;
border-right: solid 1px blue;
}

.contenu {
position: relative;
float:left;
width: 83%;
height: 100%;
top: 0%;
right: 0%;
bottom: 3%;
left: 0%;
background-color:yellow;
border-left: solid 1px blue;
border-bottom: solid 2px blue;
border-top: solid 1px blue;
border-right: solid 2px blue;

}

Merci!

« Dernière Édition: le 21-12-2006 a 14:51:52 par zopla »

Rapporter au modérateur

Re:decalage bordure en css / difference IE et firefox
« Répondre #1 sur: le 27-12-2006 a 18:40:22 »

theonlydrayk
Invité

Salut,

Tu peut utiliser Webdeveloper sous Firefox pour debugger ton HTML/CSS https://addons.mozilla.org/firefox/60/.

Pour la largeur des bordures tu peut utiliser un %
CSS
Code:
border:1% solid #000;

Je te conseil de mettre tes margin et padding a zero pour trouver le probleme :
CSS
Code:
* {
margin:0;
padding:0;
}
La largeur d'un div comprend le contenu et/ou peu comprendre le padding, la border et le margin. Tout depend du browser. Je vais en general beaucoup plus loin que ca et je RESET toute les valeurs d'un CSS avant de commencer pour permettre un affichage uniforme sur tout les browser.
Quelque chose comme :
CSS
Code:
*{
border:0;
margin:0;
padding:0;
background-color:#fff;
color:#000;
text-align:center;
vertical-align:center;
font-size:18pt;
font-family:sans-serif;
font-weight:normal;
text-decoration:none;
list-style-type:none;
.....
}
Efface toute les valeurs predefini de Opera, Firefox, Safari, Internet Explorer, Konqueror, Mozilla, ....
Ca fait des pages identiques sur tout les browser. Apres jajuste le CSS pour les valeurs pas pris en compte par certain browser.

L'avantage d'un design CSS sans table est que tu peut uniquement changer le CSS sans toucher au HTML alors c'est tres important de bien nommer c'est class. Une class "rouge" est mal nommer parce que si tu change la couleur le nom de ta class n'est plus valide.

Tes class devrait etre nommer :
Title pour la class entete (parce que l'entente peu devenir a gauche ou a droite dans le futur)
menuhorizontal devrait etre MainMenu (menu principal)
menuvertical devrait etre SubMenu (menu secondaire)
contenu est bien nommer.
Le nom des class doit etre schematique et nom esthetique sinon aucun interet de faire du CSS.

Le CSS est tres long a faire et trouver tout les problemes sur tout les browser. Le web n'est pas tout a fait pret pour ca. Ca prend beaucoup de patience et d'essai-erreur.

Je tenvoit sur un bon site de template CSS avec du code valid de tres bon exemple si tu commence avec les pages html sans table. C'est en anglais mais pas dur a comprendre tu copie le HTML/CSS et tu peut faire des test.
http://intensivstation.ch/en/templates/

Rapporter au modérateur

Re:decalage bordure en css / difference IE et firefox
« Répondre #2 sur: le 04-01-2007 a 13:30:11 »

zopla
Membre récent

Hors-Ligne

Messages: 8

Merci pour tes conseils et le lien. Pour l'instant j'en suis au debut. Est ce que tu sais si les types de positions pour les blocs ont ete definis par rapport à une utilisation precise? Par exemple s'il faut mieux utiliser des positions relatives ou autre pour faire la structure principale (grosses parties) d'un site ou bien mieux vaut utiliser un autre type de positionnement?

« Dernière Édition: le 04-01-2007 a 13:47:02 par zopla »

Rapporter au modérateur

Re:decalage bordure en css / difference IE et firefox
« Répondre #3 sur: le 04-01-2007 a 17:14:21 »

theonlydrayk
Invité

Salut,

Les 2 methodes vont tres bien et sont parfaitement valide.

Pour les documents qui sont principalements du textes je prefere le normal flow defillement normal, par default d'une page web (position:static;,float:left|right;).
Pour les pages web qui sont principalements du tappe a l'oeil, remplis de graphiques je prefere fixer mes elements dans ma page, je comprend tres mal le besoin d'avoir une page qui comporte moins de textes que d'image, mais il semble avoir une demande pour ca. Voir position:absolute; ou position:relative; les 2 types ont le meme impact sur le flow d'une page web. Vue que ce type de page est baser sur le pixel et non sur le %, les pages sont tres dur a redimensioner ou mal afficher sur plusieurs type d'ecran (de 96DPI a 144DPI il ya une grande difference). On peut mal de toute facon les imprimers ou les voirs sur un ecran de cellulaire, pourquoi pas fixer tout ca.

Avant que des fanatiques d'un mode ou d'un autre s'engage dans une guerre : je l'ai dit les 2 types fonctionne tres bien, son valide et n'importe quel page peut etre tres bien fait avec les 2. Et meme melanger les 2 dans la meme pages, c'est un peut tordu mais jai deja eu a le faire et ca marche.

Je suis vraiment pas sur que ca t'aide a y voir plus clair. Je tenvoit sur cette page pour les differentes facon de changer le flow et le positionement d'une page web : http://www.w3.org/TR/WD-positioning-970131

Rapporter au modérateur

Re:decalage bordure en css / difference IE et firefox
« Répondre #4 sur: le 05-01-2007 a 16:42:32 »

zopla
Membre récent

Hors-Ligne

Messages: 8

Ou faut il mettre ce code? Comme ca tout seul ou mettre ces valeurs pour chaque bloc?

Merci.

Citation de: theonlydrayk le le 27-12-2006 a 18:40:22
Je vais en general beaucoup plus loin que ca et je RESET toute les valeurs d'un CSS avant de commencer pour permettre un affichage uniforme sur tout les browser.
Quelque chose comme :
CSS
Code:
*{
border:0;
margin:0;
padding:0;
background-color:#fff;
color:#000;
text-align:center;
vertical-align:center;
font-size:18pt;
font-family:sans-serif;
font-weight:normal;
text-decoration:none;
list-style-type:none;
.....
}
Efface toute les valeurs predefini de Opera, Firefox, Safari, Internet Explorer, Konqueror, Mozilla, ....
Ca fait des pages identiques sur tout les browser. Apres jajuste le CSS pour les valeurs pas pris en compte par certain browser.

Rapporter au modérateur

Re:decalage bordure en css / difference IE et firefox
« Répondre #5 sur: le 05-01-2007 a 19:24:33 »

theonlydrayk
Invité

Salut,

L'etoile (*) en css represente tout les elements, si tu le mets au debut de ton css tout les elements vont avoir ces valeurs. Ca permet de ne pas avoir a specifier 25 valeurs differentes par definition et d'avoir une page uniforme.

Pour s'assurer que 2 div sont identiques sur plusieurs browser il faut specifier toute les valeurs css :

Code:
div#something{
border:0;
margin:0;
padding:0;
background-color:#fff;
color:#000;
text-align:center;
vertical-align:center;
font-size:18pt;
font-family:sans-serif;
font-weight:normal;
text-decoration:none;
list-style-type:none;
.....
}

En specifiant toutes les valeurs qui existe on evite les problemes des valeurs 'par default' qui existe entre les browsers. Pour eviter davoir a faire un gros fichiers CSS et de les marquers a chaque fois je les inclus 1 fois dans le haut du CSS avec un (*) et il sont apliquers a tout les tag <h1>, <h2>, ... <ul>, <li>, <a>, <div>, <strong>, ....

Ensuite il me sufit de changer quelque valeurs pour chaque tag.

Rapporter au modérateur

Re:decalage bordure en css / difference IE et firefox
« Répondre #6 sur: le 11-01-2007 a 13:00:14 »

bjtoy
Membre récent

Hors-Ligne

Messages: 1

Je suis un lama!

Bonjour
Mon site est fait avec frontpage et j'utilise les couches pour la mise en page
De chez moi, avec explorer, c'est bien et d'ailleurs, il y a des décalages
Pouvez vous m'aider s'il vous plait
www.serie4.com
Cordialement
Frantz alias BJ TOY

Rapporter au modérateur