Titre: probleme de résolution decran
Posté par: tyson78 le le 05-06-2008 a 00:22:04
Bonjour, voila j'ai créer un site internet tout se passer bien jusqu'au moment ou je l'ai
envoyé à un amis qui n'a pas la même résolution que moi et la catastrophe tout été
décalé ou découper. j'ai été voir dans
google ce qui été conseillé, tous m'on dit de mettre dans le fichiers css " body
{width: 100%;}". Même avec sa j'ai le même
probleme le site. Alors comment faire pour pouvoir rendre un site web accesible à
toutes résolutions d'écrans. Voici mon code css.
Code:
body
{
width: 100%;
background: url("images/degrade.jpg") no-repeat fixed ;
font-family: Arial, "Times New Roman", Times, sans-serif;
font-size: 0.8em;
color : black;
overflow : hidden; /* evite une barre horizontale */
}
a /* apparence d'un lien */
{
color: #333333;
text-decoration: none;
}
a:hover /* apparence du lien lorsqu'on pointe dessus */
{
color: #99CCFF;
font-weight: bold;
text-decoration: underline;
}
#heures
{
margin-top:5%;
}
#en_tete
{
height: 109px;
background: url("images/banniere.png") no-repeat center ;
}
h1
{
text-indent: -50000px;
}
/* menu deroulant */
dl, dt, dd, ul, li
{
margin: 0%;
padding: 0%;
list-style-type: none;
}
#menu
{
position:absolute;
z-index:100;
width: 100%; /* précision pour Opera */
font-size: 0.9em; /* taille de la police permets de grandir ou diminuer les menus */
margin-bottom: 180px; /* positionne */
margin-left: -500px; /* positionne */
left: 55%; /* permet une position extensible suivant la taille de la fenetre */
top: 25%;
width: 900px; /*le menu ne se defait pas nimporte comment quand on retressi la fenetre du navigateur */
height: 50px; /* idem que le haut */
}
#menu dl
{
float: left;
width: 9em; /* grandeur de la case menu */
}
#menu dt
{
cursor: pointer;
text-align: center;
font-weight: bold; /* police en gras */
background: #99CCFF; /* couleur menu */
border: 1px solid gray; /* contour des menus */
margin: 0%; /* marge entre les menus */
}
#menu dd
{
display: none;
border: 1px solid gray; /* contour des sous menus */
}
#menu li
{
text-align: center;
background: #CCCCCC;/*couleur du fond du sous menu*/
font-weight: bold; /* police en gras */
}
#menu li a, #menu dt a
{
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover
{
background: #3366FF;
}
#fond
{
margin-left:0%;
margin-top:-32.9%;
}
#fond img
{
border-style:outset;
border-color:red;
border-width: 3.1px;
}
#fond_mag
{
margin-left:0%;
margin-top:3.1%;
}
#fond_mag img
{
border-style:outset;
border-color:blue;
border-width: 3.5px;
}
#fond_trem
{
margin-left:77%;
margin-top:-37.2%;
}
#fond_trem img
{
border-style:outset;
border-color:blue;
border-width: 3.5px;
}
#fond_scoot
{
margin-left:77%;
margin-top:3.1%;
}
#fond_scoot img
{
border-style:outset;
border-color:red;
border-width: 3.5px;
}
#corps
{
margin-top: 19%;
margin-left: 23.3%;
border: 3px dotted #3333FF;
padding: 1%;
height: 400px;
width: 50.7%;
}
#corps, h3
{
text-align: center;
color: #333333;
font-size: 150%;
}
#corps, p
{
font-size: 130%;
text-align: justify;
color: #333333;
}
#center
{
margin-left:42%;
margin-top:5%;
}
h4
{
margin-left:10%;
margin-top:20%;
font-size: 100%;
border: outset 2px red;
max-width: 13.5%;
}
h5
{
margin-left:80%;
margin-top:-2%;
font-size: 100%;
border: outset 2px blue;
max-width: 10.65%;
}
#pied_de_page
{
margin-top:15%;
margin-left: 40%;
}
h6
{
font-size:90%;
}
em
{
margin-left:37%;
font-size:120%;
}
|
|
Et voici mon code html
Code:
<head>
<title>Bienvenue sur Xtrem-Scoot! Ventes de motos, Quads, Jet Ski et Buggys</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Mon Style" href="public.css"/>
<meta http-equiv="Content-Language" content="fr" />
<script type="text/javascript">
<!--
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<div id="en_tete"><h1>Xtrem-Scoot</h1></div>
<div id="corps">
<h3>Présentation</h3>
<p>okokokokokokokokokokokokokokokokokokokokokok
okokokokokokokokokokokokokokokokokokokokokokoko
okokokokokokokokokokokokokokokkkkkkkkkkkkkkkkkk
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
</div>
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="index.html" title="Retour à l'accueil">Accueil</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu6');">Accessoires</dt>
<dd id="smenu6" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre('');">
<ul>
<li><a href="casque.html">casques</a></li>
<li><a href="#">125cc</a></li>
<li><a href="#">200cc</a></li>
<li><a href="#">250cc</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');">Scooters</dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="scoot50.html">50cc</a></li>
<li><a href="scoot125.html">125cc</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">Motos</dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<ul>
<li><a href="route125.html">route 125cc</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">Quads</dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
<ul>
<li><a href="quad50.html">50cc</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');">Buggys</dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu5');"><a href="forfaits.html" title="Forfaits">Forfaits</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><a href="itineraire.html" title="Itinéraire">Iténaires </a></dt>
</dl>
</div>
<div id="fond">
<img src="images/magasin/magasin.jpg" alt="magasin">
</div>
<div id="fond_mag">
<img src="images/magasin/magasin1.jpg" alt="magasin1">
</div>
<div id="fond_trem">
<img src="images/magasin/magasin2.jpg" alt="magasin2">
</div>
<div id="fond_scoot">
<img src="images/magasin/magasin3.jpg" alt="magasin2">
</div>
<h4><a href="mailto:cocoone6@hotmail.com">Me contacter par e-mail</a></h4>
<h5><a href="www.xtrem-scoot.com" class="Style2" onClick="javascript:if(document.all)window.external.AddFavorite
('http://www.xtrem-scoot.com','')">Ajouter aux favoris</a></h5>
<em>Nous n' attendons plus que vous, faites votre choix!</em>
<div id="pied_de_page">
<h6>@ Copyright "xtrem-scoot" conflans</h6>
</div>
</body>
</html>
|
|
Au passage dites moi si il y a de grosses erreurs de codage.
Merci d'avance en espérant que vous pourriez m'aidez. |
Titre: Re:probleme de résolution decran
Posté par: Netah le le 05-06-2008 a 01:21:06
Bon, pour une fois je réponds à ce genre de message... Tu n'es pas le premier à poster 3 pages de code... Meme pour du html/css c'est lourd et chiant à lire...
C'est mieux que tu décrives ton probleme et joigne un lien vers la page ou une image.
Perso, j'ai la flemme de lire ca. Je pense que ca doit etre le cas de presque tout le monde ! |
Titre: Re:probleme de résolution decran
Posté par: tyson78 le le 05-06-2008 a 10:32:16
lol oué c'est vrai que ji est été un peu fort lol dsl bon je vais juste ecrire mon body.
Code:
body
{
width: 100%;
background: url("images/degrade.jpg")no-repeat fixed ;
font-family: Arial, "Times New Roman", Times, sans-serif;
font-size: 0.8em;
color : black;
overflow : hidden; /* evite une barre horizontale */
}
|
|
Je peut pas donner un lien vers la page le site n'est pas encore en ligne.
Et le probleme precis c'est que des que je diminue la resolution je suis
actuellement en (1024*960), des que je me met par exemple en (800*600) tout la
design est decalé ou bien il manque des photos ou elles sont coupées à moitier.
Existe t-il une solution pour rendre un design compatible avec toutes resolutions
sans faire des tableaux car avec les tableaux sa pourrais marcher mais bon aprés
le design serais trop lourd à charger. |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|