28173 sujets

CSS et mise en forme, CSS3

couucou a tous !
vala, je veins tout juste d'ouvrir un blog, et j'aimerais mainteant lepersonnaliser, mais, je suis ( eh oui ! ) une fabuleuse quiche en informatique, et j'en viens a vous demander votre aide :
j'aimerais, que le fond soit rose pâle !!!! mais jcomprend rien au css, et du coup je suis perdue : voila la table des ligne de codes : a quoi doisje bidouiller pour obtenir mon rose pale Smiley smile :

 body{
	background: #f7f7f7 url(http://morganemartin.mon-blog.org/themes/Grenadine/img/fond.png);
	color: #1d1d1d;
 	font-size: 70%;
	line-height: 1.3em;
 	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

h1{font-size: 1.8em;}
h2{font-size: 1.2em;}
h3{font-size: 1.1em;}

pre, code{
	font-size: 1.2em;
}

pre{
 	width: 100%;
	overflow: auto;
	background: #f6f6f6;
	border: 1px solid #dcdcdc;
	color: #202020;
}

html>body pre {
	overflow: auto;
	width: auto;
}

fieldset{
	border: none;
}

label{
	cursor: pointer;
	cursor: hand;
}

.field label{
	display: block;
}

input:hover, textarea:hover, input:focus, textarea:focus, input:active, textarea:active, input[type=checkbox]:hover, input[type=c_remember]:hover{
	border: 1px solid #e00001;
}

input, input[type=checkbox]{
	border: 1px solid #dcdcdc;
	background: #fff;
	color: #202020;
}

textarea{
	width: 100%;
	font-size: 1em;
	background: #fff;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	border: 1px solid #dcdcdc;
	color: #202020;
}

a{
	color: #666;
	text-decoration: none;
}

a:visited{
	color: #666;
}

a:hover{
	color: #e00001;
}

a[hreflang]:after {
	content: "\0000a0[" attr(hreflang) "]";
	color : #e00001;
	font-size: 0.8em;
	vertical-align: top; /* Ne pas toucher à ceci */
}

acronym{
	border-bottom: 1px dotted #e00001;
}

.left{
	float: left;
	margin-right: 1em;
}

.right{
	float: right;
	margin-left: 1em;
}

/* La page
*******************************************************************************/
#page{
 	background: transparent url(http://morganemartin.mon-blog.org/themes/Grenadine/img/page.png) repeat-y center top;
	color: inherit;
}
 
/* L'entête
*******************************************************************************/
#top{
	height: 197px;
	/*padding-top: 20px;*/
 	background: transparent url(http://morganemartin.mon-blog.org/themes/Grenadine/img/top.png) no-repeat center top;
}

	#top h1{
		text-align: left;
		height: 80px;
		line-height: 80px;
		margin: 0;
		padding-top: 5px;
		padding-left: 25px;
		color: #e00001;
	}
	
		#top h1 a{
			text-decoration: none;
			color: #e00001;
		}

/* Le prélude
*******************************************************************************/ 
#prelude{
 	display: none; /* Celui-ci ne s'accordant pas avec le style de la page.*/
}
	
/* Le contenu
*******************************************************************************/

#main{
	float: left
}

.day-date{
	display:none;
}
	
.post{
	background: #eeeeee;
	padding: 10px;
	-moz-border-radius: 8px; /* Ceci défini les bords arrondis, ne fonctionnant pas (hélas) sous Internet Explorer...*/
}

.post-title{
	color: #e00001;
	margin-bottom: 0;
	margin-top: 0;
}

	.post-title a{
		color: #e00001;
		background: transparent;
		text-decoration: none;
	}
	
.post-info{
	margin: 0;
	color: #808080;
	background: transparent;
	padding-bottom: 5px;
	border-bottom: 1px solid #dcdcdc;
}

	
.post-content{
	padding-top: 15px;
	text-align: justify;
	padding-bottom: 15px;
	border-bottom: 1px solid #dcdcdc;
}

.post-content blockquote{
	font-family: Georgia, serif;
	font-style: italic;
	border-left: 5px solid #e00001;
	padding-left: 10px;
}

.post-content ul{
	padding-left: 15px;
}

