Sujet Précédent Sujet Suivant

Besoin d'aide ... Positionnement de texte ...

Fermé
Owerace - 12 août 2012 à 13:32
gilbert1995 Messages postés 414 Date d'inscription samedi 12 septembre 2009 Statut Membre Dernière intervention 30 mai 2013 - 14 août 2012 à 03:15
Bonjour,

Voilà, j'aimerais que mon texte soit à droite de mon menu, et qu'il ne dépasse pas les bordures de mon corps. Mais je n'y arrive pas .... L'id correspondant avec mon texte est "texte" ...
Merci de vos réponse ...


Mon CSS :
body
{
background-color:#ffffff ;
font-size :16px;
font-family : Verdana }
#conteneur
{
width: 1280px;
margin-left: 65px;
margin-right: 0px;
}
#header
{
background-image: url("../SIMSHEADER.jpg");
width: 1280px;
height: 174px;
}
#header a
{
display: block;
height: 174px;
width: 1280px;
}
#menu
{
background-image: url("../MENUSIMS.jpg");
width: 1280px;
height : 162px;
text-align: center;
font-size: 57px;
font-family: Arial
font-weight:bolder
}
#menu a
{
color : white;
text-decoration: none;
margin-left: 20px;
margin-right: 20px; }
#menu a:hover
{
font-weight:bolder
color : white;
font-family : Arial;
text-decoration: underline;
}
#texte
{
position: absolute;
left : 50px;
}

.arrowlistmenu{
width: 90px; /*width of menu*/
position : relative;
float: left

}
.arrowlistmenu .headerbar{
font: bold 14px Arial;
color: white;
background-image: url("../titlebar.png") ; repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
}
.arrowlistmenu ul{
background: url(../arrowbullet.png) no-repeat center left;
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}
.arrowlistmenu ul li{

background: url(../arrowbullet.png) no-repeat center left;
}
.arrowlistmenu ul li a{
color: #000000;
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #fffdfd;
font-size: 90%;
}
.arrowlistmenu ul li a:visited{
color: #000000;
}
.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #11f000;
background-color: #ffffff;
}

#corps {
width: 1280px;
height: 3600px;
padding-left: 140px;
background-image: url("../CORPSSIMS.jpg");
background-repeat: repeat-y;
position: relative;
}

#footer {
width: 1280px;
height: 53px;
background-image: url("../FLOOTERSIMS.jpg");
position: absolute;
bottom: 0px;
left: 0px;
}


MON HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<link rel="stylesheet" href="EDITOSIMS.css" type="text/css">
<title>Owersims</title>
</head>
<link rel="icon" type="image/png" href="fav.png" />
<body>
<div id="conteneur">
<div id="header"><a href='EDITOSIMS.html'></a></div>
<div id="menu"><br> <a href='EDITOSIMS.html'>Accueil</a> <a href='Firstpage.html'>News</a> <a href='http://owersims.forums-gratuits.fr'>Forum</a></div>
<div id="corps"> <div id="texte">***</div>
<div class="arrowlistmenu">
<ul>
<h3 class="headerbar">LES SIMS 3</h3>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Accueil</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">Les News</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Le Jeu</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Les Disques Additionels</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Les Mises à jours</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Le Site Officiel</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Configuration de base</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Owersims, Le Mag</a></li>
</ul>
<ul>
<h3 class="headerbar">ASTUCES</h3>
<li><a href="http://www.cssdrive.com">La Mort...</a></li>
<li><a href="http://www.cssdrive.com/index.php/menudesigns/">Le Mariage</a></li>
<li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">Codes de Triche</a></li>
<li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">Métiers et Professions</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">Les Compétences</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Les Collections</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Les Services</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Les Transfomations ...</a></li>
</ul>
<ul>
<h3 class="headerbar">LE SITE</h3>
<li><a href="http://www.cssdrive.com">L'Equipe</a></li>
<li><a href="http://www.cssdrive.com">Nous Contacter</a></li>
<li><a href="http://www.cssdrive.com/index.php/menudesigns/">Le Forum</a></li>
<li><a href="http://www.cssdrive.com/index.php/menudesigns/">Nos Partenaires</a></li>
</ul>
<ul>
<h3 class="headerbar">UPLOAD</h3>
<li><a href="http://www.cssdrive.com">Collection Mamie Soso</a></li>
</ul>

</div> <div id="footer"></div>
</body>
</html>


5 réponses

Réponse 1 / 5
gilbert1995 Messages postés 414 Date d'inscription samedi 12 septembre 2009 Statut Membre Dernière intervention 30 mai 2013 29
13 août 2012 à 03:04
As-tu le site en ligne ? si oui le lien s.v.p.
0
Réponse 2 / 5
Owerace
13 août 2012 à 12:18
Oui pas de problème : http://owerofus.fr/EDITOSIMS.html ...
Merci de vos réponses !
0
Réponse 3 / 5
Noviceman Messages postés 222 Date d'inscription mercredi 4 août 2010 Statut Membre Dernière intervention 2 mars 2016 7
Modifié par Noviceman le 13/08/2012 à 15:12
Bonjour
Ton menu est aussi large que ta partie container, c'est normal ?

