[Résolu] [XHTML] Besoin d'aide simple avec div class="aside"

Très bonne participation Messages : 120

Bonjour,

Je dois faire un mini-site en XHTML, j'espère que j'obtiendrai l'information dont j'ai besoin ici;

Voici donc un aperçu de ma page web:
https://2img.net/r/ihimg/photo/my-images/843/webpage1s.jpg/

Vous avez remarqué le problème: en bas de la publicité, le texte change de position. Comment puis le laisser aligné avec le reste du texte, aligner la longueur de mon div class="aside" ?

J'aimerais obtenir ce résultat, si c'était mal expliqué:
https://2img.net/r/ihimg/photo/my-images/819/webpage2.jpg/

Que devrais-je mettre dans mon code?

Code:: <div class="aside">
<p>...</p>
...
<div class="pub">
<p><a href="http://www.perlesandco.com/"><img src="images/pub_120x600.gif" alt="Pub #1" width="120" height="600" /></a></p>
<p></p>
</div> (Ferme div class="pub")
</div> (Ferme div class="aside")

Je suis loin d'être très bon, donc svp, privilégiez la méthode la plus simple (Pas de CSS).

Une autre question moins importante: comment puis-je centrer du texte ou un image, légalement (donc pas de <center></center> dans ce cas) et facilement?

Je vous remercie beaucoup.

_________________
Gamemaker / GameX

Bonjour,

Citation :: privilégiez la méthode la plus simple (Pas de CSS).

Justement le plus simple c'est de toujours utiliser une feuille de style.

Sinon dans ta DIV tu fait un

Code:: style="padding-left: 100px;"

(joue sur les pixels je dit 100 à vue d'oeil, mais c'est peut-être plus.)

Très bonne participation Messages : 120

Merci pour ta réponse;

Malheureusement, je n'obtiens pas le résultat désiré, la largeur de mon div class=''aside'' augmente, mais cela n'arrange pas la disposition de mon texte.

Code:: <div class="aside" style="padding-left: 100px;">

J'ai tenté de changer le left pour top, j'obtiens un meilleur résultat, mais pas exactement lui qu'il me faut:

https://2img.net/r/ihimizer/img43/7883/webpage3.jpg

Mon menu se trouve maintenant en bas, et ma liste à puces n'est plus disposée correctement.
Je préfère ne pas utiliser de CSS, car je n'en suis pas encore là dans mon apprentissage.

_________________
Gamemaker / GameX

As tu essayé d'augmenter la valeur?
Sinon essayer margin-left au lieu de padding-left

Edit: Ha, je viens de voir que tu as "pub" dans "aside", donc le margin-left applique le a ta balise de paragraphe.

Très bonne participation Messages : 120

J'ai augmenté/diminué la valeur du padding-left, cela ne résout pas le problème.
Et pour le margin-left, maintenant mon aside / ma colonne entière se déplace vers la droite.

Je l'ai également mise dans mon div class=content, je n'obtiens pas le résultat recherché.

Par contre, j'obtiens un résultat beaucoup plus intéressant si j'utilise style="margin-bottom: 1500px"

https://2img.net/r/ihimg/photo/my-images/210/webpage4.jpg/

Il n'y a que la couleur de ma colonne qui n'est pas présente, et c'est tout. Au moins, le texte est déjà beaucoup mieux positionné qu'avant. C'est pas parfait, mais quand même très acceptable.

Revoici mon code en plus complet

Code:: <div class="header">
   <p id="Retour en haut"/>
   <a href="index_edit.htm"><img src="images/signature.png" alt="Signature" width="500" height="100" /></a>
   </div>
   <div class="content">
      <div class="aside" style="margin-bottom: 1500px">
         <p><a href="astro.htm" title="...">Signe astrologique</a></p>
         <p><a href="zh.htm" title="...">Musique</a></p>
         <p><a href="shenmue.htm" title="...">Jeu vidéo</a></p>
         <p><a href="5150.htm" title="...">Film</a></p>
         <p><a href="vifargent.htm" title="...">Livre</a></p>
         <p><a href="paris.htm" title="...">Ville</a></p>
         <p><a href="lion.htm" title="...">Animal</a></p>
         <div class="pub">
         <p><a href="http://www.perlesandco.com/"><img src="images/pub_120x600.gif" alt="Pub #1" width="120" height="600" /></a></p>
         <p></p>
         </div>
         ...
      </div>
   </div>

