18068 sujets

Questions générales et questions de débutants

Positionnement des éléments

Bonjour,
Je suis une totale débutante dans la création de site en CSS. J'ai lu le tuto concernant le positionnement des éléments et j'ai un peu de mal a comprendre comment placer un élément texte et image l'un a coté de l'autre.

Je voudrais mettre mon menu a gauche et pouvoir mettre une photo à droite.

Pourriez vous m'aider? Merci par avance!
Bonjour, et bienvenue à toi.

Il te suffit de définir qu'un de tes deux éléments est en position flottante par rapport à l'autre.

Ainsi, tu peux attribuer un 
float: right;

à ta photo ou plutot au conteneur qui la contient, ainsi, le menu occupera naturellement l'espace à gauche.
merci d'avoir répondu !

Justement, ou dois-je mettre les références de la photo par rapport au "float: right;" avant, après, au milieu?
Bonsoir,
a écrit :
Justement, ou dois-je mettre les références de la photo par rapport au "float: right;" avant, après, au milieu?

C'est pas très très clair.
Le mieux serais que tu donnes au moins la partie de code concernée. Smiley cligne
Modifié par Hermann (12 Jun 2006 - 19:23)
désolée

donc voici le code de mon menu : <ul class="menu">
<li><a href="" class="Style2 Style8">Forum</a></li>
<li><a href="" class="Style2 Style8">Chat</a></li>
<li><a href="" class="Style2 Style8">Blogs/Liens</a></li>
<li><a href="" class="Style2 Style8">Livre d'or</a></li>
<li><a href="" class="Style2 Style8">Contact</a></li>
</ul>

et le code image : <img src="297534732_small.jpg" />

ou dois-je placer le "float: right;" dans tout ca? lol
Salut,
Dans le <head> :
Tu peux essayer ça :

<style type="text/css">
          ul.menu { float: left;    }   
</style>


Attention aux espaces dans tes classes de lien, je pense que c'est "risqué"
Modifié par Hum (12 Jun 2006 - 22:53)
Bonsoir,
Pour une meilleur accessibilité, tu dois préciser la taille de ton image et l'attribut ALT (contenu textuel ALTernatif servant à afficher un texte de remplacement décrivant l'image sur les navigateurs textuels):

Exemple

<img src="297534732_small.jpg" height="100" width="100" alt="description" />


Tu as des redondances (issus de Dreamweaver je suppose) un peu lourde : class="Style2 Style8" que tu pourrais eviter...
Pour commencer je te conseille d'aller lire http://www.tuteurs.ens.fr/internet/web/html/css.html
et http://css.alsacreations.com/Bases-et-indispensables/
debutante13 a écrit :
donc voici le code de mon menu : <ul class="menu">
<li><a href="" class="Style2 Style8">Forum</a></li>
<li><a href="" class="Style2 Style8">Chat</a></li>
<li><a href="" class="Style2 Style8">Blogs/Liens</a></li>
<li><a href="" class="Style2 Style8">Livre d'or</a></li>
<li><a href="" class="Style2 Style8">Contact</a></li>
</ul>

et le code image : <img src="297534732_small.jpg" />

ou dois-je placer le "float: right;" dans tout ca? lol

Tout ce que tu as donné, c'est ton code HTML (ou XHTML). Les CSS sont un langage différent, qui doit donc être indiqué à part. Le plus souvent, on crée une feuille de style (un simple fichier texte qui porte l'extension .css) dans laquelle on indique toutes les règles CSS pour le site. Puis, dans chaque page du site, au niveau de l'élément head, on crée un lien vers ce fichier .css pour que le navigateur le récupère et l'utilise pour interpréter la mise en forme de la page.
Hum a écrit :
Attention aux espaces dans tes classes de lien, je pense que c'est "risqué"

En l'occurence c'est voulu (même si c'est peut-être voulu plus par le logiciel que par l'auteur de la page…). Il s'agit d'une déclaration de deux classes (« Style2 » et « Style8 ») pour un même élément.
mpop a écrit :

Il s'agit d'une déclaration de deux classes


Oups. J'avais oublié que c'était possible.
Modifié par Hum (12 Jun 2006 - 23:37)
Salut,
1 ) Effectivement comme il est explicité plus haut, fais gaffe aux espaces.... prefère "nom_fichier" que "nom fichier"...