background-image: url("../MENUSIMS.jpg");
width: 1280px; <==== largeur
height : 162px; <==== Ici j'aurais vu un "min-height" (?)
text-align: center;
font-size: 57px; <==== c'est énorme 57px, non ?
font-family: Arial <==oublié le ";"
font-weight:bolder

Le corps (partie texte j'imagine) est encore aussi large

#corps {
width: 1280px; <==== Largeur
height: 3600px; <====Waouh, c'est beaucoup non ? min-height : 800px;
padding-left: 140px;
background-image: url("../CORPSSIMS.jpg");
background-repeat: repeat-y;
position: relative;
}

Pourquoi une si grande marge à gauche, ça centre pas sur tous les écrans, essais => margin-left : auto; margin-right : auto;... =>
#conteneur
{
width: 1280px; <===OK (un peu large pour les écrans 1024px pc fixes)
margin-left: 65px; <===auto;
margin-right: 0px; <===auto;
}

Le reste est étrange aussi, mùais bon c'est juste pour attirer ton attention... Je ne crois pas me tromper...@+ (positionnement, essais les float : left; et donnes des mesures...) Bon courage

Oops, attention tu as déjà 38 Errors, 6 warning(s) w3c pour ton html, mieux vaut corriger petit à petit...
regarde ici : http://validator.w3.org/ et entre l'adresse de ton site, tout y sera détaillé.

PS : j'aime bien ta banniere, sympa...

Euh juste encore, j'ai vu que tu es sous safari, je pense que tu testeras aussi sous ie, opera, firefox...
0
Owerace
13 août 2012 à 15:43
je ne parler pas de mon menu horizontal mais de mon menu vertical ( arrowlistmenu )
0
Noviceman Messages postés 222 Date d'inscription mercredi 4 août 2010 Statut Membre Dernière intervention 2 mars 2016 7
13 août 2012 à 16:02
Oki, je comprends mieux ce que tu veux faire. Ai regardé trop vite... (mais il y a tout de même des petits buggs) A+
0
Réponse 4 / 5
gilbert1995 Messages postés 414 Date d'inscription samedi 12 septembre 2009 Statut Membre Dernière intervention 30 mai 2013 29
13 août 2012 à 15:51
Voici ton nouveau CSS et HTML que j'ai entierement refait ;) et qui va t'aider 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > 
<head> 
<title>Owersims</title> 
<style type="text/css">
body {
	background:#fff;
}

#contenu {
	width: 1280px;
	margin-left:auto;
	margin-right:auto;
}

/* Header */
#header {
	margin-top:0px;
	background: #E7E1D4 url("http://owerofus.fr/SIMSHEADER.jpg") no-repeat left center;
	height: 174px;
}

/* Menu */
#menu {
	float:left;
	width:250px;
	height:100%;
	margin-top:10px;
}

#menu li  {
	list-style-type:none;
	padding-bottom:10px;
	padding-left:20px;
}

#menu a {
	color:#000;
	font-weight:900;
	font-size: 14px;
}
#menu a:hover {
	color:lime;
}

#menu ul li {background: url(http://owerofus.fr/arrowbullet.png) no-repeat center left;}

#menu .headerbar {
	font: bold 14px Arial;
	color: white;
	background-image: url("http://owerofus.fr/titlebar.png");
	margin-bottom: 10px;
	text-transform: uppercase;
	width:200px;
	padding: 4px 0 4px 10px;
}

/* page */
#page {
	background: #fff;
	padding: 10px;
	margin-left: 10px;
	margin-top: 10px;
	float:left;
	width: 1000px;
	height:100%;
}

/* footer */
#footer {
	background-image: url("http://owerofus.fr/FLOOTERSIMS.jpg");
	margin-top:10px;
	height:53px;
}


</style>
<link rel="icon" type="image/png" href="fav.png" /> 

