28173 sujets

CSS et mise en forme, CSS3

Bonjour, j'ai un gros problème ... j'édite la v3 de mon site et je n'arrive plus a placer ma barre ... elle rendre dans le header ... donc je suis héberger chez jeunz (---> blog site) et voici mon Css ... si quelqu'un pouvait me l'éditer ... Oui c'est la partie sidebar re(....) qui ne va plus ( ctrl F) Merci

/* core layout elements */

body {
  background-color: #dffbfd;
  color:#000;
  font-family: "Lucida Grande", "Lucida", "Lucida Sans", "Tahoma", Verdana, Arial, sans-serif;
  text-align: center;
  margin: 0;
  padding: 0;
}

#container {
  width: 788px;
  background: #fff url(http://customvista.mon-blog.org/images/customvista.mon-blog.org/Header/dfrtyrtdy.jpg) repeat-y center;
  margin-left: auto;
  margin-right: auto;
}

#head {
  background: #bbc url(http://limewartif2.mon-blog.org/images/limewartif2.mon-blog.org/hyvjvbjs.jpg);
  width: 549px;
  height: 284px;
  margin: 0;
  padding: 0;
  float: left;
  text-align: right;
}

#wrap {
  width: 786px;  
  margin-left: auto;
  margin-right: auto;
  text-align: left;

}

#content {
  float: left;
  width: 549px;
  margin: 0;
  padding: 0;
  font-size: 13px;
  text-align: left;
}

#sidebar {
  float: left;
  background: url(http://limewartif2.mon-blog.org/images/limewartif2.mon-blog.org/fghfgh.jpg) no-repeat top left;
  width: 236px;
  height: 302px;
  text-align: left;
  color: black;
  font-size: 12px;
  padding:0;
}



#footer {
  clear: both;
  height: 22px;
  width: 786px;
  background: #dffbfd url(http://customvista.mon-blog.org/images/customvista.mon-blog.org/Header/hkvhk.jpg);
  padding: 0;
  margin: 0 auto 0 auto;
}

/* head section */

#head h1, #head h4 {
  font-family: Verdana, Arial, sans-serif;
  background: none;
  margin: 0
  padding: 0;
}
#head h1 {
  font-size: 30px;
  letter-spacing: -0.1em;
  margin: 0px 15px 8px 0;
}

#head a {
  color: #fff;
  text-decoration: none;
  margin: 0;
  padding: 0;
}
#head a:hover {
  color: #000;
}
#head h4 {
  font-size: 12px;
  font-style: italic;
  margin-top: 0;
  border: none;
}

/* content area */

#content h2 {
  clear:both;
  display:block;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: bold;
  margin:0;
  padding: 0 0 6px 65px;
  letter-spacing:-0.8px;
  line-height:33px;
  text-align:left;
  border-bottom: 1px dotted #ccc;
  color:OD5892;
  background:url(http://limewartif.mon-blog.org/images/limewartif.mon-blog.org/hyju.jpg) no-repeat top left;
}

#content h2 a {
  color: #bbc;
  text-decoration: none;
}
#content h2 a:hover {
  color: #fff;
  background-color:#bbc;
  text-decoration: none;
}

#content h2.month  {
  background:url(http://limewartif.mon-blog.org/themes/lush/images/headicon_month.gif) no-repeat top left;
}

.postcontent h3  {
  color:#aaa;
  font-size:18px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  letter-spacing:-2px;
  font-weight:bold;
}

.postcontent h4, .postcontent h5, .postcontent h6  {
  font-family: "Verdana", Arial, Helvetica, sans-serif;
  font-weight:bold;
  color:#bbb;
}

.postcontent h4  {
  font-size:16px;
  letter-spacing:-1px;
}
.postcontent h5  {
  font-size:15px;
  }
.postcontent h6  {
  font-size:13px;
}

.postcontent table  {
  text-align:center;
  vertical-align:top;
}

.postcontent th  {
  font-weight:bold;
  padding:1px;
  background:#ddd;
  text-align:left;
}
.postcontent td  {
  padding:3px;
  background:#eee;
}

h3#subtitle  {
  font-style:italic;
  font-family:Verdana;
  font-size:12px;
  border:none;
  margin:0 px 0 0;
  padding:0;	
  letter-spacing:0;
}

#ffplug  {
  display:none;
}

/* live search */

#search {
  width: 200px;
  height: 30px;
  margin: 0px 0 150px 0;
}

