[Résolu] Cadres arrondis

Bonjour à tous.

J'essaye de faire des cadres arrondis en suivant ce tuto http://www.alsacreations.com/articles/cadre/ mais j'ai un petit souci !!

Voila mon code HTML:

<div id="Welcome_panel">
    <div id="topright"></div><div id="topleft"></div>		
	<div class="Message">
		Welcome
	</div>
	<div class="Form">
		Authentification form
        </div>		
    <div id="bottomright"></div><div id="bottomleft"></div>
</div>

Code CSS:

/* Corners */
#topleft, #topright, #bottomleft, #bottomright {
	height: 20px; width: 20px;
	background-repeat: no-repeat;
	font-size:1px; /* correction d'un bug IE */
}

#topleft {
    background: url(../Images/TopLeftCorner.jpg);
}
#topright {
    float: right;
    background: url(../Images/TopRightCorner.jpg);
}
#bottomleft {
    background: url(../Images/BottomLeftCorner.jpg);
}
#bottomright {
    float: right;
    background: url(../Images/BottomRightCorner.jpg);
}

#Welcome_panel
{
   height: 40px;
   background-color: #F9F2C0;
   margin-bottom: 10px;
   padding: 0px;
}

.Message
{
	float: left;
	padding: 0px;
	margin-left: 30px;
	margin-top:0px;
}

.Form
{
	float: right;
	padding: 0px;
	margin-right: 30px;
	margin-top: 0px;
}

Et le div "Message" et "Form" sont respectivmeent flottant sur la gauche et sur la droite !! Je pense que c'est a cause de ces flottant que ca merdouille car le texte n'est pas centré et les coins ne se mettent pas bien !!

Comme vous le voyez j'ai essayé de jouer sur les argin et tout mais bon je n'y arrive pas !!

Est-ce que vous sauriez comment il faut faire ??


Merci beaucoup pour votre aide !!!
Modifié par nonolerobot (30 Jan 2008 - 01:32)

Personne n'a deja eu le meme probleme ?
Ou sait d'ou ca peut venir ?

Salut,

J'ai tendance qd je joue avec les float d'appliquer un "clearer" pour "arretter le flux".

Plus explicitement :

<!-- HTML -->
<div id="Welcom_panel">
    <div id="topright"></div><div id="topleft"></div>
    <div class="clearer"></div>				
	<div class="Message">
		Welcome
	</div>
	<div class="Form">
		Authentification form
        </div>
    <div class="clearer"></div>			
    <div id="bottomright"></div><div id="bottomleft"></div>
</div>

/* CSS */
.clearer {
	clear: both;
	width: 0;
	height: 0;
	line-height: 0;
}

Bon ça fait un peu divite aïgue ... mais essait ..

PS: La question à se poser aussi est de savoir si ton bloc d'authentif' sera fluide en largeur et/ou en hauteur? Sinon tu pe faire autrement pour le rendu arrondi ..

Merci pour ton aide, ca a fait avancer les choses pour cce cadre.

Maintenant j'ai mis des bouts arrondis à mes autres cadres, mais ce que je ne comprend pas c'est que le texte ne se met pas a coté des arrondis. Cette fois je n'ai plus de flottants dans les cadres!

Voici un exemple:

Quand je met un titre en h3, voila ce que ca donne:


(En cliquant sur les images vous verrez mieux) Vous voyez il y a un espace entre le menu et le haut ce qui donne un effet allongé au cadre que je trouve bizarre.
Quand je met pas ce titre en h3, voila ce que ca donne:

La le titre est plus vers le haut. Le cadre fait moins allongé je trouve !!

Je pense que tout ca vient du fait que le texte se met obligatoirement sous les arrondis mais puisque les arrondis sont des float ne devrait pas se mettre à coté ? Ou y a-t-il un moyen de supprimer l'espace en ahut des h3 ??

Merci beaucoup pour votre aide !!
Modifié par nonolerobot (29 Jan 2008 - 23:26)

Yop!

Ton "décalage" que tu obtiens avec la balise <H3> est en fait un margin, je pense .. N'oublie pas que par défaut cette balise <H> a un margin-top et margin-bottom..

Pour ce qui est des bords un pe plus arrondi, on voit rien sur tes sreenshots! .. Mais je pense que c'est plus une illusion qu'autre chose car une image en background ne sétire pas!!

Aprés t'es tu posé la question si ton menu allait avoir une largeur fixe ? Si c'est le cas deux images suffisent == deux div's.. Une avec une hauteur "importante" comportant haut-gauche & haut-droite que tapplique & à ta dvi principale et une autre image qui ferme "la boite"! En deux divs.. SI ta une largeur fixe.
=> moins de divites == clarté du code == facilité de maintenance

Merci pour ton aide !!

Je pense que je vais voir cette solution