28172 sujets

CSS et mise en forme, CSS3

Problème de positionnement.

Bonjour à tous,

Voilà, je suis sur le codage de mon (premier) site et tout va bien plus ou moins bien pour le moment (non sans mal quand même ^^).

J'ai un petit problème de positionnement: le site est en scroll horizontal, le header/menu reste fixe, seul le contenu (galerie photos) se déplace.
Le problème c'est que "si" une image est trop grande en hauteur, le scroll vertical se met en place (pas de problème, puisque les images seront redimensionnées mais au cas ou !!) mais quand je descends la page, l'image se superpose sur le header.

Comment faire pour que l'image n'entrave pas le header de la page ?

Merci d'avance, MiniXender. upload/42116-example.jpg
Ahh oui, j'avais oublié ça !!

Donc voici le HTML:

<!DOCTYPE html>
<html lang="fr">
    <head>
     <!-- En-tete de la page -->
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <!--[if lt IE 9]>

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->
        <title>Vincent Grillot Photographie.</title>
    </head>

    <body>
     <!-- Corps de la page -->
     <div id="header">
        <a href="index.html"><img src="Logo.jpg" alt="Vincent Grillot Photographie" style="float:left;" /></a>
        <br />
        <nav>
    <ul>
        <li class="bouton_gauche"><a href="index.html"> <img src="Acceuil.jpg" alt="Acceuil" /></a></li>
        <li><a href="index.html"> <img src="Bio.jpg" alt="Bio" /></a></li>
        <li><a href="index.html"> <img src="Portraits.jpg" alt="Portraits" /></a></li>
        <li><a href="index.html"> <img src="Sport.jpg" alt="Sport" /></a></li>
        <li><a href="index.html"> <img src="Life Style.jpg" alt="Life Style" /></a></li>
        <li><a href="index.html"> <img src="Contact.jpg" alt="Contact" /></a></li>
    </ul>
</nav>



     </div>
     
      <p class="scroll">
        <img class="img" src="IMG_0383.jpg" alt="Andrea" />
        <img class="img" src="IMG_0392.jpg" alt="Andrea" />
        <img class="img" src="IMG_0383.jpg" alt="Andrea" />
        <img class="img" src="IMG_0392.jpg" alt="Andrea" />
        <img class="img" src="IMG_0383.jpg" alt="Andrea" />
        <img class="img" src="IMG_0392.jpg" alt="Andrea" />
        <img class="img" src="IMG_0383.jpg" alt="Andrea" />
        <img class="img" src="IMG_0383.jpg" alt="Andrea" />
 </p>
    

    </body>
</html>


Et le CSS:

body /* On travaille sur la balise body, donc sur TOUTE la page */
{
    background-color: black; /* Le fond de la page sera noir */
    color: white; /* Le texte de la page sera blanc */
    background-image: url("background3.jpg");
    background-attachment: fixed; /* Le fond restera fixe */
    background-repeat: repeat-x;
    background-position: top left;
	height:100%;
	border:0;
	z-index: 3;
}

#header
{
	position: fixed;
	top: 0;
    left: 0;
    margin: 0;
    height: 110px;
    z-index: 2;
    background-color: black;
    border: none;
}
	
p
{
    color: white;
    font-size: 14px; /* Paragraphes de 14 pixels */
    font-family: Arial, "Arial Black", Verdana, serif;
}

h1
{
	color: white;
    font-size: 40px; /* Titres de 40 pixels */
}

/* Navigation */
nav
{
    display: inline;
    width: 740px;
    height: 25px;
    border: none;
    text-decoration: none;
}

nav ul li.bouton_gauche
{
    float : left;
    border-left : 6px dashed black; 
}

nav ul
{
    list-style-type: none;
}

nav li
{
    display: inline;
    margin-right: 20px;
}

:lang(fr) nav li
{

    display: inline-block;

}

nav a
{
    text-decoration: none;
}

