Sujet Précédent Sujet Suivant

Div (CSS) et résolution d'écran

Fermé
juraph Messages postés 66 Date d'inscription mardi 10 mars 2009 Statut Membre Dernière intervention 16 décembre 2023 - 26 mai 2010 à 17:09
juraph Messages postés 66 Date d'inscription mardi 10 mars 2009 Statut Membre Dernière intervention 16 décembre 2023 - 27 mai 2010 à 17:38
Bonjour,

Bonjour,
J'ai écrit un site enHTML et CSS qui fonctionne bien sur mon écran.
Je rencontre les problèmes suivants:
1) si je change la résolution d'écran, la présentation change
Comment faire pour garder la présentation quelle que soit la résolution ?

2) l'affichage de la photo agrandie quand on passe la souris sur la petite photo ne fonctionne pas en IE. Le curseur devient une main mais la photo agrandie ne s'affiche pas. Avec Mozilla et Chrome, ça fonctionne.
Que faire pour que mon site fonctionne avec IE ?

Quelqu'un peut-il m'aider ?
D'avance merci.
Juraph


Adresse du site: http://users.skynet.be/francoise.joris/

page index
<!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>
<title>Françoise Joris, Céramique Papier porcelaine</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="robots" content="index, follow" />
<meta name="description" content="Author: Françoise Joris, Category: porcelaine céramique papier-porcelaine" />
<meta name="keywords" content="Author: Françoise Joris, Category: porcelaine céramique papier-porcelaine, Ceramic, Ceramist, Porcelain, Paper clay" />

<link rel="stylesheet" href="stylebase.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/CSS" href="style1good.css" />
<link rel="stylesheet" type="text/CSS" href="style2good.css" />
</head>

<body>
<div id="global">
<h1><font size="+1">Les </font><font size="+3">porcelaines</font><font size="+1"> de </font></h1>
<h1 id='top'>Françoise</h1>

<ul id="menu">

<li><a href="index.html" title="Ma page d'accueil" class="current"><span>accueil</span></a></li>
<li><a href="page-photo.html" title="mes pièces"><span>pièces</span></a></li>
<li><a href="page-expo.html" title="mes expositions"><span>expositions</span></a></li>
<li><a href="page-contact.html" title="me contacter"><span>contact</span></a></li>
<li><a href="page-lien.html" title="mes liens"><span>liens</span></a></li>

</ul>

<div id="contenu">
<p>
Mon travail sur la porcelaine a commencé par la réalisation de bols très fins mais je voulais repousser les limites de la matière et donner libre cours à mon imagination.
<br>
Après de multiples recherches et expérimentations à la limite des propriétés du matériau, je me suis désormais tournée vers des formes aux excroissances aériennes ou couvertes de languettes finement entrelacées.
<br>
Ce résultat est obtenu par l'adjonction de pâte à papier et de fibres textiles dans la porcelaine ce qui lui donne du corps tout en conservant une grande souplesse de travail.
De fines feuilles de papier porcelaine sont d'abord étalées sur un plâtre pour être ensuite mises en forme, découpées en longs rubans, déchirées ou assemblées au gré de mon inspiration.
<br>
La cuisson en oxydation à 1250° garde la blancheur de la porcelaine et lui confère une translucidité remarquable qui lui donne un aspect presque vivant.
<br>
La porcelaine associée au papier ou à des fibres ouvre un champ d'expérimentation aux possibilités quasi infinies qui continuent de guider mon inspiration vers des formes irréelles et aériennes.
</p>

</body>
</html>

Page des pièces (photos)
<!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>
<title>Françoise Joris, Céramique Papier porcelaine</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!meta name="description" content="Author: Françoise Joris" />
<meta name="keywords" content="Author: Françoise Joris Belgique, Ceramic, Ceramist, Porcelain, Porcelain paper, Céramique, Céramiste, Porcelaine, Papier porcelaine," />

<link rel="stylesheet" href="stylebase.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/CSS" href="style1good.css" />
<link rel="stylesheet" type="text/CSS" href="style2good.css" />

<style type="text/css">

img {
border:1px solid black;
width:auto;
height:auto;
}

.thumb {
position:relative;
top:0;
left:0;
}
.thumb a {
margin:0;
text-decoration:none;
}

.thumb a:hover {
/* indispensable, sinon, pas de zoom */
}

.thumb a .grand {
display:block;
position:absolute;
width:0px;
}

.thumb a:hover .grand {
position:absolute;
top:0;
left:510px;
width:auto;
height:auto;
}
/*.thumb a:hover .grand {
position:absolute;
top:240px;
left:0px;
width:auto;
height:auto;
}*/
-->
</style>

</head>
<body>
<div id="global">
<h1><font size="+1">Les </font><font size="+3">porcelaines</font><font size="+1"> de </font></h1>
<h1 id='top'>Françoise</h1>

<ul id="menu">

<li><a href="index.html" title="Ma page d'accueil" class="current"><span>accueil</span></a></li>
<li><a href="page-photo.html" title="mes pièces"><span>pièces</span></a></li>
<li><a href="page-expo.html" title="mes expositions"><span>expositions</span></a></li>
<li><a href="page-contact.html" title="me contacter"><span>contact</span></a></li>
<li><a href="page-lien.html" title="mes liens"><span>liens</span></a></li>

