كيفية توسيط قائمة css

بدأه mohammeding في 13 يناير 2012 · 3 رد · 1,705 مشاهدة · في منتدى تصميم صفحات الويب

#113 يناير 2012 في 21:36 صاحب الموضوع

السلام عليكم

وقعت في مشكلة وهي اردت أن أوسط القائمة و لكن لم أعرف كيف

بحث كثير و جربت و لكن لم أعرف أين هو المشكل

كود css

[code]


@font-face {
font-family: 'MaSuperPolice';
src:url('Psacstroj.ttf') 
format('truetype');
}
#contenu
{

background:#2F2F4F;
   margin: 
auto;
}
body
{
 background:#2F2F4F;
}
#header
{
width:1000px;
height:100px;
background-color:#00CCFF;
margin:auto; 

}
#logo
{
width:1000px;
height:50px;
background-color:#2F2F4F;
padding:0 
0 0 0;
}
#logo_left
{
padding:0 0 0 
0;
float:left;
}
#logo_right
{
padding:0 0 0 
0;
float:left;
}
#logo p
{
 float:left;
 display: 
inline-block;
 font-family:"MaSuperPolice", Times, 
serif;
 color:#FFFFFF;
 font-size: 20px
}
#logo Form 
p
{
 float:left;
 font-family:"MaSuperPolice", Times, 
serif;
 color:#22FFFF;
 font-size: 
16px
}
#menu
{
width:1000px;
height:50px;
background-color:#A52A2A;
margin:0;
padding:1px 
1px 1px 1px;
text-align: 
center;
}
#bannel
{
width:1000px;
height:180px;
background-color:#F5F5DC;
margin:0 
auto; 

}
#Bbody
{
width:1000px;
height:800px;
background-color:#4156C5;
margin:0 
auto; 

}
#Footre
{
width:1000px;
height:50px;
background-color:#000000;
margin:0 
auto; 
}
.clearFloat
{
clear:both;
margin:0;
padding:0;




}
/********************menu****************/
ul
{
 color:#ffffff;
 list-style-type: 
none;
 margin:0;
 padding:0;
 line-height:30px;
 right:50px;
}
ul 
li
{
 float:left;
 margin:0 
auto;
 display:block;
 line-height:17px;
 background:url(nav-bg.gif) 
no-repeat left center;
 padding:0 30px 0 30px;
 display: 
inline-block;

 	}
ul 
li.Home
{
background:none;padding-left:3px;
}

كود html

<html>
<head>
  <title></title>
  <link rel="stylesheet" href="Style.css">
</head>
<body>
<div id="contenu">
<div id="header">
<div id="logo">
<!--<p><img src="logo.png" alt="Photo de montagne" height="70px"></p>-->
<div id ="logo_left"><p>The Web Based Best EMAIL</p></div>
<div id ="logo_right"><form method="post" action="traitement.php">
<p>
<label>                                             User Name</label> : <input type="text"name="pseudo" />
</p>
<p>
<label>     Password</label> : <input type="text"name="pseudo" />   
</p>
<p>
<input type="submit" value="Login" height="17"/>
</p>
</form>
</div>
<br class="clearFloat"  />
</div>
<div id="menu">
<!--<br class="clearFloat"  />-->
<ul id="nav">
 <li>Home</li>
 <li>News</li>
 <li>Service</li>
 <li>Technologie</li>
 <li>Cv</li>
 <li>Contacts</li>
 <li>  </li>
</ul>
</div>
</div>
<div id="bannel">

</div>
<div id="Bbody">

</div>
<div id="Footre">

</div>
</div>
</body>
</html>

المرفقات

#214 يناير 2012 في 15:54

السلام عليكم ورحمه الله وبركاته

اخي اضف للـ menu div التالي

float:left;

تم تعديل هذه المشاركة بواسطة VB Helper في 14 يناير 2012 في 15:57

.:: Wish to become better and better ::.

#314 يناير 2012 في 23:56

غير كود CSS الى هذا

@font-face {
font-family: 'MaSuperPolice';
src:url('Psacstroj.ttf') 
format('truetype');
}

#contenu
{

background:#2F2F4F;
   margin: 
auto;
}
body
{
 background:#2F2F4F;
}
#header
{
width:1000px;
height:100px;
background-color:#00CCFF;
margin:auto; 

}
#logo
{
width:1000px;
height:50px;
background-color:#2F2F4F;
padding:0 
0 0 0;
}
#logo_left
{
padding:0 0 0 
0;
float:left;
}
#logo_right
{
padding:0 0 0 
0;
float:left;
}
#logo p
{
 float:left;
 display: 
inline-block;
 font-family:"MaSuperPolice", Times, 
serif;
 color:#FFFFFF;
 font-size: 20px
}
#logo Form 
p
{
 float:left;
 font-family:"MaSuperPolice", Times, 
serif;
 color:#22FFFF;
 font-size: 
16px
}
#menu
{
width:1000px;
height:50px;
background-color:#A52A2A;
margin:0;
padding:1px 
1px 1px 1px;
text-align: 
center;
}
#bannel
{
width:1000px;
height:180px;
background-color:#F5F5DC;
margin:0 
auto; 

}
#Bbody
{
width:1000px;
height:800px;
background-color:#4156C5;
margin:0 
auto; 

}
#Footre
{
width:1000px;
height:50px;
background-color:#000000;
margin:0 
auto; 
}
.clearFloat
{
clear:both;
margin:0;
padding:0;




}
/********************menu****************/
ul
{
 color:#ffffff;
 list-style-type: none;

}
ul 
li
{
 float:left;
 margin:0 
auto;
 display:block;
 line-height:17px;
 background:url(nav-bg.gif) 
no-repeat left center;
 padding:0 30px 0 30px;
 display: 
inline-block;

        }
