IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

site qui décalé en 800x600


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2007
    Messages
    228
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 228
    Par défaut site qui décalé en 800x600
    Coucou voila j'ai fini ma page d'accueil apres un troisieme recodage

    je n'ai plus qu'un leger probleme j'ai essayer de penser ma page de façon a ce que quand on est en 800x 600 le fond gris disparaisse mais que le contenu soit toujours bien vsible.

    malheureusement le resultat n'est pas ce lui que j'attendai au lieu de s'ecraser en mode 800x600 on dirai que le site ce decale sur la droite resultat un fond gris a gauche mais pas a droite et un scroll en bas.

    http://fansyl.com.free.fr

    je vous met mes nouveaux codes que je vais essayer de reduire plus tard.

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
    <title>Bienvenue sur www.fansyl.fr</title>
    <meta name="description" content="Le site de deux jeunes graphiste qui travaillent aussi biend ans la 2d que la 3d." />
    <meta name="keywords" content="fansyl,www.fansyl.fr,3d,2d,maya,3dsmax,tutorial,bousselier,deliee,portofolio,compositing" /> 
    <link href="css/css1.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="fondblanc">
    <div id="banniere"><span class="titre"><img src="images/iconefansyl.gif" alt="Chargement" class="iconefansyl" /><img src="images/banniere.gif" alt="Chargement" class="banniere" /><img src="images/iconebanniere.gif" alt="Chargement" class="iconebanniere" /></span></div>
    <div id="menu"><p class="liens">Galeries <span class="separation">|</span> CV <span class="separation">|</span> Biographies <span class="separation">|</span> Projets <span class="separation">|</span> Forum <span class="separation">|</span> Liens</p></div>
    <div id="corps"> <img src="images/print/printmont.gif" alt="Chargement" class="printmont" />
                     <img src="images/bienvenue.gif" alt="Chargement" class="bienvenue" />
                     <p class="paracorps">Bienvenue sur <span style="color:#cb6709;">www.fan</span><span style="color:#66330b;">syl.com</span>
                                         Ce site a été entierement codé à la main, il contient le travail
    	                                 personnel et professionnel de <span style="color:#66330b;">Sylvain Bousselier</span> et <span style="color:#cb6709;">Fanny Deliée.</span>
    	                                 Nous travaillons dans l'imagerie de synthese, le maquettisme, le compositing,
    	                                 le webdesign, l'integration (xhtml,multimedia).
    	                                 Chaque partie du site est decoupée en deux sections: celle de <span style="color:#66330b;">Sylvain</span> et de <span style="color:#cb6709;">Fanny.</span><br />
     
    									 <img src="images/separation2.gif" alt="Chargement" class="separtext" /><br />
     
    									 Ce site se compose d'un menu qui vous permettra de naviguer dans les differentes sections.
    	                                 La partie <span style="color:#cb6709;">galerie</span> vous montrera differents travaux personnels ou professionnels, la partie
    	                                 <span style="color:#cb6709;">CV</span> contient nos Curiculum Vitae avec nos experiences, la partie <span style="color:#cb6709;">biographie</span> contient nos parcours
                                         respectifs, la partie <span style="color:#cb6709;">projet</span> contient notre projet personnel commun, la partie <span style="color:#cb6709;">forum</span> contient le forum de
                                         notre site, et la partie <span style="color:#cb6709;">liens</span> contient differents liens sur le graphisme qui nous tiennent à coeur. <br />
     
                                         <img src="images/separation2.gif" alt="Chargement" class="separtext" /><br /> 
     
                                         <span style="color:#cb6709;">Fanny</span> et <span style="color:#66330b;">Sylvain</span> vous souhaitent une bonne visite. N'hesitez pas à nous contacter pour
                                         vos projets ou plus de renseignements sur notre travail en nous envoyant un message
                                         grace à la partie ci-dessous.								 
    		        </p>						
    			    <p class="introformsyl"><img src="images/barre.gif" alt="Chargement" class="barre" /><br />
    				                        <span class="contacter1">Contacter moi</span><br />
    				                     Pour vos projets ou besoins concernant l'illustration, l'imagerie de synthese, le maquetisme, la conception de site internet, ou pour tout autre renseignements
    		        </p>
                    <form method="post" action="traitement.php" class="formulairesylvain">
    				<p class="paraformsyl">
                    Genre:<br />
                    <select name="genre">
                    <option value="monsieur" class="interieursylv">Monsieur</option>
                    <option value="madame" class="interieursylv">Madame</option>
                    <option value="mademoiselle" class="interieursylv">Mademoiselle</option>
                    </select>
                    <br />
    				<label>Votre Nom :<br /><input type="text" name="nom" class="interieursylv" /></label><br />
    				<label>Votre Prenom :<br /><input type="text" name="prenom" class="interieursylv" /></label><br />
    				<label>Votre telephone :<br /><input type="text" name="telephone" class="interieursylv" /></label><br />
    				<label>Votre Mail :<br /><input type="text" name="mail" class="interieursylv" /></label><br />
    				Cochez la raison de votre message :<br />
                    <label><input type="checkbox" name="illustration" />Illustration</label><br />
                    <label><input type="checkbox" name="imagerie3d" />Imagerie de synthese(3d)</label><br />
                    <label><input type="checkbox" name="maquetisme" />Maquetisme</label><br />
                    <label><input type="checkbox" name="site" />Site internet</label><br />
    				<label><input type="checkbox" name="autre" />Autre</label><br />
    				<label>
                    Votre message/commande :<br />
                    <textarea name="commande" rows="5" cols="25" class="interieursylv"></textarea>
                    </label><br />
                    </p>
    				<p class="boutonsylvain">
    				<input type="submit" value="Envoyer" /> <input type="reset" value="Effacer" />
    				</p>
                    </form>
     
                    <p class="introformfan"><span class="contacter1">Contacter moi</span><br />
    				                     Pour vos projets ou besoins concernant l'illustration, l'imagerie de synthese, les effets speciaux, le compositing, ou pour tout autre renseignements
    		        </p>
                    <form method="post" action="traitement.php" class="formulairefanny">
    				<p class="paraformfan">
                    Genre:<br />
                    <select name="genre">
                    <option value="monsieur" class="interieurfan">Monsieur</option>
                    <option value="madame" class="interieurfan" >Madame</option>
                    <option value="mademoiselle" class="interieurfan" >Mademoiselle</option>
                    </select>
                    <br />
    				<label>Votre Nom :<br /><input type="text" name="nom" class="interieurfan" /></label><br />
    				<label>Votre Prenom :<br /><input type="text" name="prenom" class="interieurfan" /></label><br />
    				<label>Votre telephone :<br /><input type="text" name="telephone" class="interieurfan" /></label><br />
    				<label>Votre Mail :<br /><input type="text" name="mail" class="interieurfan" /></label><br />
    				Cochez la raison de votre message :<br />
                    <label><input type="checkbox" name="illustration" />Illustration</label><br />
                    <label><input type="checkbox" name="imagerie3d" />Imagerie de synthese(3d)</label><br />
                    <label><input type="checkbox" name="maquetisme" />Effets speciaux</label><br />
                    <label><input type="checkbox" name="site" />compositing</label><br />
    				<label><input type="checkbox" name="autre" />Autre</label><br />
    				<label>
                    Votre message/commande :<br />
                    <textarea name="commande" rows="5" cols="25" class="interieurfan"></textarea>
                    </label><br />
                    </p>
    				<p class="boutonfanny">
    				<input type="submit" value="Envoyer" /> <input type="reset" value="Effacer" />
    				</p>
                    </form>	
    </div>			
    <div id="news"> <img src="images/evenement.gif" alt="Chargement" class="imageevenement" />
                    <h5>News du site :</h5>
    				<p class="newssite">Mise en ligne du site le../../....
    	                            Certaines pages ne sont pas encore en ligne
                    </p>
     
    				<img src="images/separation.gif" alt="Chargement" class="separation1" />
     
    				<h5>News de Sylvain :</h5> 
    				<p class="newssite">Fin du codage de notre site.
    	                                Premieres images de ma galerie.
    							        Ma biographie et mon CV en ligne.
                    </p>
     
    				<img src="images/separation.gif" alt="Chargement" class="separation1" />
     
    				<h5>News de Fanny :</h5>
                    <p class="newssite">Fin du codage de notre site.
    	                            Premieres images de ma galerie.
    							    Ma biographie et mon CV en ligne.
                    </p>	   													  
    </div>
    <div id="deco"></div>
                   <img src="images/barre.gif" alt="Chargement" class="barre2" />
    			   <img src="images/barreverticale.gif" alt="Chargement" class="barre3" />
    </div>
    <div id="footer">fansyl et tous les documents qui le concerne sont des proprietees exclusive de ses auteurs</div>
    </body>
    </html>

    et le css
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
     
    * {margin:0; padding:0}
    body{
    background-image: url(../images/imagefond.gif);
    }
     
    #fondblanc{
    position: absolute;
    left: 100px;
    right: 100px;
    background-color: #ffffff;
    width: 800px;
    height: 1310px
    }
     
    #banniere{
    position: absolute;
    width: 780px;
    height: 100px;
    top: 19px;
    left: 10px;
    }
     
    .iconefansyl{
    position: absolute;
    width: 140px;
    height: 100px;
    top: 0px;
     
    }
     
    .banniere{
    position: absolute;
    width: 440px;
    height: 100px;
    top: 0px;
    left: 160px;
    }
     
    .iconebanniere{
    position: absolute;
    width: 130px;
    height: 100px;
    top: 0px;
    left: 600px
    }
     
    #menu{
    position: absolute;
    background-color: #66330b;
    width: 780px;
    top: 119px;
    left: 10px;
    }
     
    .liens{
    margin-left: 100px;
    font-size: 0.8em;
    color: #ffffff;
    word-spacing: 35px;
    }
     
    .separation{
    color: #cb6709;
    }
     
    #corps{
    position: absolute;
    width: 560px;
    top: 134.5px;
    left: 186px;
    }
     
    .printmont{
    position: absolute;
    width: 560px;
    height: 200px;
    }
     
    .bienvenue{
    position: absolute;
    width: 135px;
    height: 90px;
    top: 200px;
    }
     
    .paracorps{
    position: absolute;
    top: 320px;
    padding-left: 30px;
    padding-right: 30px;
    color: #787878;
    font-size: 0.8em;
    }
     
    .separtext{
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 150px;
    }
     
    .barre{
    margin-bottom: 10px;
    }
     
    .contacter1{
    font-weight: bold; 
    font-size: 1.5em;
    margin-left: 40px;
    color: #b2b2b2;
    }
     
    .introformsyl{
    margin-top: 10px;
    position: absolute;
    top: 610px;
    width: 280px;
    font-size: 0.8em;
    color: #787878;
    }
     
    .introformfan{
    position: absolute;
    top: 632px;
    left: 300px;
    width: 280px;
    font-size: 0.8em;
    color: #787878;
    }
     
    .formulairesylvain{
    position: absolute;
    top: 730px;
    left: 20px;
    color: #787878;
    font-size: 0.8em;
    }
     
    .interieursylv{
    color: #66330b;
    }
     
    .formulairefanny{
    position: absolute;
    top: 730px;
    left: 320px;
    color: #787878;
    font-size: 0.8em;
    }
     
    .interieurfan{
    color: #cb6709;
    }
     
    #news{
    position: absolute;
    background-image: url(../images/news.gif);
    width: 176px;
    height: 1165px;
    top: 134.5px;
    left: 10px;
    }
     
    .imageevenement{
    margin-top: 20px;
    width: 176px;
    height: 18px;
    }
     
    h5{
    margin-top: 10px;
    margin-left: 20px;
    text-decoration: underline;
    color: #ffffff
    }
     
    .newssite{
    margin-top: 10px;
    text-align: left;
    font-size: 0.7em;
    font-variant: small-caps;
    color: #ffffff;
    margin-left: 20px;
    }
     
    .separation1{
    margin-top:10px;
    margin-left: 30px;
    height: 10px;
    width: 136px;
    }
     
    #deco{
    position: absolute;
    background-color: #cb6709;
    width: 44px;
    height: 1165px;
    left: 746px;
    top: 134.5px;
    }
     
    .barre2{
    margin-top: 1297px;
    margin-left: 180px;
    }
     
    .barre3{
    position: absolute;
    top: 755px;
    left: 460px;
    }
     
    #footer{
    position: absolute;
    top: 1310px;
    left: 400px;
    font-size: 0.7em;
    font-variant: small-caps; 
    }

    je me suit dit que la solution etait peut etre de mettre des margin auto...
    mais dans ce cas la je dois tous modifier et ma mise en page ce casse encor plus en 800x600.

    merci d'avance

  2. #2
    Membre confirmé
    Profil pro
    Inscrit en
    Avril 2006
    Messages
    234
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2006
    Messages : 234
    Par défaut
    théoriquement si tu as complètement séparé le CSS du HTML tu ne dois modifier que quelques lignes dans ta feuille de style pour rajouter la propriété margin.

    De plus ton code est très mal indenté (j'ai été sur ton site et j'ai fais un view source avec firefox), ce qui le rend très difficille à lire. Vu la longueur si tu veux de l'aide arrange toi pour que l'on puisse le lire facilement.

    J'ai remarqué toujours avec le view source que toutes tes fermetures de balise type <br /> ou <input /> contenait des erreurs (le / et surlignés en rouge). Peut-être que ça peut venir de ça (meme si j'en doute fortement).

  3. #3
    Membre expérimenté
    Inscrit en
    Novembre 2006
    Messages
    206
    Détails du profil
    Informations forums :
    Inscription : Novembre 2006
    Messages : 206
    Par défaut
    Avec position:absolute et left fixé il n'est pas possible de centrer le contenu.
    Il vaut peut-être mieux laisser les choses telles quelles car sinon tout est à recoder !

  4. #4
    Membre éclairé Avatar de mLk92
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    527
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 527
    Par défaut
    Citation Envoyé par roudoudouduo
    théoriquement si tu as complètement séparé le CSS du HTML tu ne dois modifier que quelques lignes dans ta feuille de style pour rajouter la propriété margin.

    De plus ton code est très mal indenté (j'ai été sur ton site et j'ai fais un view source avec firefox), ce qui le rend très difficille à lire. Vu la longueur si tu veux de l'aide arrange toi pour que l'on puisse le lire facilement.

    J'ai remarqué toujours avec le view source que toutes tes fermetures de balise type <br /> ou <input /> contenait des erreurs (le / et surlignés en rouge). Peut-être que ça peut venir de ça (meme si j'en doute fortement).

    Mis à part ces quelques erreur d'écriture, on peut au moins le féliciter d'avoir fait un design comme celui là sans dreamweaver !! On croise bcp trop de sites crées sous forme de tableau, qui ne respectent aucun standard !

    pour voir tes erreurs, tu peux tjr validé tes pages avec le validateur w3c.org

  5. #5
    Membre éprouvé Avatar de speedev
    Profil pro
    Développeur Web
    Inscrit en
    Mai 2006
    Messages
    1 051
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2006
    Messages : 1 051
    Par défaut
    Salut,

    Chouette site!
    Pour ce qui est du positionnement, tu as donné la solution en parlant des "margin auto".
    Les modifications ne sont pas si lourdes que ça à apporter.
    Supprimes les div en marge et inutiles, créer-toi un unique div conteneur d'une largeur fixe et centre-le comme tu le pensais de cette façon:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
    margin-left:auto;
    margin-right:auto;
    Appliques un background à ton body tel qu'actuellement sur les côtés.

    Quelques remises en forme sont nécessaires seulement ça t'élimine bien des ennuis de mise en page pour les prochains épisodes!

    a+!

  6. #6
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2007
    Messages
    228
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 228
    Par défaut
    Merci beaucoup pour vos commentaires ca me fait vraiment plaisir.
    je m'investi beaucoup dans ce projet et je souhaite vraiment tous coder main lol.

    J'ai reussi a regler tous mes problemes de compatibilitée suivant les resolutions ou les navigateurs.

    J'ai juste modifier un peut mon code.
    merci de vos encouragements

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. site qui parle d'Allegro
    Par Vince-le-fou dans le forum Allegro
    Réponses: 2
    Dernier message: 15/05/2008, 09h42
  2. Réponses: 4
    Dernier message: 20/03/2006, 09h33
  3. connaitre domaine du site qui utilise file()
    Par reg11 dans le forum Langage
    Réponses: 5
    Dernier message: 23/01/2006, 10h58
  4. Site qui vérifie les actualisations d'une page web
    Par LFC dans le forum Autres langages pour le Web
    Réponses: 4
    Dernier message: 01/12/2005, 19h47

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo