Création
d'entreprise
Posez votre question Signaler

Contenu poussé vers le bas/la droite - CSS [Résolu]

web_traveller 11Messages postés 11 avril 2008Date d'inscription - Dernière réponse le 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 !
Lire la suite 

Contenu poussé vers le bas/la droite - CSS »

7 réponses
Réponse
+0
moins plus
gryzzly 4885Messages postés 7 novembre 2005Date d'inscription 11 mai 2012Dernière intervention 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

Ajouter un commentaire
web_traveller- 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 !
Ajouter un commentaire
Réponse
+0
moins plus
gryzzly 4885Messages postés 7 novembre 2005Date d'inscription 11 mai 2012Dernière intervention 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.

Ajouter un commentaire
web_traveller- 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 ?
Ajouter un commentaire
Réponse
+0
moins plus
beate 11 avril 2008 à 18:27
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

 Ajouter un commentaire
web_traveller- 11 avril 2008 à 18:48
Merci pour les liens Beate !
Ajouter un commentaire
Réponse
+0
moins plus
web_traveller 11Messages postés 11 avril 2008Date d'inscription 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

 Ajouter un commentaire
Ajouter un commentaire
Posez votre question
Ce document intitulé « Contenu poussé vers le bas/la droite - CSS » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?