PDA

View Full Version : طراحی صفحه با عرض زیاد (قسمت میانی1000 پیکسل) (با بک گراند عکس نه رنگ) با شرایط خاص


bftarane
چهارشنبه 17 مهر 1392, 21:17 عصر
سلام.
لطفاً این عکس رو ببینید.
111697
فرض کنید می خواهیم طرح بالا رو با Css و html ایجاد کنیم.
من به صورت پیکسلی مشکلی ندارم مثلاً با عرض 1000.
ولی اینجا حالت خاصی وجود داره. کل عرض این طرح 2000 پیکسل هست و قسمت وسط 1000 پیکسل.
حالا با شرایط زیر چطور میشه این طرح رو ایجاد کرد؟

قسمت وسط حتماً باید پیکسلی باشد (1000 پیکسل)



صفحه در حالت زوم 100 درصد کاملاً وسط چین باشد یعنی اون قسمتی که عکس خونه داره حتماً وسط باشه



و صفحه اسکرول افقی هم نخوره در حالت زوم 100 درصد

من فقط قسمت وسط رو تونستم درست کنم ولی برای افزودن قسمتهای زرد و قرمز و همچنین Left Image , Right Image مشکل دارم.


این فایل رو هم ضمیمه می کنم . لطفاً راهنمایی کنید.
qartalonline
چهارشنبه 17 مهر 1392, 21:24 عصر
قسمتهای چپ و راست فقط پس زمینه هستند یا محتوا هم خواهند داشت.
meisam3322
چهارشنبه 17 مهر 1392, 21:28 عصر
با سلام

راه اول اینه که عرض کلی رو کم کنید مثلا 1200 پیکسل ، در غیر اینصورت اسکرول افقی خواهید داشت.
راه دوم - که اصلا مناسب نیست - غیر فعال نمودن اسکرول مرورگر
bftarane
پنج شنبه 18 مهر 1392, 07:09 صبح
قسمتهای چپ و راست فقط پس زمینه هستند یا محتوا هم خواهند داشت. فقط پس زمینه هستند.
اون قسمتهای چپ و راست حتماً لازم نیست پیکسلی باشه اگه با درصد هم بشه خوبه.
bftarane
پنج شنبه 18 مهر 1392, 07:18 صبح
راه اول اینه که عرض کلی رو کم کنید مثلا 1200 پیکسل ، در غیر اینصورت اسکرول افقی خواهید داشت.
راه دوم - که اصلا مناسب نیست - غیر فعال نمودن اسکرول مرورگر
نه این دو راه کلاً منتفی هستند.
bftarane
پنج شنبه 18 مهر 1392, 09:04 صبح
بچه ها با کمک این لینک اونجا که نوشته
With Fluid Width

http://designshack.net/articles/css/how-to-center-anything-with-css/
این کدها رو نوشتم


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

<!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">
<title></title>
<style type="text/css">
#test
{

width:100%;
position:relative;
height:300px;
background:blue;


}
#f
{
width:2000px;
position:absolute;
margin: 0px 0 0 -1000px;
left: 50%;
background:#eee;

background-repeat:no-repeat;
height:300px;
}
#headerleft
{
width:500px;
float:left;
height:300px;
background-image:url("Images/Back-Holding_02.png");
background-repeat:no-repeat;
}
#headercenter
{
width:1000px;
float:left;
height:300px;
background-image:url("Images/Back-Holding_03.png");
background-repeat:no-repeat;
}
#headerright
{
width:500px;
float:left;
height:300px;
background-image:url("Images/Back-Holding_04.png");
background-repeat:no-repeat;
}

</style>
</head>
<body>
<form id="form1" runat="server">
<div id="test"><div id="f">


<div id="headerleft"></div>
<div id="headercenter"></div>

<div id="headerright"></div>
</div></div>

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

هدر وسط قرار می گیره البته یه کم از عکس سمت راستی و چپی دیده نمی شه که اون اشکالی نداره، ولی اسکرول افقی وجود داره هنوز.