28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Et bien c'est tristement que je viens vers vous.... après plusieurs heures à lire / tester divers tutoriaux je ne m'en sors pas.

Voilà ma page : http://www.family-system.org. Sur cette page un conteneur, une image à gauche et du texte à droite.
Ce que je veux : que l'image, donc l'affiche de notre prochain spectacle, suive le mouvement de l'ascenseur. Sous Firefox et Opéra ok et ceci grâce à vos tutoriaux.

Par contre depuis cette modif bug sous IE... comprends pas comprends pas comprends pas...
Je précise que je n'ai pas IE sur ma machine, juste le moteur IeTab dans Firefox.

Voilà ma page : il y a sans doute d'autres erreurs mais je n'ai pas vraiment le temps en ce moment de tout prendre en compte, de plus elle n'est pas de moi à la base.

EDIT : bon après validation de la feuille de style et la page sont valides.... mais toujours ce problème avec IE. Oui j'ai un souci avec les accents mais ce n'est pas le plus important pour le moment !



<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
    'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr' lang='fr'>
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see  www.w3.org"  /><!-- ****  **** -->
<!-- musiques actuelles, musiques du monde, chanson fran?aise, concert, festival, bretagne, &acutev&acutenementiel, c?tes d'armor, dinan, saint malo, dinard, la richardais, family system, entrepotes, dieze -->
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta http-equiv='Content-Language' content='fr' />
<meta name='keywords' content='family, system, musiques actuelles, musiques du monde, chanson fran?aise, concert, festival, bretagne, ?v?nementiel, ille et vilaine, c?tes d armor, dinan, saint malo, dinard, la richardais, family system' />
<meta name='description' content='Diversit? - cr?ativit? - ?change - plaisir' />
<meta name='Author' content='L instit' />
<meta name='Identifier-URL' content='http://www.family-system.org' />
<meta name='category' content='musiques actuelles, ?v?nementiel, festival, concert' />
<meta name='Copyright' content='Family System' />
<meta name='Revisit-after' content='7 days' />
<meta name='expires' content='never' />
<meta name='Robots' content='all' />
<link rel='SHORTCUT ICON' href='/favicon.ico' />
<title>- - Association Family System - -</title>

<style type='text/css'>
/*<![CDATA[*/



body {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 0.8em;

margin: 0;

padding: 0;

}

#conteneur {

width: 800px;

margin: 0 auto;

}

#centre {

width: 800px;

padding: 50px 20px 20px 20px;

float: left;

display: inline;

}

#pied {

height: 60px;

}

.nom {

font-size : 20px;

font-weight : bold;

color : #000000;

}

.titre {

font-size : 18px;

font-weight : bold;

color : #a23200;

}

.piedpage{

margin: 0 0 0 90px;

clear: both;

}

.surligne{

margin: 0;

padding: 0;

font-weight: bold;

font-size: 12px;

}

.photo{

position : absolute;

width: 283px;

height: 425px;

float: left;

padding-top: 20px;

display: inline;

}

html>body .photo {
position: fixed;

}

#placement{

background-image: url(/logosite.jpg);

background-attachment: fixed;

width: 470px;

margin: 0 0 0 320px;

}

a{

color: #FF9900;

font-weight: bold;

text-decoration: none;

}

a:hover{

color: #FF6600;

font-weight: bold;

text-decoration: none;

}

/*]]>*/
</style>

<style type="text/css">
/*<![CDATA[*/
 p.c1 {text-align: center}
