28173 sujets

CSS et mise en forme, CSS3

Help : Fond de Page Statique

Bonjour à tous,

Je suis sur le point de craquer lol

Je suis en train de créer un nouveau site, et personnellement, je n'avais avant la semaien dernière, jamais construit une page en CSS. Un ami programmeur à donc commencé a hurler en voyant ma premiere mouture pleine de <table>^^enfin passons...je m'y suis mis.

J'ai pioché à droite à gauche, mais la je suis perdu.

Voici l'adresse du site en cours de Dev :
http://a-propos.phpnet.org/

Mon problème est le suivant :

la Home a une taille fixe, mais pas les autres (en longueur j'entend)

Après avoir fini une page type pour la suite, j'ai failli hurler en voyant mon texte sortir de la page...(du fond)

J'ai constrtuit la page ainsi => un background général pour tout la page, sans penser à la longueur des texte qui varie....quel c...

Bon alors je me sui repris et j'ai pensé à mon HTML chérie.

J'ai pris l'entete de ma page, menu compris et je l'ai collé dans fichier header.html
Meme chose dnas le pied de page => footer.html

J'appel ces deux parties comme avec des includes...

Puis ouverture de page je balance tout fier mon :
<div class="background">
pour avoir mon fond de page entre le header et le footer....

Et là, la CACA, la CATA, la CATASTROPHE.

1) le fond n'apparait pas
2) le footer se retrouve en haut de la page...
3) le fond apparait si je met des <br> entre les <div class="background"> et </div> de mon background. Mais si j'y met le contenu <div> etc..de ma page, il n'apparait plus...


Je crois que j'ai du rater une étape dans les cours de CSS....pourtant je m'en sortait bien jusque là...enfin je croyais.

HELP please !!


Merci d'avance à vous tous pour votre aide.
Administrateur
Bonjour,

je vois ta page sans aucun CSS à cause du petit problème suivant:
<link href="http://127.0.0.1/ (...) /menu_comptoir.css" rel="stylesheet" type="text/css">

127.0.0.1 (localhost) c'est comme son nom l'indique ton ordinateur pour toi, le mien chez moi, le serveur pour le serveur, etc
C'est une variante du gag du lien vers "C:\Documents and Settings\Quentin\Mes Documents\toto.jpg" (enfin avec bootcamp Smiley smile sinon disons "/users/home/quentin/www/toto.jpg") que personne ne verra sauf toi (on l'a tous fait Smiley rolleyes )
Transfère le fichier sur le serveur et fais un lien (relatif de préférence) pour que cela fonctionne pour tous Smiley cligne
plus d'infos : mon css 


.backgroundall {
	background: white url(design/fondrouge.gif);
	width: 996px;
}

.footer {
	background: white url(design/footer.gif);
	width: 996px;
	height: 108px;
}

/*<group=Contenu du HEADER>*/

.entete {
	background: #333333;
	width: 976px;
	height: 110px;
}
.logotop {
	margin-left: 10px;
	margin-top: 5px;
	width: 156px;
	height: 99px;
	position: absolute;
	background: url(design/logotop.gif);
}
.fondlogin {
	width: 241px;
	height: 109px;
	position: absolute;
	padding-left: 14px;
	margin-top: 0px;
	margin-left: 700px;
	background: url(design/fondlogin.gif);
}
.fondmenu {
	background: #666666;
	width: 976px;
	height: 20px;
	position: absolute;
	top: 110px;
}
/*</group>*/



Et ici, un exemple de HTML.

Le <div> du milieu affiche un cadre avec du texte dont je n'ai pas mis le CSS. IL s'affiche correctement à sa position défini, mais en dessous du Footer qui lui, reste collé en dessous du header... Smiley bawling 


<html>
<head>
<title>Demostheme.com : Espace privé de <?php echo $auteur_session['nom'] ?></title>


<?
// INCLUDE HEADER //
?>
<INCLURE(header.html)>



<?
// CONTENU //
?>



<?
// SUIVI PROMESSES //
?>


<div class="fondsuivi">
<span class="titrerubrique"> Le suivi des promesses</span>


<BOUCLE_suivi (RUBRIQUES) {id_parent=23} {meme_parent}>
#TITRE
</BOUCLE_suivi>



</div>

<INCLURE(footer.html)>




</body>
</html><html>
<head>



Voilà ce que j'obtiens :
http://a-propos.phpnet.org/spip.php?page=mon_espace&var_mode=recalcul

Le footer est collé sous le menu, et le fond rouge étant entre les deux...il reste invisible.

Que dois-je donc faire pour que le footer sois en bas, sous le contenu de mon corps de page ?
Bonjour.

Pour ma part, j'applique la méthode suivante :
Je créé un fichier html comme suit:


<body>
    <div id="frame">
         <div id="header">
                <div id="elt_un">  <? include "elt_un.frg"?> </div>
                <div id="elt_deux"> <? include "elt_deux.frg"?></div>
         </div>
         <div id="main">
               <? include "main.frg"?>
         </div>
         <div id="footer">
                <? include "footer.frg"?>
         </div>
    </div>
</body>


... je me retrouve donc avec un certain nombre d'emplacements organisés hiérarchiquement.
note 1: repérer ces balises avec id au lieu de class :
- id : une seule et unique
- class : plusieurs du même type

Les fragments chargés par php doivent être débarrassés des div de structuration.

ensuite, rédiger le sous-ensemble css de la mise en page (c'est à dire sans les polices et sans les couleur:

body {}
   #frame{width height margin border padding position float}
        #header{}
              #elt_un{}
              #elt_deux {}
         #main{}
         #footer{}


note 2 : j'indente hiérarchiquement pour que ça représente ce qu'il y a sur la page.

note 3 : tout ce qui concerne polices est couleurs gagne à être rédigé dans une autre partie de la feuille...

Donc, en se concentrant sur les propriétés css adéquates , il est possible de mettre au point la mise en page, et ceci indépendament du contenu, des polices, de la couleur...
Les propriétés à prendre en compte sont :
width, height, margin, padding, border, position, overflow et float...

Il va de soit qu'il faut éviter px et préférer les notations en pourcentages.
par exemple : #frame{width:100%;height:100%}
Ainsi, l'organisation de la page ne dépend pas de l'écran.

Ainsi, en définissant

#header{width 100%;height:20%}
#main{width 100%;width:60%}
#footer{width 100%;height:20%}


... on réalise déjà un début de mise en page.

Néanmoins, il faut être conscient qu'il y a pas mal de culture à aquérir, et de subtilités de toute sorte.
Donc le mieux est d'expérimenter, et de suivre quelques tuto...
Merci de ta réponse.

Je dois l'avoue, cela ressemble à une réponse de pro...faite à un débutant.

Je n'ai pas compris grand chose.

N'y a t-il pas un moyen simple de créer une div extensible en hauteur qui s'aggrandi plus je la rempli avec d'autres div ?

JE suis persuadé que ta réponse conduit à se résultat, mais dans l'état actuel des chsoes, je suis bien incapable de suivres tes insctructions, et je suis un peu pris par le temps.

Je flippe déjà à l'idée de devoir tout refaire en <table> Smiley decu
Sujet clos
Aller à