Membres
Un site en 3 colonnes
Un site en 3 colonnes
Pages : [1] 2 3 4 5
Un site en 3 colonnes Posté le 23/03/2006 à 00:00
pour mémo je reprends la structure.
1 header
1 menu horizontal
1 colonne de 50% avec 3 rubriques
2 colonne de 25% avec divers articles du même style
et pour le moment des bordures permetant de visualiser chaques parties
Pour voir une mise en page 3 colonnes fluide (pourcentage) en XHTML et CSS : Mise en page CSS 3 colonnes fluide
________________________
_ww.gabian-herault.com
1 header
1 menu horizontal
1 colonne de 50% avec 3 rubriques
2 colonne de 25% avec divers articles du même style
et pour le moment des bordures permetant de visualiser chaques parties
Pour voir une mise en page 3 colonnes fluide (pourcentage) en XHTML et CSS : Mise en page CSS 3 colonnes fluide
________________________
_ww.gabian-herault.com
Réponse à : Un site en 3 colonnes Posté le 23/03/2006 à 16:31
J'avais oublié, il faudra rajouter un petit pied de page aussi.
_______________________
Patience et longueur de temps font plus que force ni que rage (La Fontaine)
_______________________
Patience et longueur de temps font plus que force ni que rage (La Fontaine)
Réponse à : Un site en 3 colonnes Posté le 23/03/2006 à 16:53
plutot que des bordures j'ai mis des couleurs de fond.
donc voici grosso modo la structure générale, de la page qui doit se nommer index.php
je te propose de la mettre en ligne sur ton serveur dans un repertoire de test ça me permetra de voir où tu en est à mesure qu'on avance.
_______________________
_ww.gabian-herault.com
donc voici grosso modo la structure générale, de la page qui doit se nommer index.php
<html>
<head>
<title>site en 3 colonnes</title>
<style>
.header {width:100%;height:70px;text-align:center;color:#ff00ff;border:solid #000000 1px}
.menu_h {width:100%;height:25px;background-color:#ffffff;}
.col_50 {float:left;width:50%;height:700px;background-color:#eeeeee;}
.col_25 {float:left;width:25%;height:700px;background-color:#dddddd;}
</style>
</head>
<body>
<div class="header"><h1>Un site en 3 colonnes</h1></div>
<div class="menu_h">emplacement du menu horizontal</div>
<div class="col_50">gauche 50%</div>
<div class="col_25">droite 25%</div>
<div class="col_25">droite 25%</div>
</body>
</html>
je te propose de la mettre en ligne sur ton serveur dans un repertoire de test ça me permetra de voir où tu en est à mesure qu'on avance.
_______________________
_ww.gabian-herault.com
Réponse à : Un site en 3 colonnes Posté le 23/03/2006 à 16:57
ben 1er exercice pour rajouter le pied de page comment tu t'y prendrais?
_______________________
_ww.gabian-herault.com
_______________________
_ww.gabian-herault.com
Réponse à : Un site en 3 colonnes Posté le 23/03/2006 à 17:02
J'aurai bien mis un include('bas-page.html') en bas d'une page, et il doit bien y avoir une méthode pour que l'ajouter automatiquement en bas de toutes les pages de mon site (de même que je n'aurai
pas à rajouter le code du menu sur chaque page, etc.)
_______________________
Patience et longueur de temps font plus que force ni que rage (La Fontaine)
_______________________
Patience et longueur de temps font plus que force ni que rage (La Fontaine)
Réponse à : Un site en 3 colonnes Posté le 23/03/2006 à 17:11
Voilà ma page : http://www.passion-malherbe.com/test/index.php
Concernant le menu, j'en avais fait un avec Sothink DHTML menu dont j'étais très satisfaite (mais peut-être un peu "lourd" comme menu, c'est juste une impression).
_______________________
Patience et longueur de temps font plus que force ni que rage (La Fontaine)
Concernant le menu, j'en avais fait un avec Sothink DHTML menu dont j'étais très satisfaite (mais peut-être un peu "lourd" comme menu, c'est juste une impression).
_______________________
Patience et longueur de temps font plus que force ni que rage (La Fontaine)
Réponse à : Un site en 3 colonnes Posté le 23/03/2006 à 17:11
c'est bien vu mais...
l'avantage du trio php html css, c'est que nous allons pouvoir traiter séparément les données, la structure et le style.
donc ce que nous mettrons en include c'est les données uniquement, nous y viendrons par la suite.
donc pour le pied:
<div class="footer">c'est le pied ;)</div>
a la suite des autres div, et:
.footer {clear:left;width:100%;height:25px;background-color:#ffffff;}
dans la partie style.
_______________________
_ww.gabian-herault.com
l'avantage du trio php html css, c'est que nous allons pouvoir traiter séparément les données, la structure et le style.
donc ce que nous mettrons en include c'est les données uniquement, nous y viendrons par la suite.
donc pour le pied:
<div class="footer">c'est le pied ;)</div>
a la suite des autres div, et:
.footer {clear:left;width:100%;height:25px;background-color:#ffffff;}
dans la partie style.
_______________________
_ww.gabian-herault.com
Réponse à : Un site en 3 colonnes Posté le 23/03/2006 à 17:30
Pourquoi ici le trio php html et css est sur la même page ? Ca change quoi entre le fait que ce soit sur la même page et le fait que ce soit sur des pages bien différentes (genre une style.css et une
autre theme.html) ?
_______________________
Patience et longueur de temps font plus que force ni que rage (La Fontaine)
_______________________
Patience et longueur de temps font plus que force ni que rage (La Fontaine)
Réponse à : Un site en 3 colonnes Posté le 23/03/2006 à 17:35
Commençons par le header, une belle image, que nous allons mettre en arrière plan, ce qui te laissera la liberté de mettre du texte par dessus si besoin est.
l'image par exemple http://www.passion-malherbe.com/themes/p-malherbe/images/essai2.jpg
modifions le style du header
.header {
width:100%;
height:70px;
text-align:center;
color:#ff00ff;
background:url(http://www.passion-malherbe.com/themes/p-malherbe/images/essai2.jpg)
}
_______________________
_ww.gabian-herault.com
l'image par exemple http://www.passion-malherbe.com/themes/p-malherbe/images/essai2.jpg
modifions le style du header
.header {
width:100%;
height:70px;
text-align:center;
color:#ff00ff;
background:url(http://www.passion-malherbe.com/themes/p-malherbe/images/essai2.jpg)
}
_______________________
_ww.gabian-herault.com
Réponse à : Un site en 3 colonnes Posté le 23/03/2006 à 17:43
pour l'instant le style est sur la même page, question de visibilité:
rien empèche de créer une page style.css dans laquelle tu recopie le style sans les balises <style></style>
puis modif de la partie <head> de index.php
<head>
<title>le titre de la page</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
pour le php pour l'instant il n'y en a pas.
_______________________
_ww.gabian-herault.com
rien empèche de créer une page style.css dans laquelle tu recopie le style sans les balises <style></style>
puis modif de la partie <head> de index.php
<head>
<title>le titre de la page</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
pour le php pour l'instant il n'y en a pas.
_______________________
_ww.gabian-herault.com
Réponse à : Un site en 3 colonnes Posté le 24/03/2006 à 11:07
En fait, il vaut mieux que mon site fasse 99% de large (donc 49% la colonne gauche) car sinon il y a la barre de défilement horizontale et je trouve ça très moche.
Donc voilà, j'ai actualisé ma page sur http://www.passion-malherbe.com/test/index.php
_______________________
Patience et longueur de temps font plus que force ni que rage (La Fontaine)
Donc voilà, j'ai actualisé ma page sur http://www.passion-malherbe.com/test/index.php
_______________________
Patience et longueur de temps font plus que force ni que rage (La Fontaine)
Réponse à : Un site en 3 colonnes Posté le 24/03/2006 à 11:41
D'où l'importance de tester avec minimum 2 navigateurs différents, firefox et IE.
ton pied de page fait 97% tu à du faire erreur.
le titre par dessus l'image peut être enlevé ou changer, tu peux le positionner en CSS en donnant un nom de classe à sa balise <h1 class="titre_header"> le titre </h1>
et dans le css
.titre_header {position:relative;top:XXpx;left:XX%;color:#XXXXXX}
.header {
width:99%;
height:170px;
background:url(http://www.passion-malherbe.com/themes/p-malherbe/images/essai2.jpg)
}
_______________________
_ww.gabian-herault.com
ton pied de page fait 97% tu à du faire erreur.
le titre par dessus l'image peut être enlevé ou changer, tu peux le positionner en CSS en donnant un nom de classe à sa balise <h1 class="titre_header"> le titre </h1>
et dans le css
.titre_header {position:relative;top:XXpx;left:XX%;color:#XXXXXX}
.header {
width:99%;
height:170px;
background:url(http://www.passion-malherbe.com/themes/p-malherbe/images/essai2.jpg)
}
_______________________
_ww.gabian-herault.com
Réponse à : Un site en 3 colonnes Posté le 24/03/2006 à 11:55
C'est rajouté et c'est corrigé, j'ai encore un autre défaut, je suis étourdie.
_______________________
Patience et longueur de temps font plus que force ni que rage (La Fontaine)
_______________________
Patience et longueur de temps font plus que force ni que rage (La Fontaine)
Réponse à : Un site en 3 colonnes Posté le 24/03/2006 à 12:15
je crois que tu est allée un peu vite! relis bien le post..
XXpx donne quelle valeur?
et relis les règles css de header
_______________________
_ww.gabian-herault.com
XXpx donne quelle valeur?
et relis les règles css de header
_______________________
_ww.gabian-herault.com
Réponse à : Un site en 3 colonnes Posté le 24/03/2006 à 12:21
XXpx donne quelle valeur?
Ben j'en sais rien. Si c'est X, c'est que c'est inconnu, non ?
En ce qui concerne le code CSS du header, il y a un truc en trop je crois, qui peut entrer en contradiction avec ce que j'ai ajouté :
text-align:center;
color:#ff00ff
Euh... c'est ça qu'il fallait que je voie ? A ben oui, je suis vraiment étourdie moi !
Tiens, il y a un problème avec Firefox, ma page est extra large !
_______________________
Patience et longueur de temps font plus que force ni que rage (La Fontaine)
Réponse à : Un site en 3 colonnes Posté le 24/03/2006 à 12:24
XX = valeur de ton choix que tu règle en faisant divers essais
top => en partant du haut
left => en partant de gauche
_______________________
_ww.gabian-herault.com
top => en partant du haut
left => en partant de gauche
_______________________
_ww.gabian-herault.com
Réponse à : Un site en 3 colonnes Posté le 24/03/2006 à 12:28
JE sais bien que j'ai dit que mon niveau était quasi nul, mais ça j'avais quand même compris
D'ailleurs j'ai enlevé le texte du haut car on n'en a pas besoin (si j'ai quand même gardé le titre_header et compagnie, c'est que je me suis dit "j'en aurai peut-être besoin par la suite", mais j'imagine qu'il aurait mieux valu supprimer les lignes correspondant au texte qui était dans le header si j'avais été sure de ne plus les utiliser)
_______________________
Patience et longueur de temps font plus que force ni que rage (La Fontaine)
D'ailleurs j'ai enlevé le texte du haut car on n'en a pas besoin (si j'ai quand même gardé le titre_header et compagnie, c'est que je me suis dit "j'en aurai peut-être besoin par la suite", mais j'imagine qu'il aurait mieux valu supprimer les lignes correspondant au texte qui était dans le header si j'avais été sure de ne plus les utiliser)
_______________________
Patience et longueur de temps font plus que force ni que rage (La Fontaine)
Vous n'est pas connecté en temps que membre, parceque j'en ai marre du spam, SEUL les membres peuvent poster des messages sur le forum.
Nous - Plan du site - Informations légale - Contact - © Graphiks.net