28173 sujets

CSS et mise en forme, CSS3

Cadre de largeur fixe - Chap 14 - CSS 2 pratique du design web

J'ai essayé de créer un beau cadre aux formes arondis en CSS.
Je me suis inspiré de cette méthode :

Chapitre14 - Cadre de largeur fixe - éditions eyrolles

On construit son beau cadre, on coupe le chapeau et on garde le reste pour le texte ...

Dans ce chapitre, on crée un cadre arondi avec une <div>. Dans ce cadre, on peut y mettre du texte, comme dans toute balise <div>... on aimerai faire un cadre réutilisable et qui s'adapte à la longueur du texte contenu par la balise <div> grâce au style CSS associé ... l'idée est séduisante !

Dans mon cas, j'utilise un cadre avec des effets de transparence.

C'est là que ça se corse ... : non seulement le cadre ne s'adapte pas à la longueur de mon texte, mais en plus lorsque je positionne le tout, j'ai une jolie démarquation entre le chapeau et le corps du cadre.

En bref, soit j'ai pas compris l'objectif réel, soit c'est un exemple qui ne va que pour des backgrounds unis, soit j'ai vraiment rien capté Smiley eek

Question Bonus :
Comment es-ce possible les bulles en arrière plan de ce site :
http://www.babylon-design.com
Modifié par popovitch (10 Dec 2007 - 20:15)
Bonjour à toi aussi,

Le lien que tu indiques affiches une erreur 404.
Pourrais-tu éditer ton message pour le corriger ?

Merci Smiley smile
Il en reste encore... Smiley lol

En ce qui concerne ton problème de cadre avec de jolies formes arrondies en css, outre le fait que tu aurais pu trouver de l'aide dans la FAQ en cherchant un peu également sur les sujets déjà traités dans le forum, que tu aurais ainsi pu tomber (entre autre...) sur une aide non moins précieuse, du redoutable et quasi incontournable F V (Le vieux Florent pour les intimes Smiley lol ), outre ces "oublis" donc (avec le bonjour cela fait une belle entrée en matière...) les règles qui régissent ce forum t'indiquent clairement qu'il est vivement conseillé de poster son code html et css (avec les balises qui vont bien cela va de soi Smiley cligne ) au minimum, et avec un lien en ligne si cela ne dérange pas trop, cela permet de voir ce qui a été fait, de ne pas répondre dans le vide et de se confondre en supputations inter-minables... Smiley smile

Pour la question subsidiaire, il s'agit d'une animation flash dans "l'entête".

Cdt,
Sylvain
Modifié par 6l20 (11 Dec 2007 - 01:13)
Bonsoir Messieurs, désolé cette journée a été particulièrement rude pour moi comme pour nous tous. Je suis juste très impatient de faire fonctionner cette histoire de cadre ... sorry
Voici le code et tout ce qu'il faut :

Les 2 images au format png (transparence)
upload/15062-bas.png
upload/15062-haut.png

le code HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel=stylesheet type="text/css" href="style.css" />
<title>test</title>
</head>

<body>
<div id="cadre">
<div id="bloccadre">
<p>Lorem ipsum dolor sit amet, ?</p>
</div>
</div>

</body>
</html>


CSS

div#cadre {  /* conteneur global et chapeau de l?arrière-plan */
width: 230px;
padding-top: 30px;
background: url(haut.png) left top no-repeat;
}
div#bloccadre {  /* bords et pied de l?arrière-plan */
background: url(bas.png) left bottom no-repeat;
padding-bottom: 30px;
}
div#bloccadre p {
margin: 0 30px 0 20px;
}


Je vous remercie d'avance et vous prie d'excuser mon impolitesse Smiley smile
6l20 a écrit :

Pour la question subsidiaire, il s'agit d'une animation flash dans "l'entête".

Du flash en en tête ! comment fait-il ? c'est un bête fichier flv qui est en background de la balise body et après il a appliqué des CSS en surcouche c ça ?
Bonsoir popovitch,

Oublions la malpolitesse Smiley cligne

Je t'encourage vivement à lire les liens que je t'ai fournis dans mon message précédent, notamment ceux du site de FV, tu auras une meilleure vision de ce que tu dois parvenir à faire Smiley cligne

Si je comprend bien, tu as tenté de reproduire le tutoriel "boutons extensibles" ?

Comme son nom l'indique, il s'adresse plutôt à l'utilisation de boutons, et la lecture de ce tuto a dû se faire en diagonale (en ce qui concerne le découpage de l'image ar exemple Smiley cligne )

Il n'y a rien de très compliqué, exerce-toi avec les liens de la FAQ et ceux du site de Florent, cherche au besoin sur le net des tutoriels traitant du sujet (en tapant juste "coins arrondis" c'est fou ce que l'on trouve sur google Smiley cligne ) et je suis persuadé que tu parviendras à tes fins très vite.

Bon courage et au plaisir Smiley smile
Le javascript :

<script type="text/javascript">
if(navigator.appVersion.indexOf("Linux") == -1) {
document.write(''
+ ' <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="100%" height="300">'
+ ' <param name="movie" value="/site/themes/babylon_v8/flash/bulles.swf" />'
+ ' <param name="quality" value="high" />'
+ ' <param name="wmode" value="transparent" />'
+ ' <embed src="/site/themes/babylon_v8/flash/bulles.swf" wmode="transparent" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100%" height="300"></embed>'
+ ' </object>'
+ '');
}
</script>

Le swf :

<object width="100%" height="300" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param value="/site/themes/babylon_v8/flash/bulles.swf" name="movie"/>
<param value="high" name="quality"/>
<param value="transparent" name="wmode"/>
<embed width="100%" height="300" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" quality="high" wmode="transparent" src="/site/themes/babylon_v8/flash/bulles.swf"/>
</object>


et le css :
#bulles {
	position:absolute;
	top:0;
	left:0;
	z-index:1;
	width:100%;
}
Re,

Je ne connaissais ce tuto de "boutons extensibles", en revanche le bouton est issu d'un autre tuto photoshop et je m'étais demandé s'il était possible de lui appliquer la technique CSS des cadres arrondi à largeur fixe.
Merci pour toutes ces précieuses infos Smiley cligne
Modifié par popovitch (11 Dec 2007 - 11:00)
Sujet clos
Aller à