ZepX3 Posté 28 Février 2008 Partager Posté 28 Février 2008 (modifié) Salut Voici une capture d'écran de mon site en cour de construction. J'aimerais mettre la partie des news (le texte en gris) du côté droit du site et faire monter la partie Nouveautés à même égalité mais à gauche. Comment faire? J'ai essayé mais en vain. Mon code PHP : CODE <body> <div id="header"> </div> <div id="menubar"> <a href="/forums">Forums</a> <a href="/fiches.php">Fiches de jeux</a> <a href="aide.php">Aide</a> </div> <div id="contenu"> <div id="titre">Titre de la new</div> <p> Blablablabla</p> </div> <div id="nouveautes"> <div id="titrenouv">Nouveautés</div> <p> Ici les nouveautés<br /> </p> </div> </div> <div id="footer"> </div> </body> Et mon code CSS CODE body { width: 900px; margin: auto; margin-top: 20px; margin-bottom: 20px; background-color: #DBDBDB; } #header { width: 900px; height: 220px; background-image: url("/design/images/header.jpg"); background-repeat: no-repeat; } #menubar { width: 898px; height: 25px; background-image: url("/design/images/menubarback.jpg"); border: 1px solid #A8A6A7; text-align: right; color: #7A7A7A; } #menubar a { text-align: right; background-image: url("/design/images/menubarback.jpg"); padding-left: 3px; padding-right: 3px; text-decoration: none; margin-left: 10px; color: #5F5F5F; height: 25px; } #menubar a:hover { text-align: right; background-image: url("/design/images/menubarback-on.jpg"); padding-left: 3px; padding-right: 3px; text-decoration: none; color: #5F5F5F; height: 25px; } #contenu { padding: 5px; color: #838383; background-image: url("/design/images/topcontent.jpg"); background-repeat: no-repeat; background-color: #FFFFFF; width: 888px; border-left: 1px solid #A8A6A7; border-right: 1px solid #A8A6A7; } #titre { background-image: url("/design/images/titleback.jpg"); padding: 5px; font-size: 16px; color: #000000; } #nouveautes { float: left; width: 120px; } #nouveautes titrenouv { float: left; width: 120px; } #footer { width: 900px; height: 50px; background-image: url("/design/images/footer.jpg"); background-repeat: no-repeat; } Merci Modifié 28 Février 2008 par ZepX3 Lien vers le commentaire Partager sur d’autres sites More sharing options...
Wolf18 Posté 29 Février 2008 Partager Posté 29 Février 2008 En gros il faut que tu fasses deux blocks distincts un peu comme ci-dessous et que tu y places respectivement leur contenu (ca sera plus simple et moins répétitif) : index.php <div id="nouveautes">les nouveautés ici</div><div id="contenu">le texte de ta page là</div><div class="clear"></div> style.css #nouveautes { float:left; width:120px;}#contenu { float:right;}.clear { clear:both;} Ca devrait fonctionner si j'ai encore toute ma tête à l'heure qu'il est. Lien vers le commentaire Partager sur d’autres sites More sharing options...
ZepX3 Posté 29 Février 2008 Auteur Partager Posté 29 Février 2008 Salut en fait ce n'est pas mauvais, mais je l'avais mal fait... Je viens de trouver la solution! Je devais mettre le bloc news et À la une dans un même bloc principal, alors une fois ceci fait j'ai mis float:left à "À la une" et float:right aux news et le tour est joué. Merci Lien vers le commentaire Partager sur d’autres sites More sharing options...
baulet Posté 29 Février 2008 Partager Posté 29 Février 2008 vérifie bien l'affichage dans firefox et IE, car les "float" peuvent parfois réserver des surprises Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant