28173 sujets

CSS et mise en forme, CSS3

Bonjour a tous,
voila, jai un probleme de centrage, et malgrés de nombreux efforts pour resoudre le probleme , je ne trouve guère de solution : Je ne sais pas a quel ligne de code je dois toucher pour regler tout ca
Le probleme en question : http://morganemartin.mon-blog.org/

et les codes :
[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 : 680px;
	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;
            
      
}     

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

#content {
	padding : 0px;
	margin: 50px 30px 50px 30px;
}


/* 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;
	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 {
}
merci d'avance Smiley sweatdrop
mushaboom a écrit :
jai un probleme de centrage

De quel élément parles-tu? Ton blog est centré, tu parles d'un contenu particulier?
oui, qand je poste une image elle n'est pas du tout centrée ! alors j'aimerais, agrandir le bloc central pour ne pas avoir a touché a la taille des images !
mushaboom a écrit :
et comment dois-je m'y prendre ? Smiley confused

En changeant plein de choses dans la feuille de style... ou bien en choisissant un thème différent, n'ayant pas une largeur fixe ou une zone de contenu limitée à 375px de large.

Ou bien tu ne touches à rien et tu fais des images de 375px de large grand maximum.
yop,

voilz, sois en mettant les mains dans le code si tu es un peu aveti ou que tu aime apprendre, soit en trouvant un theme étirable si tu ne veux pas te prendre la tete. Sinon si tu aime ton theme et que tu ne veux pas mettre les mains dans le code,comme le dit florent, redimensionne tes images.
oki okii Smiley smile merci pour vos reponse !
sur quels element du code dois je travailler ? layout ? main ?......sachant que cest seulement le bloc contenant l billet que je voudrais elargir .....? Smiley smile
mushaboom a écrit :
sachant que cest seulement le bloc contenant l billet que je voudrais elargir .....? Smiley smile

Le problème, c'est que ça demande plusieurs modifications ciblées et une assez bonne connaissance des CSS. Ce qui ne semble pas convenir à ton profil.

À moins que tu n'aies envie de te former à l'intégration web et aux langages HTML et CSS (en l'occurrence surtout CSS), je pense que tu devrais trouver un thème qui corresponde mieux aux besoins de tes contenus (images relativement larges).
soit dit en passant sympa les dessins Smiley cligne

comme le dit florent, trouve un thème qui s'élargit ou pour de plus grosses images et met le un peu a ta sauce avec des couleur et des trucs plus simple a modifier quand on débute.
Problème réglé
bisous et merci a tous, pour votre patience et votre pro-fe-sio-nna-lisme ! Smiley smile
Modifié par mushaboom (25 May 2007 - 20:27)