nav a:hover
{
    text-decoration: none;
}

p.scroll
{
	display: block;
	overflow: auto;
	white-space: nowrap;
    top: 160px;
    position: absolute;
}

p img.img
{
	vertical-align: top;
    margin:0 0 0 20px;
    max-height: 500px;
}

Modifié par MiniXender (01 Dec 2011 - 20:36)
Déjà premier problème sur ta page : tu as plusieurs fois le même attribut id sur tes images, l'id est un attribut qui doit être unique dans une page.

Ensuite tes grandes images passent forcément par dessus ton header puisque celui ci est en position fixed.

Applique un z-index sur ton #header pour que tes images passe en dessous quand elles sont trop grandes (et met lui une couleur de fond aussi sinon tu verras l'images passer derrière).

Sinon pour forcer la réduction de tes images via CSS tu peux leur mettre un max-height.
Modifié par p0ulpe (30 Nov 2011 - 21:17)
Déjà, merci à toi pour ton aide Smiley smile

Alors, pour les id, par quoi dois-je les remplacer? Car je veux les mêmes propriétés pour toutes mes photos.

Pour le z-index, ça fonctionne très bien, merci.

En effet, j'a mis un max-height (au cas ou car les photos seront redimensionnées avant publication).

En fait, j'ai peur, que selon la résolution, il y ai un problème !
D'accord, cela est rectifié.

Je viens de tester le site sur firefox et IE (habituellement tester sur Safari) : et la, vérification de mes soupçons, gros problèmes, les "images" du header/menu, encadrés en violet, le menu qui apparait en liste sur IE, photos de grandes tailles.
En fait tu utilises une balise HTML5 qui n'est pas reconnue par IE : la balise <nav>.

Du coup tes styles sur cette balise ne sont pas pris en compte dans Internet Explorer.

Tu peux rajouter ce bout de code entre tes balises <head></head> pour rendre tout ça compatible :

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


Pour les images encadrées de violet : un border:none; sur tes images qui se trouvent dans des liens devrait faire l'affaire.

Pour les éléments de liste les uns en dessous des autres, c'est dû au display: inline-block; non reconnu par IE < 8. Une des solutions : tu mets un attribut de langue à ta balise html comme ceci : <html lang="fr">

et ensuite tu mets dans ta css : 

nav li {
    display: inline;
    margin-right: 20px;
}
:lang(fr) nav li {
    display: inline-block;
}


(le display: inline; est pris en compte par IE et le inline-block par les navigateurs récents qui reconnaissent l'attribut lang).
Merci beaucoup p0ulpe !!!!!! =D
Pour IE, je regarderais ce que ça donne demain, mais tu m'es d'une très grande aide (pour les solutions autant que les explications) !!!
Salut, alors, j'ai regardé sous FF et IE, toujours le problème des "images header/menu avec un border Smiley ohwell

PS: j'ai édité mes nouveaux codes.
Modifié par MiniXender (01 Dec 2011 - 20:36)
Bonsoir tout le monde Smiley smile

Y aurait t'il quelqu'un qui aurait une idée pour résoudre mes problèmes ? car j'ai beau chercher ce qui cloche, je ne trouve pas :s

Merci.
Pour tes bordures sur les images tu dois juste appliquer un border:none; en ciblant directement tes images qui sont dans des liens (comme ci dessous).

Exemple :

a img {
    border:none;
}
Merci p0ulpe, ca marche bien !

Mais toujours quelques petits problèmes:
- sur IE, le menu est à coté du "logo" alors qu'il devrait être en dessous.
- sur mon Macbook, le max-height: 500px est parfait, mais sur mon PC portable, les images sont beaucoup trop grosses ce qui entraine un scroll vertical (alors que les "images" logo/menu sont de tailles quasi identiques).

Je sais que c'est beaucoup demandé, merci d'avance Smiley smile
Sujet clos
Aller à