#search p {
  margin: 0;
  padding: 0;
}
#search_spinner {
  padding-left: 29px;
  position: absolute;
  z-index: 9;
}
#search-results {
  width: 180px;
  margin: 0 0 0 34px;
  padding: 0;
  position: absolute;
  z-index: 10;
  background-color: #111;
  border: 1px #000 solid;
  line-height: 16px;
}
#searchedfor {
  margin: 3px;
  padding: 0; 
}

#sidebar #search-results li {
  width: 189px;
  margin: 0;
  background: none;
  border: none;
}

#sidebar #search-results a {
  width: 189px;
  padding: 2px;
  margin: 0;
  display: block;
  background-color: #000;
  color: #fff;
}
#sidebar #search-results a:hover {
  background-color: #333;
  color: #fff;
}

#sidebar #search-results a.searchclose {
  background: url(http://limewartif.mon-blog.org/themes/lush/images/sidebar_closebullet.gif) no-repeat top left;
  border-bottom: 1px solid #000;
}

#sidebar #search-results a.searchclose:hover {
  background: url(http://limewartif.mon-blog.org/themes/lush/images/sidebar_closebullet.gif) no-repeat top left;
}

#q {
  width: 174px;
  height: 15px;
  border: none;
  background: none;
  padding: 2px 2px 0 2px;
  margin: 8px 0 0 45px;
  font-size: 10px;
  color: #fff;
}

#sform label  {
  display:none;
}

#sform {
  margin: 0;
  padding: 0;
}

}/* sidebar related */

#sidebar h3 {
  width: 206px;
  height: 19px;
  line-height: 19px;
  font-size: 12px;
  font-weight: bold;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  color: #cec;
  padding: 0 0 80px 23px;
  background: #304d2f url(http://customvista.mon-blog.org/themes/lush/images/sidestripe.jpg) no-repeat left;
  margin: 0;
  border-top: 1px solid #617e5f;
  border-bottom: 1px solid #232;
}

#sidebar h3 a {
  color: #aca;
}

#sidebar h3 a:hover {
  color:#fff;
}

.sidebar-node li a {
  display: block;
  margin: 0;
  width: 206px;
  background: url(http://customvista.mon-blog.org/themes/lush/images/sidebar_linkbullet.gif) no-repeat top left;
  font-size: 11px;
  font-family: "Trebuchet MS", trebuchet, sans-serif;
  color: #aaa;
  line-height: 18px;
  text-decoration: none;
  padding: 0 0 0 23px;
}

.sidebar-node li a:hover {
  color: #eee;
  background: #3a3a3a url(http://customvista.mon-blog.org/themes/lush/images/sidebar_linkbullet_active.gif) no-repeat top left;
}

#sidebar a.powered {
  width: 37px;
  height: 353px;
  margin: 20px 0 0 0;
  display: block;
  background: url(http://customvista.mon-blog.org/themes/lush/images/dotclear.png) no-repeat left;
}

#sidebar a.powered:hover {
  background: #000 url(http://customvista.mon-blog.org/themes/lush/images/dotclear_hover.png) no-repeat left;
}

#sidebar ul, #sidebar li {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#sidebar li {
  display: block;
  border-top: 1px solid #444;
  border-bottom: 1px solid #222;
  width: 229px;
  background: #333;
}

#sidefooter  {
  display:block;
  width: 229px;
  height:9px;
  margin:0;
  padding:0;
  background:url(http://customvista.mon-blog.org/themes/lush/images/sidebottom.gif) no-repeat;
}

/* footer related */

#validation {
  padding-top: 300px;
  height: 10px;
  font-size: 1px;
  text-align: right;
  margin-right: 151px;
}


.powered img {
  display: none;
  border: none;
}

/* comment form related */

h2#commentshead  {
  padding-left:73px;
  line-height:33px;
  background:url(http://limewartif.mon-blog.org/themes/lush/images/headicon_comments.gif) no-repeat left;
}
h2#trackbackshead  {
  padding-left:73px;
  line-height:30px;
  background:url(http://limewartif.mon-blog.org/themes/lush/images/headicon_trackback.gif) no-repeat left;
}
h2#responsehead  {
  padding-left:73px;
  line-height:30px;
  background:url(http://limewartif.mon-blog.org/images/limewartif.mon-blog.org/Com_Customvista.jpg) no-repeat left;
}

