Clanfree.net

omg · 18-06-2008 20:30:40

Voila, j'ai un petit problème au niveau de l'affichage du site.
Je ne peux pas voir le coté droite et gauche de mon site.

Mon site c'est www.born-to-kill.clanfree.net
Regardez et dite moi comment il faut faire et avec précision comment faire pour que je puisse voir tout mon thème.
J'attends vos réponses et merci à vous

AdBot · 18-06-2008 20:30:40

floreng · 18-06-2008 23:01:19

Avé « omg »

Moi, ton site, je le voit, car je suis en 1280 * 1024.
Maintenant, avec une résolution plus faible, il va rapidement en manquer un morceau.
A priori, si j'ai bien retenue la leçon, tu utilise une largeur fixe, trop grande, pour y palier, il faudrait soit réduire cette largeur, soit la mettre en pourcentage par rapport à la largeur de l'écran.

Par contre ton rouge sur fond gris foncé, c'est très difficile à lire.

Et pour tes menus à gauche ( accueil, inscription...) écrit en bleu sur fond bleu, il faut là aussi s'accrocher pour les trouver et donc pour les exploiter.

Bref, accroches toi, car les débuts sont difficiles.

d4RK_l1NK · 18-06-2008 23:25:32

c'est effectivement un problème lié au thème, dont la taille a été mal pensée
il n'y a pas de solution toute faite pour le corriger

il faut modifier les fichiers css du thème, en commençant par la balise body

omg · 18-06-2008 23:29:14

Bien mon thème est de 1790*800 à la base.
Puis je l'ai modifié en mettant des images sur les coté droit et gauche.
Le thème est toujours en 1790*800 mais après l'upload j'obtiens ce résultat.
Je ne vois pas les coté droit et gauche du thème.

A oui et comment je fais ca??? Enfin je veux dire je met quoi???

/*****************************
Style général
*****************************/
html, body, div, form, fieldset {
padding: 0;
margin: 0;
border: 0;
}

body {
height: 100%;
background: url("images/haut_bg.jpg") repeat-x center top;
font-family: Verdana;
font-size: 10px;
color: #EA0B13;
}

input, select, textarea {
background: #0e3c5b;
border: #063454 1px solid;
font-family: Verdana;
font-size: 10px;
color: #FFFFFF;
}

a:link, a:visited, a:active {
color: #0562a1;
text-decoration: none;
outline: none;
}
a:hover {
color: #0c79c3;
outline: none;
}

.left {
float: left;
display: block;
}
.right {
float: right;
display: block;
}
.clear {
clear: both;
}

.flash {
vertical-align: top;
padding: 0;
margin: 0;
border: 0;
}

/*****************************
Structure du thème
*****************************/
#header {
width: 986px;
height: 159px;
margin: auto;
text-align: right;
}

#middle {
width: 986px;
height: auto !important;
height: 641px;
min-height: 641px;
margin: auto;
}

#container {
width: 900px;
margin-left: 86px;
}

#footer div {
width: 920px;
text-align: right;
padding: 92px 66px 0 0;
margin: auto;
color: #424242;
}
#footer a {
font-weight: bold;
}

/*****************************
Blocks de gauche
*****************************/
#quick_menu li {
height: 21px;
padding: 7px 0 0 9px;
}

.block_left {
background: url("images/gauche_bloc_bas.jpg") no-repeat bottom;
padding-bottom: 8px;
margin-bottom: 2px;
color: #85a8bf;
}

.block_left h1 {
height: 26px;
background: url("images/gauche_bloc_titre.jpg") no-repeat;
padding: 7px 0 0 27px;
margin: 0;
text-transform: uppercase;
font-size: 10px;
color: #0180d7;
letter-spacing: 3px;
}

.block_left_content {
background: url("images/gauche_bloc_bg.jpg");
padding: 0 5px 0 5px;
}

/*****************************
Blocks middle
*****************************/
#block_middle a {
color: #FFFFFF;
}
#block_middle a:hover {
color: #a7d9fb;
}

#last_news {
width: 196px;
list-style-type : none;
padding: 0 0 0 30px;
margin: 14px 0 0 0;
float: left;
}

