28234 sujets

CSS et mise en forme, CSS3

Problème de bannière

Bonjour à tous !

Je viens demander de l'aide car j'ai un petit problème avec mon CSS, voyez par vous-même :

http://jaime-ca.over-blog.com/

Comme vous pouvez le constater, la bannière est divisée en deux parties :
http://www.noelshack.com/up/aac/bannire1-0cc807de13.png
http://www.noelshack.com/up/aac/bannire2-3792e86049.jpg

Or, seule la partie supérieur s'affiche, et ce, deux fois. J'ai vérifié le CSS plusieurs fois, pendant un long moment, et j'ai pas su trouver d'où venait le problème :s

Le CSS :



body, html {padding: 0px; margin: 0px;}
#global{padding: 0px; margin: 0px auto; width: 950px;}

.ln {clear:both;}
.cl {float:left;}
.clear {clear:both;}

/* modele */
#cl_0_0 {margin:0px 0px 15px 0px; padding:0px; width:100%;}
#cl_1_0	{margin:0 10px 0 0; width:625px; padding:5px}
#cl_1_1	{margin:0px; width:300px; }
#cl_2_0 {width:100%; margin:15px 0 0 0 ;}
.box {width:100%; overflow:hidden;}

/* common screen */

/* @group general */

* {
	margin: 0;
	padding: 0;
	outline: none;
}

body {
	font: normal 62.5% Arial, Helvetica, sans-serif;
}	

#global {
	background-repeat: no-repeat;
}

body, #miniGlobal {
	background-image : url(http://www.noelshack.com/up/aac/fond-0736a49d2.jpg) ; background-repeat:no-repeat;background-position:center;background-attachment:fixed;}
	color: #000000;
}

img {
	border: 0;
}

a {
	text-decoration: underline;
}

a:hover {
	text-decoration: underline;
}

p {
	margin: .8em 0 .5em 0;
}

h1, h2, h3 {
	font-weight: bold;
	font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
}

input, textarea {
	border: 0;
	font: normal 12px Arial,Helvetica,sans-serif;
	padding: 2px 5px;
	background-repeat: no-repeat;
	padding: 2px 5px;
	background-color: #FFFFFF;
}

input.button, input.hitSubmit, input.submit {
	border: 0;
	font-family: bold 12px Arial, Helvetica, sans-serif;
	padding: 2px 5px 1px;
	text-transform: uppercase;
	overflow: visible;
	cursor: pointer;
	font-weight: bold;
}

input.checkbox, input.radio {
	background: none;
	border: 0;
	color:#FFF;
}

input.button, input.hitSubmit, input.submit, .afterReactions .spanAddComment {
	background-repeat: repeat-x;
	border-width: 1px;
	border-style: solid;
}

textarea {
	margin: 5px 0;
}

legend {
	padding-left: 5px;
	padding-right: 5px;
}

/* @end */

/* @group header */

#top {
	text-align: left;
	background-repeat: no-repeat;
	padding: 20px 20px 30px;
	background-position: left bottom;
	overflow: hidden;
	width: 910px;
	min-height: 117px;
}

#header {
	font-size: 1.2em;
	background-repeat: no-repeat;
	background-position: top;
	min-height: 83px;
	height:auto!important;
	height:500px;
}

#top h1 {
	padding: 0px;
	margin: 0px;
	font-size: 4em;
	letter-spacing: -1px;
	width: 910px;
}

#top a {
	text-decoration: none;
}

#top, #top a {
	color: #FFF;
}

#top .box-content {
	padding: 0px;
	background: transparent;
	border: 0px none;
}

#top .box-titre {
	display: none;
}

#top .box-footer {
	display: none;
}

/* @end */

/* @group footer */

#footer p {
	margin: 0;
	padding: 0;
}

#footer .box-content {
	padding: 0px;
	background: transparent;
	border: 0px none;
}

#footer .box-titre {
	display: none;
}

#footer .box-footer {
	display: none;
}

/*

 @end */

/* @group content */

#ln_1 {
	padding: 0;
	background-repeat: repeat-y;
}

* html #ln_1{
	float:left;	
}
*+html #ln_1 {
	float:left;	
}