/*]]>*/
</style>
</head>
<body>
<div id='conteneur'>
<div id='centre'>
<div class='photo'><img src='/afficheedito.jpg' alt='Votre prochain spectacle !' /></div>
<div id='placement'>
<p class='nom c1'>- - ASSOCIATION FAMILY SYSTEM - -</p>
<p class='titre'>CONCERT ROCK / METAL - SAMEDI 26 AVRIL</p>
<p><strong>&gt; Et c'est reparti, nouvelle date, nouveau spectacle, avec du gros gros son !!!!</strong></p>
<p><u>Votre soir?e :</u><br />
20H : ouverture des portes<br />
20h30 : <strong>NO PLACE TO HIDE</strong> - Rock/Saint Malo<br />
21h45 : <strong>NO?D</strong> - Rock M?tal/Avranches<br />
23h : <strong>XMAS SOCKS</strong> - Punk Hardcore/Saint Malo<br /></p>
<p><u>Informations pratiques :</u><br />
<strong>Tarif :</strong> 6 euros<br />
<strong>Contact :</strong> <a href='mailto:contact@family-system.org'>contact@family-system.org</a>.<br />
<strong>Trouver La Richardais :</strong> <a href='http://maps.google.fr/maps?f=q&amp;hl=fr&amp;geocode=&amp;q=la+richardais&amp;sll=47.15984,2.988281&amp;sspn=13.297843,29.882813&amp;ie=UTF8&amp;ll=48.609079,-2.035217&amp;spn=0.050508,0.11673&amp;z=13&amp;iwloc=addr' target='_blank'>Suivez le lien pour voir la carte google maps.</a><br /></p>
<!-- fichiers sons et/ou sites ? placer ici-->
<p>Pour d?couvrir ces formations rendez vous sur leurs sites.<br />
<strong>NO?D</strong> : <a href='http://www.myspace.com/noidcrew' target='_blank'>http://www.myspace.com/noidcrew</a><br />
<br />
<strong>NO PLACE TO HIDE</strong> : <a href='http://www.myspace.com/npth' target='_blank'>http://www.myspace.com/npth</a><br />
<br />
<strong>XMAS SOCKS</strong> : <a href='http://www.myspace.com/xmassocks' target='_blank'>http://www.myspace.com/xmassocks</a><br /></p>
<p class='titre'>Chanson, humour, rock, fest-noz ? venir....</p>
<p>Et voici les prochains spectacles ? venir, des dates ? retenir :<br />
&gt; <strong>7 juin :</strong> spectacle comique avec <strong>Jaoset D'lainti</strong> (<a href='http://www.jaosetdlainti.com' target='_blank'>site</a>)<br />
&gt; <strong>28 juin :</strong> Concert gratuit avec plusieurs formations (prog ? venir)<br />
&gt; <strong>26 juillet :</strong> soir?e bretonne : cochon grill? suivi d'un fest noz en plein air et dans la bonne humeur.<br />
&gt; <strong>20 septembre :</strong> non programm?.<br />
&gt; <strong>25 octobre :</strong> Concert rock / ?lectro : <strong>L'Dawa</strong> (rock m?tiss?) <a href='http://www.myspace.com/ldawa'>myspace</a> et <strong>Soleil Cherche Futur</strong> (rock / ?lectro), le nouveau projet de Mehdi et J?r?m des Fouchtra <a href='http://www.myspace.com/fouchtra'>myspace</a>.<br /></p>
&gt; <strong>Les <a href='/forum/' target='_blank'>forums</a>, les <a href='/galerie/' target='_blank'>photos</a> et le <a href='/dot/' target='_blank'>site</a> (en reconstruction) c'est par ici  [cligne]</strong><br />
&gt; <a href='http://www.myspace.com/assofamilysystem' target='_blank'><strong>Le myspace de l'asso</strong></a><br />
<br /></div>
</div>
<div id='pied'>
<p class='piedpage'>\\ Family System - Mairie, 1 place de la R?publique - 35780 La Richardais - 06 10 74 22 22 //</p>
<!-- place pour pubs et supports -->
<p class='c1'><!-- Lien sur  www.webbreton.com  -->
 <a href='http://www.webbreton.com/gestion/in.php?url_id=4609' target='_blank'><img src='http://www.webbreton.com/images/webbreton.png' alt='www.webbreton.com' border='0' /> <!-- lien vers  www.viaouest.com  --></a> <a href='http://www.viaouest.com' target='_blank'><img src='http://www.viaouest.com/IMG/100x20M.gif' alt='www.viaouest.com' border='0' /></a></p>
<!-- fin des pubs et supports --></div>
</div>
</body>
</html>

Modifié par Family System (19 Feb 2008 - 21:40)
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Bon normalement c'est ok, voilà ce que j'ai remis en place :

.photo{

width: 283px;

height: 425px;

float: left;

padding-top: 20px;

display: inline;


J'avais cumulé position : absolute et float.... hum...

Par contre avec IE les images restent toujours en place, et me reste encore les accents à transformer.
Modifié par Family System (19 Feb 2008 - 21:39)