28172 sujets

CSS et mise en forme, CSS3

Bonjour, j'ai un probleme avec le footer sur certaines pages de mon site (wordpress) et pas sur d'autres. J'ai mis en place un redimentionnement automatique de la page et du background image avec des plugin jquery (dont jquery fullbg image). Le site est en 2 colonnes (content + sidebar) avec un footer qui contient une animation flash. Or mon footer se décale en haut de page sur les pages de 1er niveau et est très bien calé sur la page de 2nd niveau. Le css



/* =Resets and Clearfix
-------------------------------------------------------------- */

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
img,
ul,
ol,
li,
form,
fieldset {
                 position:relative;
                height: 100%;
                width:100%;
                overflow:auto hidden;
            }
    

}
.clearfix:after,
#commentform:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix,
#commentform {
    display: inline-block;
}
.clearfix,
#commentform {
    display: block;
}


/* =Non-classed HTML elements
-------------------------------------------------------------- */

body {
    margin: 0;
                padding: 0;
                background: #272727;
                
}



a,
a:visited {
    color: #838B5A;
    text-decoration: none;
}
a:hover {
    color: #074d7c;
    text-decoration: none;
}


/* =Container elements
-------------------------------------------------------------- */

.bg-gradient {
    background: url(images/bg-gradient.png) left bottom repeat-x fixed;
    position: relative;
    width: 100%;
    height: 100%;
}

.fullBg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

#container {
    -webkit-box-shadow: 0 0 10px #000;
    box-shadow: 0 -10px 10px #000;
        position: absolute;
                margin: 0;
                padding: 0;
                width: 100%;
                overflow: ;
                min-height: 100%;

}




/* =Header
-------------------------------------------------------------- */
#header{
    background: url(images/sprite_h.png) left -196px repeat-x #000;
    border-bottom:;
    height: ;
    position: relative;
    z-index: 10;
                }
#top-bar {
    background: url(images/sprite_h.png) left -196px repeat-x #000;
    border-bottom:;
    height: ;
    position: relative;
    z-index: 10;
}
#rss a {
    background: url(images/sprite_master.png) left top no-repeat;
    float: left;
    width: 29px;
    height: 29px;
    margin: 13px 0 0 23px;
}
#rss span {
    display: none;
}
#top_search {
    float: right;
    margin-top: 15px;
    width: 210px;
}
#top_search input {
    background: url(images/sprite_master.png) -69px top no-repeat #ffffff;
    border: none;
    color: gray;
    float: left;
    padding: 3px 7px 2px 5px;
    width: 148px;
    height: 17px;
}
#top_search button {
    background: url(images/sprite_master.png) -38px top no-repeat;
    border: 0;
    cursor: pointer;
    display: block;
    float: left;
    margin-left: 10px;
    width: 23px;
    height: 23px;
}
#top_search button span {
    display: none;
}
#nav #top_search {
    position: absolute;
    right: 0;
    top: -9px;
}
#header {
    background-color: ;
    background-position: center;
    background-repeat: no-repeat;
    border-top:1px solid #;
    border-bottom:1px solid #;
    height: px;
    position: relative;
    width: 960px;
}
#header h1 {
    font: bold 28px "Trebuchet MS";
    position: relative;
    left: 38px;
    top: 80px;
    width: 852px;
}
#header h1 a,
#header h1 a:visited {
    text-decoration: none;
}
#header h2 {
    border-bottom: none;
    color: #000;
    position: relative;
    top: 80px;
    left: 38px;
    width: 852px;
}
#header_img_link {
    display: block;
    position: absolute;
    text-decoration: none;
    width: 960px;
    height: 198px;
}
#header .sidebar-wrap {
    position: absolute;
    z-index: 1000;
}
.sidebar-wrap #searchsubmit {
    float: right;
    margin-top: 10px;
}
.sidebar-wrap #s {
    width: 160px;
}





/* =Content Area
-------------------------------------------------------------- */

