Forum d'aide création graphique / [Résolu] Élargir Kit Graphique N°10

GsxR03100 · 10-06-2011 23:05:48

Bonjour,

j'aimerais élargir le kit graphique N°10 qui est actuellement en 942px, et j'aimerais le passer en 1280 avec le menu de gauche en 280 ( voir 300 ).

si quelqu'un peut m'aider ? Car j'ai bien essayer mais ca déforme tout :s

Merci d'avance

Piox · 10-06-2011 23:14:48

Salut,

As tu un lien ? smile

GsxR03100 · 10-06-2011 23:16:40

désolé je test en local :s

Piox · 10-06-2011 23:17:15

Ok, donc pour faire ce que tu veut, on doit modifié le css !

Donne moi 5 minute et je te fait ça smile

GsxR03100 · 10-06-2011 23:18:19

Merci c'est cool, car moi le css je l'ai merdé complétement ... :s

Piox · 10-06-2011 23:24:07

Donc voici le code de base.
Si tu trouve que tout semble correct c'est Good, mais sinon, tu aura des modifications d'images à faire ! :P

Code:

/*copyright par kitgraphiquegratuit.org*/  
body, html {
     background:#0d0d0d;
     margin:0;
     padding:0;
     font-family:Verdana, Arial, Helvetica, sans-serif;
     text-align:center;
     color:#FFF;
     background-attachment: fixed;
     font-size:12px;
}     
#conteneur {
     margin: 0 auto;
     width: 942px;
     position:relative;
     text-align:center;
}    
#header {
     text-align:left;
     height:181px; 
     background:url(images/header.png);
     margin:0 auto;
     width:942px;
}     
#contenu {
     width: 942px;
     padding: 0;
     margin:0 auto;
     background:url(images/contenu.png);
}
#left {
     float: left;
     width: 168px;
     margin:0 0 0 10px;
     padding:0;
}   
#right {
     width: 740px;
     margin:0 0 0 187px;
     padding:0;
     text-align:left;
}   
#pied {
     background:#0d0d0d url(images/pied.png);
     height:45px;
     width:942px;
     margin: 0 auto;
     padding: 0;
     clear:both;
}            
/*Class générique*/
a  {
     color: #1db6f6;
     text-decoration: none;
     margin:0;
     font-weight:bold;
     outline:none;
}    
a:hover {
     color: #fff;
}    
img, p, h1, h2, h3, h4, h5,h6, span {
     border:0;
     margin:0;
     padding:0;
}
span.titre {
     color: #1db6f6;
     font-weight:bold;
}    
span.bleu  {
     color: #1db6f6;
     font-weight:bold;
}    
.spacer {
     margin:3px 0 0 0;
} 
.grandspacer  {
     margin:15px 0 0 0;
}
.clear {
     clear: both;
     visibility: hidden; 
}    
/*Menu    vertical*/
.hautmenu  {
     height:32px;
     width:168px;
     margin:0; 
     background:url(images/hautmenu.png) no-repeat bottom;
     padding:10px 0 0 0;
     margin:0;
     color:#1db6f6;
     text-align:center;
     font-weight:bold;
     font-size:14px;
}
.fondmenu {
     width:168px;
     margin:0; 
     background:url(images/fondmenu.png);
     padding:0;
}
.basmenu {
     height:20px;
     width:168px;
     margin:0; 
     background:url(images/basmenu.png);
     padding:0;
}
ul.menuh {
     list-style:none;
     width:168px;
     padding:0;
     margin:0;
     text-align:center;
}
ul.menuh li a {
     display: block;
     height: 14px;
     color: #fff;
     text-decoration: none;
}
ul.menuh li a:hover {
color: #1db6f6;
}    
/*Menu horizontal*/
ul#menu {
     position: absolute;
     margin:17px 0 0 3% ;
     padding:0
}
ul#menu li {
     height: 30px;
     float: left;
     margin: 0 2px 0 2px;
     padding:0 0 0 22px;
     background: url(images/menuleft.png) top left no-repeat;
     list-style-type: none; 
}
ul#menu li a {
     display: block;
     background: url(images/menuright.png) right top no-repeat;
     padding:1em 18px 0.9em 0;
     color: #303030;
     text-decoration: none;
     margin: 0;
     font-weight:bold;outline:none;
}
ul#menu li a:hover {
     padding:1em 18px 0.9em 0;
     color: #1db6f6;
     text-decoration: none;
     margin: 0;
}  
ul#menu li#ici a   {
     color: #1db6f6;
     margin: 0;
     padding:1em 18px 0.9em 0;
} 
/*Pied et copyright*/
.copyright {
     padding :20px 0 0 0;
     width:393px;
     height:30px;
     text-align:center;
     font-weight:bold;
     cursor:pointer;
     margin:0 auto;
}      
/*Cadre de news*/
.news_haut {
     background:url(images/news_haut.jpg) no-repeat;
     width:740px;
     height:38px;
     margin:0 auto 0 auto;
}
.news_fond {
     background:url(images/news_fond.jpg) ;
     width:690px;
     padding:0 25px 0 25px;
}
.news_bas  {
     background:url(images/news_bas.jpg) no-repeat;
     width:740px;
     height:28px;
}

Et le code modifié que tu devrai mettre en css.

Code:

/*copyright par kitgraphiquegratuit.org*/  
body, html {
     background:#0d0d0d;
     margin:0;
     padding:0;
     font-family:Verdana, Arial, Helvetica, sans-serif;
     text-align:center;
     color:#FFF;
     background-attachment: fixed;
     font-size:12px;
}     
#conteneur {
     margin: 0 auto;
     width: 1280px;
     position:relative;
     text-align:center;
}    
#header {
     text-align:left;
     height:181px; 
     background:url(images/header.png);
     margin:0 auto;
     width:942px;
}     
#contenu {
     width: 1280px;
     padding: 0;
     margin:0 auto;
     background:url(images/contenu.png);
}
#left {
     float: left;
     width: 300px;
     margin:0 0 0 10px;
     padding:0;
}   
#right {
     width: 740px;
     margin:0 0 0 187px;
     padding:0;
     text-align:left;
}   
#pied {
     background:#0d0d0d url(images/pied.png);
     height:45px;
     width:1280px;
     margin: 0 auto;
     padding: 0;
     clear:both;
}            
/*Class générique*/
a  {
     color: #1db6f6;
     text-decoration: none;
     margin:0;
     font-weight:bold;
     outline:none;
}    
a:hover {
     color: #fff;
}    
img, p, h1, h2, h3, h4, h5,h6, span {
     border:0;
     margin:0;
     padding:0;
}
span.titre {
     color: #1db6f6;
     font-weight:bold;
}    
span.bleu  {
     color: #1db6f6;
     font-weight:bold;
}    
.spacer {
     margin:3px 0 0 0;
} 
.grandspacer  {
     margin:15px 0 0 0;
}
.clear {
     clear: both;
     visibility: hidden; 
}    
/*Menu    vertical*/
.hautmenu  {
     height:32px;
     width:300px;
     margin:0; 
     background:url(images/hautmenu.png) no-repeat bottom;
     padding:10px 0 0 0;
     margin:0;
     color:#1db6f6;
     text-align:center;
     font-weight:bold;
     font-size:14px;
}
.fondmenu {
     width:300px;
     margin:0; 
     background:url(images/fondmenu.png);
     padding:0;
}
.basmenu {
     height:20px;
     width:300px;
     margin:0; 
     background:url(images/basmenu.png);
     padding:0;
}
ul.menuh {
     list-style:none;
     width:300px;
     padding:0;
     margin:0;
     text-align:center;
}
ul.menuh li a {
     display: block;
     height: 14px;
     color: #fff;
     text-decoration: none;
}
ul.menuh li a:hover {
color: #1db6f6;
}    
/*Menu horizontal*/
ul#menu {
     position: absolute;
     margin:17px 0 0 3% ;
     padding:0
}
ul#menu li {
     height: 30px;
     float: left;
     margin: 0 2px 0 2px;
     padding:0 0 0 22px;
     background: url(images/menuleft.png) top left no-repeat;
     list-style-type: none; 
}
ul#menu li a {
     display: block;
     background: url(images/menuright.png) right top no-repeat;
     padding:1em 18px 0.9em 0;
     color: #303030;
     text-decoration: none;
     margin: 0;
     font-weight:bold;outline:none;
}
ul#menu li a:hover {
     padding:1em 18px 0.9em 0;
     color: #1db6f6;
     text-decoration: none;
     margin: 0;
}  
ul#menu li#ici a   {
     color: #1db6f6;
     margin: 0;
     padding:1em 18px 0.9em 0;
} 
/*Pied et copyright*/
.copyright {
     padding :20px 0 0 0;
     width:393px;
     height:30px;
     text-align:center;
     font-weight:bold;
     cursor:pointer;
     margin:0 auto;
}      
/*Cadre de news*/
.news_haut {
     background:url(images/news_haut.jpg) no-repeat;
     width:740px;
     height:38px;
     margin:0 auto 0 auto;
}
.news_fond {
     background:url(images/news_fond.jpg) ;
     width:690px;
     padding:0 25px 0 25px;
}
.news_bas  {
     background:url(images/news_bas.jpg) no-repeat;
     width:740px;
     height:28px;
}

Si il y a un bug averti moi ! smile
Car j'ai fait ça vite :/

GsxR03100 · 10-06-2011 23:25:59

ouai quelque bug ... attend je l'up wink

Piox · 10-06-2011 23:26:30

Ok !
Je m'excuse des bugs :P
Je vais regardez ce que ça me donne !

GsxR03100 · 10-06-2011 23:27:01

Merci de ton aide en tout cas

Piox · 10-06-2011 23:33:21

Je doit malheureusement y allé, je vais revenir tentôt.

Mais si tu veut tenté, tu joue avec les chiffres du css ! smile

Cordialement,
Piox.

GsxR03100 · 10-06-2011 23:49:20

Voilà, merci de ton aide j'ai reussi en finalisant ...

A+

#1 10-06-2011 23:05:48

[Résolu] Élargir Kit Graphique N°10

#2 10-06-2011 23:14:48

Re: [Résolu] Élargir Kit Graphique N°10

#3 10-06-2011 23:16:40

Re: [Résolu] Élargir Kit Graphique N°10

#4 10-06-2011 23:17:15

Re: [Résolu] Élargir Kit Graphique N°10

#5 10-06-2011 23:18:19

Re: [Résolu] Élargir Kit Graphique N°10

#6 10-06-2011 23:24:07

Re: [Résolu] Élargir Kit Graphique N°10

Code:

Code:

#7 10-06-2011 23:25:59

Re: [Résolu] Élargir Kit Graphique N°10

#8 10-06-2011 23:26:30

Re: [Résolu] Élargir Kit Graphique N°10

#9 10-06-2011 23:27:01

Re: [Résolu] Élargir Kit Graphique N°10

#10 10-06-2011 23:33:21

Re: [Résolu] Élargir Kit Graphique N°10

#11 10-06-2011 23:49:20

Re: [Résolu] Élargir Kit Graphique N°10

Pied de page des forums