Aide pour CSS personnaliser un blog

[syncopatte]

Bonjour,

 

rien que par le titre, avec CSS, j'espère trouver un passionné webdesign qui pourrait m'aider à changer un chouïa un blog comme le mien (lien en bas)

 

Ce qui me dérange le plus est l'étroitesse du corps principal.

Le fichier CSS (en pièce jointe) indique 768px.

 

Avec les écrans de plus en plus larges, j'aurais préféré 968: ça passe partout.

Cependant, si j'arrive à l'élargir, il y a toujours un truc qui cloche: le texte n'est pas bien centré, soit ça empiète sur mes colonnes de gauche, soit j'ai un alignement à droite...bref, des ennuis.

 

M'en sors pas avec les float align et autres...

 

Merci d'avance pour votre aide!

 

Patte.

 

PS: un truc qui s'adapte automatiquement à la largeur d'écran serait encore mieux!

cssactu.txt

[gerard33]

Salut Patte

essaies avec des pourcentages, de mémoire je crois que cela marche et cela s'adapte à tous les écrans

bien sur, il faut que tu passes toutes les largeurs en %

gardes toi une copie au cas où...

[syncopatte]

Ah oui, excellente idée en effet, une marge gauche et droite de 10%, avec le corps principal s'étalant sur 80% me parait l'idéal (comme ça, à vue de pif)

 

Cependant appliquer cela sur le fichier CSS (celui en pièce jointe, triplement sauvegardé sauf si WA plante) me paraît aussi compliqué que de photographier Stefan's Quintet depuis la Gand Place de Bruxelles.

 

Patte.

[gerard33]

Salut Patte

pas d’affolement

tu vois le carré de Pégase?

le bras du haut, entre première et deuxième étoile, tu trace un triangle rectangle 40/60 vers la gauche et tu y es

et pour le css, avec des valeurs au pif:

body {
background: url(/blog/templates_img/5/fond.jpg) #344566;
margin: 15px 0 15px 0;
padding: 0 0 0 0;
font: 10pt trebuchet MS;
text-align: center;
       color: #FFF;
}

a {
text-decoration: underline;
color: #E5ECF7;
}

a:hover {
text-decoration: none;
color: #FDC415;
}

#conteneur {
border: 1px solid #415680;
width: 80%;
margin: 0 auto;
padding: 0 0 0 0;
text-align: left;
background: #000;
}

#head {
background: url(/blog/templates_img/5/head.jpg) no-repeat;
height: 100px;
padding: 0 0 0 0;
margin: 0 0 0 0;
}




#menu_haut {
       border-top: 1px solid #415680; 
       width: 80%;
padding: 0 0 0 0;
margin: -30px 0 0 0;
       float: left;
}

ul {
list-style-type: none;
width: 100%; /* précision pour Opera */
}

.menuhaut li {
float: left;
}

.menuhaut a {
margin: 0 2px;
width: 10%;
height: 23px;
display: block;
text-align: center;
border: 1px solid #415680;
text-decoration: none;
color: #fff;
background: #0E1A32;
font: bold 11pt Trebuchet MS;
}

.menuhaut a:hover {
background: #344566;
border: 1px solid #415680; 
}

.menuhaut a:active {
background: #344566;
border: 1px solid #415680; 
color: #344566;
}

#menu_gauche {
float: left;
margin: 10px 0 0 0;
padding: 0 0 0 0;
width: 20%;
}

html > body #menu_gauche {
float: left;
margin: 35px 0 10px 10px;
}

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

#menu_gauche ul li{
margin: -1px 0 0 0;
padding: 0 0 0 0;
       border: 1px solid #415680; 
       background: #0E1A32;
       width: 20%;
}

#menu_gauche ul li a{
background: #0E1A32;
padding: 3px 0 3px 0;
margin:  0 0 0 0;
width: 20%;
line-height: 25px;
text-decoration: none;
       font: 10pt Trebuchet MS;
}

html > body #menu_gauche ul li a{
display: block;
width: 20%;
}

#menu_gauche ul li a:hover{
background: #61778B;
margin: 0 0 0 0;
line-height: 25px;
padding: 3px 0 3px 0;
       font: 10pt Trebuchet MS;
}

#menu_gauche h2{
margin: 0 0 0 0;
background: #344566;
       border: 1px solid #415680;
color: #FFF;
       width: 20%;
text-align: center;
font: bold 11pt Trebuchet MS;
padding: 5px 0 5px 0;
}

* html #menu_gauche h2{
       width: 20%;
       }

#rubriques {
float: right;
width: 50%;
margin: 20px 10px 0 0;
padding: 0 0 0 0;

}

#rubriques h3{
background: url(/blog/templates_img/5/rub.jpg) no-repeat;
margin: 10px 0 10px 0;
width: 45%;
padding: 10px 0 15px 50px;
font: bold 11pt Trebuchet MS;
color: #FFF;
}



