28173 sujets

CSS et mise en forme, CSS3

Bords arrondis en haut à gauche et en haut à droite du bloc

Hello,

C'est encore moi mais ce n'est pas pour la même chose

<html>
<head>
<style type="text/css">
#contenu_bloc {
	background: #E4E3E3 url('loupe.gif') no-repeat fixed;
	height: 90px;
	overflow: auto;
}
#titre_bloc{
	text-align: center;
	font-weight: bold;
	background-color: #D1CECE;
	padding: 5px;
}
#bloc {
	border: 0 solid black;
}
dl {
	margin-left: 123px;
}
dd {
	margin: 4px;
}
</style>
</head>
<body>
<div id="bloc">
	<div id="titre_bloc">Mon titre</div>
	<div id="contenu_bloc">
		<dl>
			<dd>Guide : xxx</dd>
			<dd>Guide : yyy</dd>
			<dd>Guide : zzz</dd>
			<dd>Guide : aaa</dd>
		</dl>
	</div>
</div>
</body>
</html>


Quelle est la meilleure solution pour intégrer des bords arrondis en haut à gauche et en haut à droite ?
Modifié par roms_rdc (09 Mar 2006 - 14:10)
Réponse : 
<img src="chg.gif" alt="" style="float: left; position: relative; top: -5px; left: -5px;" /><img src="chd.gif" alt="" style=" float: right; position: relative; top: -5px; right: -5px;" />Mon titre


chg pour Coin Haut Gauche Smiley cligne

Ben pour le coup, ça ça marche avec firefox mais pas ie... Smiley decu
Modifié par roms_rdc (09 Mar 2006 - 14:24)
Bonjour,

Si tu te "fous" de internet explorer, tu peux utiliser la propété -moz-border-radius qui permet de faire des arrondis.
Mais ça ne fonctionnera sur les navigateurs à base de Gecko.

Il existe des techniques "scout" où tu ajoutes des images dans les coins...
cf. http://www.alsacreations.com/articles/cadre/
Mais sémantiquement, je ne trouve pas ça top.

Personnellement, j'utilise la librairie JS nifty :
http://pro.html.it/esempio/nifty/

bonne journée
franek
franek a écrit :
Bonjour,

Si tu te "fous" de internet explorer, tu peux utiliser la propété -moz-border-radius qui permet de faire des arrondis.
Mais ça ne fonctionnera sur les navigateurs à base de Gecko.

Il existe des techniques "scout" où tu ajoutes des images dans les coins...
cf. http://www.alsacreations.com/articles/cadre/
Mais sémantiquement, je ne trouve pas ça top.

Personnellement, j'utilise la librairie JS nifty :
http://pro.html.it/esempio/nifty/

bonne journée
franek


J'oubliais, si tu utilises la technique des images, tu peux générer tes arrondis avec le site suivant :
http://www.neuroticweb.com/recursos/css-rounded-box/index.php?idioma=en
franek a écrit :
Bonjour,

Si tu te "fous" de internet explorer, tu peux utiliser la propété -moz-border-radius qui permet de faire des arrondis.
Mais ça ne fonctionnera sur les navigateurs à base de Gecko.

Il existe des techniques "scout" où tu ajoutes des images dans les coins...
cf. http://www.alsacreations.com/articles/cadre/
Mais sémantiquement, je ne trouve pas ça top.

Personnellement, j'utilise la librairie JS nifty :
http://pro.html.it/esempio/nifty/

bonne journée
franek

ben comme tu le vois, j'utilise la méthode scout, mais bon ça fait un décalage. Le JS, j'espère ne pas en arriver à utiliser ça.

le radius ouais vivement le CSS3 Smiley smile
Salut,

je repars de ton code mais je rajoute un <dt> parce qu'une liste de définition sans dt c'est n'importe quoi. Et je particularise le dernier dd :

html :

