Discussion :

[sapajou69]

Bonjour,

Je suis entrain de réaliser un gabarit css pour mon futur site et je rencontre des problèmes au niveau de mes divs.

J'ai ma div principale englobant l'ensemble de mes divs qui ne se poursuit pas et s'arrête avant ma dernière div l'englobant.

Je m'excuse par avance si mon explication n'est pas claire, je joins en pièce jointe mon exemple de gabarit.

Pouvez-vous me dire par ailleurs si il y a des grosses erreurs de css dans mon gabarit? car je souhaiterai que celui-ci soit "responsive design" ou du moins vu qu'il est très simple qu'il s'adapte facilement au téléphone portable. Dans mon cas mettre mes deux colonnes en une colonne ?

Je vous remercie par avance pour votre aide.

Sapajou

[rodolphebrd]

Bonjour,

le problème provient du flottement de votre dernier élément le faisant sortir du flux.
Pour pallier cela rajoutez ce morceau de code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#page:after{
	content:"";
	display:block;
	clear:both;
 
}

Je ne vois pas de doctype sur votre page ?

[sapajou69]

Merci pour votre aide, je viens de rajouter le doctype qui était passé à la trappe.
Ma div page prend bien en compte maintenant ma dernière div "global-box".

Par contre le background blanc qui devrait apparaître comme dans mes blocs situés dans les colonnes du dessus n'apparaît pas. Ma div avec la classe box semble ne pas marcher dans ce cas. Avez-vous une idée sur ce qui se passe ?

De même, je cherche à avoir la même hauteur de div entre "pres_invitant" et "pres_image" mais pour l'instant à part mettre un height, je ne vois pas comment faire.

Je vous remercie d'avance si vous avez la solution. Je débute en css.

[rodolphebrd]

Par contre le background blanc qui devrait apparaître comme dans mes blocs situés dans les colonnes du dessus n'apparaît pas. Ma div avec la classe box semble ne pas marcher dans ce cas.

Je ne vois pas de quoi vous parlez !!

De même, je cherche à avoir la même hauteur de div entre "pres_invitant" et "pres_image" mais pour l'instant à part mettre un height, je ne vois pas comment faire.

Les deux blocs ont la même taille lorsque la fenêtre n'est pas rétrécie.
Puisque vous voulez du responsive,la taille de l'image réduit avec la taille de la fenêtre qui diminue.

[sapajou69]

En fait, le bloc contact ne devrait former qu'un seul bloc avec le textarea et les 4 inputs qui sont sur le coté avec un fond blanc.

C'est ce que je tente d'appliquer avec mon css avec la classe bloc ayant un background blanc.

Je joins une image montrant le bloc concerné.

En tout cas, je vous remercie encore pour votre aide.

[rodolphebrd]

Même solution que la précédente:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#page:after, .footer:after{
	content:"";
	display:block;
	clear:both;
 
}

En créant une classe supplémentaire

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
....
        <div class="global-box">
            <div class="box footer">
                <div class="box-titre">
                    <img src="image/info.png"/>
                    <span> Contact </span>
....