28173 sujets

CSS et mise en forme, CSS3

voila,je voudrais savoir comment inserer une image en haut 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

[code]body {
	margin : 0px;
	padding : 0px;
	font-family : Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size : 12px;
	color : #ff9999;
	background: #ff9999;
}

p { margin : 1em 0; }
img { border : none; }
form { display : block; margin : 0; padding : 0; }

h1 { font-size : 2em; margin : 0.67em 0; }
h2 { font-size : 1.4em; margin : 0.83em 0; }
h3 { font-size : 1.17em; margin : 1em 0; }
h4 { font-size : 1em; margin : 1.33em 0; }
h5 { font-size : 0.83em; margin : 1.67em 0; }
h6 { font-size : 0.67em; margin : 2.33em 0; }

code,pre { font-family : "Courier New",monospace; font-size : 1em; }

q { font-style : italic; }

a {
	color : #ff9999;
}
a:hover, a:focus, a:active {
	color: #ff9999;
}

a[hreflang]:after {
	content: "\0000a0(" attr(hreflang) ")";
	color : #ff9999 ;
	background : transparent;
}

h2, h3 {
	font-family : Verdana, Arial, Geneva, Helvetica, sans-serif;
}
h2 {
	font-weight : normal;
}


/* Layout
-------------------------------------------------------- */
#page {
	width : 650px;
	margin : 0px 0px 0px -334px;
	padding : 0px;
	left: 50%;
	top: 0px;
	position: absolute;
	background-color: #fff;
}

#top {
	margin : 0px;
	background: #96BC5D url(http://morganemartin.mon-blog.org/images/morganemartin.mon-blog.org/En-tete-blog.jpg) no-repeat;
	color : #638A32;
	height: 200px;
	padding: 0px;
	font-size: 18px;
}           
#top h1 {
	margin : 0px;
	font-size: 20px;
	color: #638A32;
	padding: 0px;
	position: absolute;
	right: 10px;
	top: 170px;
	font-weight: normal;
}
#top a {
	color : #638A32;
	text-decoration : none;
}

#main {
	float : right;
	width : 435px;
	margin: 0px 0px 0px 15px;
	padding: 0px;
	background-color: #FFFFFF;
             <p><img height="179" width="150" alt="" src="/_userfiles/44f3ff6802339(3).jpg" /></p

}     

#main h3 {
	color : #333;
	margin-top : 2em;
}

#content {
	padding : 0px;
	margin: 5px 0px 5px 0px;
}


/* Sidebar
-------------------------------------------------------- */
#sidebar {
	margin: 0px 0px 0px 0px;
	padding: 10px 0px 10px 15px;
	float: left;
	width: 200px;
	background-color: #F9FFEC;
}
#sidebar h2 {
	color : #96BC5D;
	padding : 0px;
	margin : 5px 0px;
	background-image: url(http://morganemartin.mon-blog.org/themes/bambou/images/minifond.gif);
	background-repeat: repeat-x;
	background-position: center bottom;
}
#sidebar h2 span {
	background-color: #F9FFEC;
	background-image: url(http://morganemartin.mon-blog.org/themes/bambou/images/puce_menu.gif);
	background-repeat: no-repeat;
	margin: 0px;
	padding: 0px 0px 0px 10px;
	background-position: left center;
}
#sidebar ul {
	margin : 0px 0px 0px 25px;
	padding: 0px;
}

#sidebar li {
	list-style : disc;
	color : #96BC5D;
	background : transparent;
	margin: 0px;
	padding: 0px;
}

#sidebar li:hover {
	color : #638A32;
	background : transparent;
}

#sidebar a {
	text-decoration : none;
}


/* Calendar */
#calendar {
	text-align: center;
}
#calendar h2 {
}
#calendar table {
	border-collapse : collapse;
	font-size : 10px;
	margin : 0 auto;
}

#calendar caption {
	padding : 0 0 0.3em 0;
	font-size : 12px;
	margin : 0 auto;
}
#calendar abbr {
	border : none;
}

#calendar th, #calendar td {
	border : none;
	padding : 1px;
}
#calendar td {
	text-align : center;
}

#calendar td.active {
	border : 1px solid #96BC5D;
}
#calendar td.active a {
	font-weight : bold;
}

#calendar a {
	font-weight : bold;
}

/* Search form */
#search {
}
#q {
}

/* Categories box */
#categories {
}

/* Archives box */
#archives {
}

/* Links box */ 
#links {
}

/* Syndication box */
#syndicate {
}


/* Footer
-------------------------------------------------------- */
#footer {
	clear: right;
	margin: 0px;
	padding: 5px;
	color: #96BC5D;
	background: #fff;
	font-size: 10px;
	text-align: right;
}
#footer a {
	color : #96BC5D;
}


