creer un encart a gauche

co7645 · 9 Octobre 2006

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

serval2a · 9 Octobre 2006

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/

@+

e-kiwi · 9 Octobre 2006

propriété float:left sur un div

HawkEye · 9 Octobre 2006

Dans ton CSS:

Code:

#encart { float:left; width:160px; }

Dans tes pages :

Code:

<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

e-kiwi · 9 Octobre 2006

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

HawkEye · 9 Octobre 2006

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

.

co7645 · 9 Octobre 2006

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?

e-kiwi · 9 Octobre 2006

#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 ..."

serval2a · 9 Octobre 2006

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

Code:

<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...

co7645 · 9 Octobre 2006

C' est compliqué 8O
Je n ai plus de temps aujourd'hui...je m y remet dès que possible

Merci à tous

serval2a · 9 Octobre 2006

Bonjour,

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

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

co7645 · 9 Octobre 2006

Merci Serval.

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

metisaz · 9 Octobre 2006

Salut,

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

eWeb · 10 Octobre 2006

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

:mrgreen:

serval2a · 10 Octobre 2006

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.

@+

co7645 · 10 Octobre 2006

Merci a tous

Cela fonctionne. Il va falloir que je m' y mettes pour toutes las pages..

serval2a · 10 Octobre 2006

Oui, mais attention, je vois que tu as encore mis du texte hors des div. :wink:

Après vois du côté des propriétés width et height pour régler les tailles des div...

Tout est dans le site pré cité.

Bon courage et @+

co7645 · 10 Octobre 2006

Heu...je ne trouve pas les textes hors div....c' est ou stp?

Pour regler les cadres, je crois avoir compris, j ai retreci l' encart gauche par rapport a ton modele.

Cordialement

Charles

serval2a · 10 Octobre 2006

Re,
Autant pour moi, le texte est bien dans le div et c'est le div qui ne s'y adapte pas.
En fait ton texte de bas de page n'est pas dans le cadre, mais le #footer à une instruction height: 20px; c'est ce qu'il faudra régler pour améliorer l'ensemble.
En outre, le cadre du haut semble trop petit pour ton texte; si j'étais toi je mettrais tout le texte dans le #header et ton menu bouton dans le #haut en supprimant la mention <div align="center"></div>qui l'entoure et que tu peux indiquer dans le CSS.
Enfin, dans ton encart tu emploies une répétition de <br> ce qui est inutile puisque tu peux déterminer une valeur fixe à #gauche par rajout d'une valeur height.

co7645 · 10 Octobre 2006

Ok merci, j' arrete pour aujourd' hui.....demain sera un autre jour

Charles

co7645 · 10 Octobre 2006

Chez moi, tout semble fonctionner. Le texte en bas de page est dans le cadre.
De plus, quelqu' un en MP me dit que mes images ne sont pas visibles.

Pouvez vous me dire ce que cela donne chez vous?

Merci

Charles

serval2a · 10 Octobre 2006

Bonjour,
Effectivement, elles ne le sont pas mais c'est le code src qui foire, il pointe vers

Code:

file:///C/Documents and Settings/co/Mes documents/Mes images/image site/cancale/Plagechevrets.jpg

par exemple.

Le texte en bas de page n'est pas dans le cadre non plus et ne peut l'être tant que

Code:

#footer {
clear:both; height: 20px;

Comme c'est le cas actuellement.

Il faut absolument reprendre le site à la base ou du moins en faisant le moins de copié collé possible pour éviter ces erreurs.

co7645 · 10 Octobre 2006

J ai modifié pour les images. Cela est il mieux (chez moi c est ok)

Pour les textes hors des cadres, je ne pige as, chez moi tout est ok sous IE et effectivement quelques erreurs sous firefox (en haut "en bretagne" disparait sous le menu et en bas les cadres se chevauchent...

serval2a · 11 Octobre 2006

Bonjour,
Effectivement les images sont revenues, pour les cadres va dans la feuille de style et dans :
#header supprime height: 100px;
#footer supprime height: 20px;

Tu vois après si ça sort mieux, sinon tu augmentes ces valeurs (qui sont en pixels) petit à petit jusqu'à ce que ça ne se chevauche plus.

@+