28172 sujets

CSS et mise en forme, CSS3

Coins arrondis images coullissantes

Bonjour,

je me présente rapidement, je m'appelle Nicolas et je suis en stage dans une entreprise pour m'occuper du CSS de certaines pages web.

Mon responsable de stage m'a chargé de créer des cadres à coins arrondis avec le système des portes coullissantes de Douglas Bowman.

J'ai plus ou moins réussi à donner quelque chose cependant il reste un coin (en bas a gauche) qui résiste et qui reste carré....

Pouvez vous résoudre ce problème qui m'a pris ma journée d'hier svp?

Merci d'avance

Nicolas

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="main2.css" />

   </head>
   <body>
   
	
	<div id="header">
    


	
	
	
	
    <div id="hautgauche">
	
	<div id="basdroit">
	<div id="basgauche">
	
	
	<div id="hautdroit">
	<p>
	Et Reguli alitur causa ille.
	Et Reguli alitur causa ille <br/>
	Et Reguli alitur causa ille.<br/> 
	Et Reguli alitur causa ille.</p>
	
	</div>
	
	</div>
	
	
	</div>
	
	</div>
  
	 

 
   </body>
</html>



CSS
body
{
background-color: black;
}

#header
{
	float: left;
	width: 100%;
	
	
}



#header #hautgauche
{
	float: left;
	background: url("hautgauche.png") 
	no-repeat left top;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;

}

#header #hautdroit
{	
	float: left;
	background: url("hautdroit.png")
	no-repeat right top;
	margin: 0px 0px 0px 10px;
	padding: 5px 15px 5px 10px;

}

#header #basdroit
{
	float: left;
	background: url("basdroit.png") 
	no-repeat right bottom;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	
}

#header #basgauche
{
	float: left;
	background: url("basgauche.png") 
	no-repeat left bottom;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 10px 0px;
	
	
}




Si besoin voici les liens des images:

http://img263.imageshack.us/gal.php?g=hautdroit.png


Merci

edit:

et en jouant avec le padding je n'obtient que ca:
body
{
background-color: black;
}

#header
{
	float: left;
	width: 100%;
	
	
}



#header #hautgauche
{
	float: left;
	background: url("hautgauche.png") 
	no-repeat left top;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;

}

#header #hautdroit
{	
	float: left;
	background: url("hautdroit.png")
	no-repeat right top;
	margin: 0px 0px 0px 10px;
	padding: 5px 15px 5px 10px;

}

#header #basdroit
{
	float: left;
	background: url("basdroit.png") 
	no-repeat right bottom;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 10px 0px;
	
}

#header #basgauche
{
	float: left;
	background: url("basgauche.png") 
	no-repeat left bottom;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 10px 0px;
	
	
}

Modifié par Xaliox (19 Aug 2009 - 09:54)
Bonjour,

alors j'ai essayé de bouger avec background-position cependant ce que je veux faire n'est plus possible (les portes coullissantes) avec background-position l'image s'affiche completement.

Ensuite j'ai regardé ton site, la technique a l'air pas mal cependant cela ne répond pas au "cahier des charges" de ma responsable. Elle veut que quand on redimensionne la fenetre du navigateur, le cadre s'adapte automatiquement.

Comme exemple à suivre elle me donne ce site, cependant je ne comprend rien au code....


http://www.schillmania.com/projects/dialog2/


Merci quand meme de ta réponse rapide!
Xaliox a écrit :

Ensuite j'ai regardé ton site, la technique a l'air pas mal cependant cela ne répond pas au "cahier des charges" de ma responsable. Elle veut que quand on redimensionne la fenetre du navigateur, le cadre s'adapte automatiquement.


Cette méthode te permet de le faire, à toi de fixer la largeur de ta box en %, là il a mis 100% mais tu peux mettre moins.
Bon je vais regarder mais ca n'a pas l'air de convenir parfaitement à la situation.... (meme si ca a l'air d'être un très bon plan)

si vous avez la solution pour le lien que je vous ai donné dabs mon 2ème post, n'hésitez pas.
Dans ton lien ils utilisent du css du type min-width et max-width qui ne sont pas supportés par IE6, donc dans leur cas si tu utilises IE6 tes box vont prendre 100% de la place disponible.

J'ai testé le tutoriel que je t'ai donné et il y a exactement le même rendu, maintenant si tu veux quelque chose de plus avancé graphiquement comme dans ton exemple il va falloir que tu utilise une solution plus compliquée que ce que je t'ai donné.
ah min-width est pas supporté par IE 6?

dommage, je corrige ca...

j'ai trouvé une 3eme solution assez simple qui se rapproche de la mienne sur the trashbox
Sujet clos
Aller à