28172 sujets

CSS et mise en forme, CSS3

[Résolu car pas de solution] CSS3 : border rgba

Bonsoir,

j'utilise actuellement la propriété 


border:10px solid rgba(46, 29, 30, 0.5059)


or j'ai un soucis c'est que dans les angles, les bordures se chevauchant
cela crée des zones plus sombres ( voir les coins entourer en rouge sur l'image )

http://s3.noelshack.com/old/up/site-16e8d5f32.jpg

Existe t'il une solution ? Smiley ohwell

Merci d'avance

Edit: le problème existe seulement sous chrome ! et safari peut être ( pas essayer )
le border-radius permet d'arrondir les angles et supprimer cette sur-couche
Source : http://css-tricks.com/transparent-borders-with-background-clip/
mais bon ce n'était pas ce que je souhaite ... Smiley ohwell il est malheureux que chrome ai des
soucis alors que même IE9 ne pose aucun problème.
Modifié par Vipear (17 Jun 2011 - 02:49)
Bonjour à toutes et à tous,

j'ai un peu étudié ton problème de RGBA et j'ai, il me semble, trouvé une solution de contournement, à ce problème de chevauchement des coins.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head><title>Test</title>

<style type="text/css">
#boite1 {
		border-top		: 10px solid rgba(46, 29, 30, 0.1);
		border-right	: 10px solid rgba(46, 29, 30, 0.09);
		border-bottom	: 10px solid rgba(46, 29, 30, 0.1);
		border-left		: 10px solid rgba(46, 29, 30, 0.09);
		margin	: 5%;
}
#boite2 {
		border			: 10px solid rgba(46, 29, 30, 0.1);
		margin	: 5%;
}
</style>
</head>

<body>
<div id="boite1">&nbsp;&nbsp;</div>
<div id="boite2">&nbsp;&nbsp;</div>
</body>
<html>


J'ai pensé, puisqu'il s'agit d'un recouvrement ou chevauchement de la ligne et de la colonne dans le coin que si le degré d'opacité était légèrement similaire sans être identique que nous pouvions contourner le problème !

@+
Modifié par Artemus24 (17 Jun 2011 - 09:53)
J'ai trouver une solution alternative.
Remettre un conteneur contenant mon site pour faire un background transparent
et recentrer le tous à l'intérieur.
Bonjour Vipear,

il est quand même très surprenant de ta part de poser une question, que quelqu'un trouve une solution et que toi tu n'en tienne même pas compte !

Merci pour ceux qui travaille pour toi. Smiley bawling

La prochaine fois, tourne ta langue sept fois dans ta bouche avant de poser une nouvelle question. Merci !

@+
Modifié par Artemus24 (17 Jun 2011 - 17:28)
Artemus24 ne pleure pas, jb_gfx a raison ! d'autres personnes auront certainement le même problème
et nous avons apporter tous les deux une solution a se problème Smiley cligne
bonsoir,

Ce qui est amusant c'est de te voir en plein apprentissage confronté a des problèmes récurent chez le débutant et que tu t'oriente naturellement vers les solutions habituelles.

A priori sémantique ou optimisation du code pour le référencement ne t'ont pas encore intéresser. Attention à la divite Smiley cligne

Bon continuation, cordialement

<edit>je ne suis pas fan du tout de ton avatar , juste mon avis </edit>
Modifié par gc-nomade (17 Jun 2011 - 19:07)
Et bien la solution que j'ai utilisé je l'avais déjà mise en place.

Mais étant en pleine révision sur la structure de mon site, j'essaye d'explorer toutes les possibilités
et surtout de voir si ce que j'ai fait jusqu'à maintenant est correct ou totalement dégueu, car je
déteste pisser des lignes de code comme un cochon ainsi que comprendre le fonctionnement
de chaque propriété pour optimiser et être compris par un maximum de navigateurs.

Mon site avant d'être revu était accessible a partir de IE8 et tous les autres navigateurs
mais bon quand j'ai télécharger IEtester sa ma donné envi de pousser un peu plus le défi
avec IE6 et IE7 mais bon, je préfère laisser tomber et simplement faire du code propre et
sans superflu inutile tout en respectant le W3C.

Ps : j'ai modifier mon avatar car si tu n'es pas fan, d'autres également seront du même avis

Qu'entends tu pars :
gc-nomade a écrit :
A priori sémantique ou optimisation du code pour le référencement ne t'ont pas encore intéresser. Attention à la divite

Modifié par Vipear (18 Jun 2011 - 03:38)
Bonjour,

tu ne semble pas utiliser de titre par exemple.
Les div sont neutre et ne permettent pas de distinguer un titre d'un paragraphe. Ton document n'est pas ou mal structuré.
ex:
	<div id="header">
		
		<div id="Titre">
			<img id="Logo" src="css/img/logo.png" alt="" />
			<div id="Bookmark">
				<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;username=xa-4bf9535621bfa993"><img src="css/img/bookmark.png" alt=""/></a>
			</div>
		</div>

	
	</div>

pourrait être structurer comme ceci:
	<div id="header">
		
		<h1 id="Titre">
			<img id="Logo" src="css/img/logo.png" alt="E-porfoliio by E;Merten" />
		</h1>
			<p id="Bookmark">
				<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;username=xa-4bf9535621bfa993"><img src="css/img/bookmark.png" alt=""/></a>
			</p>
	
	</div>

Cordialement

p.s. , l'avatar est plus agreable Smiley smile

par ailleurs , un doctype xhtml1.0 , voir du html5 ( <!DOCTYPE html> )serait plus approprié (pas obligé de faire usage des balise html5 avec ce doctype Smiley cligne ).

