28220 sujets

CSS et mise en forme, CSS3

Modif gabarit fluide Alsacréations : couleur de fond en pleine page

Bonjour à tous et à toutes,

Merci tout d'abord aux personnes d'Alsacréations pour ce beau site et ces tutoriels si bien pensés Smiley biggrin

J'ai trouvé mon bonheur avec ce gabarit :

http://www.alsacreations.com/articles/modeles/g_d_haut_fluide.htm

Or, je me suis rendu compte d'une chose : le pied/footer et la couleur de fond que j'ai mise dans le conteneur ne descendent QUE selon le texte que l'on rentre dans le centre du gabarit.

Donc, si mon texte est très court dans le centre (du genre un simple message "Aucun résultat" et basta...), le footer et la couleur de fond vont remonter et l'apparence va bien sûr poser problème, la couleur du conteneur remontant inéxorablement...

Autre illustration : j'ai des blocs de navigation à gauche et à droite du gabarit et quand le texte du centre est trop court, la couleur de fond remonte avec le footer, ce qui fout en l'air la présentation.

Ce que je voudrais pouvoir faire, c'est avoir la couleur de fond restant en pleine page quoi qu'il arrive et mon footer toujours sous les blocs.

Voilà, j'espère être clair.

Merci de votre aide par avance !

Ovide
Modifié par Ovide (27 Mar 2005 - 14:25)
Salut, as tu modifié des lignes de code du gabarit ou as-tu gardé exactement le même code HTML et CSS?
Raphaël : oups, ça fait un moment que j'avais ça de côté Smiley cligne . J'update mes sources de suite...

ocb2b : J'ai légèrement modifié le code pour mes aménagements, ce qui donne ça chez moi :


body {
font-family: "Geneva", Lucide Grande, Arial, Helvetica, sans-serif;
font-size: x-small;
line-height: 1.3em;
margin: 0;
padding: 0;
/* Pour IE5 PC */
voice-family: "\"}\"";
voice-family: inherit;
font-size: small;
}
html>body {
/* Pour Opera */
font-size: small;
color: black;
}

#header {
height: 130px;
}

#conteneur {
position: absolute;
width: 100%;
background-color: #336699;
}

#centre {
margin-left: 180px;
margin-right: 180px;
padding: 10px;
background-color: #FFFFFF;
}

#gauche {
position: absolute;
left:0;
width: 160px;
padding: 10px;
margin-top: 20px;
text-align: center;
}

#droite {
position: absolute;
right:0;
width: 160px;
padding: 10px;
margin-top: 20px;
text-align: center;
}

#footer {
padding: 20px;
height: 30px;
text-align: center;
}

Modifié par Ovide (27 Mar 2005 - 14:29)
Tu n'as pas posté le HTML, je pars donc du principe qu'il est exactement pareil à celui du tuto.
J'ai un peu esquivé la partie html oui, car j'ai un code relativement compliqué et long (php, sql...) qui ne va pas aider je pense.

Ce que je peux dire, c'est que le code du gabarit à la base, ne permet pas d'avoir une couleur de fond en pleine page quoi qu'il arrive (j'entends par là quand on met un background-color: black; dans la partie conteneur par exemple...)
Modifié par Ovide (27 Mar 2005 - 14:43)
Post toujours ton .php, ca me fait pas peur Smiley smile . Il apparait dejà que dans le css le footer est défini comme #footer et dans le HTML comme pied.
Bon, comme tu veux le html, j'ai édulcoré au max le code et ça donne ça :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>

<link rel="stylesheet" type="text/css" href="habillage.css" />
<link rel="stylesheet" type="text/css" href="typo.css" />

</head>

<body>

<?php

//DIV CONTENEUR
echo '<div id=conteneur>';

//HEADER
include 'header.php';

//DIV GAUCHE
echo '<div id=gauche>';

//******************************************** DEBUT NAVIGATION *********************************************************

code inutile...

echo '</div>';

//******************************************** FIN GAUCHE *********************************************************

//DIV DROITE
echo '<div id=droite>';

code inutile

echo '</div>';

//******************************************** FIN DROITE *********************************************************

//DIV CENTRE
echo '<div id=centre>';

code inutile

//FIN DIV CENTRE
echo '</div>';

include 'footer.php';

//FIN DIV CONTENEUR
echo '</div>';

?>

</body>
</html>


J'espère que c'est assez clair surtout... Smiley confus
hmm désolé de te faire upper tout le temps mais comme j'ai pas les fichiers a inclure comme le header et le footer ca me sert pas trop. Smiley sweatdrop
Peux-tu upper le code source de la page après qu'elle ai été générée?
C'est plutôt à moi d'être désolé de pas donner assez d'infos à chaque fois hein... Smiley confused

Je pourrais bien te faire un copier/coller de tout le code html après génération mais c'est le bordel grave, quasiment illisible (tout à la suite sans espaces...)

Au pire j'te donnerai l'url de test...

En tous cas, voici le header :


<!-- HEADER -->

<?php

//HEADER
echo '<div id="header">';

require_once 'admin/connexion.php';

//LOGO
echo '<div id="logo">';
echo '<a href="index.php"><img src="images/logo.gif" alt="" /></a>';
echo '</div>';

echo '</div>';

?>


et le footer :


<!-- FOOTER -->

<div id="footer">

<a href="index.php" class="lien">Accueil</a>

</div>

Modifié par Ovide (27 Mar 2005 - 22:36)
Sujet clos
Aller à