PDA

View Full Version : این صفحه تو اجرا چرا این شکلی میشه آخه ؟؟!! :(


fahmari
جمعه 13 بهمن 1391, 09:40 صبح
یه صفحه درست کردم تو دیزاین کاملا درسته وقتی میره تو اجرا همه چی بهم میریزه!!
چند بار جای دیوها و ... رو چک کردم ولی مشکل رو پیدا نکردم :(
توروخدا یکی بیاد بگه این چشه ! :(((
تصویر دیزاین :
99372

تصویر اجرا :
99373

کد صفحه : (ببخشید طولانیه )


<body id ="#body">
<form id="form1" runat="server">
<div id="wrapper">
<!-- Header -->
<div id="header">
<div style="background-color:White" >

<div class ="Link">
<a class =" BlackLink "; href ="HomePage.aspx" ><img src ="Icons/Home.png"; alt ="Home" /> صفحه نخست&nbsp;&nbsp; </a>
<a class =" BlackLink "; href ="LoginPage.aspx"><img src = "Icons/Login.png" alt ="Login" /> ورود </a>&nbsp;
<a class =" BlackLink "; href ="RegistrationPage.aspx" ><img src= "Icons/Registration.png" alt ="Regitration" /> ثبت نام </a>&nbsp;
<img src= "Icons/MyProfile.png"; alt ="My Profile" />
<asp:LinkButton ID="MyProfileLinkButton" runat="server" CssClass ="BlackLink " >پروفایل من</asp:LinkButton>&nbsp;
<a class =" BlackLink "; href ="ShoppingHistoryPage.aspx"><img src = "Icons/ShoppingHistory.png" alt ="Shopping History" /> سابقه خرید</a>&nbsp;&nbsp;
<a class =" BlackLink "; href ="CartPage.aspx"><img src = "Icons/Cart.png" alt = "Cart"; /> سبد خرید <span style="color: #FF3300"> (0 مورد)</span></a>&nbsp;&nbsp;
<a class =" BlackLink "; href ="OffPage.aspx"><img src = "Icons/Off.png" alt ="Off" /> تخفیف عضویت شما :<span style="color: #0000FF"> (0 %)</span></a>
</div>

<div style="height: 90px">
<img src="Logo Images/Banner.jpg" alt="Logo" width="100%" height ="100%" />
</div >

<div class="Link" style="background-color: #1E2637" >
<select size ="1" style="height: 20px" >
<option value="search-alias=aps" selected="selected">همه</option>
<option value="search-alias=aps">کیف</option>
<option value="search-alias=aps" >کودک و نوزاد</option>
<option value="search-alias=aps" >لوازم مردانه</option>
<option value="search-alias=aps" >لباس مردانه</option>
<option value="search-alias=aps" >کفش مردانه</option>
<option value="search-alias=aps" >لباس زنانه</option>
<option value="search-alias=aps" >کفش زنانه</option>
<option value="search-alias=aps" >ساعت و جواهرآلات</option>
<option value="search-alias=aps" >لوازم آرایشی و بهداشتی</option>
<option value="search-alias=aps" >کامپیوتر</option>
<option value="search-alias=aps" >لپ تاپ</option>
<option value="search-alias=aps" >تبلت</option>
<option value="search-alias=aps" >تلفن همراه</option>
<option value="search-alias=aps" >تلویزیون</option>
<option value="search-alias=aps" >ضبط صوت</option>
<option value="search-alias=aps" >کنسول بازی</option>
<option value="search-alias=aps" >مبلمان و دکوراسیون</option>
<option value="search-alias=aps" >لوازم آشپزخانه </option>
<option value="search-alias=aps" >سرویس خواب</option>
<option value="search-alias=aps" > سرگرمی و اسباب بازی</option>
<option value="search-alias=aps" >گلف</option>
<option value="search-alias=aps">دوچرخه سواری</option>
<option value="search-alias=aps" >تیراندازی</option>
<option value="search-alias=aps">ماهیگیری</option>
<option value="search-alias=aps" >شنا</option>
<option value="search-alias=aps" >ویدئو</option>
<option value="search-alias=aps" >موسیقی</option>
<option value="search-alias=aps" >بازی</option>
<option value="search-alias=aps" >بلیط</option>
</select>
<input type ="text" ;style="border-style: groove; width: 596px; list-style-type: circle; height: 20px;";value= "جستجو ..."; />
<input type ="image" ; src= "Icons/Go.png"; title ="برو" ; value =" برو"style="width: 20px; height: 20px" />
</div>
</div>
</div>
<!-- Header -->
<!-- Menu & New Models -->
<div >
<!-- Menu -->
<div id="mymenu">
<div class="menu">
<h3 style="color: #1E2637">مد</h3>
<p >
<a >کبف</a><br />
<a>لوازم مردانه</a><br />
<a>لباس مردانه</a><br />
<a>کفش مردانه</a><br />
<a>لباس زنانه</a><br />
<a>کفش زنانه</a><br />
<a>لباس کودک و نوزاد</a><br />
<a>ساعت و جواهرآلات</a><br />
<a>لوازم آرایشی و بهداشتی</a>
</p>
<h3 style="color: #1E2637">لوازم دیجیتال</h3>
<p>
<a>کامپیوتر</a><br />
<a>لپ تاپ</a><br />
<a>تبلت</a><br />
<a>تلفن همراه</a><br />
<a>تلویزیون</a><br />
<a>ضبط صوت</a><br />
<a>کنسول بازی</a>
</p>
<h3 style="color: #1E2637">لوازم خانگی</h3>
<p>
<a>مبلمان و دکوراسیون</a><br />
<a>لوازم آشپزخانه</a><br />
<a>سرویس خواب</a><br />
<a>سرگرمی و اسباب بازی</a><br />
</p>
<h3 style="color: #1E2637">لوازم ورزشی</h3>
<p>
<a>گلف</a><br />
<a>دوچرخه سواری</a><br />
<a>تیراندازی</a><br />
<a>ماهیگیری</a><br />
<a>شنا</a>
</p>
<h3 style="color: #1E2637" >سرگرمی</h3>
<p>
<a>ویدئو</a><br />
<a>موسیقی</a><br />
<a>بازی</a><br />
<a>بلیط</a>
</p>
</div>
</div>
<!-- Menu -->
<!-- New Models -->
<div id="myslide">
<div ></div>
<div style="border: thin solid #C0C0C0; line-height:30px; padding:3px; background-color: #000066; vertical-align:middle; color: #FFFFFF; font-weight: bold;">
<img alt="" src ="Icons/NewProduct.png" height="32" width="32" /> جدیدترین مدل های معرفی شده
</div>
<!-- Last Products -->
<div class ="LastProduct ">
<!-- Image of Last Product -->
<div class ="ImageOfLastProduct ">
<img style =" width:220px; height:180px" alt=""
src ="Acer%20Aspire%20E1-15%20Inch%20Main-Medium.jpg" />
</div>
<!-- Image of Last Product -->

<!-- Information of Last Product -->
<div class ="InformationOfLastProduct">
<asp:Label ID="lblProductName" runat="server" Font-Bold="True"
Font-Size="Large" ForeColor="#000099"></asp:Label>
<br />
<br />
<asp:Label ID="lblProperties" runat="server" Font-Bold="False"
ForeColor="#0000CC" Text="مشخصات کلی :"></asp:Label>&nbsp;<asp:Label ID="lblShowProperties" runat="server"></asp:Label>
<br />
<asp:Label ID="lblCPU" runat="server" ForeColor="#0000CC" Text="پردازنده :"></asp:Label>
&nbsp;<asp:Label ID="lblShowCPU" runat="server"></asp:Label>
<br />
<asp:Label ID="lblMemory" runat="server" ForeColor="#0000CC" Text="حافظه :"></asp:Label>
&nbsp;<asp:Label ID="lblShowMemory" runat="server"></asp:Label>
<br />
<asp:Label ID="lblHard" runat="server" ForeColor="#0000CC" Text="هارددیسک :"></asp:Label>
&nbsp;<asp:Label ID="lblShowHard" runat="server"></asp:Label>
<br />
<asp:Label ID="lblGraphicCard" runat="server" ForeColor="#0000CC"
Text="کارت گرافیک :"></asp:Label>
&nbsp;<asp:Label ID="lblShowGarphicCard" runat="server"></asp:Label>
<br />
<asp:Label ID="lblScreen" runat="server" ForeColor="#0000CC"
Text="صفحه نمایش :"></asp:Label>
&nbsp;<asp:Label ID="lblShowScreen" runat="server"></asp:Label>
<br />
<asp:Label ID="lblOption" runat="server" ForeColor="#0000CC" Text="امکانات :"></asp:Label>
&nbsp;<asp:Label ID="lblShowOption" runat="server"></asp:Label>
<br />
<asp:Label ID="lblCommunicationNetworks" runat="server" ForeColor="#0000CC"
Text="شبکه های ارتباطی :"></asp:Label>
&nbsp;<asp:Label ID="lblShowCommunicationNetworks" runat="server"></asp:Label>
<br />
<asp:Label ID="lblCamera" runat="server" ForeColor="#0000CC" Text="دوربین :"></asp:Label>
&nbsp;<asp:Label ID="lblShowCamera" runat="server"></asp:Label>
<br />
<asp:Label ID="lblSoftware" runat="server" ForeColor="#0000CC"
Text="امکانات نرم افزاری :"></asp:Label>
&nbsp;<asp:Label ID="lblShowSoftware" runat="server"></asp:Label>
<br />
<asp:Label ID="lblOther" runat="server" ForeColor="#0000CC"
Text="سایر مشخصات :"></asp:Label>
&nbsp;<asp:Label ID="lblShowOther" runat="server"></asp:Label>

</div>
<!-- Information of Last Product -->

</div>
<!-- Last Product -->

<div class ="LastProduct " align="center" >
<img alt="" class="ProductImage" src="Main-Medium.jpg" />
<img alt="" class="ProductImage" src="Main-Medium.jpg" />
<img alt="" class="ProductImage" src="Main-Medium.jpg" />
<img alt="" class="ProductImage" src="Main-Medium.jpg" />
<img alt="" class="ProductImage" src="Main-Medium.jpg" />
<img alt="" class="ProductImage" src="Main-Medium.jpg" /> <br />
<asp:Label CssClass="ProductName" ID="lblProductName1" runat="server"></asp:Label>
<asp:Label CssClass="ProductName" ID="lblProductName2" runat="server"></asp:Label>
<asp:Label CssClass="ProductName" ID="lblProductName3" runat="server"></asp:Label>
<asp:Label CssClass="ProductName" ID="lblProductName4" runat="server"></asp:Label>
<asp:Label CssClass="ProductName" ID="lblProductName5" runat="server"></asp:Label>
<asp:Label CssClass="ProductName" ID="lblProductName6" runat="server"></asp:Label>
<asp:Label CssClass="ProductName" ID="lblProductName7" runat="server"></asp:Label>


</div>
</div>
</div>

<!-- New Models -->

<!-- Quick Access -->
<div class ="LastProduct " >
<div style="border: thin solid #C0C0C0; line-height:30px; padding:3px; background-color: #000066; vertical-align:middle; color: #FFFFFF; font-weight: bold;">
<img alt="" src ="Icons/QuickAccess.png" height="24" width="24" /> دسترسی سریع
</div>
<div class ="QuickAccess" style="border: 0.5px solid #CCCCCC">
<div class="QuickAccessRight">
<div class ="QuickAccessRightRight">
<div align="center" style="font-weight: bold; background-color: #000066; color: #FFFFFF; line-height: 30px;"> شرکت سازنده </div>
<div align="center"
style="border-right-style: solid; border-right-width: thin; border-right-color: #000066; border-bottom-style: solid; border-left-style: solid; border-bottom-width: thin; border-left-width: thin; border-bottom-color: #000066; border-left-color: #000066; line-height: 20px;">
<!-- Brand -->

<!-- Laptop Barnd -->
<asp:Label ID="LaptopBrand1" runat="server" Text="Sony"></asp:Label> <br />
<asp:Label ID="LaptopBrand2" runat="server" Text="Dell"></asp:Label> <br />
<asp:Label ID="LaptopBrand3" runat="server" Text="HP"></asp:Label> <br />
<asp:Label ID="LaptopBrand4" runat="server" Text="Toshiba"></asp:Label> <br />
<asp:Label ID="LaptopBrand5" runat="server" Text="Acer"></asp:Label> <br />
<asp:Label ID="LaptopBrand6" runat="server" Text="Asus"></asp:Label> <br />
<asp:Label ID="LaptopBrand7" runat="server" Text="Compaq"></asp:Label> <br />
<!-- Laptop Barnd -->
<!-- Tablet Barnd -->
<asp:Label ID="TabletBrand1" runat="server" Text="Apple"></asp:Label> <br />
<asp:Label ID="TabletBrand2" runat="server" Text="Samsung"></asp:Label> <br />
<asp:Label ID="TabletBrand3" runat="server" Text="HP"></asp:Label> <br />
<asp:Label ID="TabletBrand4" runat="server" Text="Asus"></asp:Label> <br />
<asp:Label ID="TabletBrand5" runat="server" Text="HTC"></asp:Label> <br />
<asp:Label ID="TabletBrand6" runat="server" Text="ARCHOC"></asp:Label> <br />
<asp:Label ID="TabletBrand7" runat="server" Text="Acer"></asp:Label> <br />
<asp:Label ID="TabletBrand8" runat="server" Text="CREATIVE"></asp:Label> <br />
<!-- Tablet Barnd -->
<!-- Mobile Barnd -->
<asp:Label ID="MobileBrand1" runat="server" Text="Nokia"></asp:Label> <br />
<asp:Label ID="MobileBrand2" runat="server" Text="Sony-Ericsson"></asp:Label> <br />
<asp:Label ID="MobileBrand3" runat="server" Text="Samsung"></asp:Label> <br />
<asp:Label ID="MobileBrand4" runat="server" Text="LG"></asp:Label> <br />
<asp:Label ID="MobileBrand5" runat="server" Text="Acer"></asp:Label> <br />
<asp:Label ID="MobileBrand6" runat="server" Text="HTC"></asp:Label> <br />
<asp:Label ID="MobileBrand7" runat="server" Text="Apple"></asp:Label> <br />
<asp:Label ID="MobileBrand8" runat="server" Text="Motorola"></asp:Label>
<!-- Mobile Barnd -->

<!-- Brand -->

</div>
</div>

<div class="QuickAccessRightLeft ">
<div align="center" style="font-weight: bold; background-color: #000066; color: #FFFFFF; line-height: 30px;">
<asp:Label ID="lblTitle2" runat="server"></asp:Label> </div>

<div align="center" style="border-right-style: solid; border-right-width: thin; border-right-color: #000066; border-bottom-style: solid; border-left-style: solid; border-bottom-width: thin; border-left-width: thin; border-bottom-color: #000066; border-left-color: #000066; line-height: 20px;">

<!-- lblTitle2 -->

<!-- Laptop Type -->
<asp:Label ID="LaptopType1" runat="server" Text="معمولی"></asp:Label> <br />
<asp:Label ID="LaptopType2" runat="server" Text="نت بوک"></asp:Label> <br />
<asp:Label ID="LaptopType3" runat="server" Text="سبک وزن"></asp:Label> <br />
<asp:Label ID="LaptopType4" runat="server" Text="صفحه بزرگ"></asp:Label> <br />
<!-- Laptop Type -->
<!-- Tablet Internal Capacity -->
<asp:Label ID="TabletCapacity1" runat="server" Text="تا 8 گیگابایت"></asp:Label> <br />
<asp:Label ID="TabletCapacity2" runat="server" Text="8 تا 16 گیگابایت"></asp:Label> <br />
<asp:Label ID="TabletCapacity3" runat="server" Text="16 تا 32 گیگابایت"></asp:Label> <br />
<asp:Label ID="TabletCapacity4" runat="server" Text="32 تا 64 گیگابایت"></asp:Label> <br />
<asp:Label ID="TabletCapacity5" runat="server" Text="64 تا 128 گیگابایت"></asp:Label> <br />
<asp:Label ID="TabletCapacity6" runat="server" Text="128 تا 512 گیگابایت"></asp:Label> <br />
<asp:Label ID="TabletCapacity7" runat="server" Text="بیشتر از 512 گیگابایت"></asp:Label> <br />
<!-- Tablet Internal Capacity -->
<!-- Mobile Style -->
<asp:Label ID="MobileStyle1" runat="server" Text="ساده"></asp:Label> <br />
<asp:Label ID="MobileStyle2" runat="server" Text="کشویی"></asp:Label> <br />
<asp:Label ID="MobileStyle3" runat="server" Text="تاشو"></asp:Label> <br />
<asp:Label ID="MobileStyle4" runat="server" Text="چرخان"></asp:Label> <br />
<!-- Mobile Style -->

<!-- lblTitle2 -->
</div>

</div>
</div>
<div class ="QuickAccessLeft ">
<div class ="QuickAccessLeftRight ">
<div align="center" style="font-weight: bold; background-color: #000066; color: #FFFFFF; line-height: 30px;">
<asp:Label ID="lblTitle3" runat="server"></asp:Label> </div>
<div align="center" style="border-right-style: solid; border-right-width: thin; border-right-color: #000066; border-bottom-style: solid; border-left-style: solid; border-bottom-width: thin; border-left-width: thin; border-bottom-color: #000066; border-left-color: #000066; line-height: 20px;">
<!-- lblTitle3 -->

<!-- Laptop CPU -->

<!-- Laptop CPU -->
<!-- Tablet Screen Size -->
<!-- Tablet Screen Size -->
<!-- Mobile OS -->
<!-- Mobile OS -->

<!-- lblTitle3 -->
</div>
</div>


<div class ="QuickAccessLeftLeft ">
<div align="center" style="font-weight: bold; background-color: #000066; color: #FFFFFF; line-height: 30px;"> محدوده قیمت </div>
<div align="center"
style="border-right-style: solid; border-right-width: thin; border-right-color: #000066; border-bottom-style: solid; border-left-style: solid; border-bottom-width: thin; border-left-width: thin; border-bottom-color: #000066; border-left-color: #000066; line-height: 20px;">
<!-- Price Range -->
<!-- Price Range -->
</div>
</div>
</div>
</div>
<!-- Quick Access -->

<!-- Popular Producs -->
<!-- Popular Producs -->


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

اینم css هایی که استفاده شده :



.LastProduct{
padding :20px;
width :940px;
}

.ImageOfLastProduct{
width :260px;
float:right;
padding-top :20px;

}

.InformationOfLastProduct{
padding :20px;
width :640px;
float:left ;
}

.ProductImage
{
width :110px;
height :134px;
padding :20px;
}

.ProductName
{
padding :10px;
color :Blue;
}

.QuickAccess
{
padding :20px;
width :900px;

}

.QuickAccessLeft
{
padding-right :10px;
float :left ;
width :440px;

}

.QuickAccessRight
{
padding-left :10px;
float :right ;
width :440px;
}

.QuickAccessRightRight
{
padding-left:10px;
float :right ;
width :210px;
}
.QuickAccessRightLeft
{
padding-right :10px;
width :210px;
float :left ;
}

.QuickAccessLeftLeft
{
padding-right :10px;
float :left ;
width :210px;
}
.QuickAccessLeftRight
{
padding-left :10px;
width :210px;
float :right ;
}

* {
margin: 0;
padding: 0;
}

#wrapper {
width: 1200px;
margin: 0 auto;
}

#header {
color: white;
min-height:100px;
}

#slideshowwrapper{


}
#myslide{
width:980px;
float:left;
}
#mymenu{
width:220px;
float:right;
}