.space {
clear: both;
       height: 20px;
}

#footer {
margin: 0 0 0 0 ;
padding: 0 10px 0 10px;
text-align: right;
       background: #344566;
       border-top: 1px solid #415680; 
       font: bold 10pt Trebuchet MS;

}

td {
font-size:10pt;
}

[syncopatte]

Oh! Merci Gérard!

 

....

 

 

après test, y a apparemment un truc qui cloche, mais bon, entre-temps j'ai vu où ma tentative de modification de largeur précédente a foiré: oublié de rajouter 200px pour les rubriques.

 

M'en vais voir prochainement avec les pourcentages, maintenant que je commence à piger le principe.

 

(à moins que tu ne trouves l'erreur? Pas facile j'imagine sans pouvoir tester en direct ce que ça donne)

 

De toute façon, c'est déjà très bien par rapport à la version précédente!

 

Patte.

 

Voici le CSS modifié:

body {

background: url(/blog/templates_img/5/fond.jpg)

 

#344566;

margin: 15px 0 15px 0;

padding: 0 0 0 0;

font: 10pt trebuchet MS;

text-align: center;

color: #FFF;

}

 

a {

text-decoration: underline;

color: #E5ECF7;

}

 

a:hover {

text-decoration: none;

color: #FDC415;

}

 

#conteneur {

border: 1px solid #415680;

width: 968px;

margin: 0 auto;

padding: 0 0 0 0;

text-align: left;

background: #000;

}

 

#head {

background: url(/blog/templates_img/5/head.jpg) no-

 

repeat;

height: 100px;

padding: 0 0 0 0;

margin: 0 0 0 0;

}

 

 

 

 

#menu_haut {

border-top: 1px solid #415680;

width: 968px;

padding: 0 0 0 0;

margin: -30px 0 0 0;

float: left;

}

 

ul {

list-style-type: none;

width: 100%; /* précision pour Opera */

}

 

.menuhaut li {

float: left;

}

 

.menuhaut a {

margin: 0 2px;

width: 100px;

height: 23px;

display: block;

text-align: center;

border: 1px solid #415680;

text-decoration: none;

color: #fff;

background: #0E1A32;

font: bold 11pt Trebuchet MS;

}

 

.menuhaut a:hover {

background: #344566;

border: 1px solid #415680;

}

 

.menuhaut a:active {

background: #344566;

border: 1px solid #415680;

color: #344566;

}

 

#menu_gauche {

float: left;

margin: 10px 0 0 0;

padding: 0 0 0 0;

width: 170px;

}

 

html > body #menu_gauche {

float: left;

margin: 35px 0 10px 10px;

}

 

#menu_gauche ul{

margin: 0 0 0 0;

padding: 0 0 0 0;

list-style-type : none;

}

 

#menu_gauche ul li{

margin: -1px 0 0 0;

padding: 0 0 0 0;

border: 1px solid #415680;

background: #0E1A32;

width: 170px;

}

 

#menu_gauche ul li a{

background: #0E1A32;

padding: 3px 0 3px 0;

margin: 0 0 0 0;

width: 170px;

line-height: 25px;

text-decoration: none;

font: 10pt Trebuchet MS;

}

 

html > body #menu_gauche ul li a{

display: block;

width: 170px;

}

 

#menu_gauche ul li a:hover{

background: #61778B;

margin: 0 0 0 0;

line-height: 25px;

padding: 3px 0 3px 0;

font: 10pt Trebuchet MS;

}

 

#menu_gauche h2{

margin: 0 0 0 0;

background: #344566;

border: 1px solid #415680;

color: #FFF;

width: 170px;

text-align: center;

font: bold 11pt Trebuchet MS;

padding: 5px 0 5px 0;

}

 

* html #menu_gauche h2{

width: 172px;

}

 

#rubriques {

float: right;

width: 730px;

margin: 20px 10px 0 0;

padding: 0 0 0 0;

 

}

 

#rubriques h3{

background: url(/blog/templates_img/5/rub.jpg) no-

 

repeat;

margin: 10px 0 10px 0;

width: 650px;

padding: 10px 0 15px 50px;

font: bold 11pt Trebuchet MS;

color: #FFF;

}

 

 

 

.space {

clear: both;

height: 20px;

}

 

#footer {

margin: 0 0 0 0 ;

padding: 0 10px 0 10px;

text-align: right;

background: #344566;

border-top: 1px solid #415680;

font: bold 10pt Trebuchet MS;

 

}

 

td {

font-size:10pt;

}

Modifié 12 avril 2011 par syncopatte

[gerard33]

à moins que tu ne trouves l'erreur? Pas facile j'imagine sans pouvoir tester en direct ce que ça donne

oui: impossible:(

 

...aussi compliqué que de photographier Stefan's Quintet depuis la Gand Place de Bruxelles.

quand je faisais mes sites j'utilisais Dreamweaver qui permet de visualiser les modifs apportées aux css