</head> 
<body> 
	<div id="contenu">
		<div id="header"><a href='http://owerofus.fr/EDITOSIMS.html'>&nbsp;</a></div>
			
		<div id="menu">
			<h3 class="headerbar">LES SIMS 3</h3>
			<ul>  
				<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Accueil</a></li>
				 <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">Les News</a></li>
				<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Le Jeu</a></li>
				 <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Les Disques Additionels</a></li>
				 <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Les Mises à jours</a></li>
				 <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Le Site Officiel</a></li>
				 <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Configuration de base</a></li>
				 <li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Owersims, Le Mag</a></li>
			 </ul> 
		 <h3 class="headerbar">ASTUCES</h3> 
			<ul> 
				<li><a href="http://www.cssdrive.com">La Mort...</a></li> 
				<li><a href="http://www.cssdrive.com/index.php/menudesigns/">Le Mariage</a></li>
				<li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">Codes de Triche</a></li>
				 <li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?6-CSS">M&eacutetiers et Professions</a></li>
				  <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">Les Comp&eacutetences</a></li>
				 <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Les Collections</a></li>
				 <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Les Services</a></li>
				 <li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Les Transfomations ...</a></li>
			 </ul>
			 <h3 class="headerbar">LE SITE</h3> 
			 <ul>
				<li><a href="http://www.cssdrive.com">L'Equipe</a></li> 
				<li><a href="http://www.cssdrive.com">Nous Contacter</a></li> 
				<li><a href="http://www.cssdrive.com/index.php/menudesigns/">Le Forum</a></li>
				<li><a href="http://www.cssdrive.com/index.php/menudesigns/">Nos Partenaires</a></li>
			 </ul>
			<h3 class="headerbar">UPLOAD</h3> 
			 <ul>
			<li><a href="http://www.cssdrive.com">Collection Mamie Soso</a></li> 
			</ul>
		</div>
		
		<div id="page">
						<h1>L'informatique sous toute ses coutures</h1>

			<p>Le but de notre site est de vous faire découvrir tout ce que nous permet de faire l'informatique.</p>
					</div>
		
		<div style="clear:both;"></div>
		
		<div id="footer"></div>
	</div>
</body> 
</html>
0
Owerace
13 août 2012 à 16:39
Désolé mais ce n'est pas du tout çà que j'attends, je veux juste que mon texte soit à droite de mon menu vertical dans le conteneur ... et je préfère utiliser le CSS séparer du HTML .. Mais merci quand même ...
0

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

Posez votre question
Réponse 5 / 5
fredconv Messages postés 122 Date d'inscription mardi 25 août 2009 Statut Membre Dernière intervention 4 décembre 2017 38
13 août 2012 à 16:20
salut


sans changer ton code html mais uniquement ton css
#texte {
display: block;
left: 290px;
position: absolute;
width:800px
}

tu peux obtenir ce que tu souhaites.
pour cela :
donner une largeur fixe a ta div #texte et la positionner plus loin du bord gauche.

par contre, sans te le cacher, le code n est peut etre pas très optimiser. peut etre pourrais tu regarder ce que te propose ce site la:

http://oocss.org/grids_docs.html

Cela parait complexe au départ mais ce n est pas compliqué (pour les dubitatifs, quand c est complexe, ca veut dire que c est constitué par beaucoup de chose simple mais qui regarder dans son ensemble peu paraitre difficile a appréhender. mais si on prend element par element c est simple ..)

et grace a cela tu pourrais avoir un site tres facile a gerer pour le layout:

quelque chose du genre:


sur le site tu dois juste telecharger le fichier grid.css

et conprendre l utilisation des lignes et des unit et des lastunit:
et voila un code d exemple (entete, menu horizontal, menu vertical a gauche et texte a droite) 
<html>
<head>
	<link rel="stylesheet" type="text/css" media="all" href="grids.css" />
</head>
<body>
	<div class="line entete">
	ta baniere d entete
	</div>
	<div class="line menu 1">
		ton menu horizontal
		<ul>
			<li>blabla</li>
			<li>blabla</li>
			<li>blabla</li>
			<li>blabla</li>
		</ul>
	</div>
	<div class="line contenu">
		<div class="unit size1of4">
			ton menu vertical sur la gauche
			<ul>
				<li>blabla</li>
				<li>blabla</li>
				<li>blabla</li>
				<li>blabla</li>
			</ul>
		</div>
		<div class="unit lastUnit">
			<p>ton texte contenu a droite</p>
			<p>blas bla bla bla</p>
		</div>
	</div>
</body>
</html>



0
Owerace
13 août 2012 à 18:07
MERCI BEAUCOUP !!!! Tu a résolue mon problème .... Merci encore une fois !
Owerace ;p
0
Noviceman
13 août 2012 à 22:58
Content pour toi, penses tout de même aux erreurs W3C html, l'internet doit essayer de devenir à peu près valide de temps en temps. Même en amateur. A+%
0
gilbert1995 Messages postés 414 Date d'inscription samedi 12 septembre 2009 Statut Membre Dernière intervention 30 mai 2013 29
14 août 2012 à 03:15
Et oublie pas de passer le sujet en résolue
0

Discussions similaires

Formule Excel : "SI" une cellule contient un mot, alors ?
Tonio5933 -
Mike-31 -

9 réponses
Trouver le mot réellement écrit en lettres capitales PIX
ETHAN -
kirikou -

4 réponses
Excel si cellule contient texte alors...
caba_44 -
RENOU -

41 réponses
copie de texte
jean -
jean -

5 réponses
hotesse de l'air
alex -
Jorge -

6 réponses