28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je suis en train de réaliser la maquette d'un site en dur (HTML+CSS) avant de l'adapter sur un CMS (là je vais pâtir, mais c'est une autre histoire... et certainement l'objet d'une prochaine question !) [édit : c'est bon j'y suis arrivé !].

Le contenu de mon site est situé dans une div nommée "div#content". Pour ratraper l'espace laissé par les icônes dynamiques en haut du site (sur le principe de celles d'alsacréation) j'ai remonté la div "div#content" de 180 px. Mais je ne fais que repousser mon problème : l'espace ainsi rattrapé en haut se retrouve en dessous du footer.

Voici une version en ligne de la maquette : http://christus-web.com/ [lien périmé]

Voici la feuille CSS des blocks : http://christus-web.com/ [lien périmé]

Pour résumer voici les caractéristiques de la div :

div#content
{
	position:relative;
	top:-180px;
	margin:0 auto;
	padding:0;
	overflow:hidden;
	background:#333 url(../img/background-content.png);
}


La propriété overflow n'a aucune incidence sur le résultat. Je pense que la source de mon problème provient de la position du block en relatif, qui garde en mémoire la position initiale de la div après son déplacement. Mais je ne trouve pas d'alternatives.

Merci d'avance pour votre aide éventuelle.
Modifié par Olivier C (23 Nov 2011 - 23:36)
Bonsoir,

Une solution possible sans remettre en cause la structure du site :

Dans "div#navtop" remplacer
margin: 0 auto;

par
margin: 0 auto -180px;

et dans "div#content" supprimer
top: -180px;

Modifié par Shunkin (03 May 2011 - 22:50)
@ Shunkin :

Yes ! Ça marche, et le problème est résolu à la racine en plus : c'est à dire au niveau des icônes dynamiques. La communauté d'alsacréations montre encore une fois son efficacité. Merci pour votre aide Shunkin.

Je marque de ce pas ce sujet comme "résolu".