Flux rss
Collection CommentCaMarche.net
Rechercher : dans
Par : Mots clés Nom d'utilisateur
Messages sans réponse

Modifier la feuille style CSS

Manshiz, le lundi 4 décembre 2006 à 14:10:15 
 Signaler ce message aux modérateurs

Bonjour à tous,

Voici ma feuille CSS:

/* style du blog
-------------------------------------------------------- */
body{
margin:0;
padding:0;
font-size:80%;
}
html>body{
background-position:65em 0;
}
p{
margin:1em 0;
line-height:1.5em;
}
form{display:block; margin:0; padding:0;}
code,pre{
font-family:"courier new",monospace;
font-size:1em;
width:100%;
overflow:auto;
}
a[hreflang]:after{
content:"\0000a0(" attr(hreflang) ")";
color:#666;
background:transparent;
}
img,a img{
border:none;
max-width:100%;
text-decoration:none;
}
ul{
list-style:square;
}
.left{float:left; margin-right:1ex;}
.right{float:right; margin-left:1ex;}
h1,h2,h3,h4,h5,h6{
font-weight:normal;
}
h2{
font-size:1.3em;
color:#444;
background:transparent;
}
h3{font-size:1.2em;}
h4{font-size:1.1em;}
fieldset{
border:none;
}
p.field{
clear:left;
margin-left:10px;
}
label.float{
position:relative;
float:left;
width:45%;
}
input,textarea,option{
-moz-border-radius:7px;
padding:2px;
font-size:12px;
}
input.text:focus,textarea:focus{
border-style:inset;
}
textarea{
width:100%;
}
.erreur,.message{
margin-top:5px;
border-left:6px solid #8b120d;
margin:20px;
padding:15px;
width:100%;
}
.message{
border-left:6px solid #006600;
}
.erreur span,.message span{
color:#8b120d;
font-weight:bold;
}
.message span{
color:#006600;
}
.erreur li{
list-style-type:square;
}

/* style de la page
-------------------------------------------------------- */
#page{
width:65em;
margin:0;
padding:0;
background-repeat:repeat-y;
background-position:46em 0;
}

/* style de l'entête (haut)
-------------------------------------------------------- */
#haut{
margin:0;
height:8em;
color:inherit;
margin-bottom:1em;
position:relative;
}
#haut h1{
margin:0;
font-style:italic;
font-weight:bold;
font-size:2.5em;
position:absolute;
bottom:0.5ex;
left:1ex;
}
#haut a{
text-decoration:none;
background:transparent;
}

/* style du contenant
-------------------------------------------------------- */
#contenant{
float : left;
width:45em;
margin-right : 0px;
}

/* style du contenu
-------------------------------------------------------- */
#contenu{
margin:0 0 0 10ex;
}

/* contenu: style des articles
-------------------------------------------------------- */
.post{
margin:0 0 2.5em 0;
padding-left:2ex;
position:relative;
}
.day-date{
margin:0;
background:transparent;
text-align:right;
width:10ex;
position:absolute;
left:-13ex;
font-size:90%;
}
html>body .day-date{
left:-11ex;
}
.post h2{
margin-bottom:0;
}
.post h2 a{
background:transparent;
text-decoration:none;
}
.post-info{
font-size:0.85em;
margin:0;
}
.post-chapo{
margin-bottom:2em;
}
.post-contenu{
text-align:justify;
}
.com-info{
font-size:0.85em;
clear:both;
padding-left:13px;
}

/* contenu: style des commentaires et rétroliens
-------------------------------------------------------- */
#trackbacks{
margin-left:2ex;
margin-top:2em;
}
#comments{
margin-left:2ex;
margin-bottom:1em;
margin-top:2em;
}
.comment-info{
padding-left:13px;
}
#comments blockquote{
margin-left:1ex;
margin-bottom:2em;
padding-left:1ex;
}

/* style du menu
-------------------------------------------------------- */
#menu{
margin-left:47em;
margin-right:1em;
}
#menu h2{
font-size:1.1em;
color:inherit;
padding:3px;
}
#menu ul{
list-style:none;
list-style-image:none;
margin:0;
padding:0;
}
#menu ul li{
margin:1ex 0;
}
#menu ul li a{
text-decoration:none;
}

/* menu: style des blocs
-------------------------------------------------------- */
#calendrier{
text-align:center;
}
#calendrier h2{
display:none;
}
#calendrier a{
text-decoration:none;
}
#calendrier table{
font-size:0.8em;
margin:0 auto;
width:14em;
}
#calendrier caption{
padding:0 0 0.3em 0;
font-size:1.2em;
margin:0 auto;
}
#calendrier abbr{
border:none;
}
#calendrier th{
font-style:normal;
}
#calendrier td{
text-align:center;
}
#calendrier td a{
font-weight:bold;
display:block;
}

/* style du pied de page (bas)
-------------------------------------------------------- */
#bas{
margin:0;
padding:1ex 1em;
clear:left;
}
#bas ul{
clear:both;
margin:5px;
padding:0;
}
#bas li{
display:inline;
list-style-type:none;
}
#bas a{
text-decoration:none;
}


Jaimerais mettre une icône avec le titre du blog
et centrer ma page où j'écrit mes articles.

Mes problèmes: connaît pas l'anglais n'y l'écriture CSS.

Pour me simplifier la tâche, j'aimerais que vous me mettiez
en gras les zones à changer et ecrire à côté les changements.

Merci infiniment

[url]http://coupdepouce.mabulle.com/url]Coupdepouce[/url]

