Probleme emplacement texte

lilouetfredo -
lilouetfredo - 22 janv. 2010 à 16:07

Bonjour,

Voila j'ai un petit probleme que je n'arrive vraiment pas à régler pourtant je sais que ce n'est pas grand chose mais je sèche completement.
Je crée un site a l'aide de dreamweaver, donc l'entete et le menu sont nickel, bien placés. Mais mon texte vient se placer sous mon menu et je n'arrive pas a le mettre a sa droite.
Pouvez vous m'aider s'il vous plait?
j'ai essayé dans le CSS la fonction margin:left, mais rien y fait.
Merci d'avance pour vos réponses.
Voici le screen de ce que cela me donne (j'ai couper la moitier de la banniere pour une histoire de confidentialité) : https://www.imagup.com

Afficher la suite

A voir également:

Probleme emplacement texte
Texte de chanson gratuit pdf - Télécharger - Vie quotidienne
Transcription audio en texte word gratuit - Guide
Excel cellule couleur si condition texte - Guide
Texte barré whatsapp - Guide
Mettre un texte en majuscule - Guide

36 réponses

Réponse 1 / 36

notobe Messages postés 1952 Date d'inscription Statut Membre Dernière intervention 213

Il n'y a pas besoin de tableaux pour la mise en page.

Votre code devrait être plus simplement :

<div id="en_tete">
 [...]
  </div>
<div id="menu">
[...]
    </div>
<div id="corps">
[....]
</div>
<div id="pied_de_page">
 [...]
</div>

et le CSS

#menu {
width:155px;
float:left;
background:... etc.
}
#corps {
margin-left:160px;
background... etc;
}
#pied_de_page {
clear:both;
text-align:center;
etc..
}

Réponse 2 / 36

Tarkus

salut lilouetfredo

Tu devrais faire un tour ici Tuto et il n'en parle pas mais met des z-index .

Bon courage !

Réponse 3 / 36

notobe Messages postés 1952 Date d'inscription Statut Membre Dernière intervention 213

On ne peut rien dire juste avec une capture.
Il faut les codes html et CSS.
Merci.

Réponse 4 / 36

lilouetfredo

au niveau du code html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document</title>
<link rel="stylesheet" media="screen" type="text/css" title="GalerieCSS" href="galeriecss.css" />

</head>

<body>
<div id="en_tete">
  <div align="center"><img src="structure_site/entete.jpg" />
  </div>
</div>
<div id="menu">
<table width="155" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td><img src="structure_site/surmenu.jpg" width=”155” height=”88” /></td>
</tr>
<tr>
<td align="left" background="structure_site/menu.jpg" bgcolor=”#333333”>
<div class="element_menu">
  <div align="center">
    <p><a href="accueil.html" class="lien">Accueil</a><br />
      <a href="biographie.html" class="lien">Biographie</a><br />
      <a href="galeries.html" class="lien">Galeries</a><br />
      <a href="contact.html" class="lien">Contact</a><br />
    </p>
    </div>
</div>
</td>
</tr>
<tr>
<td><img src="structure_site/sousmenu.jpg" width=”155” height=”76” /></td>
</tr>
</table>
</div>
<table align="center" width="780">
<tr align="center" valign="top">
  <td>
<div id="corps">
<ul>
<li><a href="galerie2003.html">Galerie 2003</a></li>
<li><a href="galerie2004.html">Galerie 2004</a></li>
<li><a href="galerie2005.html">Galerie 2005</a></li>
<li><a href="galerie2006.html">Galerie 2006</a></li>
<li><a href="galerie2007.html">Galerie 2007</a></li>
<li><a href="galerie2008.html">Galerie 2008</a></li>
<li><a href="galerie2009.html">Galerie 2009</a></li>
</ul>
</div>
</td>
</table>
<div id="pied_de_page">
 <div align="center"><img src="structure_site/pieddepage.jpg" />
  </div>
</div>

</body>
</html>

