28173 sujets

CSS et mise en forme, CSS3

Pages :
Bonjour

J'ai besoin d'aide mon background ne veux pas se repeter pourtant j'ai mis repeat-y mais sa marche pas voici ma css le bloc pour le background se nomme .bas et sur ce background j'ai mis 2 colonnes une a gauche et une a droite elles s'apellent .colonnegauche .colonnedroite

VOICI L'adresse du site

[code] 
 /* body */

body, html {
scrollbar-face-color: #ffffff;
scrollbar-arrow-color: #898989;
scrollbar-shadow-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-track-color: #ffffff;
scrollbar-3dlight-color: #ffffff;


margin: 0px;
padding: 0px;
background-color:#FEFEFE;
font-size: 7pt; color:#000000; font-family: Tahoma; font-weight: normal}





/******* design *******/

.layout {
position:absolute;
	top: 0px;
	left: 45px;
	margin: 0px;
	padding: 0px;
	z-index: 100;
background: url(../design/haut.jpg) no-repeat;
width: 800px;
height: 405px;
text-align: left;
}

.bas {
position:absolute;
	top: 404px;
	left: 45px;
	margin: 0px;
	padding: 0px;
	z-index: 100;
background: url(../design/bas.gif) repeat-y ;
width: 800px;
height: 396px;
text-align: left;
}
.colonnegauche {
position:absolute;
	top: 7px;
	left: 70px;
	margin: 0px;
	padding: 0px;
	z-index: 100;
	background-attachment: fixed;
	font-family:verdana;
font-size:8px;
color:#000000;
font-weight:bold;
width: 210px;
height: AUTO;
text-align: left;
}

.colonnedroite {
position:absolute;
	top: 7px;
	left: 286px;
	margin: 0px;
	padding: 0px;
	z-index: 100;
	background-attachment: fixed;
	
width: 474px;
height: AUTO;
text-align: left;
}

.footer {
position:absolute;
	top: 766px;
	left: 45px;
	margin: 0px;
	padding: 0px;
	z-index: 100;
background: url(../design/footer.jpg) no-repeat;
width: 800px;
height: 80px;
text-align: left;
}

.footertexte {
position:absolute;
top: 18px;
left: 332px;
margin: 0px;
padding: 0px;
z-index: 100;
font-family:verdana;
font-size:8px;
color:#FFFFFF;
font-weight:bold;
width: 419px;
height: 42px;
text-align: left;
}

.maj {
position:absolute;
	top: 326px;
	left: 538px;
	margin: 0px;
	padding: 0px;
	z-index: 100;
width: 136px;
height: 69px;
text-align: left;
}

/************** zone cliquable **************/
#zone1 {    
float: left;
width : 84px;
height: 15px;
margin-left: 80px;
margin-top: 30px;
}

#zone2 {    
float: left;
width : 84px;
height: 15px;
margin-left: 15px;
margin-top: 30px;
}
#zone3 {    
float: left;
width : 84px;
height: 15px;
margin-left: 15px;
margin-top: 30px;
}

#zone4 {    
float: left;
width : 84px;
height: 15px;
margin-left: 15px;
margin-top: 30px;
}

#zone5 {    
float: left;
width : 84px;
height: 15px;
margin-left: 15px;
margin-top: 30px;
}

#zone6 {    
float: left;
width : 84px;
height: 15px;
margin-left: 15px;
margin-top: 30px;
}



/************** couleurs fonts liens **************/
a:link, a:visited{
	color: #B7B7B7;
	text-decoration: none;
	
}

a:hover{
	color: #C7D800;
	text-decoration: none;
}

Modifié par pauline24030 (09 Jan 2006 - 18:00)
Salut,
pourquoi tu mets des z-index: 100 partout? à quoi servent ils?
Tu px pas mettre tjs les même z-index, peut-être que ton prob vient de là.
sa a rien changer c tjs pareil c bizarre car mes colonnes se repetent mais l'image bas.gif non$
Modifié par pauline24030 (08 Jan 2006 - 12:57)
Tu integres avec dreamweaver en wysiwyg peut-être?
Les z-index s'il n'y a pas superposition de bloc ne servent à rien, logique.
Tu as pas mal ed positon absolutye que tu pourrais eviter je pense.
voici le code de mon index


<div class="bas">
	<div class="colonnegauche">	
	<img src="design/colonnegauche/dernieresnews.gif" vspace="2" border="0"/><br/>
	<img src="design/colonnegauche/derniersposts.gif" border="0"/>
	<br/>
	<img src="design/colonnegauche/partenariats.gif" border="0"/>
	<br/>
	<img src="design/colonnegauche/nouslier.gif" border="0"/>
	<br/>

	<img src="design/colonnegauche/stats.gif" border="0"/>
	<br/>
	<img src="design/colonnegauche/disclaimer.gif" border="0"/>
	
	</div>

	<div class="colonnedroite">

	</div>
</div>

<div style="position:absolute; width:136px; height:69px; z-index:1; left: 114px; top: 50px;">
  	<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=			 "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="455" height="245" title="animationhaut">
    <param name="movie" value="design/flash/haut.swf" />
    <param name="quality" value="high" />
    <embed src="design/flash/haut.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="455" height="245"></embed>
  </object>
</div>

<div class="footer">
	<div class="footertexte">
	<?php


	include 'footertexte.php';

	?> 
	</div>
</div> 


lequel je pourrais eviter, oui j'integre avec dreamweaver
Modifié par pauline24030 (08 Jan 2006 - 12:58)
Enleve tes background-attachment: fixed; des 2 colonnes aussi
Appart ça je vois pas d'ou ça peut venir dsl.
Modifié par Hermann (08 Jan 2006 - 13:10)
Salut,
Tu devrais faire attention à ton code html. Il y a deux DOCTYPE, et celui qui est dans le body n'est pas necessaire. Ca pourrat t'aider à mieux tester ta mise en forme CSS.
Mais comment est foutu ton code??
Tu as 3 DOCTYPE 2 body, 2 head...
Tu connais le code html un peu ou pas?
Commence par nettoyer tous ça.
oui je connais le html

j'avais pas vu c ds mes includes c que dreamweaver le met automatiquement
Modifié par pauline24030 (08 Jan 2006 - 15:48)
Ah d'accord j'aurais dû m'en douter, c'est le piege classique
Pourquoi tu veux mettre un backgrd avec tes colonnes qui ont deja une couleur de backgrd
Modifié par Hermann (08 Jan 2006 - 15:52)
Commence par virer provisoirement tes 2 colonnes.
Dans ces cas là il faut proceder par élimination pour voir d'ou vient le prob.
Modifié par Hermann (08 Jan 2006 - 15:56)
Attends tu plaisantes?
Ton fond bas.gif fait 396px de haut et ton div bas aussi!
C'est un peu normal! lol
T'as pas trop cherché qd même !!
Modifié par Hermann (08 Jan 2006 - 16:03)
bonjour, la solution est si evidente que personne ne l'a vu Smiley biggrin

En fait tu dois appliquer ton url en gif sur quelque chose
.bas {

position:absolute;

	top: 404px;

	left: 45px;

	margin: 0px;

	padding: 0px;

	z-index: 100;

background: [b]transparent[/b] url(../design/bas.gif) repeat-y ; [#red]ben voila, ça marche maintenant[#black]

width: 800px;

height: 396px;

text-align: left;

}


ps: ce qui n'empeche pas qu'il faut que tu nettois un peu ton code
Modifié par Philippe (08 Jan 2006 - 16:04)
Ah bon et qu'est ce qui marche Philippe?
La couleur de fond n'est pas obligatoire dans la propriété background.
Pages :