Contenu poussé vers le bas/la droite - CSS

Résolu/Fermé
web_traveller Messages postés 11 Date d'inscription vendredi 11 avril 2008 Statut Membre Dernière intervention 6 juin 2008 - 11 avril 2008 à 17:57
web_traveller Messages postés 11 Date d'inscription vendredi 11 avril 2008 Statut Membre Dernière intervention 6 juin 2008 - 14 avril 2008 à 13:41
Bonjour !

J'ai un problème de design en CSS et ça fait quelques semaines que je me bats avec... Sans solution ! J'espère que quelqu'un pourra m'éclairer.

J'ai un design que j'essaie de faire selon les standards web, et je voudrais qu'il soit valide sur Internet Explorer version 6 et 7, et Firefox (au moins), et que le site soit visible sur une taille 800 x 600 aussi.
Mon design est un design fluide qui doit s'étaler sur toute la largeur de la page. Malheureusement quand la taille de la fenêtre est réduite, ceci pose des problèmes sur le design.

Voila le site :
http://tilia.ie/Apr_08/layout_issue.php

En fait quand on redimensionne la fenêtre, par exemple a 800x600, les trois boites qui sont au milieu se décalent : sur Internet Explorer elles passent carrément tout en bas de page, et sur Firefox elle dépassent en largeur.

Quelqu'un saurait-il pourquoi ?

Merci d'avance !

4 réponses

gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 329
11 avril 2008 à 18:12
Essayes en rajoutant :
.thirty_percent_width (ligne 424)
{
float:left;
width: 30%;
}


EDIT : mais je pense pas que ca fonctionne. car le soucis c'est que tu utilises css, mais aussi les tableaux pour faire de la mise en page, en prime un tableau a dimension fixe :
#table_home {
	table-layout:fixed;
	margin: 0 25px 0 25px;
	width: 700px;
}


donc quoi qu'il arrive, il fera 700px de large ;o)
CQFD
0
web_traveller Messages postés 11 Date d'inscription vendredi 11 avril 2008 Statut Membre Dernière intervention 6 juin 2008
11 avril 2008 à 18:18
Ah ! En effet j'avais pas remarqué mon tableau a largeur 700px... Ça ne m'étonne pas que ça pose des problèmes.
Je vais m'y pencher et voir si je peux tout faire en CSS et enlever ce tableau, ou changer mes boites en images.

Merci !
0
gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 329
11 avril 2008 à 18:20
bien sur tu peux faire en css, avec la propriété "float" notamment, comme je t'ai mis dans le message précédent.
0
web_traveller Messages postés 11 Date d'inscription vendredi 11 avril 2008 Statut Membre Dernière intervention 6 juin 2008
11 avril 2008 à 18:46
Merci pour votre aide ! C'est beaucoup mieux maintenant, j'ai ajouté ce style a mes boites :
float:left;
width:200px;


et enlevé la largeur de 700px sur mon tableau.

URL : http://tilia.ie/Apr_08/layout_issue2.php

Par contre lorsque je redimensionne la fenêtre sur 800x600, une des boites passent en dessous, car il n'y a pas assez de largeur dispo.

J'ai essayé avec min-width sur mon élément maincontent_home mais ça ne fonctionne pas (sur Firefox et IE).

Des suggestions ?
0
Je te comprends, car cela faut bizarre lorsque les boîtes qui devraient suivre le texte se placent tout en bas.
Effectivement c'est normal avec les CSS; sur IE, si pour une cause ou une autre, à cause de la mise en page, un élément ne peut pas se placer où il devrait par manque de place, il se place en dessous. Et si les trois boîtes ne faisaient pas partie d'un tabeau à largeur fixe, mais qu'elles étaient indépendantes, elles se placeraient l'un sous l'autre avec une toute petite taille de fenêtre.
Sur ce point, IE et FF ont des comportements différents.
Sinon ton site a l'air très bien construit.
Voici deux liens: http://fr.selfhtml.org/css/misesenpage/colonnes.htm et http://fr.selfhtml.org/css/misesenpage/aiguillage.htm.
Bonne chance
0
web_traveller Messages postés 11 Date d'inscription vendredi 11 avril 2008 Statut Membre Dernière intervention 6 juin 2008
11 avril 2008 à 18:48
Merci pour les liens Beate !
0
web_traveller Messages postés 11 Date d'inscription vendredi 11 avril 2008 Statut Membre Dernière intervention 6 juin 2008
14 avril 2008 à 13:41
Bonjour !

J'ai résolu mon problème en ajoutant min-width a mon élément "container".

Merci a tous pour votre aide !

Web Traveller
0