PDA

View Full Version : سوال: راهنمایی درباره کدهای CSS



SONITAJ
جمعه 04 اسفند 1391, 23:47 عصر
سلام من یه قالب وب بااستفاده از wrapper در html وcss درست کردم به طوری عکس لوگو بالای صفحه ،منو زیر لوگو فوترهم پایین صفحه به صورت زیر(این کدم هست) ولی نمیتونم با css طوری تعریفش کنم که چیزی که میخوام دربیاد کسی بهم میگه کجای کد من مشکل داره .من توی css خیلی وارد نیستم یا بهتر بگم بلدنیستم تمام کتاب فروشی های شیراز رو هم گشتم کتاب آموزشش رو پیدا نکردم .بعضی از کتاب فروشی ها حتی نمیدونستند که css چیه.



<php
ob_start();
require_once 'config.php';
?>
<html dir="rtl">
<meta http-equive="content-type" content="text/html;charset=utf-8"/>
<title><?php echo TITR;?></title>
<link href="stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body >
<!----begin wrapper---->
<div id="wrapper">
<!----begin mainheader---->
<div id="main_header"
<div id="logo"><a href="#"><img src="keyvan logo.png" style="height:300px;width:100%"/></a></div>
</div>
<!---- begin navigation---->
<div id="nav">
<ul>
<li><a href="#">صفحه اصلی </a></li>
<li><a href="about.php">درباره ما</a></li>
<li><a href="contact.php">ارتباط باما</a></li>
<li><a href="#">فروش محصولات</a>
<ul><li><a href="buy.php">راهنمای خرید</a></li>
<li><a href="payment.php">راهنمای پرداخت</a></li>
</ul
</li>
<li><a href="#">پشتیبانی</a></li>
</ul>
</div>
<!---- end navigation ---->

<!---- begin container---->
<div id="container">
<div class="content"</div>
</div> <!---- end container---->

<!----begin footer---->
<div id="footer">
<p><h4>تمام حقوق مادی ومعنوی این وب سایت متعلق به گروه سنگ کیوان است.
</h4></p></div>
</div>
<!----end footer---->
</div><!----end wrapper----->
</body>
</html>
<?php
ob_end_flush();
?>


این کد فایل index.php منه .
اینم فایل stylesheet.css من :


class menu {
nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}

nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;

}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
}


ولطفا به هم میکید چه جوری درستش کنم(منظورم کدcss ام هست تاچیزی که میخوام دربیاد.)
درضمن میخوام بین منو وفوترم به دو قسمت تقسیم بشه سمت راست برای صفحه لینک هام (200px)وسمت چپ بشه صفحه اصلی وبم.

omidabedi
شنبه 05 اسفند 1391, 00:32 صبح
دوست عزیز پروژتو پک کن بده برات درستش کنم پست بدم فقط بخاطر این که بچه شیراز هستیا :چشمک:

SONITAJ
شنبه 05 اسفند 1391, 13:07 عصر
از لطف شما ممنونم ولی خودم هم باید یاد بگیرم توی کارهای بدی هم بهش نیاز دارم لطفا ماهگیری یادم بدید نه ماهی بهم بدید.:چشمک:

omidabedi
شنبه 05 اسفند 1391, 13:41 عصر
باید از پروژت اجرا بگیرم ببینم چطور الان نمایش میده
اگر روی هاست هست ادرس بده چک کنم بهت بگم چکارش کنی

SONITAJ
شنبه 05 اسفند 1391, 16:14 عصر
سلام نه متاسفانه روی هاست نیست با wamp اجراش میکنم .لطفا یه آدرس ایمیل بدید تا برای شما ایمیل کنم ومن منتظرآدرس ایمیل شما میمونم .

omidabedi
شنبه 05 اسفند 1391, 23:34 عصر
oabedi2011@gmail.com
مشکلتونو که حل کردم تو همین تاپیک راه حل رو میگم تا دفعه ی بعد خودت ماهی بگیری

mehbod.rayaneh
یک شنبه 06 اسفند 1391, 02:15 صبح
سلام
این ک کلا کار نمیداد!!!
من با 1 سری تغییرات 1 چیزایی دیدم! :لبخند:
php :


<?php
ob_start();
require_once 'config.php';
?>
<html dir="rtl">
<meta http-equive="content-type" content="text/html;charset=utf-8"/>
<title><?php echo TITR;?></title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body >
<!----begin wrapper---->
<div id="wrapper">
<!----begin mainheader---->
<div id="main_header">
<div id="logo">
<a href="#">
<img src="keyvan logo.png" style="height:300px;width:100%"/>
</a>
</div>
</div>
<!---- begin navigation---->
<div id="nav">
<ul>
<li><a href="#">صفحه اصلی </a></li>
<li><a href="about.php">درباره ما</a></li>
<li><a href="contact.php">ارتباط باما</a></li>
<li><a href="#">فروش محصولات</a>
<ul>
<li><a href="buy.php">راهنمای خرید</a></li>
<li><a href="payment.php">راهنمای پرداخت</a></li>
</ul>
</li>
<li><a href="#">پشتیبانی</a></li>
</ul>
</div>
<!---- end navigation ---->

<!---- begin container---->
<div id="container">
<div class="content">
sslkajlkslsaklldljs
</div>
</div>
<!---- end container---->

<!----begin footer---->
<div id="footer">
<p>
<h4>تمام حقوق مادی ومعنوی این وب سایت متعلق به گروه سنگ کیوان است.</h4>
</p>
</div>
<!----end footer---->
</div>
<!----end wrapper----->
</body>
</html>
<?php
ob_end_flush();
?>

سی اس اس :


#class menu {}
#nav ul ul {
display: none;
}

#nav ul li:hover > ul {
display: block;
}
#nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
#nav ul:after {
content: ""; clear: both; display: block;
}
#nav ul li {
float: left;
}
#nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
#nav ul li:hover a {
color: #fff;
}

#nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
#nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
#nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
#nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
#nav ul ul li a:hover {
background: #4b545f;

}
#nav ul ul ul {
position: absolute; left: 100%; top:0;
}

برای کارهایی ک میخواید انجام بدید باید برای همه کدهایی ک توی php نوشتید در css استایل ایجاد کنید.
کلا توضیحش سخته! ولی در کل مطالعه کنید!
فیلمهای آموزشی html و css در اینترنت موجود هست!
و در آخر هم دقت کنید! خیلی از تگ ها را نبسته بودید! :چشمک:
و برای استایل دهی در html از <div class="..."> </div> هم میتونید به جای <div id="..."> استفاده کنید. در قواعد کد نویسی صحیح از هر id فقط 1 بار میتونید ایستفاده کنید!
همین!:لبخندساده:
موفق باشید.

SONITAJ
یک شنبه 06 اسفند 1391, 13:28 عصر
سلام آقای امید عابدی شما به من ماهگیری یادبده من مننون شما که میشم هیچ ،همیشه هم دعاتون میکنم براتون ایمیل میکنم تا چندروزآینده.