28172 sujets

CSS et mise en forme, CSS3

Encore un problème de HasLayout avec IE !

Salut !
Je suis un petit nouveau mais ça fait super longtemps que je viens sur Alsacréation !
Malgré avoir épluché tous les articles et les sujets là dessus, j'ai encore un problème.
Les liens image sont inclicables sur IE ! Pourtant ça fonctionne sur Firefox, Opéra et Safari.
J'ai testé toutes les techniques pour conférer le layout à ces liens et au bloc les contenant, mais c'est toujours pareil. Je vous met la source :



.support {
	background-image: url(../images/support.png);
	width: 965px;
	height: 714px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
.liens {
	position: absolute;
	right: 145px;
	top: 145px;
	z-index: 10;	
}
.a4 {
	text-align: justify;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #0000AA;
	font-size: 1em;
	line-height: 1.21em;
	padding-left: 85px;
	padding-top: 62px;
	padding-right: 8px;
	overflow: auto;
	width: 324px;
	height: 525px;
	left: 140px;
	top: 125px;
	position: absolute;
	background-image: url(../images/a4.png);
	background-repeat: no-repeat;
	background-color: transparent;
}




<div class="support">
			<div class="a4">

Bienvenue !<br /><br />

Bla bla bla bla truc machin bidule chose
			</div>

			<div class="liens">
				<a href="cv.html" accesskey="1" title="Curriculum Vitæ">
					<img src="images/gomme.png" width="130" height="38" alt="Gomme à crayon illustrant le curriculum vitæ" />
				</a><br /><br />

				<a href="services.html" title="Services graphiques et web proposés">
					<img src="images/crayon.png" width="238" height="55" alt="Crayon illustrant les services graphiques" />
				</a><br /><br />

				<a href="portfolio.html" title="Créations et projets en cours">
					<img src="images/polaroid.png" width="216" height="258" alt="portfolio" />
				</a><br /><br />

				<a href="contact.html" accesskey="7" title="Coordonnées de John Doe">
					<img src="images/post-it.png" width="194" height="163" alt="Post-it sur lequel est inscrit les coordonnées" />
				</a>
			</div>
		</div>

Modifié par Heyoan (28 May 2009 - 11:47)
Oups, si un modérateur peut enlever mon nom et mon prénom du message que je viens de poster ! Ca serait gentil. La bourde...

Petite précision, j'utilise un "hack css" pour que mes images soient transparentes sous IE.
Je ne pense pas que le problème vienne de là puisque c'est la même chose quand je vire le .HTC.
Salut,

Pour le hasLayout sur la classe .liens, un width:100% ne suffit pas ?
Au passage, tu as une fonction "Editer" en haut de ton message qui te permet de faire la modification toi-même.
Angy a écrit :
Oups, si un modérateur peut enlever mon nom et mon prénom du message que je viens de poster !
C'est fait. Et comme le précise Agylus tout le monde peut modifier ses propres posts. Smiley cligne
Merci !

Malheureusement, ça ne fonctionne pas . Ni float, ni zoom, ni rien du tout ! Smiley decu

___
Pardon ! Je n'étais pas enregistré, voilà pourquoi je ne pouvais pas éditer.
Modifié par Angy (28 May 2009 - 11:52)
Angy a écrit :
Je ne dois pas encore avoir l'option éditer vu que je suis nouveau, je ne vois pas la fonction.
Le bouton se trouve en haut à droite (à côté de citer) mais pour le voir il faut être connecté.
Salut,

J'ai testé ton code dans IE6 et les images sont cliquables. Peut-on voir ta page en ligne ? (sinon donne tout ton code).
J'ai mis mes 3 feuilles de styles et la page principale :

reset.css

@charset "utf-8";

/* Permet de supprimer la plus part des mises en page par défaut afin d'avoir moins de différences d'affichage entre les différents navigateurs */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
input, button, select {
    vertical-align: middle;
}
:focus {
	outline: 0;
}
blockquote,q:before,q:after {
	quotes: none;
	content: '';
	content: "";
}


pngHack.css

@charset "utf-8";

/* Permet d'avoir la transparence des images format PNG sur Internet Explorer */

.liens img, .feuille {
behavior: url(styles/pngHack.htc);
}
.support {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/support.png','sizing-method=scale');
}
.a4 {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/a4.png','sizing-method=scale');
}


styles.css

@charset "utf-8";

BODY {
	background-color: #75a42a;
	overflow: hidden;
}
A {
	text-decoration: none;
	color: #00BC00;
}
.support {
	background-image: url(../images/support.png);
	width: 965px;
	height: 714px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
.liens {
	position: absolute;
	right: 145px;
	top: 145px;
}
.feuille {
	position: absolute;
	left: 30px;
	bottom: 10px;
	cursor: pointer;
}
.a4 {
	width: 332px;
	height: 525px;
	left: 140px;
	top: 125px;
	position: absolute;
	background-image: url(../images/a4.png);
	background-repeat: no-repeat;
	background-color: transparent;
	padding-left: 85px;
	padding-top: 62px;
}
.contenu {
	text-align: justify;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #0000AA;
	font-size: 1em;
	line-height: 1.21em;
	height: 441px;
	overflow: auto;
	padding-right: 8px;
}
.pied {
	text-align: center;
	margin-top: 10px;
}
.pied a {
	border: 0;
	width: 88px;
	height: 31px;
}
.titre {
	text-align: center;
	display: block;
	text-decoration: underline;
	color: #FF5555;
}
ol,ul,li {
	list-style-type : square ;
}


index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
			  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" dir="ltr">
	<head>
		<title>Site personnel de *Moi* - Accueil</title>

		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

		<!-- J'ai retiré les metas inutiles ainsi que la favicon -->


		<link rel="stylesheet" href="styles/reset.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="styles/styles.css" type="text/css" media="screen" />

		<!--[if gte IE 5.0]>
			<link rel="stylesheet" href="styles/pngHack.css" type="text/css" />
		<![endif]-->

	</head>

	<body>
		<div class="support">
			<div class="a4">
				<div class="contenu">
<span class="titre">Bienvenue !</span><br />

Contenu du site. Bla bla bla bla bla bla bla bla bla bla bla.

				</div>
			</div>

			<div class="liens">
				<a href="cv.html" accesskey="1" title="Curriculum Vitæ">
					<img src="images/gomme.png" width="130" height="38" alt="Gomme à crayon illustrant le curriculum vitæ" />
				</a><br /><br />

				<a href="services.html" title="Services graphiques et web proposés">
					<img src="images/crayon.png" width="238" height="55" alt="Crayon illustrant les services graphiques" />
				</a><br /><br />

				<a href="portfolio.html" title="Créations et projets en cours">
					<img src="images/polaroid.png" width="216" height="258" alt="portfolio" />
				</a><br /><br />

				<a href="contact.html" accesskey="7" title="Coordonnées">
					<img src="images/post-it.png" width="194" height="163" alt="Post-it sur lequel est inscrit les coordonnées" />
				</a>
			</div>

			<img src="images/feuille.png" class="feuille" alt="Feuille bleue de décoration" />
		</div>
		
		<div class="pied">
			<a href="http://validator.w3.org/check?uri=referer" onclick="window.open(this.href); return false;">
				<img src="http://www.w3.org/Icons/valid-xhtml11-blue" alt="Valid XHTML 1.1" />
			</a>

			<a href="http://jigsaw.w3.org/css-validator/check/referer" onclick="window.open(this.href); return false;">
				 <img src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="CSS Valide !" />
			</a>

			<a href="javascript:alert('Toutes les images présentées sur ce site sont protégées par la loi sur la propriété intellectuelle (articles L111-1 et suivants du code de la propriété intellectuelle).\n\nAucune reproduction, même partielle, autres que celles prévues à l\'article L122-5 du code de la propriété intellectuelle ne peut être faite de ce site sans l\'autorisation expresse de l\'auteur')">
				 <img src="images/pi.png" alt="Propriété Intellectuelle" />
			</a>
		</div>
	</body>
</html>

Modifié par Angy (28 May 2009 - 19:31)
J'ai toujours aucun problème sour ie6. Mets la page en ligne, vérifie une nouvelle fois et si tu as encore le problème donne nous l'url + la version d'IE avec laquelle tu testes.
Sujet clos
Aller à