PDA

View Full Version : سوال: نحوه استفاده از css در asp.net


nasser.sheydaei
چهارشنبه 24 آذر 1389, 01:04 صبح
با سلام خدمت همه دوستان
من یک کد css دارم که میخوام تو asp.net به کار ببرم چطور می تونم این رو اعمال کنم
ممنون............؟؟؟
aminghaderi
چهارشنبه 24 آذر 1389, 13:30 عصر
سلام بر شما
کار زیاد سختی نیست ، کد رو از داخل سلیشن درگ کن و داخل صفحه مورد نظر در داخل پروژه رها کن.(بین هدر سایت) خودش اضافه می شه.
دستی هم می تونید این کار رو با نوشتن تگ<link> انجام بدید.
و بعد هم کافیه استایل ها رو به اشیای داخل صفحه ربط بدبد ، حالا یا با استفاده از نام اشیا ، یا استفاده از کلاس.
همین.
موفق باشی.
nasser.sheydaei
پنج شنبه 25 آذر 1389, 01:14 صبح
سلام دوست عزیز ممنون از راهنمایی شما ولی این کار رو کردم متاسفانه تغیرات روی پروژه اعمال نمیشه اگه ممکنه را هنمایی کنید
منمون...
behiunforgiven
پنج شنبه 25 آذر 1389, 21:36 عصر
سلام دوست من.

شما دو تا راه داری. یکی این که از CSS داخلی استفاده کنی و یکی دیگه این که از فایل خارجی. که فکر کنم استفاده هر دو این ها رو بلد باشی.
حالا برای هر کنترلی که میخوای تغییرات رو بهش اعمال کنی باید یه کلاس بنویسی و بعد توی خاصیت CssClass کنترل ها اسم اون کلاس رو بدی. اگه متوجه نشدی بگو تا بیشتر توضیح بدم.
nefrat
جمعه 08 بهمن 1389, 12:10 عصر
سلام من هم همین مشکل و دارم و اما کلا نمیدونم باید چجوری استفاده کنم؟
من برای منوی بالای سایت یه فایل css دارم برای اینکه اعمال شه باید چی کار کنم؟
توضیخات بالا پیشرفته بود متوجه نشدم
pedram_ns
جمعه 08 بهمن 1389, 17:16 عصر
این کد رو در head صفحه می نویسید:


<link rel="Stylesheet" href="Style/Menu.css" type="text/css" />

این کد فایل css به نام Menu.css رو از درون پوشه style می خونه.
mashhadpix
چهارشنبه 26 تیر 1392, 14:47 عصر
این کد رو در head صفحه می نویسید:


<link rel="Stylesheet" href="Style/Menu.css" type="text/css" />

این کد فایل css به نام Menu.css رو از درون پوشه style می خونه.

سلام.
من می خواهم این کد را در asp.net استفاده کنم. این کد را در صفحه source اصلی بنویسم یا در web.config ؟
ممنون میشم راهنمایی کنید؟
mashhadpix
دوشنبه 31 تیر 1392, 11:15 صبح
کسی نیست منو راهنمایی کنه؟ :ناراحت:
aspismylove
دوشنبه 31 تیر 1392, 13:05 عصر
کسی نیست منو راهنمایی کنه؟ :ناراحت:

!!!!!!!
ببین توی صفحه Default.aspx یا اگه از مسترپیج داری استفاده میکنی این و باید توی تگ <head> بخش HTML صفحت بنویسی ، حتما باید توی تگ هد بنویسی ...
csharpprogramer88
دوشنبه 31 تیر 1392, 13:29 عصر
سلام دوست من.

شما دو تا راه داری. یکی این که از CSS داخلی استفاده کنی و یکی دیگه این که از فایل خارجی. که فکر کنم استفاده هر دو این ها رو بلد باشی.
حالا برای هر کنترلی که میخوای تغییرات رو بهش اعمال کنی باید یه کلاس بنویسی و بعد توی خاصیت CssClass کنترل ها اسم اون کلاس رو بدی. اگه متوجه نشدی بگو تا بیشتر توضیح بدم.