1

king, le lundi 4 décembre 2006 à 16:04:12

Y a ta "bulle" qui te dit que tu es hors ligne ;-)

Répondre à king

2

Gihef, le lundi 4 décembre 2006 à 23:01:26

Bonjour,

Modifier ta feuille de styles ne suffira pas.
Il faut aussi que tu modifies le document html.

Différentes manières de faire ont été évoquées >ici<.

+ Pour des liens corrects dans ce forum : Guide d'utilisation et “Mettre un lien hypertexte…”.
 

Répondre à Gihef

3

Gihef, le lundi 4 décembre 2006 à 23:25:15
  • +1

En y regardant d'un peu plus près, tu pourrais apporter ces modifications (en gras) à ton fichier css et à ta page html.

Dans “style_core.css” :

/* style de la page
-------------------------------------------------------- */
#page{
    width:65em;
    margin:0 auto;
    text-align : center;
    padding:0;
    background-repeat:repeat-y;
    background-position:46em 0;
    }
#conteneur {
    text-align : left;
    }
/* style de l'entête (haut)
-------------------------------------------------------- */

Dans le document html :
  <body>
    <div id="page">
    <div id="conteneur">
      <div id="haut">
    …
    …
    …
    …
    …
    …
      </div>
    </div>
    </div>
    <script type="text/javascript" src="/edition/visa/stats/cdata.js">
    </script>
  </body>


Bon, la conception de ta page fait que ça donne maintenant un rendu bizarre…
 

Répondre à Gihef

4

mohamed, le vendredi 17 octobre 2008 à 18:28:15

Salut,svl je veux connaître quels sont les avantages de l'utilisation des feuilles de style CSS?merci à l'avance

Répondre à mohamed

5

 djromx, le jeudi 1 janvier 2009 à 13:29:17

C'est pour l'accessibilité de ton site. c'est des normes, il faut séparer le code source de la mise en forme

Répondre à djromx
Javascript : Changer style css Bonjour, Je programme en javascript et j'aimerai modifier dynamiquement le style d'un span ou d'une div. document.getElementById("div").style.backgroundColor" , par exemple ne convient pas car je voudrait modifier tout le style d'un coups mais... www.commentcamarche.net/forum/affich-9333101-javascript-changer-style-css
Héberger site avec feuille style css gratuit (Résolu) Bonjour, Je cherche un hébergeur de site gratuit où les feuilles de styles css (j'utilise dreamweaver cs3) sont supportées. Après de longues recherchez sur le web, je n'ai pas trouvé, certains, sont gratuits au début mais à la fin sont payants à cause... www.commentcamarche.net/forum/affich-6990754-heberger-site-avec-feuille-style-css-gratuit
Appeler image arriere plan depuis style.css Bonjour, je fais actuellement un site en html et je voudrais pouvoir appeler l'image d'arriere plan présente sur chaque page depuis la feuille style.css qui est à la racine - dois je mettre l'image à la racine? ou une image dans chaque dossier (la... www.commentcamarche.net/forum/affich-9175126-appeler-image-arriere-plan-depuis-style-css
Les CSS pour présenter vos imagesPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes... www.commentcamarche.net/faq/sujet-9100-les-css-pour-presenter-vos-images
[Excel] Chemin et nom de stockage de feuille de calculIndiquer automatiquement le chemin d'accès (path) et le nom de stockage de toute feuille de calcul Noter dans une cellule (A& par exemple) la formule : =cellule("nomfichier";A1) A chaque sauvegarde et/ou déplacement de fichier dans votre... www.commentcamarche.net/faq/sujet-962-excel-chemin-et-nom-de-stockage-de-feuille-de-calcul
Mise en forme tableau Style CssBonjour, Je devellope un page web sous html, et je veux que mon table s'affiche dans tous les dimensions de l'ecran, comment je faire avec le style Css? Merci à vos réponse www.commentcamarche.net/forum/affich-7763340-mise-en-forme-tableau-style-css
[JAVASCRIPT-DOM] propriété classe CSS (Résolu)bonjour, je dois recuperer la propriété de style d'un élément html, cette propriété est contenue dans une feuille de style .css qui est contenu dans une classe css. si la propriété est declarée dans la balise avec l'attribut 'style' je sais la... www.commentcamarche.net/forum/affich-1620003-javascript-dom-propriete-classe-css
PDF et Feuille de style CSSBonjour a tous, Je suis desesperement a la recherche d'un script php qui me genererais un fichier pdf a partir d'une page html mais en gardant les propréités definies dans une feuille de style css. Je suis au bord de la crise, je ne trouve vraiment... www.commentcamarche.net/forum/affich-3179891-pdf-et-feuille-de-style-css
Feuilles de style - CSSPrésentation des feuilles de style Le concept de feuilles de style est apparu en 1996 avec la publication par le W3C d'une nouvelle recommandation intitulée « Cascading StyleSheets » (feuilles de style en cascade), notée CSS. Le principe des... www.commentcamarche.net/contents/css/cssintro.php3
Déclaration d'une feuille de style (CSS)Déclaration d'une feuille de style Les feuilles de style sont un sur-ensemble du langage HTML, cela signifie qu'elle ne sont pas intégrées directement dans les recommandations HTML du W3C. Ainsi, il est nécessaire de renseigner le code HTML avec... www.commentcamarche.net/contents/css/cssimplant.php3
Les classes de style (CSS)Les classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des... www.commentcamarche.net/contents/css/cssclass.php3