28220 sujets

CSS et mise en forme, CSS3

Bonjour à tout le monde,
ceci est sans doute une question stupide, mais bon, je n'arrive pas à trouver la solution. J'ai mis du texte en haut d'un bloc et le texte est en partie en gauche et en partie à droite.

Par contre, le seul problème, c'est qu'il n'est pas sur la même ligne. J'avais essayé text-align et float, mais rien ne semblait bien fonctionner.

Voici l'adresse:
http://vlad.photostand.org/nouveau-design/

Merci d'avance. Smiley smile
Modifié par Vlad (22 Sep 2005 - 21:44)
bonsoir,

je ne voudrais pas dire de betise mais la balise <p> sert à encadrer un paragraphe et provoque systematiquement un retour à la ligne. Ceci explique le decalage
Administrateur
Vlad a écrit :
Non, je sais. Smiley langue
J'avais essayé avec un <div> et des <span> mais rien ne marchait. Smiley cligne

Il ne faut pas utiliser n'importe quelle balise, mais celle qui correspond à la fonction voulue. Ici <p> puisqu'il s'agit d'un paragraphe si j'ai bien compris.

Par contre, en regardant ta page, je n'arrive pas à repérer ce qui ne va pas.
Peux-tu faire une capture en montrant ce qui n'est pas placé correctement selon toi ?

EDIT : OK, je pense avoir compris. Il s'agit du texte suivant n'est-ce pas ?
<div id="title">The PhotoStand - Vlad's photoblog
<a href="http://vlad.photostand.org/" title="Home">Home</a> 
• <a href="http://vlad.photostand.org/about.html" title="About">About</a>
• <a href="http://vlad.photostand.org/arhives.html" title="Archives">Archives</a></div>


Dans ce cas, il y'a deux choses :
1- La première partie est le titre de ton document. La balise qui s'impose est donc un titre de niveau 1 (<h1>)
2- La seconde partie est un ensemble de liens que l'on peut regrouper en liste (ul/li)

Ensuite seulement viendra le tour de la mise en page via CSS Smiley cligne
Modifié par Raphael (22 Sep 2005 - 09:15)
Administrateur
Voici une piste de solution :
<ul>
<li><a href="http://vlad.photostand.org/" title="Home">Home</a></li>
<li>• <a href="http://vlad.photostand.org/about.html" title="About">About</a></li>
<li>• <a href="http://vlad.photostand.org/arhives.html" title="Archives">Archives</a></li>
</ul>
<h1 id="title">The PhotoStand - Vlad's photoblog</h1>


h1, ul, li {
font-size: 1em;
margin: 0;
padding: 0;
}
ul {
list-style: none;
float: right;
width: 250px;
text-align: right;
}
li {
float: left;
margin: 0 5px 0 0;
}


Pourquoi placer la liste avant le titre ?
C'est en raison du principe du mode de positionnement flottant