Forum des sites Hawa Blog - Hawa Music - Hawa Games - Hawa Tools

Bonjour, tout le monde Asmile

j'avais fait mon site sur mon ancien pc qui faisait 15pouce, et quand j'utilise mon new pc (17pouce) pour voir mon site c'est petit à voir alors je voudrais savoir comment en fait pour que mon site détecte une résolution d'écran et qu'il applique sur les pc des mes visiteur pour qu'ils voient correctement.

merci d'avance Asmile

Bonjour, il n'existe pas de mode "automatique" permettant de détecter la résolution d'un écran... Disons que si techniquement cela reste possible à faire il faut que vous prévoyez d'abord de votre côté les différentes tailles que pourrait adopter votre site web.

En clair, sur internet tout se développe, se programme dès qu'on veut faire quelque chose "d'adaptable"...

En général, les créateurs de sites utilisent 2 méthodes :

1 - La méthode qui consiste à ne pas donner de limite à la taille de sont site (par exemple la page de Google ici-même : http://news.google.com/ ) faisant que lorsqu'on étire ou réduis la fenêtre de son navigateur le contenu s'adapte.

2 - La méthode qui consiste à donner une taille entre 960 et 1000 Pixels de largeur au maximum ( mieux vaut se fier aux écrans en 1024x768 qui reste encore la résolution la plus utilisée aujourd'hui ) et donc là, votre site sera effectivement "fixe" mais n'apparaîtra pas trop petit sur un écran 17'

Voila Asmile

merci de votre réponse ^^

mon site il est actuellement en "1024x768" mais quand je vais sur mon site la page d'accueil et les contenues de mon site son parfait sauf la bannière, j'ai tout essayer (tous que je savais) mais rien Sad

je crois bien que dans le fichier CSS j'ai mis en auto, peut être c'est pour cela que sa s'écarte ?

Edit : voici le code CSS :

.conteneur_page {
width:1000px;
margin-right:auto;
margin-left:auto%;
position:relative;
}

Vous voulez dire que votre site est fait pour être en 1024 ? j'imagine que oui... Moi je vous parlais de donner (lors de la création de votre site) une dimenson soit s'adpatant automatiquement (pleine page) ou bien de prévoir de faire un design qui fasse que les dimensions en largeur soient au minimum dans les 920/930 pixels tout en allant au maximum à 1000 pixels.

je ne sais pas quoi vous dire de mieux Asmile

le design est fait pour une dimension de 1000 x 152px (je parle de la bannière, parce que c'est juste la bannière qui pose problème)

je voulais juste savoir comment faire pour que j'ai pas une espace entre mon bannière . "voir l'image"

http://img61.imageshack.us/img61/6333/pbto6.jpg

merci d'avance ^^

Vous devez d'abord distinguer 2 choses :

1 - les dimensions en largeur de votre site : le contenu devra avoir une taille précise et la bannière en fait partie.

2 - les dimensions générales d'un site correspondent à ce que je vous ai expliqué à 2 reprises plus haut : soit un site "extensible" soit vous donnez une taille à votre contenu comme ci-dessous (cliquez pour agrandir l'image) :

[attachment=71]

Je vous ai indiqué les différents endroits où vous devrez indiquer une taille. Le "footer" n'est pas obligatoire mais vous permettra de vous garantir que le CSS prenne bien en compte un maximum de paramètres.

Autrement dit, ce que vous voyez actuellement sur votre site autour de votre bannière va se rapprocher de cette dernière. En gros ça donnera ceci :

[attachment=72]

Là j'ai juste "simulé" ce que je vous explique plus haut : j'ai donné une taille à l'ensemble du contenu (tel le contour rouge dans la figure No1), puis assigné au CSS une couleur au contour (la même que celle de vos gélules)
ainsi qu'une couleur représentant la fond de la page ( là j'ai mis en gris foncé)

Voila, j'espère que cela vous aidera un peu mieux à comprendre la logique des dimensions d'un site Asmile

aaaaaaaaaaaaa merci beaucoup Big Grin

, je vais aller essayer ^^

merci encore et encore une fois Big Grin

Edite : je viens de essayer, toujours le problème Sad

vous pourriez me montrer une exemple de code s'il vous plaît, depuis une semaine j'essaye mais j'arrive pas :s je suis perdue.....

Avez-vous le CSS de votre page index ? Sinon copiez-collez le code ici pour que je vois d'où vient le problème...

voici le CSS, Par Défaut :

Citation :

/*Style : Vaalibamkartharuku.com | By Ravi |*/
/* GENERAL ------------------------------------------------------------------------------------------------ */

a {
text-decoration:none;
}

a img /* Toutes les images contenues dans un lien */
{
border: none; /* Pas de bordure */
}

body {
background: url(images/background.png) #000000 repeat;
background-repeat: repeat-x;
background-color:#000;
text-align:center;
margin:0;
padding:0;
font-size:100.1%;
font:83%/1.4 comic c Sans MS, verdana, arial, helvetica, sans-serif;
}

.conteneur_page {
width:1000px;
margin-right:auto;
margin-left:auto;
position:relative;
}

.separator{
clear: both;
visibility: hidden;
margin: 0;
padding: 0;
height: 1px;
line-height: 1px;
font-size: 1em;
}

p.texte_contenus
{
font-size:10px;
text-align:justify;
color:#000000;
margin:10px 10px 0px 10px;
}

.selected
{
background-image:url(images/menu_hover.png)!important;
}

h1
{
font-size:16px;
color:#00a5e5;
font-weight:bold;
margin:0 10px 10px 10px;
}

h2
{
font-size:12px;
color:#000000;
font-weight:bold;
margin:0 10px 10px 10px;
}

.titre_search{
color:#ffffff;
padding:0px;
font-size:12px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
}

.conteneur_head
{
float:left;
height:55px;
line-height:55px;
width:845px;
text-align:right;
}

.conteneur_head_2
{
float:left;
height:152px;
width:1000px;
text-align:right;
background-image:url(images/vk1.jpg);
}

.conteneur_head_3
{
float:left;
height:28px;
width:1000px;
text-align:center;
}

.input_search {
background-image:url(images/form_1_left.png);
background-repeat:no-repeat;
background-position:left;
background-color:#fff;
color: #000000;
border:none;
height:19px;
font-size:10px;
font-weight: bold;
padding:4px 0px 1px 25px;
margin-left:20px;
}

/* MENU 1 HORIZONTALE ------------------------------------------------------------------------------------------------ */

ul#menu {
list-style-type: none;
padding:0;
margin:0; }

ul#menu li {
float: left; }

ul#menu a {
height:28px;
width:131px;
float: left;
padding:0 0 0 0;
line-height:28px;
margin:0 0 0 7px;
background-image:url(images/menu_inactive.png);
text-align: center; }

ul#menu a:hover {
background-image:url(images/menu_hover.png); }

a.link_menu_inside {
font-size:0.8em;
color:#000000;
font-weight:bold;
}

/* MISE EN PAGE ------------------------------------------------------------------------------------------------ */

#content {
float:left;
width:840px;
margin-top:40px;
}
#left {
padding-top:20px;
float:left;
width:294px;
}
#main {
float:left;
width:535px;
}

/* CONTENU DROITE ------------------------------------------------------------------------------------------------ */

.bloc_main_1{
background-image:url(images/main_head.png);
width:535px;
height:13px;
font-size:0.1em;
margin:0;
padding:0; }

.bloc_main_2{
text-align:left;
background-color:#ffffff;
width:535px;
min-height:400px !important;
margin:0;
}
.bloc_main_3{
background-image:url(images/main_foot.png);
width:535px;
height:13px;
font-size:0.1em;
margin:0;
padding:0; }

/* MENU 2 et 3 GAUCHE ------------------------------------------------------------------------------------------------ */

input_connexion {
color:#000000;
font-size:10px;
font-family:Arial, Helvetica, sans-serif;
width:80px;
padding:4px;
}