</ul>
<div id="contenu">
<div class="thumb">
<a href="#">
<img src="photos/P001.gif" alt="" />
<img src="photos/P001_g.gif" alt="" class="grand" />
</a><a href="#">
<img src="photos/P002.gif" alt="" />
<img src="photos/P002_g.gif" alt="" class="grand" />
</a>
<a href="#">
<img src="photos/P003.gif" alt="" />
<img src="photos/P003_g.gif" alt="" class="grand" />
</a>
<a href="#">
<img src="photos/P005.gif" alt="" />
<img src="photos/P005_g.gif" alt="" class="grand" />
</a>
<a href="#">
<img src="photos/P107_4.gif" alt="" />
<img src="photos/P107_4_g.gif" alt="" class="grand" />
</a>
<a href="#">
<img src="photos/P113_1.gif" alt="" />
<img src="photos/P113_1_g.gif" alt="" class="grand" />
</a>
<a href="#">
<img src="photos/P059_3.gif" alt="" />
<img src="photos/P059_3_g.gif" alt="" class="grand" />
</a>
<a href="#">
<img src="photos/P117_1.gif" alt="" />
<img src="photos/P117_1_g.gif" alt="" class="grand" />
</a>
<a href="#">
<img src="photos/P112_1.gif" alt="" />
<img src="photos/P112_1_g.gif" alt="" class="grand" />
</a>
<a href="#">
<img src="photos/P111_1.gif" alt="" />
<img src="photos/P111_1_g.gif" alt="" class="grand" />
</a>
<a href="#">
<img src="photos/P106_2.gif" alt="" />
<img src="photos/P106_2_g.gif" alt="" class="grand" />
</a>
<a href="#">
<img src="photos/P103_2.gif" alt="" />
<img src="photos/P103_2_g.gif" alt="" class="grand" />
</a>
</div>
</div>
</div>
</body>
</html>




Stylebase CSS
html {
margin: 0;
padding: 0;
}

body {
background-color:#0C0E0F; /*#181B1F black #24292E */
color:white;
height:500px; /*afin d'avoir un ascenceur horizontal pour de faibles résolution d'écran*/
width:60%;
margin:10px auto;
padding:15px;
}

h1, h2, h3 {
margin-top: 0;
}

h1 {
padding: 0;
font: 3em "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
color: #BBC4CC;
line-height:40%;
}

h2 {
padding: 0;
font: bold 1.6em "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
color: #BBC4CC;
}

h1#top {
margin: 10px 0 0 1.5em;
border: none;
}
/*
p {
padding: 0;
font: 14px Helvetica,"Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Sans-Serif;
/*color: #BBC4CC;
line-height:40%;
} */
/*titre*/

#banner {
margin: 15px;
}

/*sidebar*/

#sidebar h2 {
margin-top: 0;
font-size: 1.3em;
padding: 10px 5px 0 5px;
color:black;
}

#sidebar p {
padding: 0 5px;
}


Style1good CSS concerne uniquement le menu


Style2good CSS
/* global*/
#global {
background: #2B3137;
text-align: left;
width:85%;
height:105%;
margin:0;
padding:15px;
/* -moz-border-radius:6px;*/

}

/*contenu de la page*/
#contenu {
margin: 40px 300px 0 2em;
padding-top:20px;
background:#3C444C 100% 0% no-repeat;
border: 1px solid red;
padding:20px;
}

/*contenu du tableau des expos*/
#expo {
margin: 60px 300px 0 2em;
padding-top:20px;
background:#3C444C 100% 0% no-repeat;
border: 1px solid red;
padding:20px;
}

/*contenu du contact*/
#contact {
margin: 90px 300px 0 2em;
padding-top:20px;
background:#3C444C 100% 0% no-repeat;
border: 1px solid red;
padding:20px;
}







A voir également:

1 réponse

Réponse 1 / 1
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
Modifié par notobe le 26/05/2010 à 20:36
1) Pour les problèmes de résolutions il faut faire un choix, et en accepter les avantages et les inconvénients.
- Soit on choisit un design "fluide", avec les tailles des blocs en %, l'aspect du site se modulera en fonction de la taille de l'écran et donc risque de changer d'aspect, voire même de présenter des chevauchements en cas extrême.
- Soit on choisit un design fixe avec les tailles des blocs en pixels, l'apparence sera figée. Si écran plus petit -> risque d'apparition d'un ascenseur horizontal. Si écran plus grand : risque de page "perdue" au milieu de l'écran.

2) le zoom vient de là n'est-ce pas ? http://css.mammouthland.net/annexe2_cours8_2.html
Cette page passe t-elle avec IE ? (quelle version d'ailleurs ? 6 ? 7 ? 8 ?)

<blockquote cite="Shakespeare">To be or not to be ; That is the question...</blockquote>
0
juraph Messages postés 66 Date d'inscription mardi 10 mars 2009 Statut Membre Dernière intervention 16 décembre 2023 2
27 mai 2010 à 17:38
Bonjour,
Merci pour ces infos.
J'essaie les 2 types de design et ferai un feedback;
Juraph
0