فرض میخوایم از فایل خارجی استفاده کنیم و به یه کنترل اعمالش کنیم میشه برای یه کنترل استفاده از سی اس اس مثال بزنین؟
aspismylove
دوشنبه 31 تیر 1392, 13:35 عصر
فرض میخوایم از فایل خارجی استفاده کنیم و به یه کنترل اعمالش کنیم میشه برای یه کنترل استفاده از سی اس اس مثال بزنین؟

ـوی پست قبلی گفتم کجا باید فایلت و اضافه کنی : اینم روشی که باید توی تگ هد بزاری :
<link rel="Stylesheet" href="Style/Menu.css" type="text/css" />

حالا مثلا میخای یک کلاسی که ساختی به اسم : .button رو بیای و به دکمه سمت سروری asp.net بدی اینطوریه :

<asp:button id="mybtn" runat="server" css-class="button" text="matne dokme"/>

از طریق سی اس اس کلاس (css-class) میتونی به اون کنترل سمت سرور بدی ...
mashhadpix
دوشنبه 31 تیر 1392, 13:58 عصر
css-class="button"
این کد کلاس ایجاد می کند؟ یا در جای دیگری کلاسی تعریف شده است؟
mashhadpix
دوشنبه 31 تیر 1392, 14:14 عصر
!!!!!!!
ببین توی صفحه Default.aspx یا اگه از مسترپیج داری استفاده میکنی این و باید توی تگ <head> بخش HTML صفحت بنویسی ، حتما باید توی تگ هد بنویسی ...

این کل کدی است که نوشتم ولی درست عمل نمی کند:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 runat="server">
<style type="text/css">
#header{
font-family: Tahoma;
width:1003px;
height: 168px;
background-image: url(img/header.png);
background-repeat: no-repeat;
}
*{
margin:0px;
padding:0px;
}


body{
background-image: url(img/back.png);
font-family: Tahoma;
font-size:13px;
direction: rtl;
}
marquee{
padding-top:130px;
padding-right:100px;
}


#menu{
background-image: url(img/menubar.jpg);
width: 1003px;
height: 37px;
background-repeat: repeat-x;
direction:rtl;
line-height: 30px;
}
#menu ul{
list-style-type: none;
}
#menu ul li{
display: block;
float:right;
}
#menu ul li a{
padding:0 7px 0 7px;
font-family: Tahoma;
font-size: 13px;
color: #fff;
text-decoration: none;
}
#menu ul li a:hover{
color: #ff0000;
background-color: #fff;
padding: 7px;
border-radius:7px;
}



#container{
width:1003px;
background-color: #FFFFFF;
font-family: Tahoma;
font-size: 11px;
color: #000000;
margin-top:5px;
}
#right{
float: right;
width:215px;
background-color: #FFFFFF;
}

#righttop{
background-image: url(img/m-1.jpg);
width:209px;
height: 58px;
background-repeat: no-repeat;

}
#rightbody{
background-image: url(img/m2.gif);
width:209px;
background-repeat: repeat-y;
}
#rightbody ul li{
list-style-image: url(img/dot.gif);

}
#rightbody ul li a{
text-decoration: none;
color: #FF33FF;
}


#rightend{
background-image: url(img/m3.jpg);
width:209px;
height: 28px;
background-repeat:no-repeat;
}


#left{
float: left;
width: 720px;
background-color: #FFFFFF;
}
#footer{
width: 1003px;
height: 222px;
background-image: url(img/footer.jpg);
background-repeat: no-repeat;
margin-top: 5px;
}


</style>
<title></title>
</head>
<body>

<form id="form1" runat="server">
<div dir="rtl">



<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">

<Items>
<asp:MenuItem Text="صفحه اصلی" Value="صفحه اصلی"></asp:MenuItem>
<asp:MenuItem Text="اخبار" Value="اخبار"></asp:MenuItem>
<asp:MenuItem Text="نشریات" Value="نشریات"></asp:MenuItem>
<asp:MenuItem Text="چندرسانه ای" Value="چندرسانه ای"></asp:MenuItem>
<asp:MenuItem Text="جستجو" Value="جستجو"></asp:MenuItem>
</Items>
</asp:Menu>

</div>
</form>
</body>
</html>
اینم عکس
107723
107724
می خواهم به منو به صورت زیر :