.button_connexion {
background-image:url(images/button_connexion.png);
line-height:30px;
cursor Tongue

ointer;
text-align:center;
width:104px;
height:30px;
}
.button_connexion:hover {
background-image:url(images/button_connexion.png);
background-position:0px -30px;
}

.titre_menu_clair {
color:#000000;
font-size:12px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
}
.titre_menu_fonce {
color:#ffffff;
padding:10px 0px 10px 0px;
font-size:12px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
}

ul#menu_blanc_gauche {
background-image:url(images/menu_3_background.png);
list-style-type: none;
padding:0 0 0 0;
margin:0; }

ul#menu_blanc_gauche a {
display:block;
color:#000000;
font-size:10px;
height:20px;
width:274px;
line-height:20px;
padding:4px 0px 4px 20px;
margin:0px 0px 0px 0px;
}

ul#menu_blanc_gauche a:hover {
color:#FFFFFF;
background-color:#00a5e5;
}

.bloc_menu_3_1{
background-image:url(images/menu_3_head.png);
width:294px;
height:45px;
line-height:45px;
margin:0;
padding:0; }
.bloc_menu_3_2{
background-image:url(images/menu_3_background.png);
background-color:#ffffff;
width:294px;
text-align:left;
min-height:100px;
margin:0;
padding:0; }
.bloc_menu_3_3{
background-image:url(images/menu_3_foot.png);
width:294px;
height:16px;
font-size:0.1em;
margin:0;
padding:0; }

.bloc_member{
background-image:url(images/bloc_member.png);
background-repeat:no-repeat;
width:294px;
height:155px;
margin:0 0 20px 0;
padding:0; }

/* PAGE SERVICES ------------------------------------------------------------------------------------------------ */

.image_carre {
border:solid 5px #00a5e5;
}
.image_carre:hover {
border:solid 5px #dddddd;
}

.bloc_img {
width:200px;
float:right;
padding-left:20px;
padding-bottom:20px;
}

/* PAGE CONTACT ------------------------------------------------------------------------------------------------ */

.button_send_email {
border:solid 0px #fff;
float:left;
text-indent:-5000px;
background-image:url(images/button_envoyer.png);
cursor Tongue

ointer;
width:104px;
height:30px;
}
.button_send_email:hover {
background-position:0 -30px;
background-image:url(images/button_envoyer.png);
}

.input_contact {
color:#000000;
font-size:10px;
font-family:Arial, Helvetica, sans-serif;
border:solid 1px black;
width:280px;
padding:4px;
}

/* REFERENCES ------------------------------------------------------------------------------------------------ */

/*#appear2 {
float:left;
margin-left:auto;
margin-right:auto;
width:829px;
height:420px;
background-color:#cccccc;
border:solid 4px red;
padding:10px;
}

/* SCREEN IMAGE FLOW ------------------------------------------------------------------------------------------------ */

#animation_conteneur {
height:200px;
width:535px;
position:relative;
display:block;
margin-bottom:50px;
}

/* FOOTER ------------------------------------------------------------------------------------------------ */

.conteneur_foot
{
float:left;
display:block;
background-image:url(images/back_footer.png);
background-repeat:no-repeat;
height:47px;
width:829px;
padding:0;
margin-top:20px;
margin-bottom:20px;
text-align:right;
line-height:47px;
padding-right:20px;
text-align:center;
font-size:10px;
font-family:Arial, Helvetica, sans-serif;
color:#999999;
font-weight:bold;
}
.lien_footer {
font-size:10px;
font-family:Arial, Helvetica, sans-serif;
color:#999999;
font-weight:bold;
}
.lien_footer:hover {
color:#CCCCCC;
text-decoration:underline;
}

Pourriez-vous m'indiquer l'url de votre site svp ...? il faut que je test avec le code HTML de la page parce que là le CSS semble correct ...

Pages: 1 2 3

Forum des sites Hawa Blog - Hawa Music - Hawa Games - Hawa Tools

jaya

Hawa

jaya

Hawa

jaya

Hawa

jaya

Hawa

jaya

Hawa