.pagination {
	margin-bottom: 2px;
}

.box-content p {
	margin: 0;
	padding: 3px;
}

/* @end */

/* @group articles */

.article {
	margin-top: 5px;
	padding: 0 0 0 0;
	font-size: 1.2em;
	line-height: 1.4;
}

.article font {
	line-height: normal;
}

.contenuArticle {
	padding: 0px 0px 5px 5px;
	margin: 0px;
	text-align: justify;
}

.divTitreArticle h2 {
	border: 0;
	font-weight: bold;
	margin: 10px 0 5px 0;
	padding: 7px 0px 4px;
	font-size: 1.6em;
}

.divTitreArticle h2 a {
	text-decoration: none;
}

.topic {
	
}

.contenuArticle img {
	border-style: solid;
	border-width: 0px;
	padding: 0px;
	background-color: #494949;
	border-color: #3A3A3A;
}

.contenuArticle img.GcheTexte {
	float: left;
	margin: 3px 10px 3px 0;
}

.beforeArticle {
	padding: 0;
	margin: 25px 0 0 0;
	width: 100%;
	text-align: right;
	border-bottom: 1px solid #3D3D3D;
}

.cl ul {
	margin: 0;
	padding: 0;
}

.contenuArticle, .extrait {
	
}

.contenuArticle p {
	margin: 10px 0;
	padding: 0;
}

.contenuArticle ul {
	margin: 10px 15px;
	padding: 0;
}
.contenuArticle ol {
	margin: 10px 15px;
	padding: 0;
}

.contenuArticle ul li {
	margin: 0;
	padding: 0;
	background-repeat: no-repeat;
	background-position: 0 4px;
}

.extraitArticle {
	margin-top: 10px;
	margin-bottom: 20px;
}

.hrExtrait {
	display: none;
}

.afterArticle, .plusExtrait {
	margin: 0px;
	padding: 6px 0 2px 0;
	font-size: .95em;
	text-align: right;
}

.afterArticle a {
	text-decoration: underline;
}

.afterArticle a:hover {
	text-decoration: none;
}

.afterReactions {
	margin-top: 20px;
	padding: 2px 10px 2px 0px;
	font-size: 1.1em;
}

/* @end */

/* @group sidebar */

.box {
	font-size: 1.1em;
	line-height: 1.3;
	margin: auto auto 15px;
	padding: 0pt 15px 10px;
	background-repeat: repeat-x;
	background-position: bottom;
	background-color: #f1dabe;
}

.box.pub {
	padding-left: 0;
	padding-right: 0;
}

.box.pub .box-titre {
	padding-left: 15px;
	padding-right: 15px;
}

.box.pub .box-content h2 {
	font: bold 12px 'Trebuchet MS', Arial, Helvetica, sans-serif;
}

.box.pub .box-content div div h2, .box.pub .box-content div div div {
	padding: 0 10px;
}

.box li a, .box li a:hover {
	color: #000000;
}

.box h2 {
	text-transform: uppercase;
	font-size: 18px;
	line-height: 20px;
	color: #FFF;
}

.box img {
	background: #FFF;
}

.box-titre {
	padding-bottom: 5px;
}

.box li {
	list-style-type: none;
}

.box li {
	border-bottom-color: #3D3D3D;
}

.box li:hover {
	background-color: #ffffff;
}

.box.articlerecent li,
.box.articlerecent li:hover,
.box.album li,
.box.album li:hover,
.box.categorie li,
.box.categorie li:hover,
.box.commentrecent li,
.box.commentrecent li:hover,
.box.archive li ,
.box.archive li:hover {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	display: block;
	padding: 2px 5px 5px 5px;
	text-decoration: none;
}

.box.articlerecent a,
.box.album a,
.box.categorie a,
.box.commentrecent a,
.box.archive a {
	text-decoration: none;
}

.box li a.newWindow {
	border: 0;
	display: inline;
	padding: 0;
}

.box-content ul {
	margin: 10px 0;
}

.box .box-footer {
	display: none;
}

.box.presentation {
	line-height: 1.4;
}

.box.presentation a, .box.presentation a:hover {
	text-decoration: underline;
	border: 0;
	padding: 0;
	background: none;
}