2) Tu donnes une CLASS plutôt qu'un ID pour ton élément UL Si ce dernier n'est pas repété, préfère pour les quelques structures uniques de ton site, genre: 1header, 2body, 3footer.. (comme au bac ! : thèse...anti-thèse... synthèse, des blocs distincts ) les "id" aux "class".
En effet, les ID sont pour les structures uniques et les class pour les structures communes.
unique :
<body>
<ul id=header>
<li><a href"#>page.html</a></li>
<li><a href"#>page2.html</a></li>
<li><a href"#>page3.html</a></li>
</ul>
communes :
<ul id=header>
<li><a href"#><span="actif">page.html</span><a/></li>
<li><a href"#>page2.html<a/>li</>
<li><a href"#><span="actif">page3.html</span><a/></li>

dans ce cas, ton css concernant les liens sera ecrit de la manière suivante:
#header a{
font:bold 12px arial;
}

Donc pour chacun des éléments de type "A" tu mentionnes une class identique : "style_style8" héritée d'une class parente "ul"

Autrement dit ça revient au même qu'ecrire :
.menu a;{...}


#mon_menu correspond à l'ID "UL"et "A" correspond à la suite logique qui découle de ul. et comme celui-ci porte le nom de "mon-menu" tous les "a" seront hérités....

Heu... il est 5 heure du mat , je suis très fatigué. Ya tout plein de gens ici qui seront ravis de répondre de façon "plus fraîche" d'ici quelques heures...
Je ne peux te conseiller qu'un bouquin qui a été pour moi à la base tout ...
"css 2 pratique du design web"
Je ne cherche pas à faire de la pub pur R.Goetter, mais franchement, j'ai depuis tout mieux compris Smiley cligne ))
Modifié par lefelinherbivore (13 Jun 2006 - 05:44)
merci beaucoup pour vos réponses, ca m'a bien éclairé. J'essairai de voir si je trouve ce livre, je crois que j'en aurais bien besoin!
j'aurai une autre question. Je ne sais pas sur quoi j'ai appuyé, mais quand je travaille sur mon site (sur dreamweaver), je ne vois plus les images et flashs, ils sont remplacés par des blocs grisés. Par contre en apercu, ils sont affichés.

Savez vous comment les afficher sur mon écran?
lefelinherbivore :
a écrit :
1 ) Effectivement comme il est explicité plus haut, fais gaffe aux espaces.... prefère "nom_fichier" que "nom fichier"...


En fait, dans la définition d'une classe ( comme la souligné mpop ), mettre un espace veut dire appliquer 2 styles

css
.red {color:red;}
.gras {font-weight:bold;}

html



<p class="red gras">Un text en rouge et en gras</p>



Voila pour cette partie Smiley cligne
Salut,

il me semble qu'il n'a pas été dit que par exemple une image floattant a droite d'un texte dans un <p> doit se trouver à gauche du texte ds l'html :

CSS

.floatright {float: right;}


HTML

<p>

<img class="floatright" src="image.html" alt="image" />

blablablablablablablablablablablablablablablabla
blablablablablablablablablablablablablablablabla

</p>


Sous peine qu'elle floatte bien a droite mais avec un decalage vertical non voulu.
Modifié par Hum (24 Jun 2006 - 13:02)
Administrateur
Hum a écrit :
il me semble qu'il n'a pas été dit que par exemple une image floattant a droite d'un texte dans un <p> doit se trouver à gauche du texte ds l'html

Tout à fait.
Pour être un peu plus précis :
a écrit :
Récapitulatif. Attention à bien comprendre le fonctionnement du positionnement flottant :

* L'élément est d'abord placé normallement dans le flux. Donc si un autre élement bloc est placé avant lui, l'élément flottant se positionnera en dessous; et si un élément bloc le suit, ce dernier sera placé dessous. Bref, le comportement classique du positionnement en flux
* Ensuite l'élément qui a reçu la propriété float est "poussé" à gauche ou à droite de son conteneur.
* Les éléments qui le suivent au sein du conteneur se placent alors autour de lui.
Sujet clos
Aller à