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

Owerace -  
gilbert1995 Messages postés 414 Date d'inscription   Statut Membre Dernière intervention   -
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>


A voir également:

5 réponses

Réponse 1 / 5
gilbert1995 Messages postés 414 Date d'inscription   Statut Membre Dernière intervention   29
 
As-tu le site en ligne ? si oui le lien s.v.p.
0
Réponse 2 / 5
Owerace
 
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   Statut Membre Dernière intervention   7
 
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
 
je ne parler pas de mon menu horizontal mais de mon menu vertical ( arrowlistmenu )
0
Noviceman Messages postés 222 Date d'inscription   Statut Membre Dernière intervention   7
 
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   Statut Membre Dernière intervention   29
 
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
 
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 125 Date d'inscription   Statut Membre Dernière intervention   38
 
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
 
MERCI BEAUCOUP !!!! Tu a résolue mon problème .... Merci encore une fois !
Owerace ;p
0
Noviceman
 
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   Statut Membre Dernière intervention   29
 
Et oublie pas de passer le sujet en résolue
0

Discussions similaires

tests du greta
yass -
yassir -

9 réponses
Message de donation
dahliafleurs -
Afrikarnak -

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

9 réponses