#content {
    position:absolute;
    top:0;
    width:100%;
    overflow:hidden;
    
}

            
.content-main {
    float: left;
    height:100%;
    width:75%;
    
    
}
.two-columns #content-main {
    height:100%;
    width:75%;
    float:left;
}
.three-columns #content-main {
    float: left;
    width: 460px;
}
.three-columns #content-main {
    float: left;
    width: 460px;
}
.three-col-right.three-columns #content-main {
    float: right;
}
.three-col-center.three-columns #content-main {
    width: 445px;
}
h1.page-title {
    background: #2070B7;
    background: linear-gradient(left top, #0F2D4D, #2880C3);
    background: -moz-linear-gradient(left top, #0F2D4D, #2880C3);
    background: -webkit-gradient(linear, left top, right bottom, from(#0F2D4D), to(#2880C3));
    -pie-background: linear-gradient(left top, #0F2D4D, #2880C3);
    color: #e3e3e3;
    font-size: 130%;
    margin: 0 auto 10px;
    padding: 8px 0;
    text-align: center;
    text-shadow: 0 -1px 0 #333333;
}
h1.page-title span {
    color: #fff;
}

.post {
    background: #E9E9E9;
    
                padding:0;
                margin-left:4px;
                height:auto;
                width:100%;
    -moz-border-radius:30px;
    -webkit-border-top-right-radius:30px;
    border-top-right-radius:30px;
    border-top: ;
}

.post-home{

                padding:0;
                margin:0;
                height:auto;
                width:100%;
    -moz-border-radius:30px;
    -webkit-border-top-right-radius:30px;
    border-top-right-radius:30px;
    border-top: ;
    
    }
    
    .post-home2{
background: #E9E9E9;
                padding:0;
                margin:0;
                height:auto;
                width:100%;
    -moz-border-radius:30px;
    -webkit-border-top-right-radius:30px;
    border-top-right-radius:30px;
    border-top: ;
    
    }

.child-page {
    background: #E9ECF5;
    -moz-border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    border-radius: 0 !important;
    padding-bottom: 10px;
    padding-top: 10px;
}
.one-column .page,
.one-column .post.author,
.one-column .child-page {
    width: 930px;
    }
.child-page .entry-content {
    margin-top: 0;
}
.child-page .entry-content p {
    line-height: 18px;
    margin-top: 5px;
}
.child-page .post-title {
    border-bottom: none;
    margin: 0;
    padding: 0;
}
.child-page .excerpt-thumb img {
    margin: 0 5px 0 0;
}
.post.nodate,
.post.page,
.post.post_404,
.post.post_404_search {
    padding-left: 15px;
}
.one-column .post.nodate {
    width: 930px;
}
.two-columns .post {
    -moz-border-radius-topright: 30px;
    -webkit-border-top-right-radius: 30px;
    border-top-right-radius: 30px;
    width: 590px;
}
.two-columns .post.nodate,
.two-columns .post.page,
.two-columns .post.post_404,
.two-columns .post.post_404_search {
    width: 78%;
}
.three-columns .post {
    -moz-border-radius-topright: 30px;
    -webkit-border-top-right-radius: 30px;
    border-top-right-radius: 30px;
    width: 375px;
}
.three-columns .post.nodate,
.three-columns .post.page,
.three-columns .post.post_404,
.three-columns .post.post_404_search {
    width: 430px;
}
.three-col-center .post {
    width: 360px;
}
.three-col-center .post.nodate,
.three-col-center .post.page,
.three-col-center .post.post_404,
.three-col-center .post.post_404_search {
    width: 415px;
}
.two-col-right .post,
.three-col-right .post,
.two-col-right #comments ol li.comment.depth-1,
.three-col-right #comments ol li.comment.depth-1,
.two-col-right #commentform,
.three-col-right #commentform {
    -moz-border-radius-topleft: 30px;
    -moz-border-radius-topright: 0;
    -webkit-border-top-left-radius: 30px;
    -webkit-border-top-right-radius: 0;
    border-top-left-radius: 30px;
    border-top-right-radius: 0;
}
.three-col-center .post,
.three-col-center #comments li.depth-1,
.three-col-center #commentform {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}
.adsense_single {
    text-align: center;
}
.post .date {
    background: url(images/sprite_master.png) -325px top no-repeat;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 25px;
    left: 15px;
    text-align: center;
    width: 46px;
    height: 65px;
}
.post .date p {
    color: #e3e3e3;
    display: inline;
    font: normal 12px tahoma;
    line-height: 22px;
}
.post .date p span {
    color: #2c2b2b;
    font-size: 18px;
}
.post .date p span.year {
    color: #2c2b2b;
    font-size: 11px;
    font-weight: bold;
}
.post .entry {
    margin: 0;
    padding: 0;
}
h2,
h2 a,
h2 a:visited {
    font:bold 19px/33px "Trebuchet MS";
color:#838B5A;
border-bottom:px solid #e3e3e3;
padding-bottom:5px;
text-decoration:none;
}
h2 a,
h2 a:visited {
    border: none;
}
.post-meta {
    position: relative;
}
.post-meta p,
.post-meta ul,
.post-meta li {
    float: left;
}
.post-meta ul {
    background: url(images/sprite_master.png) left -85px no-repeat;
    padding-left: 15px;
    max-width: 60%;
}
.three-columns .post-meta ul {
    width: 185px;
}
.post-meta li {
    font: normal 11px tahoma;
    line-height: 18px;
    list-style-position: outside;
    list-style-type: none;
    margin-left: 5px;
}
.post-meta .post-author,
.post-meta .edit-post,
.post-meta .post-date-inline {
    display: block;
    float: right;
    font: normal 11px tahoma;
    line-height: 18px;
    position: relative;
}
.post-meta .edit-post,
.post-meta .post-date-inline {
    margin-left: 5px;
}
.post-meta .post-date-inline {
    border-left: 1px solid #ccc;
    padding-left: 5px;
}
.post .avatar {
    position: absolute;
    right: 15px;
    top: 12px;
}
.sticky {
    background-color: #def;
}
.sticky h2,
.sticky .post-meta .post-date-inline,
.sticky .entry-footer {
    border-color:#aaa;
}
.entry-content {
    clear: both;
    margin-top: 10px;
}
.entry-content,
.entry-content p,
.slider_post_entry p,
.entry-content ul,
.entry-content ol,
.comment-entry ol {
    color: #2c2b2b;
    font: normal 12px arial;
    line-height: 20px;
}
.entry-content p {
    overflow: hidden;
}
.wp-caption {
    background: #eee;
    margin: 0 auto;
}
.wp-caption img {
    border: none !important;
}
.wp-caption-text {
    color: #5e5e5e !important;
    font: normal 11px arial !important;
    margin: 0 5px !important;
    padding-bottom: 5px;
    text-align: center;
}
.comment-entry ol,
.comment-entry ul {
    display: block !important;
    margin: 5px 0 10px 25px !important;
    width: auto !important;
}
.comment-entry li {
    line-height: 18px;
    margin-bottom: 10px;
}
.comment-entry ul li {
    list-style-type: circle !important;
}
.nopassword {
    margin-left: 80px;
}
.entry-content .gallery-caption {
    background: #efefef;
    color: #555;
    font-size: 11px;
    padding: 5px;
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.comment-entry h1,
.comment-entry h2,
.comment-entry h3,
.comment-entry h4,
.comment-entry h5,
.comment-entry h6 {
    color: #333;
    font: bold 16px arial;
    margin: 20px 0 5px 0;
}
.entry-content h1,
.comment-entry h1 {
    font-size: 20px;
}
.entry-content h2,
.comment-entry h2 {
    border-bottom: none;
    font-size: 18px;
}
.entry-content h4,
.comment-entry h4 {
    font-size: 14px;
}
.entry-content h5,
.comment-entry h5 {
    font-size: 13px;
}
.entry-content h6,
.comment-entry h6 {
    font-size: 12px;
}
.entry-content p,
.comment-entry p,
dt {
    margin-top: 10px;
}
.entry-content .excerpt-thumb,
.child-page .excerpt-thumb {
    float: left;
    margin: 5px 5px 0 0;
}
.entry-content .wp-caption img {
    margin-bottom: 0;    
}
.entry-content .wp-caption-text {
    margin-top: 0;
}
a.more-link,
a.more-link span {
    display: block;
    margin: 0 5px 5px 0;
}
.slider_post a.more-link {
    display: none;
}
.entry-content dt {
    margin-top: 10px;
}
.entry-content ul {
    list-style-position: outside;
    margin: 10px 0 10px 50px;
}
.entry-content ul ul {
    margin-left: 30px;
}
.entry-content ul li {
    list-style-image: url(images/list-style-image.png);
    margin-bottom: 7px;
}
.entry-content ol {
    margin: 5px 0 5px 50px;
}
.comment-entry ol li {
    list-style: decimal;
}
.entry-content ol li {
    margin-bottom: 7px;
}
.entry-content ol ol,
.comment-entry ol ol li {
    list-style-type: lower-alpha;
    margin-left: 30px;
}
.comment-entry ol ol li {
    margin-left: 0;
}
.entry-content ol ol ol,
.comment-entry ol ol ol li {
    list-style-type: lower-roman;
}
.entry-content img,
.child-page img {
    border: 4px solid #e3e3e3;
    margin: 5px;
}
.alignright {
    float: right;
    margin: 4px 0 12px 1em !important;
}
.alignleft {
    float: left;
    margin: 4px 1em 12px 0 !important;
}
.aligncenter {
    display: block;
    margin: 1em auto !important;
}
img.wp-smiley,
.entry-content p img.wp-smiley,
.comment-entry p img.wp-smiley {
    border: none !important;
    display: inline !important;
    float: none !important;
    margin: 0;
}
table {
    border-collapse: collapse;
}
table td,
table th,
table tr {
    border: ;
    font-family: georgia;
    padding: 2px 5px;
}
table th {
    background: #;
    border-bottom-width: 2px;
}
table tr {
    background: #;
}
table tr.alternate {
    background: #fff;
}
table#wp-calendar td,
table#wp-calendar th,
table#wp-calendar tr {
    border: none;
}
blockquote {
    background: url(images/sprite_master.png) left -475px no-repeat #f3f3f3;
    border: 1px dotted #e3e3e3;
    clear: both;
    margin: 10px 0 10px 20px;
    padding: 8px 18px 5px 32px;
}
blockquote p {
    color: #474747 !important;
    margin-bottom: 5px;
    margin-top: 0 !important;
}
blockquote cite {
    display: block;
    font-style: italic;
    margin-top: 10px;
    text-align: right;
}
blockquote blockquote {
    margin-left: 0;
}
p cite {
    display: block;
    text-align: right;
}
p code {
    background-color: #EDEDFF;
}
p.form-allowed-tags code {
    background: none;
}
code.block,
pre.block {
    background: url(images/sprite_master.png) -839px -446px no-repeat #f3f3f3;
    border: 1px dotted #e3e3e3;
    color: #000;
    display: block;
    font: normal 11px "Courier New";
    margin: 10px 0;
    padding: 15px 2px 2px 20px;
}
.entry-footer {
    border-top: ;
    clear: both;
    margin-top: 20px;
}
.link-pages {
    clear: both;
    margin-top: 10px;
}
.add-this,
.add-this-right {
    float: left;
    padding-top: 10px;
}
.add-this-right {
    float: right;
}
.post-tags {
    color: #929292;
    float: left;
    font: normal 11px tahoma;
    line-height: 16px;
    margin-top: 5px;
    max-width:60%;
}
.single .author {
    background: #E9ECF5;
    margin-bottom: 10px;
    margin-top: 5px;
    padding: 10px;
}
.single .author_h4 {
    color: #929292;
    font: normal 18px arial;
    margin: 15px 0 5px 10px;
}
.author-entry .avatar,
.author-info .avatar {
    float: left;
    margin-right: 10px;
    position: static;
}
.author-entry .author_name {
    font-size: 14px;
    margin-bottom: 5px;
}
.author-entry p {
    color: #444;
    font-size: 11px;
    line-height: 18px;
}
.author-entry .avatar {
    border: 4px solid #e3e3e3;
    float: left;
}
.author-entry h2,
.author-entry .entry-content {
    float: right;
    width: 405px;
}
.one-column .author-entry h2,
.one-column .author-entry .entry-content {
    width: 760px;
}
.two-columns .author-entry h2,
.two-columns .author-entry .entry-content {
    width: 475px;
}
.three-columns .author-entry h2,
.three-columns .author-entry .entry-content {
    width: 260px;
}
.three-col-center .author-entry h2,
.three-col-center .author-entry .entry-content {
    width: 245px;
}
.author-entry .entry-content {
    clear: right;
    padding-bottom: 20px;
}
.author-entry .author-first-heading {
    margin-bottom: 0;
    margin-top: 0;
}
.comment-nav {
    color: #929292;
    font: normal 12px tahoma;
    text-align: center;
}
.comment-link {
    float: right;
    padding-top: 5px;
    text-align: right;
}
.comment-link a,
.comment-link a:visited {
    font: normal 18px arial;
}
.post-nav {
    margin-bottom: 20px;
}
#previous,
#previous a,
#previous a:visited,
#next-post,
#next-post a,
#next-post a:visited {
    color: #929292;
    font: 12px tahoma;
    text-decoration: none;
}
#previous {
    float: left;
    margin-left: 8px;
}
#next-post {
    float: right;
    margin-right: 8px;
    text-align: right;
}





/* =Sidebars
-------------------------------------------------------------- */

#sidebar_right{

    display: inline;
    height:100%
    width:19%;
    float:right;
    
    
}
#sidebar_right2{

    display: inline;
    width:15%;
    float:right;
    margin-top:12px;
    margin-right:22px;
    
    }
     
    