et le CSS (pas tres gros dans l'immédiat) :

body
{
background-color: #333333;
}

#menu a
{
color:#FFFFFF;
font-family:"Arial", Arial;
text-align:center;
font-size:18px;
margin-bottom:20px;
}

Voila j'espère que ca pourrais vous aider en voyant le html et le CSS + le screen ;-)

Merci.
Je vais regarder sur le site que tu m'as mis Tarkus, je reviens vous dire si j'ai trouvé.

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 36

lilouetfredo

https://www.imagup.com voici quand meme le screen de dreamweaver, ca va peut etre vous parler.

https://www.imagup.com

Réponse 6 / 36

Fetide68 Messages postés 745 Date d'inscription Statut Membre Dernière intervention 32

Dans le CSS, plutôt que margin: left; essai float: left; sur les deux (!) éléments à aligner... !

Réponse 7 / 36

Fetide68 Messages postés 745 Date d'inscription Statut Membre Dernière intervention 32

Je sais que beaucoup de webmaster n'aiment pas les tables mais s'il débute, laisse lui ses tables... Ca lui apprends à structurer, maisse passe aux div dès que possible et retient ce paramètre CSS : float: left;

Réponse 8 / 36

lilouetfredo

En utilisant float:left dans le CSS "#menu" c'est deja mieux :

https://www.imagup.com

body
{
background-color: #333333;
}

#menu
{
float:left;
}

#menu a
{
color:#FFFFFF;
font-family:"Arial", Arial;
text-align:center;
font-size:18px;
margin-bottom:20px;
}

Réponse 9 / 36

notobe Messages postés 1952 Date d'inscription Statut Membre Dernière intervention 213

Ce n'est pas plus simple avec des tableaux.
Cela alourdit la page, encombre le code, on ne s'y retrouve pas, et lorsqu'on veut refaire son site c'est la galère.
Autant faire bien dés le début, d'autant que ce n'est vraiment pas difficile !

Réponse 10 / 36

Fetide68 Messages postés 745 Date d'inscription Statut Membre Dernière intervention 32

Moi je les utilise plus, mais j'ai gardé une bonne structure dans mes codes sources, contrairementà ce que je vois sur des sites fais par des plus "pros"que moi ! Sans les tables, je sais pas si ce serait aussi bien aujourd'hui alors que mes site sont plus forts... hehe lol

Réponse 11 / 36

lilouetfredo

lol Pas de soucis normalement c'est comme ca que je voulais faire notobe, c'est a dire sans utiliser de table.
J'ai pas finis ma phrase tout a l'heure : donc c'est mieux avec float:left, je n'ai plus le cadre jaune que se met au meme dimension que la banniere mais mon texte reste toujours sous le menu :s .

Je vais essayer la version sans table, mais je pense que le soucis restera le meme ^^ ;-)

notobe Messages postés 1952 Date d'inscription Statut Membre Dernière intervention 213

Normalement non. La structure que j'ai donné passe sans problèmes.

Réponse 12 / 36

Fetide68 Messages postés 745 Date d'inscription Statut Membre Dernière intervention 32

C'est là que les table peuvent gêné. Une balise ouverte n'est pas fermée au bon endroit...

Réponse 13 / 36

lilouetfredo

comme cela sans les tables :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document</title>
<link rel="stylesheet" media="screen" type="text/css" title="GalerieCSS" href="galeriecss.css" />

</head>

<body>

<div id="en_tete">
  <div align="center"><img src="structure_site/entete.jpg" />
  </div>
</div>


<div id="menu">
<tr>
<td><img src="structure_site/surmenu.jpg" width="”155”" height="”88”" /></td>
</tr>
<tr>
<td align="left" background="structure_site/menu.jpg" bgcolor="”#333333”">
  <div align="center">
    <p><a href="structure_site/accueil.html" class="lien">Accueil</a><br />
      <a href="structure_site/biographie.html" class="lien">Biographie</a><br />
      <a href="structure_site/galeries.html" class="lien">Galeries</a><br />
      <a href="structure_site/contact.html" class="lien">Contact</a><br />
    </p>
    </div>
</td>
</tr>
<tr>
<td><img src="structure_site/sousmenu.jpg" width="”155”" height="”76”" /></td>
</tr>
</div>


<tr align="center" valign="top">
<div id="corps">
<ul>
<li><a href="structure_site/galerie2003.html">Galerie 2003</a></li>
<li><a href="structure_site/galerie2004.html">Galerie 2004</a></li>
<li><a href="structure_site/galerie2005.html">Galerie 2005</a></li>
<li><a href="structure_site/galerie2006.html">Galerie 2006</a></li>
<li><a href="structure_site/galerie2007.html">Galerie 2007</a></li>
<li><a href="structure_site/galerie2008.html">Galerie 2008</a></li>
<li><a href="structure_site/galerie2009.html">Galerie 2009</a></li>
</ul>
</div>
</td>
</tr>

