Besoin de conseil CSS/HTML

[Sew-Oszka]

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

 

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!

Modifié le 11 novembre 2008 par Sew-Oszka

[KewlCat]

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

[Dylav]

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

 

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…

[Sew-Oszka]

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

 

http://www.henri-louis.com

 

 

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

Modifié le 22 novembre 2008 par Sew-Oszka

[Dylav]

Bonsoir Sew-Oszka,

 

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

 

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

 

....................

[Sew-Oszka]

Zut et rezut...

 

Désolé de te demander ça, mais comment tu l'explique?

[Dylav]

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

[tangui]

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

[Dylav]

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

[manly]

Bonjour,

Une petite idée en passant...

Et si pour la largeur des blocs, tu comptais en % ?