28173 sujets

CSS et mise en forme, CSS3

[résolu] Deplacement d'un div

voilà j'essaie de faire une page avec des boites flottantes car mon porbleme c'est de centralisé ma page pour qu'elle s'affiche avec different navigateur et sous plusieurs résolution. Je débute et c'est un peu confus dans ma tete, j'ai essayé de faire un en-tete avec photo et dessous le divisé en trois partie, une partie gauche à 25% une partie centrale 50% et une partie droite 25% . Mais j'arrive pas à caler ma partie centrale au milieu des deux de coté. Si quelqu'un pouvait m'aider car là je comprends pas, comment faire. A moins que vous ayez d'autres solutions de mise en page.
Voilà ma page :


<html>
<head>
<title>ma page d'accueil</title>

<style type="text/css" title="premier" media="all">

body { font-family: georgia, "time new roman", times, serif; font-size: 90%; background-color: #e7fbfb; line-height: 100%; text-align: center; margin: 0px }

#page { margin-left: auto; margin-right: auto; width: 800px; text-align: left; position relative }
#en_tete { background-color: #43f7f7; position: relative; height: 127 }
#navigation { font-size: 9px;line-height: 16px; background-color: #43f7f7; text-align: center; letter-spacing; 6px; margin-bottom: 15px; height: 16px }
#textedefilant { background-color: #43f7f7; position: relative }

#categorie { background-color: #3bdcdc; text-align: center; position: relative; width: 25%; float: left; padding: 5px; }

#partiecentrale { background-color: #43f7f7; position: relative; width: 50%; float: left; }
#information { background-color: #3bdcdc; font-size: 75%; position: relative; width: 25%; float: right; padding: 5px; }

a:link { text-decoration: none}
a:visited { text-decoration: none;}
a:hover { text-decoration: underline; background-color: #fefefe }

ul { color: #1216d6 }

</Style>
</head>
<body>
<div id="page">
<div id="en_tete"><img src="magasin_800par127.jpg" alt="photo magasin"></div>
<div id="navigation"><a href="/magasin/plan.bmp">plan d'accés</a> | <a href="mail">nous contacter</a></div>
<div id="textedefilant"></div>

<div id="categorie">

<strong>Catégorie</strong><br><br>
<a href="/dvd/comédie/2006/janvier_2006/comédiejanvier.html">Comédie</a>
<br>
<a href="/dvd/drame/Drame.html">Drame</a>
<br>
<a href="/dvd/fantastique/fantastique.html">Fantastique</a>
<br>
<a href="/dvd/frisson/frisson.html">Frisson</a>
<br>
<a href="/dvd/science_fiction/science_fiction.html">Science fiction</a>
<br>
<a href="/dvd/thriller/thriller.html">Thriller</a>
<br>
<a href="/dvd/spectacle/spectacle.html">Spectacle</a><br>
<a href="/dvd/emotion/emotion.html">Emotion</a><br>
<a href="/dvd/famille_et_enfant/famille_et_enfant.html">Famille & enfant</a><br>
<a href="/dvd/action/action.html">action</a><br>
<a href="/dvd/animation/animation.html">Animation</a><br>
<a href="/dvd/guerre/guerre.html">Guerre</a><br>




</div>


<div id="partiecentrale">recherche
<p align="center"><h3><strong>NOUVEAUTES</strong></h3></p>

<image src="/web/petite_vignette/action/le_transporteur_2.jpg"/>
<image src="/web/petite_vignette/animation/madagascar.jpg"/>
<image src="/web/petite_vignette/comedie/mr_et_mrs_smith.jpg"/>
<image src="/web/petite_vignette/famille/charlie_et_la_chocolaterie.jpg"/>
<image src="/web/petite_vignette/fantastique/les_4_fantastiques.jpg"/>
<image src="/web/petite_vignette/frisson/la_maison_de_cire.jpg"/>
</div>

<div id="information">
<p align="center"><u>Horaires d'ouvertures</u><br>
<em>Du lundi au vendredi : <br>
10h00-12h30 et 15h00-20h30<br>
Samedi :<br>10h00-12h30 et 14h30-21h00<br>
dimanche :<br>
10h00-12h00</em></p>


<p><u>forfait locations</u>

<ul><li>5 locations 15,00 euros, valable 1 mois</li>
<li>10 locations 33,50 euros, valable 6 mois</li>
<li>25 locations 76,euros, valable 6 mois </li></ul>
<span style="color: #952c10"><strong><em>Toutes les locations s'étendent sur 24 heures retour avant 20 heures.<br>
Location du samedi retour le lundi avant 20 heures.</em></strong></span></p>

</div></div>


</body>
</html>
Modifié par jobrousse (10 Feb 2006 - 22:59)
bonjour, désolé mais j'en perds mon latin.

je suis tellement ds les codes, que je suis déboussolé, j'en oublie la politesse et je m'en excuse encore, j'ai lu les regles et je ne vois pas comment je dois editer, je ne vois pas d'icone qui fasse ça, si tout le monde est comme moi, et il ne vous reste plus de cheveux sur la tête, lol. Je suis longue à démarrer, mais je veux avancer. Alors si je peux avoir d'autres indications, merci
[code]<html>
<head>
<title>ma page d'accueil</title>

<style type="text/css" title="premier" media="all">

body { font-family: georgia, "time new roman", times, serif; font-size: 90%; background-color: #e7fbfb; line-height: 100%; text-align: center; margin: 0px }

#page { margin-left: auto; margin-right: auto; width: 800px; text-align: left; position relative }
#en_tete { background-color: #43f7f7; position: relative; height: 127 }
#navigation { font-size: 9px;line-height: 16px; background-color: #43f7f7; text-align: center; letter-spacing; 6px; margin-bottom: 15px; height: 16px }
#textedefilant { background-color: #43f7f7; position: relative }

#categorie { background-color: #3bdcdc; text-align: center; position: relative; width: 25%; float: left; padding: 5px; }

#partiecentrale { background-color: #43f7f7; position: relative; width: 50%; float: left; }
#information { background-color: #3bdcdc; font-size: 75%; position: relative; width: 25%; float: right; padding: 5px; }

a:link { text-decoration: none}
a:visited { text-decoration: none;}
a:hover { text-decoration: underline; background-color: #fefefe }

ul { color: #1216d6 }

</Style>
</head>
<body>
<div id="page">
<div id="en_tete"><img src="magasin_800par127.jpg" alt="photo magasin"></div>
<div id="navigation"><a href="/magasin/plan.bmp">plan d'accés</a> | <a href="mail">nous contacter</a></div>
<div id="textedefilant"></div>

<div id="categorie">

<strong>Catégorie</strong><br><br>
<a href="/dvd/comédie/2006/janvier_2006/comédiejanvier.html">Comédie</a>
<br>
<a href="/dvd/drame/Drame.html">Drame</a>
<br>
<a href="/dvd/fantastique/fantastique.html">Fantastique</a>
<br>
<a href="/dvd/frisson/frisson.html">Frisson</a>
<br>
<a href="/dvd/science_fiction/science_fiction.html">Science fiction</a>
<br>
<a href="/dvd/thriller/thriller.html">Thriller</a>
<br>
<a href="/dvd/spectacle/spectacle.html">Spectacle</a><br>
<a href="/dvd/emotion/emotion.html">Emotion</a><br>
<a href="/dvd/famille_et_enfant/famille_et_enfant.html">Famille & enfant</a><br>
<a href="/dvd/action/action.html">action</a><br>
<a href="/dvd/animation/animation.html">Animation</a><br>
<a href="/dvd/guerre/guerre.html">Guerre</a><br>




</div>


<div id="partiecentrale">recherche
<p align="center"><h3><strong>NOUVEAUTES</strong></h3></p>

<image src="/web/petite_vignette/action/le_transporteur_2.jpg"/>
<image src="/web/petite_vignette/animation/madagascar.jpg"/>
<image src="/web/petite_vignette/comedie/mr_et_mrs_smith.jpg"/>
<image src="/web/petite_vignette/famille/charlie_et_la_chocolaterie.jpg"/>
<image src="/web/petite_vignette/fantastique/les_4_fantastiques.jpg"/>
<image src="/web/petite_vignette/frisson/la_maison_de_cire.jpg"/>
</div>

<div id="information">
<p align="center"><u>Horaires d'ouvertures</u><br>
<em>Du lundi au vendredi : <br>
10h00-12h30 et 15h00-20h30<br>
Samedi :<br>10h00-12h30 et 14h30-21h00<br>
dimanche :<br>
10h00-12h00</em></p>


<p><u>forfait locations</u>

<ul><li>5 locations 15,00 euros, valable 1 mois</li>
<li>10 locations 33,50 euros, valable 6 mois</li>
<li>25 locations 76,euros, valable 6 mois </li></ul>
<span style="color: #952c10"><strong><em>Toutes les locations s'étendent sur 24 heures retour avant 20 heures.<br>
Location du samedi retour le lundi avant 20 heures.</em></strong></span></p>

</div></div>


</body>
</html>


bon voilà je crois que c'est bon Smiley cligne
donc avec IE tout est bon mais avec firefox rien n'est calé et en plus les images ne s'affiche pas, et je comprends pas pourquoi ?
j'y suis arrivé, ouf... Smiley langue
Sujet clos
Aller à