28112 sujets

CSS et mise en forme, CSS3

Mise en page toute en hauteur et suggestions...

Pages :
c'est ma premiere creation...
agenda


Mon problème est :
Je veux que sur ce site, les deux div orange a gauche et a droite descende jusqu'en bas à la barre noir. Le contenu de la page sera en php, donc de longueur variable. Il faut donc un truc relatif.
Toute la mise en page est en css
Ya t-il une solution?
Et aussi une solution pour mettre un peu moins de div?
Avis et autres conseils?

Merci

lien vers le css
Modifié le 09 Dec 2004 - 21:38
Bonjour Smiley cligne et bienvenue sur ce forum.

As-tu fait un passage dans les tutoriels css, il y a plusieurs modèles de mises en page qui devraient correspondre à ce que tu cherches.
Tu définis par ailleurs une largeur fixe de 800px qui pose problème... justement en 800x600, puisqu'un scroll horizontal apparait. Il y a des solutions possibles comme une largeur fluide en % qui s'adaptera à la résolution des utilisateurs comme dans ce modèle ou bien une largeur fixe centrée par exemple, pour "passer" en 800x600, avec une largeur fixe il faut parfois déclarer une valeur inférieure à 800px comme 760px en tenant compte de l'aparition du scroll vertical. Tu trouveras aussi des moyens de centrer des éléments ici.

Pour ce qui est des divs tu peux par exemple trouver des conteneurs déjà existants:

<div id="titre">
	<h1>Calendrier du mois du novembre 2004</h1>
</div>


Tu as déjà un titre avec h1 qui pourrait se suffire à lui même.

Puisque c'est ton premier post je t'invites aussi à venir te présenter dans le bar du forum si le coeur t'en dit. Smiley cligne
DOCTYPE incomplet : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Lire : Le DOCTYPE qu'il vous faut

Tu peux mettre à jour ta méthode d'ancrage en utilisant :

<div id="container">
<a href="#container">haut de page</a>

au lieu de : 

<a name="top"></a>
<a id="top" href="#top">haut de page</a>

Pourquoi ne pas simplement utiliser <strong> ?

span
	{
	font-weight: bold;
	}


<p class="p2"> pourrait être balisé autrement. Avec <address> par exemple.

Voilà ! Continue ton beau travail !
Tu pourrais changer ton titre (en éditant ton premier post) pour quelque chose dans le genre "mise en page tout en hauteur et suggestions" (ou autre) ? Ceci pour faciliter d'éventuelles recherches.

Merci ! Smiley lol
Administrateur
Stephan a écrit :

Tu peux mettre à jour ta méthode d'ancrage en utilisant :

<div id="container">
<a href="#container">haut de page</a>

au lieu de : 

<a name="top"></a>
<a id="top" href="#top">haut de page</a>


Juste sur ce point : apparemment, les ancres pour remonter en haut de page avec id posent parfois des problèmes sur IE6 (c'est ce que Dew a remarqué sur ce forum).
Dans ce cas précis, aucun id n'est nécessaire : il suffit simplement de fair :
<a href="#">haut de page</a>

Le lien va recharger la page en se plaçant au début Smiley cligne
Petit détail: tu code mal tes accents:

le 'é' se code en fait : '&eacute;' et tu as du mettre '&Eacute',
le 'ê' c'est: '&ecirc;'.

Attention à la casse.
Modifié le 08 Dec 2004 - 11:29
Concernant les ancres, j'ai pris l'habitude de mettre :


<a href="#top">haut de page</a>


Ce n'est pas la peine de définir l'ancre "top" quand on utilise ce nom. Et ça fonctionne sur tous les navigateurs que j'ai testé : NS4, 6, 7, 8, Opera 7.x, IE 4, 5 , 6, Mozilla et FireFox.


<a href="#">haut de page</a>


Ne fonctionne pas partout (c'est dans Opera que ça pose problème, si j'ai bonne mémoire).
Modifié le 08 Dec 2004 - 12:06
merci pour les conseils¨

j'ai fait quelques changements...

a écrit :

Pour ce qui est des divs tu peux par exemple trouver des conteneurs déjà existants:

<div id="titre">

<h1>Calendrier du mois du novembre 2004</h1>

</div>



Tu as déjà un titre avec h1 qui pourrait se suffire à lui même.


j'ai essayé de cette façon, mais je ne peux plus alors mettre le titre a 10px du bord bas de l'image... y a-t-il une solution? en plus le titre sera generé en php...

a écrit :

Pour ta première question, la technique du Faux Columns me semble toute indiquée.
http://www.alistapart.com/articles/fauxcolumns/


j'ai essayé... par contre j'avais un problème avec les cadres qui sont a l'interrieur. comme leur nombre change (viennent d'une db mysql) je ne peux pas les mettre en absolute. ils faisaient decaler l'image.
donc j'ai essayé en float... par contre il ne descendent toujours pas jusqu'en bas... Smiley fache

