Utiliser la partie latérale gauche

Tonio

Juillet 2010

Bonjour à tous,

Je suis débutant sous SPIP et HTML et je crée mon site web sous SPIP 2.1.0.

Depuis quelques jours, je réadapte le squelette "dist" sommaire.html pour personnaliser ma page.
J’ai cru comprendre que la page était partitionnée en plusieurs zones, définies par "id" :
id="page", id="contenu", id="navigation", etc.
avec par exemple la partie droite donnée par id="extra".

Cependant j’aimerai bien exploiter la partie gauche de ma page d’accueil : à gauche du corps de texte, il y a beaucoup d’espace disponible.

Existe-t-il un "id" particulier qui désigne cette zone ?
Comment dois-je faire pour y accéder ?

Merci beaucoup !
Tonio.

Par note Par date Par date chronologique

Indiquez l’intérêt que vous portez à cette réponse

0
Flo

Juillet 2010
bonjour

les "id" indiquent le nom du style à attribuer au div. et les styles sont paramétrables dans les feuilles de styles (habillage.css)

Initiation au positionnement css :
http://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html

il faut adapter la taille des div

par exemple, il y a par défaut ce code sur la page article.html :
<div {{id="page"}}> [(#REM) Entete de la page + titre du site ] <INCLURE{fond=inc-entete}> [(#REM) Contenu principal : contenu de l'article ] <div class="hfeed" {{id="conteneur"}}> <div class="hentry" {{id="contenu"}}> [(#REM) Fil d'Ariane ] <div {{id="hierarchie"}}><a href="#URL_SITE_SPIP/"><:accueil_site:></a><BOUCLE_ariane(HIERARCHIE){id_article}> > <a href="#URL_RUBRIQUE">[(#TITRE|couper{80})]</a></BOUCLE_ariane>[ > <strong class="on">(#TITRE|couper{80})</strong>]</div> <div class="cartouche"> [...]
Les codes css des div page, conteneur, contenu et cartouche dans le fichier habillage.css sont principalement :
#page { position: relative; width: 58em; margin: 0 auto; text-align: left; } #conteneur { clear: both; float: left; width: 67%; overflow: hidden; } #contenu { padding-top: 0.30em; } .cartouche { margin-bottom: 2em; } #hierarchie { clear: both; margin-bottom: 2em; font-size: 0.90em; }
(etc.)
Indiquez l’intérêt que vous portez à cette réponse

0

Flo

Juillet 2010

désolée, voici le code html, j’ai voulu mettre en gras avec les acolades mais impossible :
<div id="page"> [(#REM) Entete de la page + titre du site ] <INCLURE{fond=inc-entete}> [(#REM) Contenu principal : contenu de l'article ] <div class="hfeed" id="conteneur"> <div class="hentry" id="contenu"> [(#REM) Fil d'Ariane ] <div id="hierarchie"><a href="#URL_SITE_SPIP/"><:accueil_site:></a><BOUCLE_ariane(HIERARCHIE){id_article}> > <a href="#URL_RUBRIQUE">[(#TITRE|couper{80})]</a></BOUCLE_ariane>[ > <strong class="on">(#TITRE|couper{80})</strong>]</div> <div class="cartouche"> [...]
Indiquez l’intérêt que vous portez à cette réponse

0
Tonio

Juillet 2010
Merci de ta réponse,

J’avais vu la définition des id dans habillage.css, mais j’ai du mal à définir un id qui correspond à la partie de gauche à utiliser.
(malgré le site d’initiation)

Voici le code que j’ai adapté dans habillage.css :
Je veux que le id "gauche" soit à gauche du conteneur, mais je n’arrive pas :(
#page { position: relative; width: 58em; margin: 0 auto; text-align: left; } #gauche {position:absolute; width: 20em;} #conteneur { margin-left: 20em; width: 38em; overflow: hidden; } #contenu { padding-top: 0.30em; }
Dans mon code HTML :
<div id="page"> <div id="gauche">  </div> <div id="conteneur"> <div id="contenu">  </div> <div id="footer">  </div </div> </div>
Faut-il que j’utilise float ?

Merci de m’éclairer...!
Indiquez l’intérêt que vous portez à cette réponse

0

Flo

Juillet 2010

tu peux disposer tes div avec la propriété float oui. attention de bien ajuster les padding et margin en fonction de tes besoins...
n’oublies pas de définir le style de footer
Indiquez l’intérêt que vous portez à cette réponse

0

Flo

Juillet 2010

les floats devraient être attribués à conteneur et gauche...
Indiquez l’intérêt que vous portez à cette réponse

0

Tonio

Juillet 2010

C’est bon, j’ai fini par réussir avec float.

Merci, a+ !