28172 sujets

CSS et mise en forme, CSS3

Masquer une image avec une div en fonction de la taille de la fenêtre?

Bonjour à tous,

j'expose mon problème :

Sur mon site : ICI

Vous voyez la bannière, elle est trop grande pour moi et j'aimerais qu'elle soit cachée par une div en fonction de la taille de la fenêtre car si vous changez la taille de la fenêtre vous verrez que les textes sont bien alignés en colonnes et suivent la taille mais pas l'image.

J'ai essayé en la mettant en image de fond d'un div qui se masquerait en fonction de la taille du navigateur mais je n'ai pas réussi.. Quelqun aurait une idée ?

Tant qu'à faire j'ai une autre question : Comment faire pour que le footer (avec le copyright) soit toujours en dessous du niveau des colonnes ?

Voici le CSS :

/* STRUCTURE */

/* Corps */
body {
    background-color: white;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 0;
}
p.footer {
    display: inherit;
    margin-top: 10px;
}
/* Colonnes */
#center {
    background-color: white;
	overflow: hidden;
}
#left {
    background-color: white;
	float: left;
	margin-right: 10px;
	width: 30%;
}
#right {
    background-color: white;
	float: right;
	margin-left: 10px;
	padding-left: 10px;
	width: 30%;
}
/* Liste */
#navcontainer {
    margin-left: 5px;
}
#navlist li {
    display: inline;
    margin: 0;
    padding: 0;
}
#navlist li:before {
    content: "| "; 
}
#navlist li:first-child:before { 
    content: ""; 
}

/* ------------------------------------ */

/* POLICES,TAILLES,ALIGNEMENTS,COULEURS */

/* Textes */
#container {
    font-family: Arial, sans-serif;
    font-size: x-small;
    text-indent: 11px;
    color: #333333;
}
#navcontainer {
    font-family: Arial, sans-serif;
    font-size: x-small;
    text-indent: 10px;
    color: #CDCDCD;
}
h1 {
    font-family: Times New Roman, Arial, sans-serif;
    font-size: 45px;
    font-weight: 100;
    letter-spacing: -2.3pt;
    text-transform: uppercase;
	word-spacing: 2.03pt;
}
h2 {
    border-bottom: 1px solid #CDCDCD;
    color: #444444;
    font-family: Georgia, Times New Roman, Arial, sans-serif;
    font-size: 11px;
    font-style: italic;
    font-weight: lighter;
    letter-spacing: 0.01em;
    margin-top: -15px;
    padding-bottom: 10px;
    text-indent: 10px;
}
p.copyright {
    font-family: Arial, sans-serif;
    font-size: x-small;
    text-indent: 10px;
    color: #CDCDCD;
}
p.subtitle {
    color: #CDCDCD;
    font-family: Arial, sans-serif;
    font-size: x-small;
    text-indent: 10px;
}
p.text {
    color: #333333;
    font-family: Arial, sans-serif;
    font-size: x-small;
    text-indent: 10px;
}
p.title {
    background-color: #f3f3f3;
    border-bottom: 1px solid #CCC;
    color: #333333;
    font-family: Palatino, Georgia, sans-serif;
    font-size: 16px;
    line-height: 16pt;
    text-indent: 10px;
}
/* Liens */
a {
    color: #333333;
    text-decoration: underline;
}
a:hover {
    background-color: #f3f3f3;	
    color:#333333;
    text-decoration: none;
}
a:visited {
    color: #333333;
    text-decoration: underline;
}

Modifié par simon-s (24 Feb 2008 - 12:24)
Bonjour,

simon-s a écrit :
J'ai essayé en la mettant en image de fond d'un div qui se masquerait en fonction de la taille du navigateur mais je n'ai pas réussi.. Quelqun aurait une idée ?

Heu... mettre l'image en image de fond d'un div qui prendra la bonne largeur en fonction de la largeur de la fenêtre du navigateur?
Donc, déjà supprimer l'image du code HTML mais en gardant l'élément DIV qui la contenait. Ensuite:
div#banner {
	background: url(banner.jpg) no-repeat left top;
	height: 300px;
}

Il faudra par contre prévoir une image assez large, avec bord perdu à droite par exemple, ou autre mécanisme pour avoir un rendu correct sur les écrans un peu larges.

simon-s a écrit :
Tant qu'à faire j'ai une autre question : Comment faire pour que le footer (avec le copyright) soit toujours en dessous du niveau des colonnes ?

Les colonnes en question sont des div flottantes (sauf celle du milieu). Donc un petit clear: both sur le footer devrait faire l'affaire.
Merci de ton aide Smiley smile

Je pensais mettre une image fort sombre donc avec une personne sur fond noir et donc choisir une couleur noire de fond pour la div comme ça peut importe l'écran pourra avoir une résolution immense Smiley smile
Si tu vas sur mon site j'ai fait ce que tu dis mais j'ai un problème le footer ne se met pas tout en bas (enfin du moins sur ma résolution 1440x900) Et l'image tu vois, elle ne s'affiche pas.. Comme je me suis dit que le css est dans le dossier CSS et donc pas dans le même dossier que l'image j'ai mis un lien avec la racine de mon site : http://www.saphyrs.com/simonsouris/banner.jpg mais cela ne marche pas ..
Bonjour simon-s,

Pour ton image tu as :

div#banner {
background:transparent url([#red]http://www.saphyrs.com/banner.jpg[/#]) no-repeat left top;
height:300px;
}

Au lieu de :

div#banner {
background:transparent url([#blue]http://www.saphyrs.com/simonsouris/banner.jpg[/#]) no-repeat left top;
height:300px;
}

Ou un lien relatif vers le fichier où se trouve ton image :
/simonsouris/banner.jpg ou img/banner.jpg ou...

Pour le footer tu as :

<[#red]div id[/#]="footer">
<p class="copyright">
Copyright © 2007-2008, Simon SOURIS. Version 2.0 - Site optimisé pour
<acronym title="Firefox est un navigateur internet rapide et puissant."> Firefox </acronym>
</p>
</div>

avec en css :

[#red]p.[/#]footer {
clear:both;
margin-top:10px;
}


au lieu de :

#footer {
clear:both;
margin-top:10px;
}

A priori, cela devrait mieux fonctionner avec les modifs... Smiley cligne

Cdt,
Sylvain
Sujet clos
Aller à