28172 sujets

CSS et mise en forme, CSS3

Bonjour les Foromeurs...

Mon Site (http://www.creusotvs.com) est construit en tableau...

J'ai un présentation type diaporama que j'ai trouvé sur le Web mais je ne sais pas l'insérer en tableau, juste le css est indiqué, et je ne m'y connais pas du tout...

Ma Page Test est ici, qui fonctionne bien sous 1280x1024 mais décalée sur mon MSI Wind 1024x600 sous IE, Firefox et Safari...

Voilà mon css:

	body {
		position: absolute;
		margin: 0px;
		padding: 0px;
		background: #111;
		width: 100%;
		height: 100%;
	}
	#center {
		position: absolute;
		left: 340px;
		top: 0px;
	}
	#slider {
		position: absolute;
		width: 720px;
		height: 333px;
		top: 295px;
		overflow: hidden;
		background: #000;
		border: 20px solid #000;
	}
	#slider .slide {
		position: absolute;
		top: 0px;
		height: 333px;
		width: 500px;
		background: #000;
		overflow: hidden;
		border-left: #000 solid 1px;
		cursor: default;
	}
	#slider .title   {
		color: #FF9900;
		font-weight: bold;
		font-size: 1.2em;
		margin-right: 1.5em;
		text-decoration: none;
	}
	#slider .backgroundText {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 100%;
		background: #000;
		filter: alpha(opacity=70);
		opacity: 0.4;
	}
	#slider .text {
		position: absolute;
		top: 1%;
		top: 100%;
		color: #FFF;
		font-family: verdana, arial, Helvetica, sans-serif;
		font-size: 0.8em;
		text-align: justify;
		width: 400px;
		left: 10px;
	}
	#slider .diapo {
		position: absolute;
		filter: alpha(opacity=100);
		opacity: 1;
		visibility: hidden;
	}


Et le Code pour insérer mon diaporama:

<div id="center">
	<div id="slider">
					<div class="slide">
			<a href="http://ealecreusot.free.fr/topic/index.html">
			<img class="diapo" src="img/ealc.jpg" alt="" style="border-color: #000000"></a>
			<div class="text">
				  <span class="title">EA Le Creusot</span>
				  L'Entente Athlétique Le Creusot est le Club d'athlétisme du Creusot,
				  club organisateur entre autre des 10km du Creusot et du Trail des 3
				  Châteaux.
			</div>
		</div>		<div class="slide">
			<a href="http://www.fftri.com/">
			<img class="diapo" src="img/fftri.jpg" alt="" style="border-color: #000000"></a>
			<div class="text">
				  <span class="title">FF Tri</span>
				  Site Officiel de la Fédération Francaise de Triathlon, Sport en plein
				  essor qui allie les 3 disciplines que sont la Natation, le Vélo et la
				  Course à Pied.
			</div>
		</div>		<div class="slide">
			<a href="http://www.livefoot.fr/">
			<img class="diapo" src="img/livefoot.jpg" alt="" style="border-color: #000000"></a>
			<div class="text">
				  <span class="title">Live Foot</span>
				  Vivez l'actualité du Ballon rond en temps réel. Soyez averti à la minute
				  près de l'évolution du score des grands match de football dans le monde.
			</div>
		</div>		<div class="slide">
			<a href="http://www.onlinetri.com/">
			<img class="diapo" src="img/onlinetri.jpg" alt="" style="border-color: #000000"></a>
			<div class="text">
				  <span class="title">OnlineTri</span>
				  Site généraliste ayant une grande communauté d'adeptes du Triple
				  effort avec un Forum très vivement et des News concernant
				  notamment les athlètes de haut niveau de la discipline.
			</div>
		</div>		<div class="slide">
			<a href="http://www.rugbyrama.fr/">
			<img class="diapo" src="img/rugbyrama.jpg" alt="" style="border-color: #000000"></a>
			<div class="text">
				  <span class="title">Rugbyrama</span>
				  Site d'actualité concernant le ballon oval, avec les résultats en temps
				  ainsi que toutes les nouveautés concernant ce Sport.
			</div>
		</div>		<div class="slide">
			<a href="http://www.sport24.com">
			<img class="diapo" src="img/sport24.jpg" alt="" style="border-color: #000000"></a>
			<div class="text">
				  <span class="title">Sport 24</span>
				  Toute l'actualité sur tous les Sports, tous les résultats, toutes les infos,
				  ainsi que des interviews des sportifs en vue du moment.
			</div>
		</div>
	</div>
</div>


Y a t il une solution pour placer idéalement mon diaporama pour qu'il ne soit pas décalé sur les différents navigateurs et dans les différentes résolutions...

Pour moi, l'idéal serait de pouvoir le placer dans un tableau à l'intérieur de mon Site...

Si quelqu'un pouvait m'aider, ce serait sympa...
Modifié par temsys (07 Mar 2009 - 12:30)