.post-info-co{
	text-align: right;
}

.post-info-co span{
	color: #e00001;
}

#trackbacks blockquote, #comments blockquote{
	border-left: 5px solid #dcdcdc;
	margin: 1em 0;
	color: #e00001;
	padding-left: 10px;
}

/* La barre de navigation
*******************************************************************************/
#sidebar div{
	color: inherit;
	background: #eeeeee;
	padding: 10px;
	-moz-border-radius: 8px; /* Ceci défini les bords arrondis, ne fonctionnant pas (hélas) sous Internet Explorer...*/
	margin-top: 10px;
}

	#sidebar div ul{
		margin: 0;
		padding: 0;
		list-style: none;
	}

#sidebar h2{
	margin: 0 0 1ex 0;
	color: #e00001;
	text-align: center;
}

#sidebar h3{
	font-size: 1em;
	margin: 0;
	margin: 0 0 1ex 0;
}

#sidebar div#search{
	background: transparent;
	color: inherit;
	line-height: 2.3em;
}
	
	#search fieldset, #search p{
		margin: 0;
		padding: 0;
	}
#search .submit{
		background: #eee;
		border:none;
		padding: 1px;
		width: 30px;
		-moz-border-radius: 5px; /* Ceci défini les bords arrondis, ne fonctionnant pas (hélas) sous Internet Explorer...*/
	}

#search h2{
	display:none;
}

	#search fieldset, #search p{
		margin: 0;
		padding: 0;
	}

	#q{
		padding: 2px 1px 2px 18px;
		width: 100px;
		background: #eee url(http://morganemartin.mon-blog.org/themes/Grenadine/img/spot.png) no-repeat 4px center;
		border: none;
		-moz-border-radius: 5px; /* Ceci défini les bords arrondis, ne fonctionnant pas (hélas) sous Internet Explorer...*/
		
	}

	
#sidebar div#calendar{

}

	#sidebar div#calendar table{
		font-size: 0.8em;
		text-align: center;
		margin: 0 auto;
		border-collapse: collapse;
	}
	
	#sidebar div#calendar table caption{
		margin: 0 auto;
	}
	
	#sidebar div#calendar table th{
		color: #666;
		background: transparent;
	}
	
	#sidebar div#calendar table td{
		width: 14%;
		line-height: 2em;
	}
	
	#sidebar div#calendar table td a{
		display: block;
		background: transparent;
		color: #e00001;
		font-weight: bold;
		text-decoration: none;
	}
	
	#sidebar div#calendar table td a:hover{
		background: transparent;
		color: #666;
	}

		#sidebar div#calendar h2{
			display:none;
	}
/* Le pied de page
*******************************************************************************/	
#footer{
	margin: 0;
	padding: 1em 1em 2em 1em;
	color: #808080;
	background: transparent url(http://morganemartin.mon-blog.org/themes/Grenadine/img/footer.png) no-repeat center bottom;
	background-repeat: no-repeat;
	text-align: right ;
	padding-right: 25px;
	padding-top: 20px;
}

#footer a{
	color: #999;
}

Modifié par mushaboom (24 May 2007 - 15:53)
Bonjour,

Si tu souhaites modifier la couleur de fond de ton blog, c'est cette ligne que tu dois éditer :