</body>
</html>

ca donne ca sous dreamweaver : https://www.imagup.com
donc le texte centré: super seulement dans le dreamweaver, en visualisant la page internet c'est pas centré mais ca doit pas etre trop compliqué, une histoire de margin. En ce qui concerne le menu il ne me prend plus un background dans lequel je note les liens, voici :

sans le background:
https://www.imagup.com

avec le background:
https://www.imagup.com

Réponse 14 / 36

notobe Messages postés 1952 Date d'inscription Statut Membre Dernière intervention 213

Attention ! Il reste des éléments de table dans le code... (tr, td..)

L'histoire de background, je ne comprends pas... Je ne vois pas de différence entre les 2 captures.
Les liens sont toujours en bleu sur fond gris.
Que voulez-vous obtenir ?

Réponse 15 / 36

lilouetfredo

alors voici la différence, il s'agit du menu de gauche en fait et non les liens dans le corps de la page :

avec:
https://www.imagup.com

sans:
https://www.imagup.com

mon menu de gauche est composé de 3 images:
le haut: https://www.imagup.com
le milieu qui est en background, sur lequel je note mes liens de menu tout en gardant la ligne blanche sur le coté droit : https://www.imagup.com
et le bas du menu : https://www.imagup.com

c'est un peu bete mais c'est juste une histoire de trait, mais cela fonctionne parfaitement dans le premier screen, alors que le deuxieme screen appartement au code "sans table" ca ne fonctionne plus. Vous comprenrez?

en ce qui concerne les tr et td je vais essayer de les enlever correctement.

notobe Messages postés 1952 Date d'inscription Statut Membre Dernière intervention 213

Ah oui, d'accord : je me focalisais sur la liste ;)

Il suffit d'écarter un peu le div corps. J'avais mis une marge à 160px, mais il suffit de l'augmenter pour que la liste ne couvre plus l'image.

Réponse 16 / 36

Fetide68 Messages postés 745 Date d'inscription Statut Membre Dernière intervention 32

Proposition (attention des retouches sont nécessaires) :