et encore une question: peut-on faire une sorte de css dynamique? (le but est de changer les couleurs et les images en fontion des mois et des saisons...)
on emploie du php...
bon, ca marce enfin pour mes colonnes... ouf!!

par contre, pour le php, vous avez une idée?
Voilà c'est tout beau! >> agenda.cocotier.ch
bon il reste quelque bug à corriger du côté php... et quelques modifications minime du côté du css. Mais bon d'ici 1-2 semanies ce devrait être bon.

Alors, vous en pensez koi (au niveau du code et du design)?
Dite moi si vous avez des problèmes avec vos navigateurs!
Sinon merci encore pour votre aide.
Modifié le 11 Jan 2005 - 11:58
Administrateur
C'est marrant : on est deux (jb_gfx et moi) à t'avoir expliqué que pour remonter en haut de page il était inutile de spécifier un id (ici #container) et que # suffisait.
Mais ça n'a pas dû t'intéresser Smiley murf
Non c'est simplement que l'on est trois à dévloper cet agenda... moi (gagarine), gipsy et r2d2 mais il n'est pas inscrit à ce forum...
Modifié le 11 Jan 2005 - 14:04
a écrit :
Concernant les ancres, j'ai pris l'habitude de mettre :



<a href="#top">haut de page</a>



Ce n'est pas la peine de définir l'ancre "top" quand on utilise ce nom. Et ça fonctionne sur tous les navigateurs que j'ai testé : NS4, 6, 7, 8, Opera 7.x, IE 4, 5 , 6, Mozilla et FireFox.



<a href="#">haut de page</a>



Ne fonctionne pas partout (c'est dans Opera que ça pose problème, si j'ai bonne mémoire).


Les #top ne fonctionne pas du tout.... et si le # ne fonctionne pas sur Opera je crois que je vais remettre #container....
De toute façon je trouve que c'est un détaille.
gagarine a écrit :
Les #top ne fonctionne pas du tout.... et si le # ne fonctionne pas sur Opera je crois que je vais remettre #container....
De toute façon je trouve que c'est un détaille.


le "#" fonctionne dans Opera. En revanche, les ancres id ne seront pas reconnus par les navigateurs anciens (NS4 par exemple)

Dans tous les autres cas, (#container, #top, #bidule ou #vanille_et_framboise...), le lien ne fonctionnera que s'il correspond à un id présent en "haut : c'est peut-être pourquoi le #top ne fonctionne pas dans ta page Smiley cligne
Administrateur
Laurent Denis a écrit :


le "#" fonctionne dans Opera. En revanche, les ancres id ne seront pas reconnus par les navigateurs anciens (NS4 par exemple)

Dans tous les autres cas, (#container, #top, #bidule ou #vanille_et_framboise...), le lien ne fonctionnera que s'il correspond à un id présent en "haut : c'est peut-être pourquoi le #top ne fonctionne pas dans ta page Smiley cligne

Apparemment, il y'a d'autres cas où le problème se présente : même sur IE6 les ancres avec id ne fonctionnaient pas : http://forum.alsacreations.com/topic.php?fid=4&tid=774&s=ancre#p7977

As-tu des informations là dessus ?
Pages :
Sujet clos
Aller à