28173 sujets

CSS et mise en forme, CSS3

Debordement de texte, blocs non exstensibles

Bonjour,

Pour deux raisons:

- tu as figé la hauteur de tes principaux blocs en leur donnant une hauteur avec la propriété height;
- tu as positionné en absolu la totalité de tes blocs ou presque.

Deux erreurs classiques de débutant ayant oublié d'apprendre le positionnement CSS avant de commencer à coder le CSS de leurs pages. Ce qui ne pardonne pas: le résultat est inutilisable, et il ne reste plus qu'à 1) apprendre le positionnement CSS et 2) recommencer l'intégration à zéro.

Initiation au positionnement CSS sur Openweb :
1. flux et position relative
2. position float
3. position absolue et fixe

Bonne continuation. Smiley smile
Merci Florent V. je vais aller étudier tout ca. J'ai fais les cours du zero, mais je ne les ai apperement pas saisit comme je l'aurai du. Smiley cligne

Aller j'va continuer de m'entrainer. Smiley lol
Florent V. a écrit :

- tu as positionné en absolu la totalité de tes blocs ou presque.

Sur ce point par contre, j'ai du mal à saisir. En faite c'est l'utilisation du relatif qui m'embete. Je ne vois pas reelement où l'utiliser.
Un petit indice?


J'aurai du éditer le post d'au dessus dsl
Modifié par heyachi (21 Jan 2008 - 18:10)
heyachi a écrit :
Un petit indice?

Alors voilà l'indice: il n'y a pas que absolute et relative dans la vie.

Dans la pratique, 90% de tes blocs principaux seront en... position: static. "static" est la valeur par défaut de la propriété position, et c'est celle qu'il faudra conserver dans la plupart des cas. En gros, on ne modifiera la valeur de la propriété position pour un élément que si on sait exactement ce que l'on fait.

Même chose pour la hauteur: height: auto est encore la meilleure solution dans 90% des cas.

(Pour rappel, pas besoin de repréciser height: auto et position: static pour tous les blocs de la page, vu qu'il s'agit déjà des styles par défaut pour tous les éléments. Smiley cligne )

Indice numéro 2: le fait qu'il y ait une propriété position en CSS est trompeur. Dans la pratique, on utilisera souvent d'autres moyens pour positionner un bloc. Notamment:
- la place des éléments dans le code HTML;
- les marges des éléments;
- parfois le padding des éléments;
- la propriété float.
Merci beaucoup tu m'as vraiment aidé à comprendre le principe et la structure que doit avoir mon code. merci!
Re-bonjour,
apres avoir fait une pause de programmation web je m'y remet.
Et j'ai déja des questions Smiley biggrin
J'ai donc recommencé une feuille de style plus propre.

la voici:
http://jersch.free.fr/style.css

voici le visuel du site:
http://jersch.free.fr/accueil.html

Pourquoi est-ce que mon bloc jaune "en_tete" déborde sur le bloc blanc "page"?
EDIT: J'ai remarqué que ca venait du faite que je mettais un width: 100%;

Par contre comment aligner les le bloc <p> et <div> qui sont dans mon en tete? (horizontalement...)
Car si je met un float: left à <p> ca sort du flux donc de mon bloc en_tete...

merci d'avance
Heyachi
Modifié par heyachi (31 Jan 2008 - 18:33)
Bonjour Heyachi,
pour qu'un élément flottant soit toujours pris en compte par son parent, il suffit de mettre un overflow:auto; sur cet élément parent.

Dans ton cas on obtient donc :


#en_tete
	{
 		margin: 0 auto;
		border: 2px solid yellow;
                overflow:auto;

	}
	#en_tete p
	{
		width: 50%;
		height: 80px;
		border: 2px solid white;
                float:left;
	}
	#en_tete div
	{	
		width: 50%;
		height: 80px;
		background-image: url("image/ban.jpg");
		background-repeat: no-repeat;
		border: 2px solid green;
	}


Voila sauf erreur de ma part, ça doit fonctionner!


Smiley biggol
Ah ouai, maintenant le bloc <p> reste dans le bloc en_tete. Il ne me reste plus qu'a mettre un margin et hop le tour est joué! Smiley biggrin

Merci
Smiley cligne
J'ai une petite question d'ordre pratique.
Est-ce judicieux de créer deux blocs pour la partie centrale?
Je veux dire un pour afficher mon image d'accueil sur la gauche. Et un autre pour le texte sur la droite?

Ou bien est-ce plus sympa de toute mettre dans un bloc central?
Bonjour,

Un div unique, c'est plus sobre, disons plus classe. Mais deux, c'est évidemment plus convivial, ils s'ennnuient moins.
Laurent Denis a écrit :
Bonjour,

Un div unique, c'est plus sobre, disons plus classe. Mais deux, c'est évidemment plus convivial, ils s'ennnuient moins.

Youpÿ, c'est vendredÿ! Smiley lol
Okay j'ai deux div Smiley lol

Autre chose, j'ai un soucis avec mon menu deroulant prit sur ce site. lorsqu'il se déroule, mon menu déplace le contenu de mon bloc corps... ca le fait donc moyennement. J'ai mis un z-index seulement je ne veux pas mettre de position absolute.... alors comment faire?
heyachi a écrit :
seulement je ne veux pas mettre de position absolute...

Ben ya pas trop le choix, ici. Il faut au moins que les sous-menu qui apparaissent soient positionnés en absolu.
Bon ca avance doucement.
Mais je block sur des problemes de tailles de blocks....
Je ne parviens plus a mettre un height qui fonctionne. Sur mon bloc "page" par exemple, ca n'a plus aucun effet. J'ai remarqué ca en voulant mettre un min-height pour mon pieds de page.... Smiley sweatdrop
Sujet clos
Aller à