body{
background: [b]#f7f7f7 [/b]url(http://morganemartin.mon-blog.org/themes/Grenadine/img/fond.png);


La valeur #f7f7f7 représente la couleur de ton arrière plan.

Tu peux la remplacer par : #ff9999 (#f99 en hex court) qui est un rose.
Pour plus d'infos sur les codes de couleurs, tu peux suivre ce lien.

Voilà !
Modifié par Freem@n (23 May 2007 - 14:13)
ben j'avais essayé cette solution là, mais au lieu de changer la couleur du fond, ca a decaler tout les textess Smiley decu Smiley decu Smiley decu
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Par ailleurs, pourras-tu changer ton titre pour qu'il soit plus précis et plus utile pour les recherches dans le forum ?

Bonne continuation Smiley smile

upload/1-code.gif
mushaboom a écrit :
ben j'avais essayé cette solution là, mais au lieu de changer la couleur du fond, ca a decaler tout les textess Smiley decu Smiley decu Smiley decu

Normalement, ça change la couleur de fond. Tu as dû faire une erreur.
Smiley bawling ben non, je pense pas voir fait d'erreurs :
body{
	background: #FF9999 url(http://morganemartin.mon-blog.org/themes/Grenadine/img/fond.png);
	color: #1d1d1d;
 	font-size: 70%;
	line-height: 1.3em;
 	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}


jcomprend pô Smiley decu de changer ce code, ca decale tout les textes ! c'est zarb' ! moi qui voulais rajouter des ptits poids blanc..... Smiley lol beaucoup d'ambition pour une debutante !
Modifié par Florent V. (23 May 2007 - 18:33)
mushaboom a écrit :
jcomprend pô Smiley decu de changer ce code, ca decale tout les textes !

La seule modification que tu as faite est le changement de couleur ? Ça n'est pas censé décaler quoi que ce soit.

Au passage : pour ta propriété background, tu as une couleur de fond et une image de fond. L'image de fond, qui se répète en hauteur et en largeur, recouvre à priori ta couleur de fond.
Salut,

en fait ce qui te donne l'impression que ça ne marche pas c'est que tu met une couleur de fond et une image de fond et que dans ce cas c'est l'image qui l'emporte.

si tu l'enlève du code css :


body{

	background: #FF9999 ;

	color: #1d1d1d;

 	font-size: 70%;

	line-height: 1.3em;

 	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

}


Alors tu retrouveras ton tout zoli rose Smiley smile

Si tu veux faire quelque chose avec des petits pois alors il faudra que tu fasses une image elle même avec fond rose plus le motif, par exemple ptit_pois_fond_rose.png que tu mettras en background.


background: #FF9999 url(http://morganemartin.mon-blog.org/themes/Grenadine/img/[b]ptit_pois_fond_rose.png[/b] );

Modifié par Christian Le Bouler (23 May 2007 - 18:39)
Salut,

Bon je crois que tu as du faire plus ou moins une bêtise.

Tu devrais avoir deux fichiers css : style.css et layout.css

le premier existe bien, il est à cette adresse :

http://morganemartin.mon-blog.org/images/morganemartin.mon-blog.org/style.css

Mais le deuxième n'existe pas et du coup c'est la page d'erreur de mon-blog.org qui se déclenche.

http://morganemartin.mon-blog.org/images/morganemartin.mon-blog.org/layout.css

Et effectivement si l'on regarde ce qui se trouve dans le dossier :

http://morganemartin.mon-blog.org/images/morganemartin.mon-blog.org/

Et bien layout.css ne s'y trouve pas. Je crains donc que tu l'ais supprimé.

C'est pour cela que toute ta mise en page part en quenotte.
Non,

c'est précisé dans les commentaires au début du document style.css :

a écrit :

*

* L'agengement des blocs est défini dans le fichier layout.css (Merci Mauriz')

*/


@import "layout.css";

ah vi effectivement Smiley decu
et comment je dois m'y prendr pour creer un layout : jle tape sur word pad, mais aprés jle met ou ? jlenregistre ou ? Smiley confused
Modifié par mushaboom (23 May 2007 - 20:50)
Bonjour à tous et bienvenue à mushaboom, Smiley smile

Merci de bien vouloir soigner davantage la rédaction des posts, le langage sms et assimilés ne sont pas autorisés sur le forum.

Nota : La communauté d'Alsacréations vise à préconiser un web de qualité, chose difficilement compatible avec la bidouille.
nnoonono Smiley smile l'est pas resolu encore tout a fait Smiley smile
jvoudrais savoir cmment inserer une image en aut du menu? comme un avatar! Dans les parametes qui permettent de metre en place ce blog, il y a une option : "ajout code html" = "Vous pouvez ici créer des blocs html que vous pouvez ensuite mettre en page grâce au css.
Vous pouvez par exemple ajouter un compteur de visite externe, mettre de la musique sur votre blog, afficher une image sur toutes les pages etc..."
faut t'il que je me serve de cette fon,ction, et comment ? ou bien dois je l'inserer via la feuille "style css" Smiley smile Smiley murf Smiley murf