#last_news li {
height: 14px;
margin-bottom: 5px;
padding-top: 3px;
font-weight: bold;
color: #FFFFFF;
}

#login {
height: 24px;
padding: 7px 0 0 0;
padding-left: 14px;
color: #FFFFFF;
}
#login_pseudo {
width: 90px;
margin-right: 8px;
}
#login_password {
width: 90px;
margin-right: 7px;
}

#membre_avatar {
width: 87px;
height: 87px;
margin: 3px 7px 0 110px;
float: left;
}

#last_members {
list-style-type : none;
padding: 0;
margin: 9px 0 0 0;
font-weight: bold;
float: left;
}
#last_members li {
color: #FFFFFF;
margin-bottom: 8px;
}

/*****************************
Centre
*****************************/
.module_content {
margin: 0 10px 0 10px;
}

Merci a vous!!!

Dernière modification par omg (18-06-2008 23:31:33)

d4RK_l1NK · 19-06-2008 00:37:43

je ne suis pas expert en css, mais moi je tenterais bien un:

body {
height: 100%;
width: 80%;
background: url("images/haut_bg.jpg") repeat-x center top;
font-family: Verdana;
font-size: 10px;
color: #EA0B13;
}

ou un truc du genre...

el-bap · 19-06-2008 10:14:56

Par contre, c est peux être que moi, mais j'arrive bien à lire moi, ( malgré l image décalée ).
( Je suis en 1440*900 ).
Sans grande connaissance, je pense comme toi d4RK_l1NK,.

Modesar · 19-06-2008 12:11:37

Salut,
généralement c'est plus difficile de faire un thème à taille variable (qui s'adapte à la fenêtre), donc il serait préférable pour toi de fixer la taille.
Par contre la taille que tu annonce est excessive, le standard du web tourne aujourd'hui autour des 1280 en largeurs. A ce que je vois aussi, tu as baissé la taille, mais çà ne suffit pas; il faut aussi réduire la taille des images :
exemple, une image de 2000px en largeur réglée avec un width de 1000px s'affichera en 2000px, il faut la réduire à la taille mise dans le width pour ne pas rencontrer de problèmes.
Quant à la disparition à droite et à gauche, çà dépend de la résolution de ton écran et du navigateur donc t'inquiètes pas, je pense que tu peux te contenter de vérifier que ton site marche bien sur Internet Explorer 7 et Firefox 2 (3 à partir de demain tongue ).

Bon courage pour la suite !

omg · 19-06-2008 17:48:24

J'ai essayé de modifier la taille du thème en 1440*900 et ce que tu ma dit sur le css mais je ne comprends pas c'est toujours la même chose avec un décalage vers le haut.
Comment je peux faire maintenant...

Merci de vos réponses

omg · 19-06-2008 21:45:27

Je suis désoler de reposter mais je viens vous dire que le problème est résolu.
Dite moi si il y a des problème que je doit régler car c'est important.
Merci a vous tous de m'avoir aidé

d4RK_l1NK · 19-06-2008 23:11:38

en 1024, ça fait un peu juste
attention, car les hautes résolutions restent assez rares parmi les utilisateurs du web (statistiquement parlant)

Modesar · 20-06-2008 11:04:45

Navigation difficile car site trop large et certains espaces sont vides sur les côtés alors que le site lui est tout concentré sur le milieu.

On observe encore quelques décalages comme tu le vois.

omg · 20-06-2008 12:31:58

Oui j'ai un problème encore, le bas du thème est décalé et je ne trouve pas la solution.
Si quelqu'un peut m'aider, ça serais cool.Je sais qu'il faut modif quelque chose dans le css mais quoi???......
Merci!

seb67110 · 20-06-2008 13:14:31

Et comme ça ?

style.css

Code:

/*****************************
    Style général
*****************************/
html, body, div, form, fieldset {
    padding: 0;
    margin: 0;
    border: 0;
}

body {
    
         background: url("images/haut_bg.jpg") repeat-x center top;
    font-family: Verdana;
    font-size: 11px;
    color: #EA0B13;
}

input, select, textarea {
    background: #0e3c5b;
    border: #063454 1px solid;
    font-family: Verdana;
    font-size: 10px;
    color: #FFFFFF;
}