/* Post
-------------------------------------------------------- */
.day-date {
	font-size : 10px;
	font-weight : bold;
	margin: 10px 0px 5px;
	text-align : center;
	color : #638A32;
	background : url(http://morganemartin.mon-blog.org/themes/bambou/images/minifond.gif) repeat-x center center;
}
.day-date span {
	background-color: #FFFFFF;
	padding-top: 0px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 5px;
}
.post {
	margin-bottom : 2.5em;
}
.post-title {
	margin : 0em;
	color : #638A32;
	background : url(http://morganemartin.mon-blog.org/themes/bambou/images/puce_billet.gif) no-repeat left center;
	padding-left : 36px;
	padding-top: 6px;
	padding-right: 0px;
	padding-bottom: 6px;
}
.post-title a {
	color : #638A32;
	text-decoration : none;
}
.post-info {
	font-size : 10px;
	clear : both;
	color : #96BC5D;
	margin : 0px;
	padding: 0px 0px 0px 36px;
}
.post-chapo {
	margin: 0px 0px 0px 46px;
	padding: 0px;
	font-size: 10px;
	color: #96BC5D;
}
.post-content {
	font-size: 12px;
	color: #638A32;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 36px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 10px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #96BC5D;
}
.post-info-co {
	font-size : 10px;
	clear : both;
	color : #96BC5D;
	background : url(http://morganemartin.mon-blog.org/themes/bambou/images/puce_commentaire.gif) no-repeat left center;
	padding-left : 15px;
	margin-left: 36px;
}


#trackbacks {

}
#comments {

}
#comment-preview {
}

#trackbacks, #comments, #comment-preview {
	margin: 0px 0px 0px 36px;
}

#trackbacks h3, #comments h3, #comment-preview h3 {
	color: #638A32;
	font-size: 14px;
	font-weight: normal;
	border-bottom: 1px solid #96BC5D;
}

#trackbacks blockquote, #comments blockquote, #comment-preview blockquote {
	display : block;
	width: 300px;
	margin : 5px 0 10px 0;
	padding : 5px;
	font-style : normal;
	border : 1px solid #96BC5D;
	color : #638A32;
	background : transparent;
}

.comment-info {
	margin : 0;
	background : url(http://morganemartin.mon-blog.org/themes/bambou/images/puce_commentaire.gif) no-repeat left center;
	padding-left : 15px;
	color: #96BC5D;
}


/* Error messages
-------------------------------------------------------- */
.error {
	border : 1px solid #c00;
	background : #fee;
	padding : 0.5em;
}
.error ul {
	padding-left : 20px;
}
.error li {
	list-style : disc;
}


/* Interactions
-------------------------------------------------------- */
fieldset {
	display : block;
	border : none;
	margin : 0;
	padding : 0;
}

input, textarea {
	font-family : Verdana,Arial,Geneva,Helvetica,sans-serif;
	font-size : 1em;
	border-width : 1px;
	border-color : #ccc;
}

input[type], textarea[name] {
	background: #FFFFFF;
}

input[type=submit], input[type=reset] {
	background : #ffffff;
	color : #000;
}

input[type=submit]:hover {
	background : #EFEFEF;
	color : #000;
}

textarea {
	width: 300px;
}

p.field {
	margin : 5px 0 0 0;
}

p.field label {
	display : block;
	font-weight : bold;
	font-size : 10px;
}

.form-help {
}

#comment-form {
}

input.preview {
}
input.submit {
}

#c_nom {
}
#c_mail {
}
#c_site {
}
#c_content {
}
#c_remember {
}


/* Extra blocks
-------------------------------------------------------- */
#block1 {
}
#block2 {
}
#block3 {
}
#block4 {
}
#block5 {
}
#block6 {
}
Maintenant je prends le temps de lire ce que tu as écrit, voudrais-tu faire un effort sur l'orthographe et la lisibilité de tes messages car comme tu le sais, la vocation de ce forum est d'être accessible à tous... même aux personnes qui suivent ton sujet à l'aide d'une synthèse vocale.
Tes espaces manquants, lettres manquantes ou mal placées, etc. font que pour l'instant çà doit être difficile à comprendre.

Bon sinon la question, l'avatar est-il une image décorative ou contenant une information. Si c'est une image décorative il vaut mieux qu'elle soit appelée via CSS,

#monimage {
  background: url(www.mondomaine.com/images/monimage.jpg)
}


Sinon il faut qu'elle soit insérée dans le code html :

<img src="www.mondomaine.com/images/monimage.jpg" alt="avatar" />