Mise en page de site Web
Fermé
Technibureau
Messages postés
106
Date d'inscription
jeudi 6 septembre 2007
Statut
Membre
Dernière intervention
5 août 2009
-
4 sept. 2008 à 09:48
Technibureau Messages postés 106 Date d'inscription jeudi 6 septembre 2007 Statut Membre Dernière intervention 5 août 2009 - 4 sept. 2008 à 10:07
Technibureau Messages postés 106 Date d'inscription jeudi 6 septembre 2007 Statut Membre Dernière intervention 5 août 2009 - 4 sept. 2008 à 10:07
A voir également:
- Mise en page de site Web
- Supprimer une page word - Guide
- Traduire une page web - Guide
- Site de telechargement - Guide
- Site de vente en ligne particulier - Guide
- Mise en forme conditionnelle excel - Guide
2 réponses
vignemail1
Messages postés
1246
Date d'inscription
vendredi 8 octobre 2004
Statut
Contributeur
Dernière intervention
13 septembre 2019
259
4 sept. 2008 à 09:57
4 sept. 2008 à 09:57
Le problème concernant la compatibilité, c'est le respect des standards web que réalisent certains navigateurs et pas d'autres. Si tu prends Firefox, IE7, Opera 9 et le dernier Safari, tu as un support très correct des standards. Par contre IE6 et antérieur ont un mauvais support des standards. Tu ne peux pas avoir une compatibilité complète, tu ne peux que choisir les navigateurs sur lesquel ton site devrait marcher. Tu peux essayer de trouver des statistiques de l'utilisation des navigateurs sur des sites qui ont pignon sur rue comme google. Sur www.w3schools.com, tu peux trouver ce genre de statistiques. Tu pourras ainsi voir qu'environ 25% utilise IE6, 25% IE7, 25% Firefox et le reste répartit sur les autres navigateurs comme Opera et Safari. Tu peux aussi trouver ce qu'on appelle des hack CSS pour IE qui te permettront de donner des attributs CSS spécifique selon le navigateur ce qui augmentera la compatibilité.
Technibureau
Messages postés
106
Date d'inscription
jeudi 6 septembre 2007
Statut
Membre
Dernière intervention
5 août 2009
8
4 sept. 2008 à 10:07
4 sept. 2008 à 10:07
Je vous joins mon CSS :
Et un sreenshot, on remarque sous IE que en rétrécissant le navigateur le site rétrécie lui bizarrement.
_______________________________________________________________________________________
_______________________________________________________________________________________
Merci,
cdt
<a href="https://imageshack.com/"><img src="http://img214.imageshack.us/img214/9226/screenshotwg5.png" border="0" alt="Image Hosted by ImageShack.us"/></a><br/><a href="http://g.imageshack.us/img214/screenshotwg5.png/1/"><img src="http://img214.imageshack.us/img214/screenshotwg5.png/1/w640.png" border="0"></a>
Et un sreenshot, on remarque sous IE que en rétrécissant le navigateur le site rétrécie lui bizarrement.
_______________________________________________________________________________________
html{
background:url('../images/bg.jpg') repeat-y;
background-position: center;
background-color:#D1C3A9;
page: auto;
height: auto;
max-height: 100%;
max-width: 100%;
min-height: 100%;
min-width: 100%;
left: 0%;
right: auto;
top: 0%;
position: fixed;
}
body {
color:#000000;
font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size:70%;
position:absolute;
width: 100%;
height: 100%;
min-height: 100%;
left: 0%;
/*border: 1px solid #000f2a;*/
max-height: 100%;
max-width: 100%;
min-width: 100.%;
right: auto;
top: 0%;
}
div#conteneur {
width: 72%;
height: 100%;
left: 14%;
max-height: 100%;
max-width: 70%;
min-height: 100%;
min-width: 70%;
right: auto;
top: 0%;
border: 1px solid #000f2a;
position: relative;
visibility: visible;
}
div#header {
background:url('../images/header.jpg') no-repeat;
width:100%;
height:392px;
}
div#date {
position:absolute;
margin-top:270px;
margin-left:490px;
}
div#menu{
width:27%;
height:auto;
float:left;
}
div#contenu{
padding-left:2%;
padding-right:2%;
}
div#menuforme {
background:url('../images/m_footer.jpg') no-repeat bottom #FFFFFF;
width:100%;
height:auto;
padding-bottom:10%;
margin-bottom:10%;
}
div#menuforme h2 {
width:100%;
height:auto;
background:url('../images/h2_m.jpg') no-repeat;
text-align:center;
padding-top:10px;
}
div#menuforme ul {
padding-left:4px;
padding-top:10px;
height:auto;
width:100%;
border-left:2px solid #D2CDC4;
border-right:2px solid #D2CDC4;
}
div#menuformecentre {
border-left:1px solid #D2CDC4;
border-right:1px solid #D2CDC4;
}
div#menuforme li {
height:15px;
margin-bottom:3px;
padding-left:18px;
background:url('../images/li.jpg') no-repeat;
}
div#menuforme lu {
height:15px;
margin-bottom:3px;
padding-left:18px;
background:url('../images/lu.jpg') no-repeat;
}
img { display:block; margin:0; padding:0; }
ul , li { margin:0; padding:0; list-style-type:none; }
a { color:#333333; text-decoration:none; font-weight:bold; }
a:hover { color:#D1C3A9; font-weight:bold; }
a img { border:0; }
h1 { text-align:left; margin:0; padding:0; font-size:150%; }
h2 { margin:0; padding:0; font-size:100%; }
h3 { margin:0; padding:0; font-size:120%; }
h4{ height:15px; font-size:12px; font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif; margin:0px; padding-left:18px; background:url('../images/li.jpg') no-repeat; }
p { margin:0; padding:5px; }
div.clear { clear:both; }
div#centre {
width:514px;
height:auto;
float:right;
}
div#centreheader {
width:514px;
height:19px;
background:url('../images/h2_t.jpg') no-repeat;
text-align:center;
padding-top:3px;
}
div#centrecentre {
width:513px;
height:auto;
background-color:#ffffff;
text-align:justify;
}
div#centrefooter {
background:url('../images/t_footer.jpg') no-repeat bottom #FFFFFF;
width:514px;
height:51px;
}
div#footer {
width:100%;
height:190px;
background:url('../images/footer.jpg') no-repeat;
clear:both;
}
div#footer p {
text-align:center;
}
div#admin {
position:absolute;
margin-top:-146px;
margin-left:43px;
}
div#lien {
position:absolute;
margin-top:500px;
margin-left:43px;
}
div#photo {
position:absolute;
margin-top:-150px;
margin-left:180px;
}
div#visiteur {
position:absolute;
margin-top:240px;
margin-left:135px;
}
div#contact {
position:absolute;
margin-top:80px;
margin-left:330px;
}
div#news {
text-align:center;
margin:auto;
}
div#image{
position:absolute;
width:257px;
height:280px;
margin-top:-200px;
margin-left:200px;
background:url('../images/UCE.jpg');
}
_______________________________________________________________________________________
Merci,
cdt
