28220 sujets

CSS et mise en forme, CSS3

Design fixe mais qui s'adapte

Bonjour,

J'inaugure ici mon premier post sur Alsacréations. Smiley smile

Voilà, je prépare la structure d'un futur site web. Je souhaiterai que le footer "descende" en fonction de la masse d'information à afficher dans la page. Je galère depuis un moment avec les pourcentages, sans arriver non plus à mettre les div du footer au bon endroit !

Voici ma page

Et voici la css : 
body {
	background-color:#000033;
}

.global{
	position:relative;
	left:0;
	top:0;
	width:100%;
	height:100%;
}

.cont-header {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:94px;
	background-image:url(images/cont-header.gif);
}

.header {
	position:absolute;
	left:0px;
	top:0px;
	width:820px;
	height:94px;
	background-image:url(images/header.gif);
}

.navi {
	position:absolute;
	left:0px;
	top:94px;
	width:820px;
	height:66px;
	background-image:url(images/navi.gif);
}

.cont-navi {
	position:absolute;
	left:0px;
	top:94px;
	width:100%;
	height:66px;
	background-image:url(images/cont-navi.gif);
}

.frame {
	position:absolute;
	left:0px;
	top:0px;
	width:820px;
	height:453px;
}

.cont-frame {
	position:absolute;
	left:0px;
	top:160px;
	width:100px;
	height:100%;
	background-color:#99FF00;
}
	
.frame-g {
	position:absolute;
	left:0px;
	top:0px;
	width:126px;
	height:100%;
	background-color:#33CCCC;
}

.frame-d {
	position:absolute;
	left:126px;
	top:0px;
	width:100%;
	height:100%;
	background-color:#FFFFFF;
}

.footer {
	position:relative;
	left:0px;
	top:0px;
	width:820px;
	height:38px;
	background-image:url(images/footer.gif);
}

.cont-footer {
	position:relative;
	left:0px;
	top:600px;
	width:100%;
	height:38px;
	background-image:url(images/cont-footer.gif);
}


Pouvez-vous m'aider ?

Merci d'avance !
Bonjour,

Première chose es-tu allé voir les exemples de gabarits dans la partie tutoriels d'alsacréations ?

Deuxième chose, tous tes divs sont en position:absolute et donc hors du flux naturel de la page. Le footer ne peut donc pas s'adapter...
Ah merci beaucoup ! J'ai apporté quelques (lol) modifs dans ma css, la voici : 

body {
	background-color:#000033;
}

.global{
	left:0;
	top:0;
	width:100%;
	height:100%;
}

.cont-header {
	left:0px;
	top:0px;
	width:100%;
	height:94px;
	background-image:url(images/cont-header.gif);
}

.header {
	left:0px;
	top:0px;
	width:820px;
	height:94px;
	background-image:url(images/header.gif);
}

.navi {
	left:0px;
	top:94px;
	width:820px;
	height:66px;
	background-image:url(images/navi.gif);
}

.cont-navi {
	left:0px;
	top:94px;
	width:100%;
	height:66px;
	background-image:url(images/cont-navi.gif);
}

.frame {
	position:relative;
	left:0px;
	top:0px;
	width:820px;
	height:100%;
}

.cont-frame {
	left:0px;
	top:160px;
	width:100%;
	height:100%;
	background-color:#FFFFFF;
}
	
.frame-g {
	position:absolute;
	left:0px;
	top:0px;
	width:126px;
	height:100%;
	background-color:#33CCCC;
}

.frame-d {
	position:relative;
	left:126px;
	top:0px;
	width:694px;
	height:100%;
	background-color:#FFF895;
}

.footer {
	left:0px;
	top:0px;
	width:820px;
	height:38px;
	background-image:url(images/footer.gif);
}

.cont-footer {
	left:0px;
	top:613px;
	width:100%;
	height:38px;
	background-image:url(images/cont-footer.gif);
}


Affichage correct sous IE, mais sous Firefox j'ai un problème autour de FRAME GAUCHE & FRAME DROITE, y a une marge horizontale que je souhaiterai faire sauter.

Auriez-vous la solution à mon problème ?
Bonsoir,

je ne sais pas si ça cause le problème mais déjà l'utilisation de left et top sans avoir une position relative ou absolute me parait étrange
Bon et bien je sèche complètement.

Merci Sora, j'ai corrigé cela. Smiley smile Cela n'a pas apporté de solution à mon problème cependant. x Smiley decu

J'ai essayé avec des span pour avoir un flux en ligne, mais je n'obtiens pas le résultat souhaité. De plus je ne suis pas certains que ce que j'essaye réponde à mon besoin premier qui est d'avoir un design qui s'adapte à la taille de la fenêtre et dont le footer descend en fonction du volume d'info le précédent.

Je m'inspire des modèles présentés par alsacréations (très instructifs ceci dit), mais je ne trouve pas le type de structure que je souhaite réaliser.

Ce que j'obtiens là est presque bon, il n'y a que cette marge autour de mes bloc frame gauche et frame droite qui me cause du souci !