107725

باشد.
با این کدهای css که نوشتم درست کار نمی کند.
ممنون اگه کسی باشه منو کمک کنه
Beginner67
دوشنبه 31 تیر 1392, 14:48 عصر
سلام.
پروژه شما دو تا مشکل داره!
1.

<style type="text/css">
#header{
font-family: Tahoma;
width:1003px;
height: 168px;
background-image: url(img/header.png);
background-repeat: no-repeat;
}
*{
margin:0px;
padding:0px;
}


body{
background-image: url(img/back.png);
font-family: Tahoma;
font-size:13px;
direction: rtl;
}
marquee{
padding-top:130px;
padding-right:100px;
}


#menu{
background-image: url(img/menubar.jpg);
width: 1003px;
height: 37px;
background-repeat: repeat-x;
direction:rtl;
line-height: 30px;
}
#menu ul{
list-style-type: none;
}
#menu ul li{
display: block;
float:right;
}
#menu ul li a{
padding:0 7px 0 7px;
font-family: Tahoma;
font-size: 13px;
color: #fff;
text-decoration: none;
}
#menu ul li a:hover{
color: #ff0000;
background-color: #fff;
padding: 7px;
border-radius:7px;
}



#container{
width:1003px;
background-color: #FFFFFF;
font-family: Tahoma;
font-size: 11px;
color: #000000;
margin-top:5px;
}
#right{
float: right;
width:215px;
background-color: #FFFFFF;
}

#righttop{
background-image: url(img/m-1.jpg);
width:209px;
height: 58px;
background-repeat: no-repeat;

}
#rightbody{
background-image: url(img/m2.gif);
width:209px;
background-repeat: repeat-y;
}
#rightbody ul li{
list-style-image: url(img/dot.gif);

}
#rightbody ul li a{
text-decoration: none;
color: #FF33FF;
}


#rightend{
background-image: url(img/m3.jpg);
width:209px;
height: 28px;
background-repeat:no-repeat;
}


#left{
float: left;
width: 720px;
background-color: #FFFFFF;
}
#footer{
width: 1003px;
height: 222px;
background-image: url(img/footer.jpg);
background-repeat: no-repeat;
margin-top: 5px;
}


</style>

این اشتباهه.ببینید شما تو همون صفحه ای که میخوایید نمایش بدید دارید کلاس تعریف میکنید،پس علامت # نمیخواد،# برای وقتی هست که کلاس ها رو در صفحه ای دیگر ایجاد میکنید.
کد ها رو اینطوری بذارید:

<style type="text/css">
.header{
font-family: Tahoma;
width:1003px;
height: 168px;
background-image: url(img/header.png);
background-repeat: no-repeat;
}
*{
margin:0px;
padding:0px;
}


body{
background-image: url(img/back.png);
font-family: Tahoma;
font-size:13px;
direction: rtl;
}
marquee{
padding-top:130px;
padding-right:100px;
}


.menu{
background-image: url(img/menubar.jpg);
width: 1003px;
height: 37px;
background-repeat: repeat-x;
direction:rtl;
line-height: 30px;
}
.menu ul{
list-style-type: none;
}
.menu ul li{
display: block;
float:right;
}
.menu ul li a{
padding:0 7px 0 7px;
font-family: Tahoma;
font-size: 13px;
color: .fff;
text-decoration: none;
}
.menu ul li a:hover{
color: .ff0000;
background-color: .fff;
padding: 7px;
border-radius:7px;
}



.container{
width:1003px;
background-color: .FFFFFF;
font-family: Tahoma;
font-size: 11px;
color: .000000;
margin-top:5px;
}
.right{
float: right;
width:215px;
background-color: .FFFFFF;
}

.righttop{
background-image: url(img/m-1.jpg);
width:209px;
height: 58px;
background-repeat: no-repeat;

}
.rightbody{
background-image: url(img/m2.gif);
width:209px;
background-repeat: repeat-y;
}
.rightbody ul li{
list-style-image: url(img/dot.gif);

}
.rightbody ul li a{
text-decoration: none;
color: .FF33FF;
}


