28172 sujets

CSS et mise en forme, CSS3

Découpage d'un design web

Pages :
(reprise du message précédent)

Niouk18 a écrit :
- body de largeur fixe reçoit le background de la page (le bord de la page a une petite ombre, ce n'est pas un cadre noir net que l'on peut ajouter seulement avec du css)

Arf, je n'avais pas fait attention à l'ombre portée.
On peut dire que tu fais tout pour te compliquer la vie ! Smiley langue

Autre essai :
- body reçoit le background de la page (fond noir + ombre portée)
- header affiche l'image du header et est positionné en absolu
- container reçoit le background du joueur de trombone calé en bas
- footer a un simple background-color et une opacité moindre
Cygnus a écrit :

Arf, je n'avais pas fait attention à l'ombre portée.
On peut dire que tu fais tout pour te compliquer la vie ! Smiley langue

Nan nan, je fais tout pour que ce soit beau Smiley lol ! Mais c'est vrai que c'est pas toujours le plus facile... Smiley ohwell

Okay merci, je vais essayer ça !
Niouk18 a écrit :
Heu... et je le mets où le dégradé d'arrière plan ? Smiley sweatdrop

Tu l'affectes à l'élément html Smiley cligne
Ah wé sorry... je suis bête Smiley biggol !

Mais le truc c'est que si tu mets le header en position "absolute", il sort du flux et donc l'ombre passe dessous !!

Y'a pas à dire... c'est compliqué Smiley sweatdrop !
Niouk18 a écrit :
Ah wé sorry... je suis bête Smiley biggol !

Mais le truc c'est que si tu mets le header en position "absolute", il sort du flux et donc l'ombre passe dessous !!

Même avec le body en position : relative ? Smiley rolleyes 
html { background : url(degrade.jpg) repeat-x 0 0; }

body {
  position : relative;
  margin : 0 auto;
  width : 970px;
  background : url(rebord.jpg) repeat-y 0 0;
}

#content {
  position : relative;
  top :-74px; /* ici la hauteur de l'image du header */
  background :  url(joueur.png) no-repeat bottom left;
}


<body>
    <img src="image_du_header.jpg" alt="" />
    <div id="content">
      <p>Lorem ipsum dolor sit amet consectetuer nulla elit in sodales id...</p>
      <p>Lorem ipsum dolor sit amet consectetuer nulla elit in sodales id...</p>
    </div>
</body>
Salut !

l'ombre passe toujours sous le header avec cette dernière version.

Finalement, la version suivante fonctionne, SAUF que j'aimerais que lorsque le contenu de la page est court, cette dernière fasse quand même la hauteur de la fenêtre du navigateur :

html
<body>
  <container>
    <page>
      <easy-access></easy-access>
      <h1></h1>
      <img logo></img logo>
      <menu></menu>
      <contenu></contenu>
    </page>
  </container>
</body>

css
html, body {
   min-height: 100%;
   margin: 0;
   padding: 0;
}

html {
   background: #6c6c6c url(img/background_gradient.jpg) repeat-x top;
}

body {
   width: 800px;
   margin: 0 auto;
   background: url(img/page.png) repeat-y center;
   font: normal 80%/1em Verdana, Geneva, Arial, Helvetica, sans-serif;
   color: #dcdcdc;
}

#container {
   position: relative;
   background: url(img/header.jpg) no-repeat top center;
}

#page {
   width: 750px;
   margin: 0 auto;
   padding-bottom: 80px;
   min-height: 100%;
   background: url(img/player_shadow.png) no-repeat bottom left;
}

#footer {
   position: absolute;
   bottom: 20px;
   width: 710px;
   margin: 0;
   padding: 0 20px;
   background: #363636;
   color: #787878;
   font-size: 0.8em;
   
   filter: alpha(opacity=80);
   -moz-opacity: 0.8;
   opacity: 0.8; 
}


Si vous avez une idée Smiley cligne !
Pages :
Sujet clos
Aller à