ul 
li.Home
{
background:none;padding-left:3px;
}
#nav
{
	margin-left:160px;
	width:700px;
}

M.B.O

Mohamed Bin Othman

إبن المكلا

يابني البشر ماذا فعلتم بالبشر !!

إسـألـنـي

#416 يناير 2012 في 01:05

السلام عليكم

أقترح :

- كتابة User Name و Password داخل span

<p>The Web Based Best EMAIL</p>
			<form method="post" action="traitement.php">
				<span>User Name :</span> 
						<input type="text" />
				<span>Password :</span>
						<input type="password" />
						<input type="submit" value="Login" />
			</form>

- إعطاء <p> خاصية float على اليسار

#header p {
	font-size:20px;
	color:white;
	float: left;
}

- بعد ذلك التحكم في form كما تريد

#header form {
	font-family: "MaSuperPolice",Times,serif;
	font-size: 16px;
	color:#22FFFF;
	margin-left:400px;
}

- من أجل التحكم في رفع قيمة margin ال: span الثاني

و تقرأ هذه الكتابة ب : بداخل form إذهب إلى span الذي بعده input الذي بعده span

form > span + input + span  {
   margin:5px;
}

- توسيط المساحة المخصصة للقائمة و إعطاء list خاصية float

 nav ul {
	width:700px;
	height:50px;
	margin:auto;
 }

 nav ul li {
	list-style-type:none;
	color: white;
	margin-right:50px;
	line-height:50px;
	float: left;
 }

- first-child: للتحكم في element الأول من list لرفع قيمة magin-left

nav ul li:first-child {
	margin-left:70px;
 }

html code

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="contenu">
	<div id="header">
		<p>The Web Based Best EMAIL</p>
			<form method="post" action="traitement.php">
				<span>User Name :</span> 
						<input type="text" />
				<span>Password :</span>
						<input type="password" />
						<input type="submit" value="Login" />
			</form>
	</div>
	<nav>
		<ul>
			<li>Home</li>
			<li>News</li>
			<li>Service</li>
			<li>Technologie</li>
			<li>Cv</li>
			<li>Contacts</li>
		</ul>
	</nav>
	<div id="bannel"> </div>
	<div id="Bbody"> </div>
	<div id="Footre"> </div>
</div>
</body>
</html>

Css code

@font-face {
font-family: 'MaSuperPolice';
src: url('Psacstroj.ttf');
format:('truetype');
}

body {
background-color:#2F2F4F;
margin:0;
padding:0;
}

p , ul  , form{
	margin:0;
	padding:0;
}

#contenu {
	width:1000px;
	margin:auto;
}

/************  = header  *************/

#header {
	padding:25px 10px 10px 5px;
	font-family: 'MaSuperPolice',Times,serif;
}

#header p {
	font-size:20px;
	color:white;
	float: left;
}
		/***********  ++ form ****************/

#header form {
	font-family: "MaSuperPolice",Times,serif;
	font-size: 16px;
	color:#22FFFF;
	margin-left:400px;
}

form > span + input + span  {
   margin:5px;
}

/************** =  nav  ***************/

 nav {
	background-color:#A52A2A;
	font-weight:bold;
	height:50px;
	margin:auto;
	}

 nav ul {
	width:700px;
	height:50px;
	margin:auto;
 }

 nav ul li {
	list-style-type:none;
	color: white;
	margin-right:50px;
	line-height:50px;
	float: left;
 }

  nav ul li:first-child {
	margin-left:70px;
 }


/************* = bannel   = Bbody  = Footre ***********/

 #bannel {
	height:180px;
	background:#F5F5DC;
 }

 #Bbody
{
height:800px;
background-color:#4156C5;
}

#Footre{
height:50px;
background-color:#000000;
}

مواضيع مشابهة

توسيط الصفحة ب ال css1 رد · 15 سبتمبر 2010
هل يمكن توسيط النص في مربع قائمة7 رد · 7 أبريل 2016
كيفية بناء CASE STYLE SHEET(CSS)1 رد · 25 سبتمبر 2005
كيفية الcss3 رد · 1 يوليو 2005
كيفية معرفة عرض القائمة1 رد · 31 ديسمبر 2011
كيفيه عمل هذه القائمه5 رد · 24 مايو 2014