28173 sujets

CSS et mise en forme, CSS3

[resolu]Cadre arrondi qui s'aggrandi

Bonjour,

je n'arrive pas à mettre mon contenur dans la cadre arrondi.

j'ai l'impression que mon contenu (les class col01 et col02)
ne vont pas dans mon cadre :

voici le xhtml :


				<div class="bloc">

<div id="cadre">
	<div id="hautdroit"></div><div id="hautgauche"></div>
	<div id="contenu">
								
					 <div class="col01"> 
					 <a href="liste.php?cat=cartes memoires">CARTES MEMOIRES</a><br> 
					 <div class="spacer">&nbsp;</div>
					 <a style= "font-weight: 400; color: fuchsia ;" href="liste.php?cat=cartes memoires&sous_cat=compact flash">Compatcs Flash</a><br> 
					 <a style= "font-weight: 400; color: fuchsia ;" href="liste.php?cat=cartes memoires&sous_cat=memory stick">Memory Stick</a><br> 
					 <a style= "font-weight: 400; color: fuchsia ;" href="liste.php?cat=cartes memoires&sous_cat=sd">SD</a><br> 
					 <a style= "font-weight: 400; color: fuchsia ;" href="liste.php?cat=cartes memoires&sous_cat=xd">XD</a><br> 
					 </div> 

					 <div class="col02"> 
					 <a href="liste.php?cat=films">FILMS</a><br> 
					 <div class="spacer">&nbsp;</div>
					 <a style= "font-weight: 400; color: fuchsia ;" href="liste.php?cat=films&sous_cat=couleur">Couleur</a><br> 
					 <a style= "font-weight: 400; color: fuchsia ;" href="liste.php?cat=films&sous_cat=noir et blanc">Noir et Blanc</a><br> 
					 <a style= "font-weight: 400; color: fuchsia ;" href="liste.php?cat=films&sous_cat=diapositives">Diapositives</a><br> 
					 </div> 
	
					 
	</div>
	<div id="basdroit"></div><div id="basgauche"></div>
</div>
				
				
				<!-- Fin bloc-->
				</div>


et le css :



.bloc
{
clear:both;
background-color:rgb(196,196,255);
width: 764px;
margin-top:0px;
/*overflow:auto;*/
height: auto;
min-height: 356px;
}

* html .bloc {
height: 356px; /* hack uniquement interprété par IE Win+Mac*/
} 


.col01
{
width:100px;
height:300px;
float:left;
display:inline;
margin-top:20px;
margin-left:30px;
}

.col02
{
width:100px;
height:300px;
float:left;
display:inline;
margin-top:20px;
margin-left:8px;
}


#cadre { /* taille du cadre, à titre d'exemple */
width: 700px;
background-color: #909090;
}
/* propriétés communes à l'ensemble des 4 coins */
#hautgauche, #hautdroit, #basgauche, #basdroit {
height: 19px; width: 19px;
background-repeat: no-repeat;
font-size:1px; /* correction d'un bug IE */
}
/* propriétés spécifiques à chaque coin */
#hautgauche {
background-image: url('../images/design/hautgauche.gif');
}
#hautdroit {
float: right;
background-image: url('../images/design/hautdroit.gif');
}
#basgauche {
background-image: url('../images/design/basgauche.gif');
}
#basdroit {
float: right;
background-image: url('../images/design/basdroit.gif');
}
#contenu p {
color: white;
margin: 0.5em; /*gestion des espaces interparagraphes */
}


merci d'avance pour le coup de main. Smiley cligne
Modifié par samb01 (03 Sep 2006 - 12:28)
au fait je ne comprends pas pourquoi dans le css :


#cadre { /* taille du cadre, à titre d'exemple */

width: 700px;

background-color: #909090;

}


il faut préciser la taille du cadre alors que ce dernier doit être autoextensible d'après le tuto.
Le but est bien d'avoir un cadre qui s'aggrandi?
En effet quand je rajoute un élément dans le conteneur cadre :

element1 (float left) element2 (float left)
et bien si la taille des deux éléments est pluqs que la taille spécifiée dans lacdre, ce dernier ne s'aggrandi...
Du coup mon 2ème élément en float left passe en dessous.
Salut,
a écrit :
il faut préciser la taille du cadre alors que ce dernier doit être autoextensible d'après le tuto.
Le but est bien d'avoir un cadre qui s'aggrandi?


C'est qu'il se s'agrandit que verticalement.
Tu devrais citer ta source , un lien pour visu en ligne.
Modifié par Hum (09 Jun 2006 - 17:04)
Sujet clos
Aller à