28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous !!!

J'ai un petit problème de conception graphique...

A la base, j'ai un rectangle bordé de bleu, genre 700px sur 220, qui va contenir 2 éléments : un contenu textuel à gauche, ainsi qu'un contenu swf à droite (div représenté actuellement par un gros rectangle bleu).

Puis vu que le contenu textuel à obligatoirement un titre, je me suis dit : pourquoi ne pas utiliser l'élément "legend" du fieldset pour valoriser ce titre...

Malheureusement, dès lors que je mets une légende à mon fieldset, mon div de contenu swf se fait pousser vers le bas...

Est-ce qu'il existe un moyen pour faire en sorte que le titre ne repousse pas le reste, qu'il soit en quelque sorte "en transparence" par dessus le reste ??


D'avance merci pour vos suggestions Smiley smile

a++
Salut,

Pourrais-tu stp poster un lien vers une page ou au pire ton code HTML pour qu'on puisse te donner des pistes ?
Ben à priori, c'était tout simple...

<style type="text/css">
#content
{
width: 700px;
height: 180px;
}
#zecontent
{
width: 400px;
float: left;
}
#swf
{
float: right;
width: 295px;
height: 180px;
background: #00ff00;
}
</style>

<fieldset id="content">
<div id="zecontent">
</div>
<div id="swf">
</div>
</fieldset>



et au final, si je rajoute un
<legend>mon titre</legend>


ça va repousser le div nommé "swf" vers le bas, même si mon titre ne va pas jusque là...

Mais bref, à la limite, je lache l'affaire et j'utilise des titres en h1, c'est mieux pour les contenus de toute façon, au niveau référencement.

Vala, merci quand même. Les modos peuvent supprimer ce message, si il n'y a pas de solution d'ici peu
Modérateur
bonjour,

un titre serait peut-etre plus judicieux en effet pour le rendu, c'est beaucoup plus "maleable" que le "legend".
En le positionnant en absolute; il ne repoussera aucun des autres elements .
Sa position peut-etre regler avec top, bottom, left, right.
Si besoin indiquer en plus un "position:relative;" au conteneur.

Pour l'aspect "d'un legende coupant le bord du fieldset" il faudra rendre le fond opaque en reprenant la couleur du fond ou l'image (qui pourrra etre elle aussi etre repositionné pour se recaler , background-position: 0px 0px; ).

++
Oui, je suis resté sur l'idée du titre. et en absolute, on peut faire quelques trucs sympas. Pour la légende, il faudrai peut-être faire une superposition de 2 fieldset, ou quelque chose du genre, mais ça deviendrai vite lourd à gérer...

Merci pour les infos Smiley cligne