.rightend{
background-image: url(img/m3.jpg);
width:209px;
height: 28px;
background-repeat:no-repeat;
}


.left{
float: left;
width: 720px;
background-color: .FFFFFF;
}
.footer{
width: 1003px;
height: 222px;
background-image: url(img/footer.jpg);
background-repeat: no-repeat;
margin-top: 5px;
}


</style>

و دومین مشکل شما اون فایل css رو مگه تو پروژتون اضافه نکردید؟وقتی فایل css رو کپی کردید تو پوشه پروژتون باید در تگ هد این کد رو اضافه کنید:

<link rel="Stylesheet" href="نام فایل .css" type="text/css" />
mashhadpix
سه شنبه 01 مرداد 1392, 06:52 صبح
من این کاری که شما فرمودید اینطوری انجام دادم نمیدونم کجاش اشتباه است.
یک فایلی به نام style.css ایجاد کردم و کدها را داخلش قرار دادم:
107756

107757

اینها عکس و کدها هم به صورت زیر:

<style type="text/css">
.header{
font-family: Tahoma;
width:1003px;
height: 168px;
background-image: url(img/header.png);
background-repeat: no-repeat;
}
*{
margin:0px;
padding:0px;
}


.body{
background-image: url(img/back.png);
font-family: Tahoma;
font-size:13px;
direction: rtl;
}
.marquee{
padding-top:130px;
padding-right:100px;
}


.menu{
background-image: url(img/menubar.jpg);
width: 1003px;
height: 37px;
background-repeat: repeat-x;
direction:rtl;
line-height: 30px;
}
.menu ul{
list-style-type: none;
}
.menu ul li{
display: block;
float:right;
}
.menu ul li a{
padding:0 7px 0 7px;
font-family: Tahoma;
font-size: 13px;
color: #fff;
text-decoration: none;
}
.menu ul li a:hover{
color: #ff0000;
background-color: #fff;
padding: 7px;
border-radius:7px;
}



.container{
width:1003px;
background-color: #FFFFFF;
font-family: Tahoma;
font-size: 11px;
color: #000000;
margin-top:5px;
}
.right{
float: right;
width:215px;
background-color: #FFFFFF;
}

.righttop{
background-image: url(img/m-1.jpg);
width:209px;
height: 58px;
background-repeat: no-repeat;

}
.rightbody{
background-image: url(img/m2.gif);
width:209px;
background-repeat: repeat-y;
}
.rightbody ul li{
list-style-image: url(img/dot.gif);

}
.rightbody ul li a{
text-decoration: none;
color: #FF33FF;
}


.rightend{
background-image: url(img/m3.jpg);
width:209px;
height: 28px;
background-repeat:no-repeat;
}


.left{
float: left;
width: 720px;
background-color: #FFFFFF;
}
.footer{
width: 1003px;
height: 222px;
background-image: url(img/footer.jpg);
background-repeat: no-repeat;
margin-top: 5px;
}


</style>

این کد را هم درست کردم و نوشتم:


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="Stylesheet" href="style.css" type="text/css" />
<style type="text/css">
.header{
font-family: Tahoma;
width:1003px;
height: 168px;
background-image: url(img/header.png);
background-repeat: no-repeat;
}
*{
margin:0px;
padding:0px;
}


.body{
background-image: url(img/back.png);
font-family: Tahoma;
font-size:13px;
direction: rtl;
}
.marquee{
padding-top:130px;
padding-right:100px;
}


.menu{
background-image: url(img/menubar.jpg);
width: 1003px;
height: 37px;
background-repeat: repeat-x;
direction:rtl;
line-height: 30px;
}
.menu ul{
list-style-type: none;
}
.menu ul li{
display: block;
float:right;
}
.menu ul li a{
padding:0 7px 0 7px;
font-family: Tahoma;
font-size: 13px;
color: #fff;
text-decoration: none;
}
.menu ul li a:hover{
color: #ff0000;
background-color: #fff;
padding: 7px;
border-radius:7px;
}



.container{
width:1003px;
background-color: #FFFFFF;
font-family: Tahoma;
font-size: 11px;
color: #000000;
margin-top:5px;
}
.right{
float: right;
width:215px;
background-color: #FFFFFF;
}