.box.presentation h3 {
	margin: 5px 0pt;
	text-transform: uppercase;
	font-size: 1.3em;
}

.box.presentation h3 a {
	text-decoration: none;
}

.listAll em {
	font-style: normal;
	text-transform: capitalize
}

.listAll a {
	text-decoration: underline;
}

/* calendrier */

.box.calendrier {
	padding-left: 0;
	padding-right: 0;
}

.box.calendrier .box-titre {
	padding-left: 15px;
	padding-right: 15px;
}

.calendarTable1 {
	width: 100%;
	font-size: .9em;
}

.calendarTable1 {
	padding: 0;
}

.calendarTop1 {
	background-color: #ffffff;
}

.calendarHeader1 {
	background-color: #ffffff;
}

.calendarDays1 {
	background-color: #ffffff;
	color: #000000;
}

.calendarTable1 {
	background: transparent;
}

.calendarToday1, .calendarToday1 a, .calendarToday1 a:hover {
	color: #000;
}

/* recommander */
.linkRecomm {
}

/* album */

.box.album .center, .box.aleaim .center {
	text-align: left !important;
}

/* syndication */

.w3c li a {
	border: 0;
	padding: 0;
}

.w3c li a:hover {
	background: transparent;
}

/* recherche */

.box.recherche input {
	padding: 3px 4px;
}

.box.recherche input.button {
	padding: 1px 5px;
	border-width: 1px;
}

/* @end */

/* @group comments */

.afterReactions .spanAddComment, input.button, .afterReactions a {
	color: #FFF;
}

.commentMessage {
	margin: 0 5px 0 5px;
	padding: 4px 7px 4px 7px;
}

.commentOption {
	text-align: right;
	margin-bottom: 10px;
	padding: 1px 10px 2px 10px;
	color: #9c9c9c;
}

.commentMessage {
	background-color: #353535;
}

.commentOption a {
	color: #9c9c9c;
}

.commentMessage {
	margin: 0px;
	padding: 10px;
	font-size: 1.1em;
	line-height: 1.2em;
	border: 0;
}

.responseMessage, .responseOption {
	margin-left: 20px;
}

.commentOption {
	text-align: right;
	margin-bottom: 10px;
	padding: 3px 5px 2px 5px;
	background-repeat: repeat-x;
	font-size: 10px;
}

h2.h2commentMessage {
	margin: 10px 0 5px 0;
	font-size: 16px;
	color: #FFF;
}

.afterReactions .spanAddComment {
	font-size: 1.1em;
	text-transform: capitalize;
	font-weight: bold;
	padding: 3px 5px;
}

.afterReactions .spanAddComment a {
	text-decoration: none;
}

#miniGlobal {
	margin-top: -10px;
	font-size: 1.1em;
}

#miniGlobal .center {
	margin: 10px;
}

#miniGlobal h2 {
	font-size: 1.6em;
}

#img_key {
	vertical-align: middle;
}

/* @end

 */

/* @group list all */

.resumeArticle {
	margin-top: 5px;
}

.listArticles {
	font-size: 1.2em;
	line-height: 1.3em;
	padding: 10px 0;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}

.listArticles a, .listArticles a:hover {
	font-weight: bold;
	text-decoration: underline;
}

.listArticles a:hover {
	font-weight: bold;
	text-decoration: underline;
}

.listArticles a, .listArticles a:hover {
	font-size: 1em;
	font-weight: bold;
	text-decoration: underline;
}

/* @end */

/* @group misc */

#ln_2 {
	background-repeat: no-repeat;
}

#cl_1_1, #cl_1_2, #cl_1_0 {
	position: relative;
}

#debug_hidden {
	display: none;
}

.GcheTexte {
	float: left;
	margin: 3px;
}

.DrteTexte {
	float: right;
	margin: 3px;
}

.CtreTexte {
	margin: 3px auto;
	display: block;
}

.hitcitation {
	font-style: italic;
	text-align: justify;
	padding: 5px 20px;
	background: transparent !important;
}

.hitencart {
	text-align: justify;
	font-weight: bold;
	margin: 5px 0px;
	padding: 5px 5px;
}