<div id="contenu_bloc">

		<dl>
            <dt>contenu dt</dt>
			<dd>Guide : xxx</dd>

			<dd>Guide : yyy</dd>

			<dd>Guide : zzz</dd>

			<dd class="last_element">Guide : aaa</dd>

		</dl>

	</div>


quatre coins : hg.jpg, hd.jpg, bg.jpg, bd.jpg
les images faisant 15px de coté.

css :

#contenu_bloc {
width:50%;
background:red url(hd.jpg) no-repeat top right;
}

#contenu_bloc dl {
background:url(bd.jpg) no-repeat bottom right;
margin:0;
}

#contenu_bloc dt {
margin:0;
margin-right:15px;
background:url(hg.jpg) no-repeat top left;
}

#contenu_bloc dd {
margin:0;
}

#contenu_bloc dd.last_element {
margin-right:15px;
background:url(bg.jpg) no-repeat bottom left;
}


pour les espacement à l'intérieur du bloc conteneur il vaut mieux utliser des padding.

C'est fait sans tester j'espère qu'il n'y a pas de coquilles.

Un exemple perso que j'ai réalisé :
http://clb56.freezee.org/test_roundcorner/
Merci de rester sympa avec ceux qui te donnent un coup main et au passage te trouvent la solution.

Pour les images gif c'est mon problème pas le tien tu peux faire tes propres coins bien sur Smiley cligne Ils seront surement très beaux re Smiley cligne

pour le <dt> je crois que tu n'as pas du tout compris, une liste de définition sans dt est une pure absurdité. Donc réfléchi un peu.
Modifié par clb56 (09 Mar 2006 - 16:10)
clb56 a écrit :
Merci de rester sympa avec ceux qui te donne un coup main et au passage te trouve la solution.

Pour les images gif c'est mon problème pas le tien tu peux faire tes propres cois bien sur Smiley cligne

pour le <dt> je crois que tu n'as pas du tout compris, une liste de définition sans dt est une pure absurdité. Donc réfléchi un peu.


C'était plus constructif qu'une simple critique sans fondement.. j'aurais peut-être du le dire ainsi effectivement (ç'eut été plus sympathique) :

"Pour tes coins, je te conseille d'utiliser les formats gif qui sont sans compression, ce qui évite des différences de couleur et fait plus joli"

une liste sans dt est certes une pure absurdité, sauf j'ai mes raisons de l'utiliser comme ça (question de cohérence [edit ajout : par rapport au reste du site] pour dire simplement).

Enfin bref, je demandais plus des conseils sur mon problème sus-cité que sur ma façon de voir les choses..
Modifié par roms_rdc (09 Mar 2006 - 16:09)
Modérateur
Bonjour,

roms_rdc a écrit :

une liste sans dt est certes une pure absurdité, sauf j'ai mes raisons de l'utiliser comme ça (question de cohérence [edit ajout : par rapport au reste du site] pour dire simplement)


Même si tu ne semble pas avoir envie d'en discuter, il serait peut-être intéressant et instructif de le faire.

Pour faire court aussi, il ne faut pas utiliser une balise pour rester cohérent par rapport au reste du site, mais pour le sens sémantique que cette balise apporte au document. Au niveau de la cohérence, c'est plutôt au niveau de la présentation qu'il faut le rester.

Il peut arriver que des balises soient utilisées sans apport sémantique au document, notamment un tableau de présentation, mais dans ces cas-là, il y a des raisons techniques qui peuvent pousser le développeur à l'utiliser et des arguments vérifiables et discutables.
Modifié par Tony Monast (09 Mar 2006 - 16:22)
clb56 a écrit :
Devant autant d'aveuglement tous azimuts je reste sans voix.


Tony Monast a écrit :
Bonjour,

Même si tu ne semble pas avoir envie d'en discuter, il serait peut-être intéressant et instructif de le faire.

Pour faire court aussi, il ne faut pas utiliser une balise pour rester cohérent par rapport au reste du site, mais pour le sens sémantique que cette balise apporte au document. Au niveau de la cohérence, c'est plutôt au niveau de la présentation qu'il faut le rester.

