creer un encart a gauche

**le Lun Oct 09, 2006 14:07**

Bonjour

Pour mon site en www. j' aimerai creer un encart a gauche afin de le structurer un peu et y placer des infos, mes partenaires privilégiés....

Je ne trouve pas de reponse...je craque!

Pouvez vous m' aider?

Merci

Charles

**le Lun Oct 09, 2006 14:10**

Bonjour,
Un encart se fait soit par tableau soit par div, comme j'ai lu par ailleurs que tu voulais reprendre ton site, je te conseille de prendre pour modèle les exemple d'alsacreation sur : http://css.alsacreations.com/

@+

**le Lun Oct 09, 2006 14:16**

propriété float:left sur un div

**le Lun Oct 09, 2006 14:17**

Dans ton CSS:

Code: Tout sélectionner: #encart { float:left; width:160px; }

Dans tes pages :

Code: Tout sélectionner: <div id="encart"> <a href="lien1">lien1</a><br /> ... <a href="lienx">lienx</a><br />

...ça fait un bon début.

De plus amples détails sur alsacreations comme le souligne serval2a

edit: grillé par mon kiwi préféré, avec néanmoins le souci du détail pour argument

**le Lun Oct 09, 2006 14:21**

ok, soit, alors je vais preciser

#encart { float:left; width:160px; margin-right:10px}
pour ne pas que le texte soit collé à l'encart si image de 160px par exemple

**le Lun Oct 09, 2006 14:29**

C'est bien vu...

On lui ajouterait même un brin de bordure gris foncé si on voulait, non ?

#encart { float:left; width:160px; margin-right:10px; border: 1px solid #555555; }

(D'ici à ce que l'effet WRIBuzz soit lancé et que l'on se batte pour faire "Le plus beau menu latéral de l'année", en s'y mettant tous... :mrgreen:

).

**le Lun Oct 09, 2006 14:30**

Voila j ai mis cela en feuille de style

body { font-size:11px; font-family:Comic Sans MS;}
a:link { color:#000000; text-decoration:none; font-weight:normal; }
a:hover { color:#000000; text-decoration:none; font-weight:normal; }
a:visited { color:#000000; text-decoration:none; font-weight:normal; }
a:active { color:#000000; text-decoration:none; font-weight:normal; }
h1 { font-family:Comic Sans MS; font-size:22px; color:#000000; text-decoration:none; font-weight:bold;}
h2 { font-family:Comic Sans MS; font-size:18px; color:#000000; text-decoration:none; font-weight:normal;}
#encart { float:left; width:160px; margin-right:10px}
Et cela sur ma page :
</head>
<body bgcolor="#FF8000" background="images/nth_theme_business_modern_wood_frame_bg.gif">
<div id="encart">
<a href="lien1">lien1</a><br />
...
<a href="lienx">lienx</a><br />
</div>
<h1 align="center"> Location entre Bretagne et Normandie d' un gite de groupe<br> Maison de grande capacite en location en baie du Mont saint Michel</h1>

mais aucun resultat , les mots liens restent en haut de page...et pas de cadre? (voir la page -www.gitemontsaintmichel.com/gite.html)

ai je fais une erreur?

**le Lun Oct 09, 2006 14:38**

#encart { float:left; width:160px; margin-right:10px; border:1px dashed #000000}

et ton div encart ne doit pas etre tout en haut du code, mais juste avant le texte "Location d' un gite de groupe avec piscine ..."

**le Lun Oct 09, 2006 14:41**

Oui il y a une erreur car pour être correctement positionné il faut imbriquer les div comme dans un tableau.
Ainsi :

Code: Tout sélectionner: <div id=conteneur> <div id=header></div> <div id=contenu> <div id=encart></div> <div id=corps></div> <div id=footer></div> </div> </div>

Avec dans la feuille de style CSS les informations sur la taille des divs, leur positionnement...

**le Lun Oct 09, 2006 14:52**

C' est compliqué

Je n ai plus de temps aujourd'hui...je m y remet dès que possible

Merci à tous

**le Lun Oct 09, 2006 17:07**

Bonjour,

C'est cadeau :
http://outils.enaty.com/t001.htm

Reste plus qu'à modifier, à definir les liens...

**le Lun Oct 09, 2006 21:28**

Merci Serval.

Mais....je rencontre encore un probleme. Apparement cela fonctionne sous firefox mais pas avec IE. Pouvez vous verifier? Et me conseiller?

**le Lun Oct 09, 2006 22:01**

Salut,

Tu peux nous donner un lien vers ta page s'il te plaît ?

**le Lun Oct 09, 2006 23:00**

C'est son www :

a découvrir aussi une autre location de vacances entre normandie et Bretagne et c' est la place des liens car ce n' est qu 'un test afin de tenter de créer des tableaux avec des div et je n' y arrive pas

**le Mar Oct 10, 2006 8:53**

Aîe, aïe, aïe.
Il ne faut pas tester une mise ne page en production avant d'être sûr qu'elle marche.
Déjà problème, tu mixe les mise en page avec des marges définies tant dans le code html que dans le CSS.
En outre, tu places une div qui contient tes images sans qu'lle soit déclarée dans la feuille de style.
Il faut en fait quand on passe aux CSS reprendre tout le codage d'un site pas à pas et il semble que tu as copié collé tout ton code comme s'il s'agissait de tableaux.

Remet ta mise en page initiale et reprend depuis le début le conception de chaque page ce sera rapide et plus sûr.

Sur le lien suivant, je t'ai mis une feuille de style plus stable, à peu près équivalente à celles du site alsacréations
http://outils.enaty.com/t001/index3.php
Elle est surement plus conforme que la précédente à ce que tu veux comme graphisme.

Les bordures sont mises à titre indicatif.

Je t'encourages enfin une nouvelle fois à te rendre sur le site pré-cité qui contient beaucoup d'explications utiles.

@+

creer un encart a gauche

creer un encart a gauche

Formation recommandée sur ce thème :

Lectures recommandées sur ce thème :

Qui est en ligne