les majuscule, et chiffre sont interdis comme premeir caractéres dans les noms de class et d'id (a priori les navigateurs actuels ne bug plus trop la dessus , mais s'en souvenir si une règle ne s'applique pas ou qu'un script js ne réagit pas comme prévu).

dans ta page galerie : 0 titre
dans contact : on passe direct a h2 ...

++
Modifié par gc-nomade (18 Jun 2011 - 14:25)
Sauf que gc-nomade il ne faut pas se fier aux noms des id
ce n'est pas parce que j'ai mit "Titre" que c'est un titre
et qu'il faut donc utilisé une balise fait pour les titres car elle
contient aucun texte, juste une image Smiley cligne

Ceci est une erreur de ma part car au début s'était du texte
et j'ai rectifier en faisant une image.

gc-nomade a écrit :
par ailleurs , un doctype xhtml1.0 , voir du html5 ( <!DOCTYPE html> )serait plus approprié (pas obligé de faire usage des balise html5 avec ce doctype cligne ).

Pour une déclaration XHTML 1.1 petit rappel Smiley cligne
http://www.w3.org/QA/2002/04/valid-dtd-list.html

gc-nomade a écrit :
les majuscule, et chiffre sont interdis comme premeir caractéres dans les noms de class et d'id (a priori les navigateurs actuels ne bug plus trop la dessus , mais s'en souvenir si une règle ne s'applique pas ou qu'un script js ne réagit pas comme prévu).

Aucun de mes id et class ne commence par un chiffre et pour les majuscules, même IE6 pose
aucun soucis donc bon ce n'est pas d'actualité ou je ne sais pas où ta pêcher ton info =D

gc-nomade a écrit :
dans ta page galerie : 0 titre
dans contact : on passe direct a h2 ...

Alors sa j'ai rien compris lol Smiley sweatdrop
Modifié par Vipear (18 Jun 2011 - 14:35)
Salut,

gc-nomade tu peux citer tes sources pour la majuscules dans les nom de class et id, je n'ai jamais entendu parlé de ça.

Et puis pourquoi mettre un doctype HTML5 si on ne fait pas usage des balises implémentés ? Je sais que HTML5 à le vent en poupe en ce moment, mais de là a utiliser le doctype sans raison, bof à part pour éviter les erreurs de validation je ne vois pas trop à quoi sa sert ?

A moins que j'ai mal compris ?

Merci d'avance ^^
Bonjour,

http://www.w3.org/TR/html401/types.html#type-id a écrit :
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").


Bon apparemment pour les majuscules c'est une pratique que j'applique depuis plusieurs années suite a des soucis decrit plus tôt. ( a moins que je n'ai pas remis la main sur le bon document).
Le minuscule ne s'adresse qu'au document xhtml : http://www.la-grange.net/w3c/xhtml1/#diffs (page traduite en français)

Pour le doctype html5 il a l'avantage d'etre plus "permissif" et reste un doctype valide (que tu code derriere façon xhtml ou html texte)
Xhtml1.1 ne sert a rien sauf si tu sert ta page comme du xml avec son prologue.

Si utiliser a bon escient: IE passe en mode quirk avec le prologue. je crois n'avoir vu qu'un seul site d'etudiant basé sur xhtml1.1 xml . Personnellement je ne sais pas faire.
Si utilisé comme html(texte) et bien c'est une erreur sans grande conséquence mais une erreur quand même Smiley smile .

Cordialement
Modifié par gc-nomade (18 Jun 2011 - 15:57)
Ok, merci pour ces précisions, le doctype XHTML 1.1 est celui que j'utilise le plus fréquemment, apparemment à mauvais escient, une erreur de moins que je ferais.

Néanmoins, je reste sceptique sur le fait d'utiliser le doctype HTML5 juste pour éviter les erreurs de validations, c'est un peu facile à mon sens, mais bon c'est un peu hors sujet ^^

A bientôt
J'utilise le xHTML Strict pour avoir une bonne maîtrise du HTML, rien de plus Smiley cligne
et éviter de commencer a avoir des habitudes trop permissif
Vipear a écrit :
J'utilise le xHTML Strict pour avoir une bonne maîtrise du HTML, rien de plus Smiley cligne
et éviter de commencer a avoir des habitudes trop permissif


:) permissif ne veut pas forcement dire moins rigoureux.

html5 te permet déjà par exemple de créer des attribut supplémentaire (data-nom-de-l-attribut-personnalisé) ou de faire usage d'attribut supplémentaire défini : WAI-ARIA http://dev.w3.org/html5/spec/content-models.html#wai-aria
Et plein d'autre chose pas forcement encore vraiment utilisable
Certes, mais au moins cela impose d'être plus vigilant dans son code pour être valide W3C
Vipear a écrit :
Certes, mais au moins cela impose d'être plus vigilant dans son code pour être valide W3C


idem pour html5 ou tout autre doctype, les règles diffèrent légèrement, mais il y a des règles ... ou plutôt standard/recommandation à suivre Smiley smile . Un bon vieux html 4.01 , ça se valide tout autant qu'un autre doctype Smiley smile .

edit:
c'est vrai que coder a la mode xhtml est plus facile : pas de majuscule pour les balises et on prend soin de refermer les balises , ça motive à se garder en tête la structure du document.
Modifié par gc-nomade (18 Jun 2011 - 19:35)
gc-nomade a écrit :

edit:
c'est vrai que coder a la mode xhtml est plus facile : pas de majuscule pour les balises et on prend soin de refermer les balises , ça motive à se garder en tête la structure du document.

Exactement !
Sujet clos
Aller à