Si tu sais comment centrer du texte ou une image, ce serait très utile aussi.

_________________
Gamemaker / GameX

Ha, mais c'est normal que ça ne fonctionne pas. En fait "aside" c'est ton menu, je croyais que c'était le bloc où est l'écriture moi.
Enfait tu doit mettre un padding ou margin (left) au bloc qui contien ton texte, ne touche pas à ton menu mis à part un :

Code:: style="height:100%;"

pour centrer tu fait:

Code:: style="text-align:center;"

Ou celons les cas :

Citation :: style="margin:auto;"

note: ça ne fonctionne pas sur les anciennes version de IE.

et sinon, un float:left ?

_________________
[Résolu] [XHTML] Besoin d'aide simple avec div class="aside" Control-comment

Tous les icones de gm utilisables sur le cbna ICI

Les""float" c'est bien mais quand on à un certain niveau, car ça peut changer toute la page, après faut jouer sur un "HR" en "clear" etc je pense que c'est trop compliqué pour lui.

Très bonne participation Messages : 120

Effectivement, je ne sais pas ce qu'est qu'un float:left. ^^"

Je n'ai pas vu de changement avec le style="height:100%;" (En tant qu'attribut pour div class="aside"), par contre j'ai réussi à centrer mon texte. Smile

Je pense qu'on peut laisser ce aside de côté, tu en as déjà fait beaucoup, je te remercie. Que la couleur soit légèrement différente n'importe peu.

Dernière question: pour centrer une image, comment puis-je le faire? J'ai essayé à tout hasard style="image-align:center;" et style="img-align:center;" mais ça ne fonctionne pas. Personnellement, je ne l'ai jamais fait, donc je ne sais pas comment faire.

Un grand merci à toi (Quand je pense que le travail est à remettre ce soir. XD)! Wink

_________________
Gamemaker / GameX

Sans passer par une feuille de style tu peut faire quelque chose du genre, c'est pas propre mais ça fonctionne.

<img [...] style="display:block; margin:auto;" />

Très bonne participation Messages : 120

Excellent, ça fonctionne bien! Very Happy

C'est peut-être pas propre, mais comme nous n'avons pas appris les feuilles de style, c'est une méthode qui fonctionne!

MERCI! awesome

_________________
Gamemaker / GameX

En fait c'est du CSS mais implanté directement dans tes balises.

Dans ton entête (<head>) tu peut rajouter la balise <style></style> et dedans tu écrit ton CSS, le mieu est de l'écrire dans un fichier à part mais tu l'apprendras plus tard.

Donc dans ta balise style tu écrit:

Code:: img {
display:block;
margin:auto;
}

Ça aura pour résultat de centrer toutes tes images.

ou plus propre car on ne change pas la nature de l'image (inline/block):

Code:: .centrer {
width:100%;
text-align:center
}

Pour cette façon tu doit mettre tes images dans un élément de type "block" (p, div) qui porte la Class "centrer".

Très bonne participation Messages : 120

Je me suis habitué à ta première méthode;

Désolé de dire que j'ai déjà retranscrit le code requit dans toutes mes pages, et recommencer le tout prendrait un certain temps. Et c'est plus simple ainsi (Moins propre, certes.). Razz

Citation :: Dans ton entête (<head>) tu peut rajouter la balise <style></style> et dedans tu écrit ton CSS, le mieu est de l'écrire dans un fichier à part mais tu l'apprendras plus tard.

J'ai en effet la balise <style> dans mon head; pour réaliser notre interface avec background et les couleurs, nous avons utilisé un interfaceur en ligne, qui crée un fichier CSS automatiquement. Je ne m'y connais pas encore, mais ça viendra.

Il y aura certainement quelques personnes qui utiliseront tout de même du vieux HTML ou des méthodes non-conformes au W3C, je ne serai pas le seul. ^^

_________________
Gamemaker / GameX

» Capter M6 avec un simple antenne
» besoin daide IA pour zombie [résolu]
» [RESOLU]GMS besoin d'aide avec physics_joint svp
» Yo ! lol :p besoin daide
» [Résolu]Id ou nom différents pour chaque élément objet d'une class C++