Design XHTML/CSS complet avec 2 colonnes de même hauteur

Bonjour à tous et avant tout bravo pour ce site qui est génial de même que le livre que j'ai comme livre de chevet depuis quelques temps déjà.

Je suis stagiaire en formation de Webdesign. Dans le cadre de cette formation, nous devons monter un projet web avec un véritable client. Pour ma part mon client est un centre culturel. Je vais arreter de vous raconter ma vie quand même...

Donc le design que j'imaginais correspondait parfaitement au tutoriel "Design XHTML/CSS complet avec 2 colonnes de même hauteur". Je m'en suis largement inspiré, et j'ai même récupéré quelques idées notamment sur les images de fond. Première question : est-ce que ça pose un problème pour vous les concepteurs de ce site et des tutoriels ?

Ensuite je rencontre un soucis, à savoir que le div de bas de page nommé "footer" comme dans le tuto déborde sur la droite, comme il est possible de le voir sur ce lien :

http://inferni94.free.fr/ccjp/html/pagetype.html

Pour info ma feuille de style :

http://inferni94.free.fr/ccjp/css/ccjp.css

Encore merci pour les éventuels éclairages que vous pourrez m'apporter.
Dernière chose, les modifications pour IE6 n'ayant pas encore été effectuées, merci de regarder le rendu via Firefox.

A bientôt.

Salut,

La propriété min-height n'est pas pris en chage pas Internet Explorer 6, donc autant ne pas l'utiliser ou utiliser height.

a écrit :
div#global {
min-height: 100%;
width:750px;
padding:0 10px;
margin: 0 auto;
position:relative;
padding:0 10px;
background:url(../images/global.png) center repeat-y;
}

Voilà ce qu'il faudrait pour corriger ton problème (à la place de ce qu'il y actuellement) :

div#nav {
	position:absolute;
}

Carton jaune

a écrit :
div#footer {
position:absolute;
width:100%;?????????
bottom: 0;
text-align:center/*Manque le ;*/
width:750px;?????????
padding:0;
margin:0;
}

	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;

	border-top-color: 850303;
	border-right-color: 850303;
	border-bottom-color: 850303;
	border-left-color: 850303;

C'est bien suffisant :

border: 1px;

a écrit :
border-color: #850303;/*Merci Mikachu j'avais pas vu*/

pareil ici :

	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	
	border-top-color: #000000;
	border-right-color: #000000;
	border-left-color: #000000;

	border: 1px solid black;
	border-bottom: 0px;

Je ne vais pas tous te les faire mais il a encore des propriétés ci et là qui ne servent à rien.

Au passage, l'écart dans le menu est très différent entre IE et Firefox, est-ce normal ?

Chapeau pour le design
Modifié par Spark (06 Apr 2007 - 14:19)

Merci pour vos réponses et désolé pour le retard de la mienne

Je n'ai en effet pas encore optimisé ma feuille de style.

Concernant mon histoire de pied de page je l'ai résolu en ajoutant un div à l'intérieur du div positionné en absolu. Ca fonctionne sous Firefox maintenant.

Concernant IE c'est vrai que comme je l'ai dit plus haut je ne m'en suis pas occupé.

Encore merci pour tout !

Oups, pas vu le #

botzouk a écrit :
Ca fonctionne sous Firefox maintenant.

Tu veux dire, ça fonctionne sous Internet Explorer maintenant ?

non sous firefox : mon pied de page débordait à droite. J'ai résolu pour un affichage OK sur Opéra, Firefox et Safari.
Je gèrerais IE6 plus tard.

botzouk a écrit :
non sous firefox : mon pied de page débordait à droite. J'ai résolu pour un affichage OK sur Opéra, Firefox et Safari.
Je gèrerais IE6 plus tard.

Ba écoute, je sais pas si tu avais mis ton lien à jour plus haut, mais sous firefox il fonctionne très bien, et la modif que je t'ai proposé c'est pour IE.

Salut,

botzouk a écrit :
Donc le design que j'imaginais correspondait parfaitement au tutoriel "Design XHTML/CSS complet avec 2 colonnes de même hauteur". Je m'en suis largement inspiré, et j'ai même récupéré quelques idées notamment sur les images de fond. Première question : est-ce que ça pose un problème pour vous les concepteurs de ce site et des tutoriels ?

Aucun problème tant que tu respectes les termes de la licence :

Le tutoriel a écrit :
Nota : Le support du tutoriel (graphisme et code) est libre d'utilisation à condition de préciser l'auteur (Thomas Dedericks) et la source (Alsacreations). Ceci veut dire que vous n'êtes pas autorisé à vous approprier le travail d'autrui (licence Creative Commons CC-BY).

Spark a écrit :
Voilà ce qu'il faudrait pour corriger ton problème (à la place de ce qu'il y actuellement) :

div#nav {
	position:absolute;
}

Non, non et re-non ! Il n'est pas nécessaire d'utiliser un positionnement absolu pour la colonne du menu de navigation ! Ce serait même très gênant, car on ne pourrait plus empêcher cette colonne de se superposer au pied de page si la fenêtre est petite et/ou si la colonne est longue ... De toutes façons, en ajoutant cette seule ligne, il y a peu de chance que la mise en page reste en place. Je ne vois vraiment pas où tu veux en venir, Spark

Thomas D. a écrit :
Je ne vois vraiment pas où tu veux en venir, Spark

Je suis d'accord sur le papier, mais en pratique avec les sources qu'il a donné ça a très bien marché, j'ai été le 1er surpris. Mais si je l'ai proposé c'est que je l'ai testé en local

Spark : en fait le lien avait été mis à jour et je pense que tu n'as pas vu la version précédente

Thomas : merci pour l'info

Je vous tiens au courant des suites de mon aventure.