.hitimportant {
	font-weight: bold;
	font-weight: bold;
	font-size: 120%;
}

.hitperso1 {
	font-style: italic;
}

.hitperso2 {
	font-weight: bold;
}

#legals {
	padding: 20px 0;
}

/* @end */

/* @group right clic menu */

#menuClicDroit {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 500;
	visibility: hidden;
	background-color: #ffffff;
	border: 1px solid #3A3A3A;
	padding: 5px;
	color: #000000;
}

#menuClicDroit li {
	list-style-type: none;
	margin: 0px;
	padding: 0px
}

#menuClicDroit ul {
	margin: 0px;
	padding: 0px
}

#menuClicDroit a {
	color: #000000;
}

/* @end */

/* @group list all */

.resumeArticle {
	background: transparent;
}

.listArticles {
	border-color: #3D3D3D;
}

/* @end */

/* @group pagination */

.pagination {
	margin-top: 10px;
	margin-bottom: 30px;
}

.pagination b.currentPage {
	color: #FFF;
}

.nextPage, .textNext, .previousPage, .textPrevious,.textLast,.textFirst {
	border: 1px solid #3D3D3D;
	border-top-color: #525252;
	text-decoration: none;
	background: #ffffff;
	padding: 3px;
	text-transform: uppercase;
}

/* @end */

/* @group search */

.divTitleSearch h2 {
	color: #FFF;
	margin-bottom: 4px;
}

.divSearchConcepts {
	font-size: 12px;
	margin-bottom: 10px;
}

.divSearchConcepts h3, h3.searchResultsTitle {
	font: normal 12px Arial, Helvetica, sans-serif;
}


.searchResult {
	padding: 10px 0 0 0;
	font-size: 11px;
	color: #CCC;
}

.searchResult div {
	color: #FFF;
	font-size: 12px;
}

.searchResult h3, .divSearchResults h3 {
	font-size: 13px;
	margin-bottom: 4px;
}



.error {
border:2px dashed red;
color:red;
display:block;
font-weight:bold;
margin:3px;
padding:5px;
text-align:center;
}


.ok {
border:2px dashed #00CC99;
color:#00CC99;
display:block;
font-weight:bold;
margin:3px;
padding:5px;
text-align:center;
}
/* @end */


/* common article struct  7 */
#cl_0_0 {
	margin-bottom: 0;
}

#cl_1_0	{
	width:630px;
}

#cl_1_1 {
	margin-top: -15px;
}

.box {
	width: auto;
}

#global {margin:20px auto;}/*----------------------------------------------------------------------------*/
/* Variation                                                                  */
/*----------------------------------------------------------------------------*/
/* yellow common screen */

/* @group colors */

a,
.box.presentation a,
.box.presentation li a,
.box .listAll a,
.box.concours a,
.titreArticle,
.infoExtrait,
.titreArticle,
.divTitreArticle h2,
.divPageTitle h2,
.titreExtrait a,
a.linkRecomm,
.presentation h3 a,
.listArticles a,
#miniGlobal h2,
.newWindow a,
.box a,
.box a:hover {
	color: #272727;
}

.calendarToday1 {
	background-color: #272727;
}
.calendarToday1, .calendarToday1 a, .calendarToday1 a:hover {
	color: #FFF;
}


a:hover,
.box.presentation a:hover,
.box.presentation li a:hover,
.box .listAll a:hover,
.box.concours a:hover,
.titreArticle:hover,
.presentation h3 a:hover,
.listArticles a:hover,
.titreArticle:hover,
.titreExtrait a:hover,
.newWindow a:hover,
a.linkRecomm:hover {
	color: #fde465;
}

input.button, input.hitSubmit, input.submit, .afterReactions .spanAddComment, .afterReactions .spanAddTrackback {
	background-color: #fad202;
	border-color: #f5da4e;
}

/* @end */

#header {
	background: transparent;
	background-image: url(http://www.noelshack.com/up/aac/bannire1-4b41855823.jpg);
}

.contenuArticle ul li {
/*	background-image: url(http://fdata.over-blog.net/99/00/00/01/designs/267/yellow/pics/bullet.gif);*/
}

.pageContent ul li {
/*	background-image: url(http://fdata.over-blog.net/99/00/00/01/designs/267/yellow/pics/bullet.gif);*/
}

.afterReactions .spanAddComment, .afterReactions .spanAddTrackback, input.button {
	background-image: url(http://fdata.over-blog.net/99/00/00/01/designs/267/yellow/pics/bg-button.gif);
}

.box {
	background-image: url(http://www.noelshack.com/up/aac/bordures-939c165e4-d901c29e1.jpg);
}

input, textarea {
	background-image: url(http://fdata.over-blog.net/99/00/00/01/designs/267/yellow/pics/bg-field.gif);
}

.commentOption {
	background-image: url(http://fdata.over-blog.net/99/00/00/01/designs/267/yellow/pics/bg-comment-meta.gif);
}

.concours a img {border: 0px; background: transparent; margin: 0px;}
.concours {padding-right: 0px;}


/* ray article 7 */

#ln_1 {
	background-image : url(http://www.noelshack.com/up/aac/fond-d52a065258.jpg) ; background-repeat:no-repeat;background-position:center;background-attachment:fixed;}
}

#top {
	background-image: url(http://www.noelshack.com/up/aac/bannire2-9c8ec6840.jpg);
}

#header {
	font-size: 1.2em;
	background-repeat: no-repeat;
	background-position: top;
	min-height: 167px;
	height:auto!important;
	height:167px;
	
	background: transparent;
	background-image: url(http://www.noelshack.com/up/aac/bannire1-0cc807de13.png);
}

#ln_2 {
	background-image: url(http://fdata.over-blog.net/99/00/00/01/designs/267/yellow/pics/bg-sidebar-bottom_7.gif);
	background-position: right top;
	padding:20px 0 5px 10px;
}



/* @group user */

body {
	background-color: #000000;
	color: #000000;
	font-family: Arial,Helvetica,sans-serif;
}

a {
	color: #272727;
}

#top {
	padding: 20px 20px 30px;
	text-align: left;
	color: #FFF;
}

#footer {
	
}

.box-titre {
	padding-bottom: 5px;
}

.beforeArticle {
	padding: 0;
	margin: 25px 0 0 0;
	width: 100%;
	text-align: right;
	border-bottom: 1px solid #3D3D3D;
}

.article {
	margin-top: 5px;
	padding: 0 0 0 0;
	font-size: 1.2em;
	line-height: 1.3;
}
.contenuArticle {
	padding: 0px 0px 5px 5px;
	margin: 0px;
	text-align: justify;
}

.beforePage {
	padding: 0;
	margin: 25px 0 0 0;
	width: 100%;
	text-align: right;
	border-bottom: 1px solid #3D3D3D;
}

.page {
	margin-top: 5px;
	padding: 0 0 0 0;
	font-size: 1.2em;
	line-height: 1.3;
}

.date {
	
}

.titreArticle {
	
}

.box-content {
	
}

.box {
	margin: auto auto 15px;
	background-color: #ffffff;
}

.commentMessage {
	
}

.commentOption {
	font-size: 10px;
	color: #9c9c9c;
}

.extraitArticle {
	
}

.dateExtrait {
	
}

.extrait {
	
}

.plusExtrait {
	
}

/* @end */


Je vous remercie d'avance ! =)
Alexis
Modifié par Dino57 (07 Jan 2010 - 21:46)
J'aimerais pouvoir t'aider Alexi, d'autant plus que ton blog est super sympa, mais le code est vraiment imbuvable désolé, mais rien qu'aux vues du nombre de scroll, ça me fait mal aux cervicales.
Tente de mettre ton code entre les balises code sans quoi tu vas te faire gronder Smiley cligne

P.S: pour ma part, sur la banière du haut, j'ai la banière supérieure, et dessous tout contre, j'ai le haut de la même bannière et non celle que tu as lié dans ton post du dessus Smiley ohwell

sous firefox
Modifié par chooky (07 Jan 2010 - 21:37)
Woops désolé pour le code, et merci pour le compliment ^^
Oui, justement, c'est ça le problème. La deuxième image que j'ai lié, c'est celle qui est censée être placée au bon endroit, mais qui, pour une raison inconnue, n'apparait pas ^_^
Sujet clos
Aller à