28111 sujets

CSS et mise en forme, CSS3

Pages :
(reprise du message précédent)

beh moi aussi je doute, j'ai pas les moyens de tester là Smiley lol

Et à force je m'embrouille un peu Smiley sweatdrop
littlesam a écrit :
Ok ça ça marche. Mais les margins auto non. On est d'accord ?

tant que ça marche oui Smiley lol
Bon j'ai le centrage et les colonens par contre si je veux un truc qui s'étire en hauteur c un peu chiant puisque les absolutes sont pas imbriqué quand on parle des couleurs de fond....donc je re mon pb de couleur de colonnes.
regarde ma page, le contenant des deux colonnes à un fond rose... comme tu peux voir ça marche pas... (j'ai mis une hauteur fixe de 100px pour le faire apparaitre sinon il est carrément vide et inexistant)
bon alors, tu fixes la hauteur de ton main à 100%
tu fixes la hauteur de ton menu à 100%
et la largeur du header à 100%

et voilou
Modifié le 28 Dec 2004 - 17:07
en gros :

#main {
 position:absolute;
 left: 50%;
 width: 480px;
 height: 100px;
 margin-left: -240px;
 background: #ffaaff;
 height: 100%;
}
#header {
 position: absolute;
 left: 0px;
 top: 0px;
 background: red;
 width: 100%;
}
#menu {
 position: absolute;
 left: 0px;
 top: 50px;
 width: 160px;
 background-color: blue;
 height: 100%;
}
#content {
 margin-left: 160px;
 margin-top: 50px;
 left: 160px;
 background-color: green;
}


edit : en mieux Smiley smile
c'est testé à l'arach et seulement sur FireFox (vive la webdevelopper bar)
Modifié le 28 Dec 2004 - 17:24
Ok avec la bidouille de l'image pour les colonnes c presque nickel. Presque parce que sous IE il reste une soloperie de petite marge d'un pixel en bas (une fois sur deux c surement un pb d'arrondi). Résultat g un bout de ma colonne sous le header... tans pis c la vie.

Edit : arf non zut. Mon pied de page reste quand la page est plus grande, il cache mon texte... Smiley fache
Modifié le 28 Dec 2004 - 17:23
littlesam a écrit :
Ok avec la bidouille de l'image pour les colonnes c presque nickel. Presque parce que sous IE il reste une soloperie de petite marge d'un pixel en bas (une fois sur deux c surement un pb d'arrondi). Résultat g un bout de ma colonne sous le header... tans pis c la vie.

Edit : arf non zut. Mon pied de page reste quand la page est plus grande, il cache mon texte... Smiley fache

sur la page de test ya pas de pied de page Smiley sweatdrop

mais à jour la page online
oups je bidouille en local et je remet pas forcément
mais pour avoir un pied avec tout plein de truc en absolu de taille variable au dessus impossible je pense Smiley ohwell

bon j'ai plus de temps je laisse ça en plan on verra plus tard
je vous tiens au courant si je trouve une solution
Modifié le 28 Dec 2004 - 17:31
tu peux mettre avec la CSS que je t'ai mis stp ? (en rajoutant ce que tu as mis pour le footer)

body {
 height: 100%;
 margin: 0px;
 padding: 0px;
 background: #eeeeee;
}
#main {
 position:absolute;
 left: 50%;
 width: 480px;
 height: 100px;
 margin-left: -240px;
 background: #ffaaff;
 height: 100%;
}
#header {
 position: absolute;
 left: 0px;
 top: 0px;
 height: 50px;
 background: red;
 width: 100%;
}
#menu {
 position: absolute;
 left: 0px;
 top: 50px;
 width: 160px;
 background-color: blue;
 height: 100%;
}
#content {
 margin-left: 160px;
 margin-top: 50px;
 margin-bottom: 50px;
 left: 160px;
 height: 100%;
 background-color: green;
}
#footer {
 position:absolute;
 bottom: 0px;
 width: 100%;
 height: 50px;
 background: yellow;
}


voilou, je vois pas de pb sur FF, je peux pas tester sur IE... (il aime ptet pas le bottom: 0px;....)




Smiley sweatdrop
@Poire, euh tu disais que c'était pas bien d'utiliser autant de float... mais un float sur le menu et un sur le contenu... j'ai vu pire, et c'est bien plus souple que le positionement absolu, et pour l'égalité des colones le positionement absolu ne te le permettra pas.

L'utilisation du double float et du clear sur le pied de page est le plus simple et le plus efficace, le positionement absolu est utile mais pas tout le temps, et ici il est peu adapté.
les float merdent souvent
les absolues moins Smiley rolleyes

enfin comment dire ce qui est mieux ? le plus propre ? je ne sais pas Smiley confused
Modifié le 28 Dec 2004 - 18:15
Stephan a écrit :

Moi j'aurais dit le contraire !

Smiley lol
ça dépend des expériences de chacun je pense
les floats ça serait bien s'il n'y avait pas de magouille à faire pour "gonfler" (comme le dit ElMoustiko Smiley cligne ) les blocs Smiley biggol
magouille ?? bof, ajouter un clear: both; à un pied de page (très souvent présent, certe le <hr /> est un peu plus discutable, mais bon) je trouve pas que c'est très magouille...

Ensuite, pour des mises en page un peu plus graphiques, le positionement absolu n'est pas des plus pratique en général...

Bien sûr chaque méthode à ses avantages et inconvénients et ses principes de fonctionnement. En tout cas dans le cas présent, c'est clairement le float qui est le plus adapté Smiley cligne
J'ai une question asser conne: Pourquoi? pourquoi vouloir un footer collé au bas de la page à tout prix? quel est l'interet à part une formidable prise de tête et vouloir contraindre un code à faire quelque chose pour lequel il n'est pas initialement concu? Cela va-il révolutionner la navigation? le rendre somptueusement plus beau? j'ai du mal à saisir, pourquoi s'enteter à faire quelque chose qui en plus n'a pas de réel interet. Il est peut-être parfois bon de contourner un problème plutôt que foncer dedans à grand coup de hack et d'images de fond non?
J'admet que je fais pas de masse avancer le bidule d'un point de vue technique, mais j'ai l'impression que ce genre de raisonnement se perd (à raison?)
@brice, je suis assez d'accord avec toi, mais au départ, personne n'avait compris que le problème était là Smiley lol les solutions proposées étaient pour l'effet colone de même taille Smiley cligne

A vrai dire, je suis assez d'accord sur ce point !

Nota : ajouter brice dans la liste des gens que j'aime bien Smiley lol
En fait je m'en fout totalement du pied de page, c'est jusque que moi et ma mauvaise fois on tente de prouver que le positionnement par css c'est dans le fond aussi cracra qu'un tableau Smiley biggol (voir plus puisque c'est grosse bidouille powaaa)

Le vrai problème c un header, deux colonnes de même taille qui s'étirent sur toute la page et le tout centré.

brice :
1. si tu connais un moyen d'avoir deux colonnes étirables sans savoir laquelle est la plus longue le tout sans utiliser une bidouille d'image et un hack je veux voir.
2. si pour toi les css c'est choisir le design du site en fonction des limitations techniques franchement c'est pourri, autant limiter l'informatique à un xterm et revenir à un écran monochromatique car c'est sufissant... je trouve ce raisonnement stupide au possible.
Modifié le 28 Dec 2004 - 19:44
Pages :