a:link, a:visited, a:active {
    color: #0562a1;
    text-decoration: none;
    outline: none;
}
a:hover {
    color: #0c79c3;
    outline: none;
}

.left {
    float: left;
    display: block;
}
.right {
    float: right;
    display: block;
}
.clear {
    clear: both;
}

.flash {
    vertical-align: top;
    padding: 0;
    margin: 0;
    border: 0;
}

/*****************************
    Structure du thème
*****************************/
#header {
    width: 986px;
    height: 159px;
    margin: auto;
    text-align: right;
}

#middle {
    width: 986px;
    height: auto !important;
    height: 641px;
    min-height: 641px;
    margin: auto;
}

#container {
    width: 900px;
    margin-left: 86px;
}

#footer div {
    width: 920px;
    text-align: middle;
    padding: 92px 66px 0 0;
    margin: auto;
    color: #424242;
}
#footer a {
    font-weight: bold;
}

/*****************************
    Blocks de gauche
*****************************/
#quick_menu li {
    height: 21px;
    padding: 7px 0 0 9px;
}

.block_left {
    background: url("images/gauche_bloc_bas.jpg") no-repeat bottom;
    padding-bottom: 8px;
    margin-bottom: 2px;
    color: #85a8bf;
}

.block_left h1 {
    height: 26px;
    background: url("images/gauche_bloc_titre.jpg") no-repeat;
    padding: 7px 0 0 27px;
    margin: 0;
    text-transform: uppercase;
    font-size: 10px;
    color: #0180d7;
    letter-spacing: 3px;
}

.block_left_content {
    background: url("images/gauche_bloc_bg.jpg");
    padding: 0 5px 0 5px;
}

/*****************************
    Blocks middle
*****************************/
#block_middle a {
    color: #FFFFFF;
}
#block_middle a:hover {
    color: #a7d9fb;
}

#last_news {
    width: 196px;
    list-style-type : none;
    padding: 0 0 0 30px;
    margin: 14px 0 0 0;
    float: left;
}

#last_news li {
    height: 14px;
    margin-bottom: 5px;
    padding-top: 3px;
    font-weight: bold;
    color: #FFFFFF;
}

#login {
    height: 24px;
    padding: 7px 0 0 0;
    padding-left: 14px;
    color: #FFFFFF;
}
#login_pseudo {
    width: 90px;
    margin-right: 8px;
}
#login_password {
    width: 90px;
    margin-right: 7px;
}

#membre_avatar {
    width: 87px;
    height: 87px;
    margin: 3px 7px 0 110px;
    float: left;
}

#last_members {
    list-style-type : none;
    padding: 0;
    margin: 9px 0 0 0;
    font-weight: bold;
    float: left;
}
#last_members li {
    color: #FFFFFF;
    margin-bottom: 8px;
}

/*****************************
    Centre
*****************************/
.module_content {
    margin: 0 10px 0 10px;
}

style_news.css (menu descendu -->il se trouvait dans la bannière)

Code:

/*****************************
    Style général
*****************************/
html {
    background: #090909 url("../images/centre.jpg") repeat-y center top;
}

body {
    height: 100%;
    background: url("../images/haut_bg.jpg") repeat-x center top;
    margin: 0px;
    padding: 0px;
    font-family: Verdana, sans-serif;
    font-size: 10px;
}

/*****************************
    Structure du thème
*****************************/
#parent {
    background: url("../images/haut.jpg") no-repeat center top;
}

#left_col {
    width: 227px;
    margin: 200px 7px 0 0;
    float: left;
}

#right_col {
    width: 666px;
    float: left;
}

#centre {
    width: 334px;
    margin: 20px 0 0 0;
    clear: both;
    float: left;
}

#block_right {
    width: 332px;
    margin-top: 17px;
    float: left;
}

#footer {
    height: 204px;
    background: url("../images/bas.jpg") no-repeat center bottom;
    clear: both;
}

/*****************************
    Blocks de gauche
*****************************/
#quick_menu {
    width: 227px;
    height: 140px;
    list-style-type : none;
    padding: 0;
    margin: 0 0 8px 0;
    color: #0461a0;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: bold;
}