#commentformtop {
  width: 502px;
  height: 25px;
  margin: 0;
  padding: 0;
  background: url(http://limewartif.mon-blog.org/themes/lush/images/cform_top.gif);
}
#cformtop {
  background: url(http://limewartif.mon-blog.org/themes/lush/images/cform_top_body.gif);
}
#cformfoot {
  width: 502px;
  height: 25px;
  margin: 0;
  padding: 0;
  background: url(http://limewartif.mon-blog.org/themes/lush/images/cform_foot.gif);
}
#commentform {
  width: 502px;
  padding: 0;
  margin: 30px 0 0 30px;
  background: url(http://limewartif.mon-blog.org/themes/lush/images/cform_body.gif);
}
#commentform label {
  width: 100px;
  font-weight: bold;
  margin: 5px 10px 0 0;
  text-align: right;
  float: left;
  color: #666;
}

#commentform p {
  padding: 0;
}

#guest_name, #comment_box, #cformtoggle {
  margin: 0;
  padding: 0;
}

#guest_name, #guest_email, #guest_url {
  clear: both;
}

#cformtoggle {
  background: url(http://limewartif.mon-blog.org/themes/lush/images/urlmail.gif) no-repeat right;
  height: 29px;
  margin-right: 11px;
  display: block;
  text-align: right;
}

#cformtoggle a {
  margin-right: 15px;
  padding-top: 10px;
  font-weight: bold;
  position: relative;
  top: 10px;
}

#mailurl, #mailurl p {
  margin: 0;
}

#comment_author, #comment_url, #comment_email, #commentform textarea {
  width: 280px;
  border: 1px solid #aba;
  margin-bottom: 2px;
  font-family: Tahoma, Verdana, Helvetica, sans-serif;
  font-size: 12px;
  color: #666;
}
#comment_author {
  height: 18px;
  padding-left: 18px;
  background: #fff url(http://limewartif.mon-blog.org/themes/lush/images/icon_name.gif) no-repeat left;
}

#comment_url {
  height: 18px;
  padding-left: 18px;
  background: #fff url(http://limewartif.mon-blog.org/themes/lush/images/icon_home.gif) no-repeat left;
}

#comment_email {
  height: 18px;
  padding-left: 18px;
  background: #fff url(http://limewartif.mon-blog.org/themes/lush/images/icon_mail.gif) no-repeat left;
}

#commentform textarea {
  height: 160px;
  border: 1px solid #aba;
  padding: 2px;
}

#errors {
  color: red;
  text-align: center;
  font-weight: bold;
}

#guest_url {
  padding-top: 10px;
}

#commentbuttons {
  margin-left: 110px;
}

p .submit {
  width: 84px;
  height: 29px;
  border: none;
  margin-right: 10px;
}


p#rss_track {
  width: 462px;
  height: 38px;
  background: url(http://limewartif.mon-blog.org/themes/lush/images/rss_track_back.gif);
  padding: 24px 20px 20px 20px;
  margin-left: 30px;
}

p#rss_co {
  width: 462px;
  height: 38px;
  background: url(
);
  padding: 24px 20px 20px 20px;
  margin-left: 30px;
}