.righttop{
background-image: url(img/m-1.jpg);
width:209px;
height: 58px;
background-repeat: no-repeat;

}
.rightbody{
background-image: url(img/m2.gif);
width:209px;
background-repeat: repeat-y;
}
.rightbody ul li{
list-style-image: url(img/dot.gif);

}
.rightbody ul li a{
text-decoration: none;
color: #FF33FF;
}


.rightend{
background-image: url(img/m3.jpg);
width:209px;
height: 28px;
background-repeat:no-repeat;
}


.left{
float: left;
width: 720px;
background-color: #FFFFFF;
}
.footer{
width: 1003px;
height: 222px;
background-image: url(img/footer.jpg);
background-repeat: no-repeat;
margin-top: 5px;
}


</style>
<title></title>
</head>
<body>

<form id="form1" runat="server">
<div dir="rtl">



<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">

<Items>
<asp:MenuItem Text="صفحه اصلی" Value="صفحه اصلی"></asp:MenuItem>
<asp:MenuItem Text="اخبار" Value="اخبار"></asp:MenuItem>
<asp:MenuItem Text="نشریات" Value="نشریات"></asp:MenuItem>
<asp:MenuItem Text="چندرسانه ای" Value="چندرسانه ای"></asp:MenuItem>
<asp:MenuItem Text="جستجو" Value="جستجو"></asp:MenuItem>
</Items>
</asp:Menu>

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

ولی همچنان مثل روال قبل است و درست نیست.
ممنون میشم Beginner67 (http://barnamenevis.org/member.php?264281-Beginner67) کمک کنید
mashhadpix
چهارشنبه 02 مرداد 1392, 14:35 عصر
کدها درست شد ولی وقتی تو MasterPage برگه Design را می زنم هدر درست قرار گرفته است مانند شکل زیر:
107842
ولی وقتی run را می زنم درست اجرا نمی شود و یک صفحه خالی ایجاد می شود،مانند شکل زیر:
107843

ممنون میشم یکی بهم توضیح بدهد چرا اینطوری می شود؟
mashhadpix
شنبه 05 مرداد 1392, 09:32 صبح
ببین توی صفحه Default.aspx یا اگه از مسترپیج داری استفاده میکنی این و باید توی تگ <head> بخش HTML صفحت بنویسی ، حتما باید توی تگ هد بنویسی ...
این کد css است :
body
{
background-image: url(img/back.png);
background-repeat:no-repeat;
}
.header
{
height:41px;
padding:30px 20px;
font-family: Tahoma;
width: 890px;
height: 206px;
background-image: url('img/header.png');
background-repeat: no-repeat;

}

a:link, a:visited { color: #b7bd19; text-decoration: none; font-weight: bold;}
a:active, a:hover { color: #b7bd19; text-decoration: underline;}


*{
margin:2px 2px 2px 2px;
padding:2px 2px 2px 2px;
}

.menu
{

width: 1000px;
height: 47px;
background-image:url(img/menu_bg.jpg);
background-repeat: no-repeat;
direction:rtl;


}
و این هم کد در مسترپیج:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!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 runat="server">
<link href="StyleSheet.css" rel="Stylesheet" type="text/css" />

<div class="header"></div>
<div class="menu"></div>
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">

<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">
<Items>
<asp:MenuItem Text="صفحه اصلی" Value="صفحه اصلی"></asp:MenuItem>
<asp:MenuItem Text="اخبار" Value="اخبار"></asp:MenuItem>
<asp:MenuItem Text="نشریات" Value="نشریات"></asp:MenuItem>
<asp:MenuItem Text="چندرسانه ای" Value="چندرسانه ای"></asp:MenuItem>
<asp:MenuItem Text="آرشیو" Value="آرشیو"></asp:MenuItem>
</Items>
</asp:Menu>

</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>

وقتی این کد ها را در غیر از مسترپیج می نویسم مشکلی نیست و اجرا می شود. ولی وقتی تو مسترپیج می نویسم تو قسمت دیزاین تقریبا درست نمایش می دهد ولی وقتی اجرا می کنم صفحه خالی به من نشان می دهد. مشکل من کجاست؟
میشه کسی کمک کنه