#sidebar2 {
    padding-left: 0;
}
.three-columns #sidebar1,
.three-columns #sidebar2 {
    width: 227px;
}
.three-col-center #sidebar1,
.three-col-center #sidebar2 {
    padding: 0 15px 30px 15px;
}
.sidebar,
.sidebar p,
.sidebar li {
    font-family: arial;
    font-size: 12px;
}
.sidebar h3 {
    clear:both;
    background: url(images/) top no-repeat;
    width:178px;
    height:33px;
    font-family: "Lucida Bright";
    font-size: 15px;
    font-style: italic ;
    font-weight: bold;
    text-decoration:underline;
    line-height:33px;
    padding-left:12px;
    margin:0 0 5px -12px;
    color:#fff;
    letter-spacing:0.03em;
    text-align:center;
     color: #FFFFFF;
}
.sidebar h3 a,
.sidebar h3 a:visited,
.sidebar h3 a,
.sidebar h3 a:hover {
    color: #fff;
}
#sidebar_bottom {
    
    clear: both;
    margin-top: 150px;
    padding: 0 0 0px 0;
}
#sidebar_bottom .sidebar-wrap {
    display: inline-block;
    *display: inline;
    margin: 10px 0 5px 0px;
    padding: 0px;
    vertical-align: top;
    width: 100%;
    zoom: 1;
    background-image:url(images/bck.png);
    background-repeat:repeat-x;
}
#sidebar_bottom .sidebar-wrap h3 {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    margin: -10px -10px 10px -10px;
    padding: 7px 10px;
    width: 100%;
    height: auto;
}