p#rss_track small,p#rss_co small {
  width: 240px;
  font-size: 11px;
  font-weight: bold;
  display: block;
  text-align:center;
  margin-right: 10px;
}
.rssbutton {
  width: 84px;
  height: 29px;
  background: url(http://limewartif.mon-blog.org/images/limewartif.mon-blog.org/DSFGDSFG.jpg);
  background-position:left;
  display: block;
  float: right;
  margin: 0;
  padding: 0;
}
.trackbackbutton {
  width: 84px;
  height: 29px;
  background: url(http://limewartif.mon-blog.org/images/limewartif.mon-blog.org/zerdtygfhikl.jpg);
  background-position:left;
  display: block;
  float: right;
  margin: 0 10px 0 0;
  padding: 0;
}
.rssbutton:hover {
  background-position:right;
}
.trackbackbutton:hover {
  background-position:right;
}
.morelink a {
  background: url();
}
.morelink a:hover {
  background: url(http://limewartif.mon-blog.org/images/limewartif.mon-blog.org/DSFGDSFG.jpg);
}
.submit {
  background-image: url(http://limewartif.mon-blog.org/images/limewartif.mon-blog.org/xdfg.jpg);
  background-position:left;

  width: 84px;
  height: 29px;
	
	border:0px;
	display:block;
	font-size:0px;
	padding-top:20px;
	color:#fff;
	  margin-right: 10px;
  padding: 0;
  float: left;

}
.preview {
  background-image: url(http://limewartif.mon-blog.org/images/limewartif.mon-blog.org/derftgyh.jpg);
  background-position:left;

  width: 84px;
  height: 29px;
		border:0px;
	display:block;
	font-size:0px;
	padding-top:20px;
	color:#fff;
		  margin-right: 10px;
  padding: 0;
  float: left;

}
.submit:hover {
  background-position:right;
 width: 84px;
  height: 29px;
}
.preview:hover {
    background-image: url(http://limewartif.mon-blog.org/images/limewartif.mon-blog.org/derftgyh.jpg);
  background-position:right;
 width: 84px;
  height: 29px;
}

/* posts and pages related */

.post , .error{
  width: 541px;
  margin: 0 0 0 8px;
  line-height: 1.7em;
  text-align: justify;
}

.postcontent  {
  margin: 0 30px 0 30px;	
}

#viewpage .postcontent, #pagination  {
  margin: 0 30px 0 38px;	
}

.post p, #viewpage p {
  clear: both;
}
.post img, #viewpage img {
  background: #fff;
  border: 1px solid #ccc;
  padding: 0px;
}

.postmetadata {
  margin-left: 38px;
}
p.meta {
  margin: 20px 0 20px 8px;
  padding: 10px 30px 10px 30px;
  background: #eee url() no-repeat center left;
  font-weight: bold;
  font-size: 100%;
  text-align: left;
  clear: both;
  border-bottom: 10px solid #e5e5e5;
  border-top: 1px solid #e5e5e5;
}
.post p.meta, .post p.metatop {
  margin-left: 0;
}
.post li, #viewpage li {
  list-style-image: url(http://limewartif.mon-blog.org/themes/lush/images/listbullet.gif);
  color: #666;
}

.imgleft {
  float: left;
  margin: 0 10px 10px 0;
}
.imgright {
  float: right;
  margin:0 0 10px 10px;

}
.centered {
  text-align: center;
}
.auth {
  margin: 0 0 20px 0;
  padding-left:50px;
  color: #99a;
  font-size: 10px;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-style:italic;
  line-height: 18px;
}

.post a, .meta a, #viewpage a {
  font-weight: bold;
  color: #668;
}
.post a:hover, .meta a:hover, #viewpage a:hover {
  text-decoration: underline;
  color: #000;
}
.post img a, #viewpage img a {
  background: none;
 margin: none

}
.post a[href^="mailto:"] {
  background: transparent url(http://limewartif.mon-blog.org/themes/lush/images/aemail.gif) no-repeat 100% 50%;
  padding-right: 12px;
}


.post a.admintools:visited {
  background: none;
  background-color: #ddd;
  padding-right: 2px;
}

p#printer  {
  padding-bottom:20px;
}

a#printbutton {
  width: 84px;
  height: 29px;
  margin:0;
  padding:0;
  border: none;
  background:url(http://limewartif.mon-blog.org/themes/lush/images/button_print.gif);
  background-position:left;
  display:block;
  float:right;
}
a#printbutton:hover  {
  background-position:right;
}

/* comments and trackbacks */

.comment-list {
  width: 502px;
  list-style-type: none;
  margin: 0 0 0 30px;
  padding: 0;
}

.comment-list li {
  margin-bottom: 20px;
}
li.comment0 {
  background: #eee url(http://limewartif.mon-blog.org/themes/lush/images/comm_body.gif);
}
li.comment1 {
  background: #eee url(http://limewartif.mon-blog.org/themes/lush/images/comm1_body.gif);
}
.commenthead {
  background: url(http://limewartif.mon-blog.org/themes/lush/images/comm_head.gif) no-repeat top;
  font-size: 10px;
  width: 482px;
  padding: 20px 0 0 20px;
  height: 22px;
}
.author_comment .commenthead {
  background: url(http://limewartif.mon-blog.org/themes/lush/images/comm_heada.gif);
}
.commenthead em {
  font-weight: bold;
  font-size: 12px;
  font-style: normal;
}

.comment-list li.author_comment .commenthead {
  color: #fff;
}
.commenthead div {
  display: inline;
}
.commenthead div a, .post a.admintools, #trackbackList a.admintools {
  margin-left: 10px;
  border-top: 1px solid #eee;
  border-left: 1px solid #eee;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  font-size: 9px;
  padding: 2px;
  background-color: #ddd;
}

.commenthead div a:hover, .post a.admintools:hover, #trackbackList a.admintools:hover {
  color: #fff;
  background: #000;
  text-decoration: none;
}
.commenttext  {
  padding: 5px 15px 0 15px;
  margin: 0;
  color: #000;
}
.commenttext p  {
  margin-top:0;
  padding-top:0;
  color: #000;
}