#column-center {
width: 980px;
float: left;
min-height:100px;
}

#column-right {
width: 220px;
float: left;
min-height:100px;
}
#AllProduct
{
clear: both;
min-height:150px;
}

#myfooter {

text-align:center;
vertical-align:middle;
color:Gray;
font-size:10px;
width :1200px;


}
quantomquery
جمعه 13 بهمن 1391, 10:01 صبح
سلام



<body id ="#body">

بعضی جاهاش شاید اشکالات کوچیک داشته باشه

من که قاطی کردم

زحمت بکشید همینایی که نوشتین ، فایل اصلی شو بزارین تا راحت تر بشه چک کرد.
fahmari
جمعه 13 بهمن 1391, 10:08 صبح
ممنونم. فایل صفحه رو بذارم کافیه؟
fahmari
جمعه 13 بهمن 1391, 10:18 صبح
فایل صفحه مسترپیج :
99377

فایل صفحه ای که از این مسترپیج استفاده می کند:
99378

فایل های CSS :
99379
fahmari
جمعه 13 بهمن 1391, 11:04 صبح
درست نشد ؟ :((
quantomquery
یک شنبه 15 بهمن 1391, 19:41 عصر
سلام

من هنوز فایل هاتون رو دانلود نکردم و نگاه نکردم

ولی یک نکته


وقتی از مستر پیج استفاده میکنید برای css از id (یعنی #) استفاده نکنید و همه امکانات رو با class پیاده سازی کنید

مثلا بجای استفاده از کد های شبیه به زیر که برای id هست :



#myslide{
width:980px;
float:left;
}
#mymenu{
width:220px;
float:right;
}




از کد های زیر در css که مال class هست استفاده کنید :



.myslide{
width:980px;
float:left;
}
.mymenu{
width:220px;
float:right;
}





و همچنین تو کد های page خود از class استفاده کنید
مثل :


<div class ="mymenu">