.sidebar div.sidebar-wrap {
    clear:both;
    background: #463F32;
    border: 3px solid #848D58;
    -moz-box-shadow: 0 0 5px #BBB;
    -webkit-box-shadow: 0 0 5px #BBB;
    -moz-border-radius: 30px 30px 30px 30px;
    -webkit-border-radius: 30px 30px 30px 30px;
    border-radius: 30px 30px 30px 30px;
    box-shadow: 0 0 5px #BBB;
    margin-bottom: 16px;
     width:;
      overflow-x: hidden;
    overflow-y: hidden;
    padding-left:16px;
}
.three-columns .sidebar div.sidebar-wrap {
    width: 200px;
}
.sidebar #tweetfollow {
    margin-top: 5px;
    text-align: right;
}

#calendar_wrap {
    text-align: center;
}
#wp-calendar {
    border-collapse: collapse;
    margin: 0 auto;
}
#wp-calendar #today {
    font-weight: bold;
}
#wp-calendar td,
#wp-calendar th {
    padding: 3px 4px;
}
#wp-calendar #prev {
    text-align: left;
}
#wp-calendar #next {
    text-align: right;
}
.sidebar ul,
.sidebar ol,
.sidebar p {
    color: #fff;
    font: normal 11px tahoma;
    margin: 0;
}
.sidebar ol {
    list-style-position: outside;
    margin-left: 29px;
}
.sidebar ol ol {
    list-style-type: lower-alpha;
    margin-left: 20px;
}
.sidebar ul ul {
    margin-left: 20px;
}
.sidebar ol ol ol {
    list-style-type: lower-roman;
}
.sidebar ol li {
    line-height: 15px;
    padding: 2px 0;
}
.sidebar ul ul li {
    border: none;
}
.sidebar ul ul li {
    line-height: 15px;
}
.sidebar p {
    line-height: 18px;
}
.sidebar p img {
    border: 4px solid #dedede;
}
.sidebar ul {
    list-style-position: outside;
    list-style-type: none;
}
.sidebar ul li {
    border-bottom: 1px solid #e3e3e3;
    line-height: 15px;
    padding: 6px 0;
}
.sidebar ul li img,
.sidebar ol li img {
    display: inline;
    margin: 0 2px;
    vertical-align: middle;
}
.sidebar ul li span.meta-rss {
    display: inline-block;
    width: 0px;
    height: 16px;
}
.sidebar li.rss {
    background: url(images/sprite_master.png) -885px -338px no-repeat;
    padding-left: 20px;
}