/*****************************
    Centre & News
*****************************/
.news {
    margin-bottom: 20px;
}

.news h2 {
    height: 22px;
    background: url("../images/news_titre.jpg") no-repeat;
    margin: 0;
    padding: 0;
    font-size: 10px;
}

.news_content {
    margin: 15px 8px 15px 21px;
    color: #4b7089;
}

.news_coms {
    height: 19px;
    background: url("../images/news_coms.jpg");
    padding: 7px 10px 0 21px;
    color: #0562a1;
    clear: both;
}
.news_coms a:hover {
    color: #0e7ac3;
}

.read_more {
    color: #0562a1;
    font-weight: bold;
    text-align: right;
    margin-top: 10px;
}
.read_more a:link, .read_more a:visited, .read_more a:active {
    color: #FFFFFF;
    text-decoration: none;
}
.read_more a:hover {
    color: #0e7ac3;
}

.block_centre {
    background: url("../images/bloc_centre_bas.jpg") no-repeat bottom;
    padding-bottom: 12px;
    margin-bottom: 20px;
}
.block_centre h2 {
    margin: 0;
    padding: 0;
}

.block_centre_content {
    margin: 5px 8px 0 21px;
}

/*****************************
    Blocks de droite
*****************************/
.block_right {
    background: url("../images/droit_bloc_bas.jpg") no-repeat bottom;
    padding-bottom: 10px;
    margin: 0;
}
.block_right h3 {
    height: 23px;
    background: url("../images/droit_bloc_titre.jpg") no-repeat;
    margin: 0;
    padding: 0;
}
.block_right div {
    padding: 10px 10px 0 10px;
}

Sous FF ça marche. Pas testé sur ie.

Maintenant comme ont dit d4RK_l1NK et Modesar, il faut être en 1280*1024 pour que ça s'affiche bien. En 1024*768 ça pourrait aller mais le logo est déjà tronqué. Il faudrait tout réduire, surtout les images. Divise tout par 2 et réessaye. Si t'a besoin d'aide pour le css et l'html je suis là.

Dernière modification par seb67110 (20-06-2008 14:27:37)

omg · 20-06-2008 19:23:24

Donc j'ai copier coller ton deuxième exemple de css que tu as posté.
Mon thème est en 1790*800. En gros si je comprends bien, il faudrait que je les mette en 1280*1024?

Si tu regardes aussi, en bas de page, une partie du thème est décalé vers la gauche et je ne comprend pas comment modifier ça sur le css. Comment je pourrais faire pour mettre au même niveau cette partie que la partie du dessus?

Merci pour vos réponses!!

seb67110 · 22-06-2008 11:39:33

Ta deux fichiers css, le premier que je t'ai donnée c'est style.css et le deuxième style_news.css. Il faut modifier les deux !

Normalement avec mon codes tous tes problèmes devaient être résolus. Mais bon vu que ta changé de thème sur ton site jpeux rien voir. Donc upload les fichiers avec mon code pour que je puisse voir ce qui va pas.

Dernière modification par seb67110 (22-06-2008 11:40:25)

Clanfree.net

#1 18-06-2008 20:30:40

Problème thème

18-06-2008 20:30:40

#2 18-06-2008 23:01:19

Re: Problème thème

#3 18-06-2008 23:25:32

Re: Problème thème

#4 18-06-2008 23:29:14

Re: Problème thème

#5 19-06-2008 00:37:43

Re: Problème thème

#6 19-06-2008 10:14:56

Re: Problème thème

#7 19-06-2008 12:11:37

Re: Problème thème

#8 19-06-2008 17:48:24

Re: Problème thème

#9 19-06-2008 21:45:27

Re: Problème thème

#10 19-06-2008 23:11:38

Re: Problème thème

#11 20-06-2008 11:04:45

Re: Problème thème

#12 20-06-2008 12:31:58

Re: Problème thème

#13 20-06-2008 13:14:31

Re: Problème thème

Code:

Code:

#14 20-06-2008 19:23:24

Re: Problème thème

#15 22-06-2008 11:39:33

Re: Problème thème

Pied de page des forums