[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les forums > Site Web > XHTML / CSS > Position d'éléments. > Lecture du sujet

Position d'éléments.

Vous devez être inscrit pour pouvoir poster des messages

Page : 1

Auteur

Message

1 visiteur sur ce sujet (1 anonyme)

Page : 1

luluIV

# Posté le 09/07/2008 à 16:08:30

color guitarist
Avatar

Groupe : Membres

Bonjour, j'ai un problème dans le positionnement d'élément de mon site, regardez par vous même:
lien: http://lishoo.kelio.org/dotclear

Je voudrais que le menu de gauche, ainsi que le contenu de droite, soit à l'intérieur du corps.
Je vous laisse un aperçu des code html et css concernés.

Code : HTML

<div id="page">

<div id="main">
	<div id="content">
	<?php if ($err_msg != '') : /* Si on a une quelconque erreur, on l'affiche */?>
		<div class="error"><strong>Erreur : </strong>
		<?php echo $err_msg; ?></div>
	
	<?php elseif ($preview) : /* Si on demande la prévisualisation d'un commentaire */?>
		<h3>Commentaire pour <?php dcPostTitle(); ?></h3>
		<div id="comment-preview">
			<blockquote>
			<?php dcCommentPreview(); ?>
			</blockquote>
		</div>
	.
	.
	.
	.

	<?php else : /* Sinon, mode = post, donc billet unique (avec commentaires et tout le reste)*/?>
		<?php include dirname(__FILE__).'/post.php'; ?>
	<?php endif; ?>
	
	</div>
</div>

<div id="sidebar">
	<div id="calendar">
	<h2>Calendrier</h2>
	<?php #Affichage du calendrier
	dcCalendar('<table summary="Calendrier">%s</table>'); ?>
	</div>
	
	<div id="search">

	.
	.
	.
	
	<div id="syndicate">
	<h2>Syndication</h2>
	<ul>
		<li><a href="<?php dcInfo('rss'); ?>">fil rss</a></li>
		<li><a href="<?php dcInfo('atom'); ?>">fil atom</a></li>
	</ul>
	</div>
</div>
	<div style="clear: both"></div>
</div>

Code : CSS

#page{
	background:url(http://lishoo.kelio.org/images/milieu.png) repeat-y center top;
	color: inherit;
	padding-bottom: 1em;
	margin-bottom:-5px;
	margin: 0em auto;
	text-align: left;
}

#main{
	float: right;
	width: 540px;
    background: #DECA8F;
    border: solid 1px #6D5611;
}

#content{
	margin: 13px;
}

Voilà, merci de votre aide

obud

# Posté le 09/07/2008 à 16:14:19

Groupe : Membres

Je pense que le plus simple est de donner un width à ton #page (prend la largeur en pixels de ton fond brun) ensuite tu met un margin:auto; et je suppose que ca devrait fonctionner non?

luluIV

# Posté le 09/07/2008 à 16:31:54

color guitarist
Avatar

Groupe : Membres

Oui ça fonctionne, mais comme ce n'est pas tout à fait calé comme je voudrais, j'ai essayé de rajouter (pour le contenu de droite) paddig-right:30px; dans #page{}, ou margin-right:30px; dans #main{}, mais dans ces cas là, lorsque je réduit la taille de la fenêtre, la position du corps, par rapport à l'entête et au pied de page, varie... :euh:

obud

# Posté le 09/07/2008 à 17:40:51

Groupe : Membres

tu pourrais faire une capture d'écran de ton problème pour pouvoir mieu le visualiser?

luluIV

# Posté le 09/07/2008 à 19:43:28

color guitarist
Avatar

Groupe : Membres

La voilà, mais ce problème reste un détail:
Image utilisateur

(Il se passe la même chose au niveau du pied de page)
Ah et aussi, la taille du header change lorsque je réduit la fenêtre, et il est coupé, enfin ça se voit sur la capture d'écran.
Merci de ton aide

obud

# Posté le 09/07/2008 à 20:01:56

Groupe : Membres

Code : CSS

#top{
	height: 250px;
	/*padding-top: 20px;*/
	background:url(http://lishoo.kelio.org/images/header-v2.2.png) no-repeat center top;
}

ajoute la largeur pour qu'il t'affiche tout..

Sinon ce que je te propose c'est de faire un div "global" avec ce genre de structure :
Code : HTML

<body>
<div id="global">
<div id="header"></div>
<div id="corp"></div>
<div id="footer"></div>
</div>
</body>

avec un css comme ceci :
Code : CSS

#global
{
width : 788px;
margin:auto;
}

C'est classique mais simple.. et je pense que c'est correcte

Édité le 09/07/2008 à 20:02:53 par obud

luluIV

# Posté le 09/07/2008 à 22:20:09

color guitarist
Avatar

Groupe : Membres

Oui mais quand je mets la largeur, le header n'est plus centré, il se colle tout à gauche. Je vais essayer le reste, ça m'a l'air pas mal, mais je peux pas le mettre dans la balise body? (<body id="global"> ... ) ou alors dans le css ( body{width : 788px; margin:auto;} )

edit: Yes! C'est tout bon!

Merci beaucoup de tes réponses !
Bon et bien pendant que j'y suis, je te demande un tout petit truc, dans la partie commentaire, ici: http://lishoo.kelio.org/dotclear/index [...] first-post#co
Les titres "commentaires" et "trackbacks" sont un peu trop bas, j'ai beau essayer les margin-bottom négatives ou positives, les padding-bottom, tout ça... ça ne bouge pas, je te mets le code concerné:

Code : HTML

<div id="comments">
	<h3 id="comments-title">Commentaires</h3>
	<div id="co"></div>
	<div id="comments-milieu">
	<?php if ($comments->isEmpty()) : /* Message si aucun commentaire */	?>
		<p>Aucun commentaire pour le moment.</p>
	<?php endif; ?>

Code : CSS

#comments-title {
	background:url(http://lishoo.kelio.org/images/fond_com_haut.png) no-repeat ;
	height:19px;
	font-family:verdana;
	font-size:8pt;
	color:#6B6868;
	font-weight: bold;
	padding-left:28px;
	margin-bottom: 0px;
	}

#comments-title h3{
	margin-top:0px;
}

Merci

Édité le 09/07/2008 à 22:29:37 par luluIV

obud

# Posté le 09/07/2008 à 23:13:10

Groupe : Membres

Pour moi pour ce genre de choses.. tu as déjà une image qui est bien positionnée... pourquoi ne pas écrire directement sur ton image.. ça te simplifiera la vie je crois.. pas besoin de texte.. tu aurrais simplement un background (comme tu l'as déjà) avec le texte correspondant dessus... c'est bien plus simple surtout que le fait que "commentaire" soit en texte n'est pas spécialement utile.. à moins que tu ne penses que quelqu'un va les copier coller...

EDIT : par contre regarde le bas de ton cadre "commentaires"... chez moi il est tout décollé.. :-°