Création de site web, problème positionnement CSS

Jonat · Août 7, 2010, 5:49

Bonjour tout le monde

Débutant, j’essaye de faire un petit site web. Mais je galère avec le positionnement CSS :pt1cable:

Descriptif de ce que je souhaite faire :
Une bande rouge en haut. Pour le texte intérieur, j’appelle une page HTML.
Une bande grise en bas. Pour le texte intérieur, idem, j’appelle une page HTML.
Entre ces bandes, une autre bande avec 3 colonnes (un menu à gauche qui agit sur le contenu de la colonne du milieu ; un espace texte à droite que je remplis aussi avec une page HTML.

Voilà mon bout de code, vous allez probablement mieux comprendre avec


div#haut
{
position:absolute;
width: 100%;
height: 10%;
top: 0em;
left: 0em;
background-color:#FF0000;
}
div#gauche
{
position:absolute;
width: 20%;
height: 50%;
top: 8em;
left: 0em;
background-color:#66CC00;
}
div#milieu
{
position:absolute;
width: 60%;
height: 50%;
top: 8em;
left: 14em;
background-color:#006600;
}
div#droite
{
position:absolute;
top: 8em;
right: 0em;
width: 20%;
height: 50%;
background-color:#FFFF00;
}
div#bas
{
position:absolute;
bottom: 0em;
left: 0em;
width: 100%;
height: 25%;
background-color:#969696;
}

J’ai bien ma bande en haut et ma bande en bas, ainsi que mes 3 colonnes au milieu. Mais les colonnes je dois bidouiller pour avoir quelque chose de correct :paf:
Et puis je dois mal m’y prendre car ça ne s’adapte pas correctement au contenu quand je fais varier la taille de la fenêtre du navigateur…

Et ce quelqu’un pourrait me dire qu’est-ce que je dois faire et surtout m’expliquer comment ça fonctionne ?

Merci d’avance

webmaster_A · Août 8, 2010, 12:09

Bonjour,

Je pense qu’il serait plus facile en html. Tu crées trois tableaux avec une largeur fixe (ex: 999 px). Le premier avec une seule colonne pour la bande du haut avec la hauteur désirée (ex: 250 px). Le deuxième avec trois colonnes de 333 px. Et le troisième pareil que le premier.

Exemple:

<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Exemple</title></head><body><div align="center">
	<table border="0" width="999" height="140" bgcolor="#FF0000"><tr>	<td></td></tr></table></div>
<div align="center">
	<table border="0" width="999" height="1000"><tr>
			<td width="200" bgcolor="#66CC00"> </td>
			<td width="600" bgcolor="#006600"> </td>
			<td width="200" bgcolor="#FFFF00"> </td>
		</tr></table></div>
<div align="center">
	<table border="1" width="999" height="250" bgcolor="#969696"><tr><td> </td></tr>	</table>
</div></body></html>

En plus, ça te permettra d’insérer le code html dans chaque cellule au lieu d’appeler une autre page. Tu peux toujours insérer des modules php si tu veux.

A+
Edité le 08/08/2010 à 12:24

Jonat · Août 8, 2010, 2:25

Merci pour ta réponse

Je viens de tester, solution simple et efficace. Mais quelques problèmes… J’vais chercher un peu et si je ne trouve pas de réponses j’demanderai

Le plus gros problème c’est la non “redimmension” par rapport au contenu en cas de réduction de la fenêtre du navigateur

webmaster_A · Août 8, 2010, 2:52

Aujourd’hui la plupart des sites ont une largeur fixe de 1000 px à peu près, justement pour empêcher le déplacement du contenu lors du zoom ou redimensionnement de la fenêtre du navigateur. Regarde Clubic, par exemple. Si la taille de la fenêtre est plus petite que la largeur du site, la barre de défilement s’affiche en bas.

Si tu veux que la largeur du site s’adapte à la largeur de la fenêtre, tu auras toujours le problème du déplacement du contenu.

Jonat · Août 8, 2010, 5:02

Presque tout est OK

2 questions :

je souhaite faire un saut de ligne dans le menu (ul). Avec un

c’est OK sous Chrome et FF mais pas sous IE. Pourquoi ?
j’utilise une feuille de style. Elle contrôle tout ce que je veux sauf sous Chrome et FF (OK sur IE) au niveau de la colonne du milieu (où s’affichent les pages appelées par le menu). Ma link vers la feuille CSS est dans l’index.php donc ça devrait tout contrôler, mais nan…
Mon fichier milieu.html est le suivant :


<?
require('./pages/'.$page.'.html');
?>

Morceau de l’index.php :


<?php
  require('./includes/gauche.html');
?>

</td>
<td width="600" bgcolor="#FFFFFF">

<?php
  require('./includes/milieu.html');
?>

</td>
<td width="145" bgcolor="#FFFFFF">

<?php
  require('./includes/droite.html');
?>

Merci bien

webmaster_A · Août 8, 2010, 5:44

Salut, je suis content que tu fasses des progrès.

Pour un saut de ligne dans une cellule:

<td>
ligne 1<br>
ligne2
</td>

Pour un paragraph dans une cellule:

<td>
Paragraph 1
<p>
Paragraph 2
</td>

Pour la deuxième question, essaye d’effacer les données de navigation de Chrome et FF avant de faire le test.

Pour Chrome, clique sur le bouton en forme de clé mécanique en haut à droite puis sur Options. Choisis l’onglet Options avancées,clique sur Effacer les données de navigation, NE COCHE QUE Vider le cache et Supprimer les cookies […] et clique sur Effacer les données de navigation.

Pour Firefox, clique sur Options, puis sur Avancé, onglet Réseau. Clique sur Vider le cache maintenant et fais OK.
Pour qu’il charge toujours la page mise à jour, désactive l’historique: Clique sur Options, puis sur Vie privée, sélectionne Ne jamais conserver l’historique et appuie sur OK.

Jonat · Août 8, 2010, 7:52

J’ai essayé en ouvrant une fenêtre de navig privée, problème toujours présent :pt1cable:

Clair que je progresse
J’ai même étudié les frames avant de me tourner vers la version CSS puis tableau :ane:
C’est “marrant”, j’ai le même site mais avec différents concepts :icon_biggrin:

Merci pour les tuyaux

webmaster_A · Août 8, 2010, 8:18

Bon de toutes façons pour un débutant, comme tu as dit, je pense que tu fais un boulot de pro dans ton futur site.

Je suis sure qu’il sera plein de couleur et de vie. Peut-Être que les couleurs sont un peu trop foncées, mais ça dépend du contenu. Quand il sera prêt, j’aimerais bien que tu me laisses un lien en mp.

Tu parles du problème du saut de ligne ou de l’appel aux pages extérieures?

La seule erreur possible que je vois est dans le ./. Si tu veux trouver le répertoire racine tu devrais mettre …/

En fait, je pense que tu dois écrire:

<?php
 require "../includes/milieu.html";
?>

A+
Edité le 08/08/2010 à 20:25

Jonat · Août 8, 2010, 9:55

En fait presque tout sera de la même couleur. Les différentes couleurs, c’était pour mieux voir les conteneurs quand j’essayais avec CSS

Pour le problème je parlais de la non application de la feuille de style dans ma colonne du milieu, où y’a require(’./pages/’.$page.’.html’); et qui va chercher le HTML de la page à afficher
C’est le seul endroit où la feuille de style ne s’applique pas Pour les autres cellules du tableau c’est OK.
Attention : ce problème ne concerne que Chrome et FF. Sous IE c’est OK
Edité le 08/08/2010 à 22:14

webmaster_A · Août 8, 2010, 10:51

Pour simplifier un peu les choses, tu peux créer une variable contenant le chemin complet de la page à charger dans le tableau du milieu au lieu d’avoir juste le nom du fichier:

<?php
$middlefile = "../pages/page.html";
?>

Ça te permettrait de simplifier aussi la commande du tableau du milieu:

<?php
    if(file_exists($middlefile)){
        require $middlefile;
    }
?>

Ceci t’évite aussi l’erreur de charger une page qui n’existe pas.

Jonat · Août 9, 2010, 1:06


<?php
  $pagesOk = array('accueil','page1','page2','page3','page4');
  if(!empty($_GET['page']))
    $page = $_GET['page'];
  else
   $page = 'accueil';
  if(!in_array($page,$pagesOk))
  {
    header("HTTP/1.0 404 Not Found");
    exit;
  }
?>

Pour le CSS qui ne s’applique pas sous Chrome et FF je viens de trouver. Erreur dans la feuille :paf: