28173 sujets

CSS et mise en forme, CSS3

Bonjour tt le monde, je deviens fou depuis qq jours à ne pas réussir à centrer le site sur lequel je travaille, par rapport à la position relative du .conteneur (et donc PAS par rapport au point en haut à gauche de l'écran).

Sur mon exemple collé ci-dessous, le ".titre" n'hérite pas des propriétés de ".conteneur" alors que le ".nav" si... or j'ai besoin du "padding-top: 20px" pour que tout soit alligné comme je le veux...
Merci !


.conteneur {
width:800px;
height:600px;
background-color:#000000;
border:1px dashed #333;
position:absolute;
top:50%;
left:50%;
margin-left:-400px ;
margin-top:-300px;
padding-top: 20px;
}

.nav {
width: 100px;
height: 200px;
margin-left: 650px;
}

.titre {
width: 300px;
height: 100px;
}
Salut
on aurait besoin aussi du code HTML ... et pense à utiliser le petit bouton "code" pour inserer ton code. .. merci
Bonjour, et bienvenue sur le forum,

gui.b a écrit :
le ".titre" n'hérite pas des propriétés de ".conteneur"

De quelles propriétés est-il censé hériter?

Les propriétés que tu appliques à ".conteneur" ne peuvent pas être héritées par les enfants et descendants de cet élément.

Petite liste (les liens pointent vers la définition de la propriété en question dans la spécification CSS 2.1):

- width: «Inherited: no»
- background-color: «Inherited: no»
- border: «Inherited: no»
- margin: «Inherited: no»
- padding: «Inherited: no»
- position: «Inherited: no»
- left: «Inherited: no»
- top: «Inherited: no»

Si le problème que tu rencontres est un problème de positionnement des éléments, le mieux serait de nous montrer une page en ligne (page du site ou page de test), pour qu'on puisse constater de visu. Et de mieux décrire le problème rencontré et le résultat souhaité. Smiley cligne

Sinon: pour des raisons méthodologiques, je te conseille d'utiliser plutôt les identifiants (attribut HTML id="identifiant" et sélecteur CSS #identifiant {}) pour les éléments uniques dans la page qui dessinent sa structure.
dhjapan a écrit :
et pense à utiliser le petit bouton "code" pour inserer ton code. .. merci

+1

gui.b, n'oublie pas de modifier ton premier message (bouton «Editer» en haut à droite) pour baliser correctement ton code, avec les balises BBcode [ code] et [ /code] (sans l'espace après le crochet ouvrant).
Merci tous deux =)
Voici la page que j'ai faite et qui est allignée par rapport au point haut gauche de la fenetre :

http://www.sanchezandre.com/test/
(en gros si je pouvais faire exactement ça en centré ça serait parfait)

Et voilà ce sur quoi je me prends la tête pour essayer de comprendre comment tout centrer et bien alligner. Ca déconne déjà puisque le titre ne veut pas se mettre où je veux.

http://www.sanchezandre.com/test/gui2.htm

Florent V. a écrit :

+1

gui.b, n'oublie pas de modifier ton premier message (bouton «Editer» en haut à droite) pour baliser correctement ton code, avec les balises BBcode [ code] et [ /code] (sans l'espace après le crochet ouvrant).
Salut, je crois que tu te complique un peu trop en voulant centrer #fond-800x600, #navig, #titre, #randomizer de façon absolut dans la page ... pourquoi ne pas centrer une seule boite .. (comme dans ton exemple : #conteneur ) ensuite construire ton site dans cette boite?
Euh, parce que je ne sais pas comment construire un site dans la boite. Tu vois ce que je veux dire ? Je ne sais pas comment dire à tous mes <div> de se mettre où je veux dans la boite. Par exemple le
margin-top: 50px;
ne marche pas Smiley decu

dhjapan a écrit :
Salut, je crois que tu te complique un peu trop en voulant centrer #fond-800x600, #navig, #titre, #randomizer de façon absolut dans la page ... pourquoi ne pas centrer une seule boite .. (comme dans ton exemple : #conteneur ) ensuite construire ton site dans cette boite?
gui.b a écrit :
Ca déconne déjà puisque le titre ne veut pas se mettre où je veux.

Il ne se met pas où tu veux, mais il se place très exactement là où tu lui demandes de se placer. Smiley smile

Mais plutôt que de détailler les différents problèmes, je crois qu'il faut te signaler que tu as brulé les étapes:
- tu ne respectes pas la syntaxe HTML (notamment: ta page manque cruellement d'un Doctype);
- tu n'utilises pas un balisage sémantique (par exemple, des paragraphes, des titres, peut-être une liste non ordonnée pour ton menu de navigation...);
- tu t'emmêles les pinceaux dans les styles CSS.

Après ce constat, je ne peux te conseiller qu'une chose: travailler les bases. Il existe de nombreux cours et tutoriels en ligne.

La page qui va bien:
http://css.alsacreations.com/Comment-debuter-et-trouver-l-information
C'est ce que je me dis, tiens si je commencais par A au lieu de foncer à Z tout de suite Smiley smile Merci.

Florent V. a écrit :

Il ne se met pas où tu veux, mais il se place très exactement là où tu lui demandes de se placer. Smiley smile

Mais plutôt que de détailler les différents problèmes, je crois qu'il faut te signaler que tu as brulé les étapes:
- tu ne respectes pas la syntaxe HTML (notamment: ta page manque cruellement d'un Doctype);
- tu n'utilises pas un balisage sémantique (par exemple, des paragraphes, des titres, peut-être une liste non ordonnée pour ton menu de navigation...);
- tu t'emmêles les pinceaux dans les styles CSS.

Après ce constat, je ne peux te conseiller qu'une chose: travailler les bases. Il existe de nombreux cours et tutoriels en ligne.

La page qui va bien:
http://css.alsacreations.com/Comment-debuter-et-trouver-l-information
Salut, j'ai consulté un grand nombre de sites pour un peu mieux comprendre les bases du CSS et j'ai réussi à faire une page qui me semble plus propre dans le codage.

http://www.sanchezandre.com/test/camarchepas.htm

Le problême qui reste le même qu'hier est que je ne comprends pas pourquoi mon style #Interne s'affiche où je lui demande alors que #Entete ne se met pas du tout où je lui demande....
Merci Smiley sweatdrop

Florent V. a écrit :

Il ne se met pas où tu veux, mais il se place très exactement là où tu lui demandes de se placer. Smiley smile

Mais plutôt que de détailler les différents problèmes, je crois qu'il faut te signaler que tu as brulé les étapes:
- tu ne respectes pas la syntaxe HTML (notamment: ta page manque cruellement d'un Doctype);
- tu n'utilises pas un balisage sémantique (par exemple, des paragraphes, des titres, peut-être une liste non ordonnée pour ton menu de navigation...);
- tu t'emmêles les pinceaux dans les styles CSS.

Après ce constat, je ne peux te conseiller qu'une chose: travailler les bases. Il existe de nombreux cours et tutoriels en ligne.

La page qui va bien:
http://css.alsacreations.com/Comment-debuter-et-trouver-l-information