creer un encart a gauche

WRInaute impliqué
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
 
WRInaute accro
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 :)
 
WRInaute accro
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 ;)
 
WRInaute accro
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:).
 
WRInaute impliqué
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?
 
WRInaute accro
#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 ..."
 
WRInaute accro
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...
 
WRInaute impliqué
Merci Serval.

Mais....je rencontre encore un probleme. Apparement cela fonctionne sous firefox mais pas avec IE. Pouvez vous verifier? Et me conseiller?
 
WRInaute occasionnel
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:
 
WRInaute accro
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.

@+
 
WRInaute accro
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 @+
 
WRInaute impliqué
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
 
WRInaute accro
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.
 
WRInaute impliqué
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
 
WRInaute accro
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.
 
WRInaute impliqué
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...
 
WRInaute accro
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.

@+
 
Discussions similaires
Haut