Adapter son site pour toute les resolutions
Nathanael74
-
imane2011 Messages postés 1 Date d'inscription Statut Membre Dernière intervention -
imane2011 Messages postés 1 Date d'inscription Statut Membre Dernière intervention -
Bonsoir, je voudrais savoir comment en css je peux adapter mon site a toute les resolutions, car j'adapte mon site a la resolution de MON ordi mais quand je vais sur les autres ordi c'est completement bizarre!
Merci d'avance, nathanael
Merci d'avance, nathanael
A voir également:
- Adapter son site pour toute les resolutions
- Site de telechargement - Accueil - Outils
- Site comme coco - Accueil - Réseaux sociaux
- Site pour vendre des objets d'occasion - Guide
- Site pour partager des photos - Guide
- Quel site remplace coco - Accueil - Réseaux sociaux
11 réponses
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';
}
.....
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 :$ !!!
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
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 ?
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
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