Aller au contenu
  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

Besoin de conseil CSS/HTML


Sew-Oszka
 Share

Messages recommandés

Coucou à tous (j'ai retrouvé mon mot de passe :P )

 

Je suis en train de faire un site pour ma mère, j'ai un petit problème pour aligner deux blocs.

 

lien vers le site

 

En gros, en bas de page il y a un cadre (ou plutot deux) "actualités". Vous voyez tout de suite le problème, je voudrais que la décoration du cadre "actualités" soit alignée à gauche du bloc de couleur plus foncée (où il y a "test...test...test... etc...).

 

 

Voila en gros les portions de codes correspondant:

 

HTML:

 

<div id="inline">
 <div id="border">
 </div>
 <div id="news"><p class="nwstxt">test, etc...</p>
 </div>
</div>

 

CSS:

 

#inline{
display:inline;
}
#border{
 position:relative;
 margin-left:30px;
 background-image:url('./pics/nwsbrdr.png');
 width:70px;
 height:300px;
 border:2px solid #005;
 border-color:#592525;
}
#news{
 position:relative;
 margin-right:30px;
 margin-left:100px;
 border:2px solid #005;
 border-color:#592525;
 background-color:#cba3a3;
 height:300px;
 overflow:scroll;
}
.nwstxt{
 font-size:10px;
 text-align:justify;
 color:#592525;
 margin-left:20px;
 line-height:20px;
}

 

(Si vous voulez l'ensemble: c'est ici!

 

Merci par avance!

 

PS: si vous avez d'autre suggestions, je suis preneur, je débute, c'est mon deuxième site! :P

Modifié par Sew-Oszka
Lien vers le commentaire
Partager sur d’autres sites

Pour "aligner" tes deux blocs de hauteur et largeur définies, soit tu comptes sur le support de CSS 2.1 et tu utilises les style "display: inline-block" sur les deux éléments, soit tu procèdes "à l'ancienne" en donnant la propriété "float: left" au bloc de gauche...

Lien vers le commentaire
Partager sur d’autres sites

Salut Sew-Oszka,

 

Oui, par la méthode classique, tu ajoutes à ton id #border l'attribut float:left (pour que les deux blocs soient horizontalement côte à côte, et tu enlèves l'attribut margin-left:100px de ton id #news pour qu'ils soient collés l'un à l'autre. Au passage, il serait judicieux que tu ajoutes à l'id #news l'attribut border-left-width:0 (après l'attribut border) pour que la bordure commune aux deux blocs n'ait pas une double épaisseur :P

 

Sous FireFox, je pense que tu obtiendras ainsi l'effet recherché. En revanche, je te suggère d'aller voir ce que cela donne sous Internet Explorer. Pour IE6 en résolution 1024x768 en tout cas, ce n'est pas vraiment tip-top… :P

Lien vers le commentaire
Partager sur d’autres sites

  • 2 weeks later...

Bon en fait j'avais du mal à m'en sortir avec ça, dons j'ai fait autrement:

 

http://www.henri-louis.com

 

:P

 

PS: Merci Dylav pour la précision... Pourrais tu me poster un screen s'il te plait, car je suis sous linux... :P

Modifié par Sew-Oszka
Lien vers le commentaire
Partager sur d’autres sites

Bonsoir Sew-Oszka,

 

Oui, ta nouvelle solution pour le bloc “bordr” est efficace et élégante par sa simplicité :P

 

En revanche tu as toujours un problème fâcheux avec Internet Explorer (en tout cas avec IE6) : tes 3 blocs “leftmenu”, “centerbloc” et “rightmenu” ne se présentent pas côte à côte, mais les uns en-dessous des autres :P

 

img-003237k5d57.gif.................... img-003311xxlcm.gif

Lien vers le commentaire
Partager sur d’autres sites

Bonsoir Sew-Oszka,

 

Tout se passe comme si,

  • FireFox considérait bien que les deux blocs latéraux doivent se superposer aux marges d'un centerbloc occupant toute la largeur de la fenêtre,
  • Internet Explorer ne comprenait pas qu'il faut effectuer ces superpositions, et montrait les blocs un par un, puisque le centerbloc occupe à lui seul toute la largeur de la fenêtre.

Mais je ne vois aucune solution :P

Lien vers le commentaire
Partager sur d’autres sites

Salut!

Bienvenue dans le monde de IE6...

Ton problème est un problème de largeur de bloc. IE6 gère différemment le padding et margin par défaut.

Réduit la taille de tes blocs, et cela devrait passer ^^

Lien vers le commentaire
Partager sur d’autres sites

Oui, l'histoire du margin et du padding, on le sait. Mais là, ce qui est vache, c'est qu'il laisse le navigateur se débrouiller, il n'impose pas les dimensions (en tout cas pas la largeur du bloc central). Alors bonjour IE6, en effet !

 

Mais je ne suis d'ailleurs pas sûr que FF respecte strictement les recommandations du W3C, pour padding et margin (en tout cas, pour l'un des deux).

Lien vers le commentaire
Partager sur d’autres sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

 Share

  • En ligne récemment   0 membre est en ligne

    Aucun utilisateur enregistré regarde cette page.

×
×
  • Créer...