Adapter son site pour toute les resolutions
Fermé
Nathanael74
-
3 avril 2009 à 21:06
imane2011 Messages postés 1 Date d'inscription vendredi 14 janvier 2011 Statut Membre Dernière intervention 14 janvier 2011 - 14 janv. 2011 à 17:53
imane2011 Messages postés 1 Date d'inscription vendredi 14 janvier 2011 Statut Membre Dernière intervention 14 janvier 2011 - 14 janv. 2011 à 17:53
A voir également:
- Adapter son site pour toute les resolutions
- Site de telechargement - Guide
- Site pour vendre des objets d'occasion - Guide
- Site inaccessible - Guide
- Site partage photo - Guide
- Darkino site - Guide
11 réponses
Nicke
Messages postés
83
Date d'inscription
samedi 15 novembre 2008
Statut
Membre
Dernière intervention
7 novembre 2009
13
3 avril 2009 à 21:13
3 avril 2009 à 21:13
Il faut utiliser du javascript
avec fonction screen.height qui retourne la hauteur et screen width qui retourne la laregeur de la page aprés plus qu'a faire une redirections vers des pages créés pour tels ou tels configurations avec des ifs
ex:
<script language="javascript">
largeur = screen.width;
hauteur = screen.height;
if (largeur<1024)
{
page = 'page spéciale.html';
}
.....
avec fonction screen.height qui retourne la hauteur et screen width qui retourne la laregeur de la page aprés plus qu'a faire une redirections vers des pages créés pour tels ou tels configurations avec des ifs
ex:
<script language="javascript">
largeur = screen.width;
hauteur = screen.height;
if (largeur<1024)
{
page = 'page spéciale.html';
}
.....
arthezius
Messages postés
3538
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
475
3 avril 2009 à 21:17
3 avril 2009 à 21:17
Sinon tu peux gérer ça proprement en CSS.
Un simple positionnement centré par exemple peux parfois suffire.
Un simple positionnement centré par exemple peux parfois suffire.
merci pour vos reponses les gars, mais je voudrais savoir alors comment on centre parce que le javascript :$ !!!
arthezius
Messages postés
3538
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
475
3 avril 2009 à 21:29
3 avril 2009 à 21:29
En CSS:
ou
Ce dernier semble ne pas fonctionner avec IE.
Sinon le margin que j'ai mis fonctionne de cette manière:
div#container{width:900px;position:relative;top:10px;left:50%;margin-left:-450px;}
ou
div#container{width:900px;margin:10px auto 0px auto;}
Ce dernier semble ne pas fonctionner avec IE.
Sinon le margin que j'ai mis fonctionne de cette manière:
margin: haut droite bas gauche;
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Merci, j'ai essayé ton truc arthezius le probleme c'est que maintenant c'est sur mon ordi que c'est bizzare
arthezius
Messages postés
3538
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
475
3 avril 2009 à 21:38
3 avril 2009 à 21:38
Ben les valeurs sont à adapter à ton site. C'est un simple exemple. (je dit ça au cas ou).
Tu as une version en ligne de ton site ?
Tu as une version en ligne de ton site ?
arthezius
Messages postés
3538
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
475
3 avril 2009 à 21:52
3 avril 2009 à 21:52
Tu pourrai te simplifier la vie en mettant tout dans un div container. Ainsi tu lui attribue la largeur de ton site et c'est lui que tu placera dans la page. Tout le reste se placera dedans et tu aura moi de problème.
Ensuite ne place pas ton contenu à un valeur précise d'un côté comme tu le fait avec ton 17% à gauche. Suivant les écran les proportions ne seront pas les même. Place ça comme je t'ai indiqué dans mon précédent message en mettant ça sur un <div id="container">.
Ensuite ne place pas ton contenu à un valeur précise d'un côté comme tu le fait avec ton 17% à gauche. Suivant les écran les proportions ne seront pas les même. Place ça comme je t'ai indiqué dans mon précédent message en mettant ça sur un <div id="container">.
voila mon css:
et voila mon html
:
peut etre que ça vous aidera a m'aider
body{
background:url(img/back.jpg) no-repeat #8c8c8c;
margin:0;
padding:0;
}
div#container{
width:;
}
#menu{
margin-top:4%;
margin-left:17%;
background:url(img/menu.png) no-repeat;
width:1000px;
height:100px;
}
#menu:hover{
background:url(img/menu-hover.png) no-repeat;
}
#logo{
position:absolute;
margin-top:-46px;
margin-left:17%;
background:url(img/logo.png) no-repeat;
width:200px;
height:150px;
}
#slogan{
position:absolute;
background:url(img/slogan.png) no-repeat;
width:700px;
height:80px;
margin-top:-105px;
margin-left:39%;
}
#menu1{
margin-top:-48px;
margin-left:440px;
position:absolute;
color:black;
text-align:center;
font-size:25px;
background:url(img/menu1.png) no-repeat;
width:800px;
height:40px;
}
#menu1:hover{
background:url(img/menu1-hover.png) no-repeat;
}
.lien_menu a{
text-decoration:underline overline;
color:black;
}
.lien_menu a:hover{
text-decoration:underline overline;
color:red;
}
.lien_menu a:visited{
text-decoration:underline overline;
color:brown;
}
#fond_site{
background:url(img/fond-site.png) no-repeat;
width:1000px;
height:650px;
position:absolute;
margin-top:0px;
margin-left:17%;
}
.h21{
position:absolute;
padding-left:48%;
color:white;
text-align:justify;
width:50%;
}
.text1{
color:white;
position:absolute;
text-align:justify;
width:50%;
font-size:17px;
padding-left:48%;
padding-top:10%;
}
.text2{
color:white;
position:absolute;
text-align:justify;
width:90%;
font-size:17px;
padding-left:2%;
padding-top:34%;
}
.signature{
color:white;
position:absolute;
text-align:justify;
width:90%;
font-size:20px;
padding-left:81%;
padding-top:50%;
}
.flash{
position:absolute;
margin-top:2%;
margin-left:18%;
}
#infos{
background:url(img/infos.png) no-repeat;
position:absolute;
margin-top:32%;
margin-left:35%;
width:368px;
height:73px;
}
.infos_marquee{
color:white;
font-size:20px;
text-align:center;
padding-top:30px;
}
#infos:hover{
background:url(img/infos-hover.png) no-repeat;
}
#fond_site:hover{
background:url(img/fond_site_hover.png) no-repeat;
}
#foot{
background:url(img/pied.png) no-repeat;
width:1000px;
height:87px;
position:absolute;
margin-top:650px;
margin-left:17%;
color:white;
font-size:20px;
text-align:center;
}
#foot:hover{
background:url(img/pied-hover.png) no-repeat;
color:grey;
}
et voila mon html
:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> .::Le caïon::. </title> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="container"> <div id="backgroundImage"></div> <div id="logo"></div> <div id="menu"></div> <div id="slogan"></div> <div id="menu1"><div class="lien_menu"><a href="xx.htm">Accueil</a> | <a href="xx.htm">Photos</a> | <a href="xx.htm">Videos</a> | <a href="xx.htm">Contacts</a></div></div> <div id="fond_site"><div class="h21"><h1><u>Bienvenue sur le site du caïon !</u></h1></div><div class="text1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia malesuada urna. Nullam porttitor mi ac enim faucibus mollis. Duis nec purus eget eros eleifend auctor. Phasellus elementum lacus eu velit. Curabitur lobortis. Phasellus eget sem id urna scelerisque bibendum. Donec aliquet consequat urna. Proin commodo posuere turpis. Vivamus eget ante. Pellentesque sed sem. Vivamus quam orci, dapibus eget, mattis a, ultrices vitae, ante. Duis lacinia eros sit amet augue mollis eleifend. Nullam sodales nisl vel erat. Duis eu ante. Etiam tincidunt. Morbi neque. Duis justo. Aenean est ante, tincidunt eu, commodo vel, commodo quis, magna. Nam rutrum ultricies leo. </div><div class="text2">Vivamus euismod nunc sed mi. Fusce auctor ante dignissim ipsum. Ut imperdiet elit. Nam arcu nulla, viverra sit amet, consequat non, ullamcorper vel, nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Curabitur pretium, justo nec imperdiet egestas, quam ligula scelerisque orci, vitae consectetur ipsum dolor sit amet leo. Cras aliquam diam in eros. Donec ornare egestas augue. Aenean ligula sapien, facilisis eget, tincidunt ut, interdum ut, dolor. Ut tempor, metus in sodales fermentum, ante diam mattis sapien, a rutrum tellus mauris quis leo. Aliquam sed mauris adipiscing nunc dignissim lacinia. Integer id sem at dolor tempor condimentum. Phasellus rhoncus erat a erat. Fusce massa metus, vehicula sit amet, pulvinar in, rhoncus eget, lacus. Proin eleifend, eros quis feugiat semper, elit ligula viverra quam, eu molestie lacus nisi eu magna. </div><div class="signature">Nathanael, bon surf!</div></div> <div class="flash"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload2.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="400" height="280" id="dewplayer" align="middle"><param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="dewslider.swf?xml=flash-xml.xml&transition=fade&speed=20&timer=4" /><param name="quality" value="high" /><embed src="dewslider.swf?xml=flash-xml.xml&transition=fade&speed=20&timer=4" quality="high" width="400" height="280" name="dewplayer" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="https://get.adobe.com/flashplayer/"></embed></object></div> </div><br><br><div id="infos"><div class="infos_marquee"><MARQUEE WIDTH="366px"> Pour l'instant il n'y a pas d'infos ||| Ne manquez pas les dîners de galas ........ </MARQUEE> </div></div><div id="foot"><br>©Copyright Le caïon 2009 | Site créé par Nathanaël </div> </div> </body>
peut etre que ça vous aidera a m'aider
imane2011
Messages postés
1
Date d'inscription
vendredi 14 janvier 2011
Statut
Membre
Dernière intervention
14 janvier 2011
14 janv. 2011 à 17:53
14 janv. 2011 à 17:53
https://support.google.com/analytics/answer/1008080?hl=fr&visit_id=637166394999914514-726264580&rd=1
pour la balise container essay ca :
div#container{ margin: 0 auto 0 auto }
c'est pour posisionner le container de votre site au milieu de la page .
test d'abord avec Firefox
et merci de nous répondre si ca marche ou non
pour la balise container essay ca :
div#container{ margin: 0 auto 0 auto }
c'est pour posisionner le container de votre site au milieu de la page .
test d'abord avec Firefox
et merci de nous répondre si ca marche ou non