/* =Footer
-------------------------------------------------------------- */

#footer {
clear:both;
background-image:url(images/bck.png);
    background-repeat:repeat-x;
    width:100%;
    bottom:0px;
    position:relative;
    
    
    
    
    
}



#footer a,
#footer a:visited {
    color: #fff;
    text-decoration: none;
}
#footer a:hover {
    text-decoration: underline;
}




}

Je me suis aperçu que quand je mettrais ma div content en relative cela corrigeait le probleme sur les pages de 1er niveau mais cela me cassait toute ma page de 2nd niveau. j'ai cherché dans tous les sens mais je ne trouve pas de solution. Avez vous une idée du pourquoi et surtout du comment corriger ça ?
Bonjour, deux choses importantes :

Une page en ligne serait mieux si tu veux que l'on t'aide.
Le code css sans le code html c'est pas top.

Dans ton cas, je ne crois pas que quelqu'un va se taper le code pour essayer de comprendre le problème ou de le recréer. Voilà pourquoi une page en ligne serait mieux... Smiley cligne
Merci c'est plus facile.

Première chose, tu as des erreurs de validation. En particulier ton div header qui se trouve avant <body> Smiley eek

Et tu as ceci :
<bodyclass="home page page-id-32 page-template page-template-home-php">

Il devrait y avoir un espace entre body et class.

Passe ton code au validateur, tu pourras voir par toi même. C'est toujours mieux de debugger avec un code valide Smiley cligne
Oui tu as raison. J'ai modifié et mis le header à la bonne place. et mis un espace entre body et class.
BOn j'ai trouvé le souci venait d'une position : absolute que j'avais mis dans le css à .fullbg. Merci en tout cas
Tant mieux.

Je me permets tout de même un commentaire : l'ergonomie du site est à revoir. La navigation sur le site est problématique et fera fuir les visiteurs. Ce serait dommage, c'est un si joli château. Smiley cligne
Modifié par Mabelle (28 Mar 2011 - 22:10)
Mettre en ligne un site pour promouvoir un produit et ne pas choisir d'avoir une ergonomie minimal pour rendre agréable la visite des internautes est à mon sens une grosse erreur. Le site ne servira à rien si les internautes ne le visite pas ou n'y reste pas. L'accessibilité au contenu du site est problématique, le menu dans le pied de page, etc.

Je t'invite à présenter ton site dans la section "Critiques de vos sites" sur ce forum pour y recevoir des avis qui pourraient améliorer le tout et ce de façon constructive.