28172 sujets

CSS et mise en forme, CSS3

Besoin d'aide ombre porté element li, div, p sur IE, opera

Bonsoir a tous,

Voila je suis en train d'ecrire un page web sur lequel j'essai quelques technique CSS3 a savoir ombrage, opacity, bord arrondis. Et comme toujours le vilain IE fait des siennes mais aussi opéra. Quand a FF,Safari, Chrome no soucis.

j'ai essayé de comprendre comment faire pour apporter le meme rendu sur ces deux a partir des tuto d'alsa mais ne comprend pas bien ou placer les codes de débugage IE, Opera pour l'ombre porté sur un élément li, div et p .

Merci a tous pour votre aide

Voici mon code HTML


<!DOCTYPE html>

<html lang="fr">
<head>
  <meta charset="UTF-15">

  <title>TITRE</title>

  <link rel="stylesheet" media="screen" href="style.css"> 
</head>


<body>

<!-- Document -->
<div id="header">
<h1></h1>
<ul id="menu">
	<li><a href="#Histoire" Title="Histoire du ski traditionel">Histoire</a></li>
	<li><a href="#organisation" Title="Organistations">Organisations & Compétitions</a></li>
	<li><a href="#pratiquants" Title="Les pratiquants">Les pratiquants</a></li>
	<li><a href="#xxx" Title="xxx">xxx</a></li>
</ul>
</div>
<div id="global"> 

<H2>TITRE</h2>

<p>paragraphe 
</p>

<p>paragraphe 
</p>

<p>paragraphe 
</p>
<br>
<p>paragraphe 
</p>
<p></p>
<p></p>

</div> 
<div id="footer"><p>copyrith by xxx : Design: xxx</p></div>

</body>
</html>


CSS

body {

background:url("font/bg_clair.jpg") no-repeat fixed center -550px #7DC3CD;
color: #fff;
margin: 0;
padding: 0;
text-align: left;
font-family: Helvetica, Arial,sans-serif;
}

/*--GLOBAL (PARTIE CONTENEUR GENERAL)---------------------

--------------------------------------------------------*/
#global {
width: 45%;
min-width: 400px;
margin:  auto;
padding: auto;
padding-top: 130px;
padding-bottom: 50px;
}

#global p {
text-shadow:-1px 1px #48AFBD;
font-size:14px;
letter-spacing:1px;
text-align: justify;
line-height: 150%;
text-indent: 5%;

}


@font-face { 
font-family : 'Gladifilthefte';
src: url('font/Gladifilthefte.ttf') format('truetype'); 
}

#global h2{ 
font-family: "Gladifilthefte", arial, sans-serif;
text-shadow: 1px 1px gray;
letter-spacing: 2px;
padding-bottom: 30px; 
}

#global h3 {
border-left: solid 15px #fff;
padding-left: 15px;
margin-top: 30px;
}


/*--HEADER ( PARTIE ENTETE)-------------------------------

--------------------------------------------------------*/
#header {
position:fixed;
z-index: 9999;
top: 0;
width: 100%;
background: #e5e5e5; 
height: 130px;
-moz-box-shadow: -1px 2px 12px grey; 
-webkit-box-shadow: -1px 2px 12px grey;
}

#header h1 {
background : url("img/header.jpg") no-repeat 70px;
height: 100px;
margin: 0;
padding-left: 70px;}


/*--FOTTER (PIED DE PAGE)---------------------------------

--------------------------------------------------------*/
#footer {
position: fixed;
z-index: 9999;
bottom: 0;
width: 100%;
background: #e5e5e5;
opacity: 0.8; 
height: 40px;
text-align: center;
-moz-box-shadow: 0px 2px 15px grey; 
-webkit-box-shadow: 0px 2px 12px grey; 
margin: 0;
padding: 0;
}

#footer p {
color: #7DC3CD;
margin: 5px 0 0 0;
}


/*--MENU -------------------------------------------------

--------------------------------------------------------*/
#menu li {
display: inline ;
margin-right: 1px;
font-weight: bold;
}

#menu {
margin: 0; 
padding: 0;
text-align: center; 
list-style: none; /*suppression des puces */
}

#menu li a {
color: #7DC3CD; 
text-shadow: -1px 1px px grey; 
padding: 4px 5px ; 
line-height: 1em ; 
text-align: center ; 
text-decoration: none ;
}

#menu  li :hover {
color: #666; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
background: #fff;
-moz-box-shadow: 1px 0px 5px grey;
-webkit-box-shadow: 1px 0px 5px grey;
}
Bonjour,

pour les ombres portées dans Opera, derniere version , elles passent sans qu'il y ai besoin d'utiliser un prefixe:

text-shadow:1px 1px 1px purple;
box-shadow: 0 0 3px;

exemple sans images en jouant sur des ombres multiples internes et externes. : http://yidille.free.fr/plux/valign/uploads/tvcss3.html (... en images c'est mieux et ça passe partout Smiley cligne )

Pour IE, le melange des methodes, d'ombrage et arrondi sont probablement incompatible (ou avec des resultats trés moches) il te faudra choisir l'un ou l'autre si tu veut en passer par des alternative equivalente a css3.(est ce que ça en vaut vraiment la peine)

Ces méthodes s'appuient en générale sur des filtres activex intégrés a la feuille de style ou via behavior en inserant le js dans la feuille de style ou un fichier .htc externe ou un fichier javascript, avec ou sans images, ou ...

Il te faut donc récupérer ou créer ces fichiers externes et les lies a ta page, le tutoriel te fournis tout les liens utiles, a toi d'en faire le tri.

Faire cohabiter ombrages et arrondis avec IE, sans en passer par une découpe classique d'image et d'un supplément de balise html, c'est beaucoup de temps pour pas grand chose et frustration. Autant faire tes ombrages et arrondis en images et les decouper.

Cordialement, GC
Merci pour toutes ces infos . Pour répondre, non je n'est pas vraiment besoin de tout ces effets, c'est l'affaire de test CSS3 Smiley cligne Mais c'est vrai que j'aimerais bien trouver le truc pour palier a se problème simplement pour résoudre celui ci et non passer par des images qui comme tu dis dans le cas d'une mise en page serait plus approprié . J'aime bien les chalenge et chercher la ptite bete , c'est formateur Smiley lol

J'ai pu constater un truc étranger sur opéra contrairement aux autres navigateurs . Peut être est ce liée a la structure html de ma page . Peut etre me direz vous ?

Lorsque je fais défiler la barre (de défilement) le déroulement du contenu saccade ou lieu de défiler normalement . Y a t'il un truc pour résoudre ça , une piste peut être ?


Merci pour tout Smiley lol
Sujet clos
Aller à