.commentmeta {
  padding-top: 23px;
  height: 24px;
  clear: both;
  background: url(http://limewartif.mon-blog.org/themes/lush/images/comm_foot.gif) no-repeat bottom;
  width: 502px;
  margin: 0;
  text-align: right;
}
li.comment1 p.commentmeta {
  height: 24px;
  clear: both;
  background: url(http://limewartif.mon-blog.org/themes/lush/images/comm1_foot.gif) no-repeat bottom;
  width: 502px;
  margin: 0;
  text-align: left;
}
#trackbackList {
  margin: 0;
  padding: 0;
  width: 511px;
  list-style-type: none;
  clear: both;
}
#trackbackList li {
  margin: 0;
  padding: 0;
}
#trackbackList blockquote {
  background: #d1d9e8 url(http://limewartif.mon-blog.org/themes/lush/images/blockquote.gif) no-repeat top left;
  padding-bottom: 10px;
  margin: 30px 0 30px 38px;
}
#trackbackList blockquote.trackback1 {
  background: #d2edc5 url(http://limewartif.mon-blog.org/themes/lush/images/blockquote.gif) no-repeat top left;
}
.commentmeta cite {
  margin: 20px 90px 0 90px;
}

/* master archive page */

.archivelink  {
	float:left;
	width:440px;
	line-height:1em;
	margin-top:8px;
}
.archivedate  {
	float:left;
	width:20px;
	text-align:right;
	margin-right:10px;
	line-height:1em;
	margin-top:8px;
	font-weight:bold;
}
.archivemeta  {
	clear:both;
	margin-left:30px;
	line-height:1em;
}

/* extras */

.gravatar_img {
  float: left;
  border: 1px solid #bbb;
  padding: 5px;
  background: #fff;
  margin: 0 10px 10px 0;
}




/* common html elements */

a {
  text-decoration: none;
  color: #666;
}
a:hover {
  color: #000;
}
pre  {
  padding:10px;
  width:360px;
  background-color:#f0f0f5;
  margin-left:30px;
  border-left:10px #ccc solid;
  font-size:11px;
  color:#000;
  overflow:auto;
}

/* plugins */



h2#catlist {
  background:url(http://limewartif.mon-blog.org/themes/lush/images/headicon_catlist.gif) no-repeat left;	
}

/* font preferences */

#fontprefs  {
  font-size:1px;
  line-height:1px;	
  height:10px;
  text-align:left;
  padding:0 50px 0 0;
  margin:0 0 0px 0;
}
#fontlabel  {
  width:61px;
  height:10px;
  margin:0;
  
  background:url(http://limewartif.mon-blog.org/themes/lush/images/readability.gif);	
  float:right;
}

div#search{color:white;}

#preview{
margin:50px;




}
Comment veux-tu que l'on sache ce qui ne va pas sans le moindre rendu visuel ou code html? Une page en ligne faciliterait bien les choses...
Hello,

Je ne sais pas si tu l'as vu, mais ton bloc de recherche est tout en haut (mettre un petit border: solid 1px red; sur div#search pour s'en rendre compte), et la couleur du texte est le blanc (sur fond blanc ou clair, c'est pas terrible). C'est voulu ?

Globalement, je pense qu'il va falloir que tu joues sur les marges : margin-top de div#search, margin-top de div#fontprefs, etc.

limewrtif a écrit :
si quelqu'un pouvait me l'éditer

Non, ça ne se passe pas comme ça ici, comme le précise la règle 16 :
http://forum.alsacreations.com/help.php#regle16
Modifié par Florent V. (07 Jul 2007 - 15:36)
ah d'ac mais j'ai déjà essayé les margin ! mais sa fonctionne pas !! Pour la recherche ben c'est tt simplement que je ne l'ai pas encore codée à cause de la sidebar qui grignotte mon header !