Est-ce que ce que je veux faire est faisable ?
Voilà mon dernier résultat, j'ai vraiment l'impression de tourner autour du pot !

Cliquer ici.

Voyez-vous ce que à quoi je veux parvenir ?

Désolé mais je vous recolle une css (dites-le moi si vous préférez que je la mette en externe/dans un .txt) !


body {
	background-color:#000033;
}

.global {
	position: absolute;
	width:100%;
	background-color:#CCCCFF;
}

.cont-header {
	width:100%;
	height:94px;
	background-image:url(images/cont-header.gif);
}

.header {
	width:820px;
	height:94px;
	background-image:url(images/header.gif);
}

.navi {
	width:820px;
	height:66px;
	background-image:url(images/navi.gif);
}

.cont-navi {
	width:100%;
	height:66px;
	background-image:url(images/cont-navi.gif);
}

	
.frame-g {
	float:left;
	width:150px;
	background-color:#33CCCC;
}

.frame-c {
	background-color:#9999CC;
	margin-left: 150px;
	margin-right: 150px;
}

.frame-d {
	float:right;
	width:150px;
	background-color:#FFF895;
	color:#009999;
}

.footer {
	width:820px;
	height:38px;
	background-image:url(images/footer.gif);
}

.cont-footer {
	clear:both;
	position:relative;
	left:0px;
	top:0px;
	width:100%;
	height:38px;
	background-image:url(images/cont-footer.gif);
}
Modérateur
bonjour,
les balise hn et p par exemple applique une marge d'1em avant et aprés, leur position, generalement cette marge est absorbe, par "fusion" ? avec les autres elements les precedent et les suivants.
Cette marge apparait et se repercute sur l'exterieur de leur conteneur, lorsqu'elle se trouvent etre seul, premiere ou derniers dans le dit elements, generalement un margin:0; fait disparaitre cette marge par defaut (IE n'est pas concerné).
dans ton ca s un simple : 
p {margin:0;}

suffit a elimener cette marge comuniqué au conteneur !?

je l'invente pas , je l'ai juste remarqué ! Smiley lol

<edit>
et puis, pour tes "3frame", pour les positionner, les 2 premiers dans le html devrait etre gauche en float puis drpite (ou vice versa) puis centre, . les flotttants se positionnenet en premiers.
</edit>
<re-edit>
en appliquant en premiere ligne dans ton css
a plus 
* {padding:0;margin:0;}

cela te permet de te faciliter le codage en annulant/mettant une grandes parties des valeurs par defaut a l'identique dans les differents navigateurs et te permet parfois de simplifier le code par la suite.
par exemple sur ta page, cela te permet de te debarasser du position:absolute de ton global.
par ailleurs le cklear:both; est suffissant pour ton footer. (tu peut enlever le position:relative et les coordonne de positionnement.
</re-edit>
Modifié par gcyrillus (15 Dec 2005 - 23:31)
[Réglé] Smiley smile

Merci beaucoup gcyrillus ! Je commençais à avoir la tête qui chauffait sérieusement sur ce coup-là, d'autant plus que je me disais que ça ne devait pas tenir à grand chose ! Smiley smile

Je me paye le luxe (avec votre permission) de demander deux derniers renseignements sur ce topic :

1. Comment virer le gras du texte qui apparaît sous IE ?

2. Comment faire sauter le cadre qui apparaît autour de mon div conteneur ?

Ca se passe là !
Administrateur
karnabal a écrit :
[Réglé] Smiley smile
Pour marquer le sujet comme Résolu, merci de se conformer aux règles du forum (règle 5) Smiley cligne
Administrateur
karnabal a écrit :
Yep Raphael, j'aurai bien voulu justement mais aucun bouton éditer n'apparaît près du bouton citer !

Tu es bien connecté en permanence ? Tu as bien un lien profil en haut du forum ? (entre Accueil et Aide/Règles) ?
Désolé Raphael, j'ai "s'inscrire" !

Pourtant quand je m'apprête à rédiger un post, pseudo et password sont pré-rempli (cache du navigateur sans doute).

Ben, comment je fais ?
Administrateur
karnabal a écrit :
Désolé Raphael, j'ai "s'inscrire" !

Pourtant quand je m'apprête à rédiger un post, pseudo et password sont pré-rempli (cache du navigateur sans doute).

Ben, comment je fais ?

Si "pseudo et password" sont affichés dans tes posts, c'est que tu n'es pas logué. Tu as sans-doute refusé d'accepter les cookies sur ton navigateur.
Si tu es connecté en permanence, ces champs n'apparaissent pas.
J'utilise Firefox et je viens de vérifier : j'autorise le navigateur à accepter les cookies.

"Allo Houston, on a un problème". lol

Ben je sais pas trop quoi faire. Je suis embêté, sur la plupart des forums je passe toujours mes threads en [Réglés] quand j'obtiens la réponse. Je fais au moins ça en gage de remerciement, mais là, l'affaire est problématique.

Je peux même pas éditer mes fautes d'orthographes !

Smiley decu
Sujet clos
Aller à