Il peut arriver que des balises soient utilisées sans apport sémantique au document, notamment un tableau de présentation, mais dans ces cas-là, il y a des raisons techniques qui peuvent pousser le développeur à l'utiliser et des arguments vérifiables et discutables.


Merci pour vos bons conseils. Pour info, je fais du html/css depuis 6 ans et donc j'ai eu tout le loisir de me mettre au courant pour les sémantiques. D'ailleurs, je fais tout pour que mes sites persos soient les plus "conformes" possibles.

Ce n'est donc pas que je n'ai pas envie d'en discuter, c'est que je le sais Smiley smile et je suis convaincu de ce que vous dites, j'étais moi-même un "prophète" du genre il y a quelques temps.

Mais avant de repenser notre site en profondeur, j'ai d'autres priorités plus urgentes et fonctionnelles qu'un <dt> ne va certainement pas entraver, soyons réalistes.

Bonne continuation à vous,

Romain BOYER
Modérateur
roms_rdc a écrit :

Pour info, je fais du html/css depuis 6 ans et donc j'ai eu tout le loisir de me mettre au courant pour les sémantiques. D'ailleurs, je fais tout pour que mes sites persos soient les plus "conformes" possibles.


Le nombre d'années d'expérience n'est pas une référence. Les débats sur la sémantique, l'accessibilité, l'ergonomie et les normes sont toujours instructifs, peu importe depuis combien de temps nous y sommes plongé. Être en mesure de se remettre en question, c'est la première qualité à avoir.

roms_rdc a écrit :

Ce n'est donc pas que je n'ai pas envie d'en discuter, c'est que je le sais Smiley smile et je suis convaincu de ce que vous dites, j'étais moi-même un "prophète" du genre il y a quelques temps.


Tant mieux. C'est seulement que ta réponse semblait démontrer une fermeture d'esprit de ta part à ce sujet. Si tu es au courant de l'importance de la sémantique, c'est plus rassurant. Par contre, vouloir en discuter, débattre sur un choix de balisage, n'a rien à voir avec le fait d'être un prophète ou non. C'est seulement le thème de ce forum et chaque personne, peu importe le nombre d'années d'expérience, peut en apprendre encore. Je crois que personne, ici ou ailleurs, peut dire qu'il sait tout, absolument tout, dans le Web.

roms_rdc a écrit :

Mais avant de repenser notre site en profondeur, j'ai d'autres priorités plus urgentes et fonctionnelles qu'un <dt> ne va certainement pas entraver, soyons réalistes.


S'il s'agit d'une contrainte de temps, c'est une bonne décision. Tu en discuteras plus tard ou maintenant, et effectuera les changements lorsque le temps te le permettra. Comme tu le dis, le dt ne va certainement pas rendre le site inopérant. Smiley smile

Bonne continuation à toi aussi.
Un point m'étonne quand même,

Tu dis que tu as un problème et tu viens l'exposer sur le forum.

On te propose une solution qui fonctionne parfaitement (tel est du moins le point vue de celui qui la propose) et pour l'instant tu n'as toujours rien dis de ce que tu pensais de la solution proposée en elle même !

Tu écartes d'un revers de la main une considération sur la pertinence du balisage. Soit.

Tu passes du statut du questionneur à celui de donneur de leçon avec une considération dépréciative sur quelque chose qui n'avait pas du tout à être apprécié. Soit.

Oui mais la solution elle même ?
Si c'est le <dt> lui même qui t'a arrèté, il n'a pourtant pas du t'échapper que celà ne change rien pour les possibilités d'application des css.

Il s'agit de toute façon de particulariser le premier élément de <dl> de la même manière où j'avais indiqué que je particularisais le dernier élément du même dl.

Au pire, dans ton cas, celà donne :

<dl>
<dd class="first_element">...</dd>
... etc...


et ça roule.

La solution est donnée pour un design fluide mais évidemment ça marche pour un design fixe.
Modifié par clb56 (10 Mar 2006 - 20:04)
Sujet clos
Aller à