28172 sujets

CSS et mise en forme, CSS3

Placement CSS

Salut tout le monde,

je suis en train de réaliser la "structure" d'une application et j'aurai besoin d'un peu d'aide, conseils sur la partie CSS que je ne maitrise pas beaucoup.

Alors actuellement j'ai un template qui contient 3 DIV :
- HEADER
- CONTENT
- FOOTER

Le placement de ces 3 parties s'affiche correctement.

A l'intérieur du DIV HEADER, je voudrais un logo et un menu et à l’intérieur du content, j'aimerais mettre des "boites" contenant des informations.

j'essaye actuellement de placer le menu et le logo mais je n'y arrive pas Smiley decu

Voilà le schéma de ce que j'aimerais réaliser :
upload/45009-Documentsa.jpg

fichier css:

#header {
	width: 100%;
	height: 100%;
	position: relative;
}
#content {
	width: 100%;
	height: 100%;
	position: relative;
}
#footer {
	width: 100%;
	height: 100%;
	position: relative;
}


template.xhtml :
<body>
	<div id="header">
		<ui:insert name="header">
			<ui:include src="/templates/header.xhtml" />
		</ui:insert>
	</div>

	<div id="content">
		<ui:insert name="content">
		</ui:insert>
	</div>

	<div id="footer">
		<ui:insert name="footer">
			<ui:include src="/templates/footer.xhtml" />
		</ui:insert>
	</div>

</body>


header.xhtml
<body>
		<img src="resources/logos/logo.png" alt="" border="0" height="10%" width="10%" />
		<h2>menu</h2>
</body>


Pouvez-vous m'orienter pour structurer mon application comme je souhaite ?

Je vous remercie par avance.

marie.
Modifié par Marie34 (06 Jun 2012 - 18:41)
Merci pour cet article, je viens de le lire.
il y a un truc que je n'ai pas saisi, comment je peux faire pour aligner un élément de type "block" à coté d'un élément de type "inline" ?

Dans mon cas, IMG avec UL pour le menu.
D'accord je vais regarder ça. Mais au final, ce n'est pas mieux d'utiliser un tableau pour placer mon image et mon menu ? Smiley confused
Bonjour,

Plus simple, oui, mieux non... Et même pire !
Un tableau n'est pas fait pour mettre en forme un site internet (ou alors dans une galaxie très très lointaine, ou alors il y a une dizaine d'années sur notre bonne vieille terre...) mais bien contenir une liste de données.

Ce que tu peux en revanche faire, c'est utiliser la propriété display : table-cell qui peut utiliser le rendu d'une cellule de tableau pour l'utiliser sur l'élément que tu souhaites.
Cf. http://www.alsacreations.com/tuto/lire/610-Mise-en-page-CSS-avancee-grace-a-la-propriete-display.html
merci pour votre aide, j'ai pu faire ce que je voulais pour mon header Smiley smile

Maintenant je passe à la partie Content. Quelle méthode dois-je mettre en place pour faire mes "boites" ? Smiley biggrin Je veux mettre 3 boites par "ligne" et que la 4ème soit en dessous et ainsi de suite.
Salut, Une boite je considere que c'est un <li> et que tes 4 boite constitue donc un <ul>

tu peux mettre une classe pour les <li> avec un float left, et une taille total (taille du li1 + marge entre l1 et li2 + taille du li2 + marge, etc...)

ce qui fait que trois de tes <li> pourront être sur la même ligne, et le 4eme passera à la ligne suivante.


Sinon tu fais 4 <div> (boite) dans une <div> (conteneur) et tu les positionne.

Cordialement.
Un <div> conteneur de taille X
N <div> contenus de taille maximale X/3, display:inline-block, float:right, largeur et hauteur renseignées.

J'attend un retour la dessus
Sujet clos
Aller à