body { background: #333333; }

/* Taille du document: largeur 800 pixels, hauteur 600 pixels */
#site { width: 800px; height: 600px; }
/* image de fond avec background et tailles width (largeur), height: hauteur en pixels... */ 
/* float: left; permet d'aligner une autre div à gauche (left). Par défaut les div ne s'alginent pas, elles vont à la ligne... */ 
#en_tete { background: url('structure_site/entete.jpg'); width: 245px; float: left; }
/* float: left; à mettre sur toutes les div à la suite... */ 
#surmenu { background: url('structure_site/sousmenu.jpg'); width: 155px; height: 76px; float: left; }
#corps { width: 400px; float: left; }
#menu { float: left; }
#menu ul { list-style: none; }

ton html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Document</title>
		<link rel="stylesheet" type="text/css" href="galeriecss.css" />
	</head>
	<body>
		<!--J'ai mis ton site dans un div complet de 800 par 600 pixels... Sois tu enlèves la div, ou tu change les valeurs dans le fichier css (voir commentaires dans le fichier) //-->
		<div id="site">
			<!--L'image d'en-tête est incrustée par le CSS dans le fichier galeriecss.css //-->
			<div id="en_tete">&nbsp;</div>
			<div id="middle">
				<div id="menu">
					<ul>
						<li><a href="structure_site/accueil.html" class="lien">Accueil</a></li>
						<li><a href="structure_site/biographie.html" class="lien">Biographie</a></li>
						<li><a href="structure_site/galeries.html" class="lien">Galeries</a></li>
						<li><a href="structure_site/contact.html" class="lien">Contact</a></li>
					</ul>
				</div>
				<!-- Image de surmenu gérée par le css //-->
				<div class="surmenu">&nbsp;</div>
				<div id="corps">
					<ul>
						<li><a href="structure_site/galerie2003.html">Galerie 2003</a></li>
						<li><a href="structure_site/galerie2004.html">Galerie 2004</a></li>
						<li><a href="structure_site/galerie2005.html">Galerie 2005</a></li>
						<li><a href="structure_site/galerie2006.html">Galerie 2006</a></li>
						<li><a href="structure_site/galerie2007.html">Galerie 2007</a></li>
						<li><a href="structure_site/galerie2008.html">Galerie 2008</a></li>
						<li><a href="structure_site/galerie2009.html">Galerie 2009</a></li>
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>

Réponse 17 / 36

lilouetfredo

Excusez moi pour l'attente, depuis le 13 je n'ai pas pu me remettre dans ce site. Je m'y remet immédiatement. Normalement j'ai compris ce qu'il fallait faire donc je vais essayer et je reviens vers vous à la fin.
A plus tard.

Réponse 18 / 36

lilouetfredo

D'ailleurs un petite question en passant, je vois que dans ce que tu as mis en CSS Fetide68, il n'y a que "#surmenu" avec un url que j'ai changé d'ailleurs car tu as mis " background: url('structure_site/sousmenu.jpg')"
donc j'ai plutot mis background:url(structure/surmenu.jpg), mais je ne comprends pas car mon menu est fait en 3 morceaux: le "surmenu", le "milieu" (qui permet d'écrire des liens tout en gardant l'image en fond) et le "sousmenu", dois-je creer dans le CSS la partie "milieu" et" sousmenu" en plus? la partie surmenu et le sousmenu permette de garder le fondu du trait en haut et en bas et que mon menu soit aligné entre ces 2 images.

Merci d'avance.

Réponse 19 / 36

Fetide68 Messages postés 745 Date d'inscription Statut Membre Dernière intervention 32

Je saisis pas trop... Je n'avais pas les images, donc j'ai pas pu tester... Mais j'avais compris ton problème avec la barre en fondu et j'avais prévu le coup je crois bien...

Essai de me montrer le résultat que tu comptes obtenir et les différentes images que j'y vois un peu plus claire si tu veux, sois comme tu le faisais, soit par Message privé (mais pour ça, il te faut un compte CCM) !

Réponse 20 / 36

lilouetfredo

Alors voici a peu près ce que je souhaiterais avoir https://www.imagup.com

Ensuite j'ai suivi a peu près tes instructions, je dis à peu près car j'ai changer 1 chose:
voila le resultat en visionnant sur le net:
https://www.imagup.com

donc voici mon HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
			<title>Document sans nom</title>
			<link rel="stylesheet" type="text/css" href="galeriecss.css" />
	</head>

	<body>
			<div id="site">
					<div id="en_tete"></div>
					<div id="middle">
  							<div id="menu">
                            	<img src="structure/surmenu.jpg" width="155" height="88" />
                            		<ul>
                                    		<li><a href="accueil.html" class="lien">Accueil</a></li>
                                            <li><a href="biographie.html" class="lien">Biographie</a></li>
                                            <li><a href="galeries.html" class="lien">Galeries</a></li>
                                            <li><a href="contact.html" class="lien">Contact</a></li>
									</ul>
								<img src="structure/sousmenu.jpg" width="155" height="86" />
							</div>
                            <div class="surmenu"></div>
                            <div id="corps">
                            		<ul>
                                    		<li><a href="galerie2003.html">Galerie 2003</a></li>   
                                    </ul>
							</div>
					</div>
			</div>                                                                            
	</body>
</html>

et voici mon CSS :

body
{
background-color: #333333;
}

#site
{
width:800px;
height:600px;
float:left;
}

#en_tete
{ 
background:url(structure/entete.jpg);
width:1100px;
height:126px;
float:left;
}

#surmenu
{
width:155px;
height:88px;
float:left;
}

#corps
{
width:500px;
float:left;
}

#menu
{
float:left;
}

#menu ul
{
list-style:none;
}

Tu vois ce que je voudrais obtenir au niveau de mon menu?
le haut de mon menu (image) : https://www.imagup.com
le milieu du menu (le fond) sur lequel j'écris mes lien de menu (par dessus donc en fond): https://www.imagup.com
et le bas de mon menu (image) : https://www.imagup.com

Discussions similaires

Formule Excel : "SI" une cellule contient un mot, alors ?

Excel formule : savoir si une cellule contient partie texte

[Excel] Recherche de Texte avec RechercheV

Votre réponse

Discussions similaires