PDA

View Full Version : چیدن چند تاdiv کنار هم


elmira_63
دوشنبه 10 اسفند 1388, 11:43 صبح
سلام
من میخوام سایمتم رو با div طراحی کنم
وقتی مثلا 3 تا div رو بخوام کنار هم بچینم با استفاده از css این کدها رو برای left و right مینویسم ولی برای اون یکی div وستی نمی دوم چیکار کنم که نشون داده بشه
البته موقع طراحی درست نشون داده می شه ولی وقتی اجرا میگیرم وسطی نشون داده نمیشه؟؟؟؟؟؟؟؟؟؟؟؟



.Div_Banner_Left
{
width: 40%;
height: 83px;
float: left;
margin: 0px;
background-image: url( '../Images/Banner/Back_Banner.gif' );
background-repeat: repeat-x;
}
.Div_Banner_Right
{
width: 40%;
height: 83px;
float: right;
margin: 0px;
background-image: url( '../Images/Banner/Back_Banner.gif' );
background-repeat: repeat-x;
}
.Div_Banner_Middle
{
width: 20%;
height: 83px;
margin: 0px;
background-image: url( '../Images/Banner/Back_Banner.gif' );
background-repeat: repeat-x;
display: block;
}


البته برای اون وسطی float رو هم به none و هم به inherit ست کردم ولی بازم جواب نداد
mehdi.mousavi
دوشنبه 10 اسفند 1388, 12:02 عصر
سلام من میخوام سایمتم رو با div طراحی کنم
وقتی مثلا 3 تا div رو بخوام کنار هم بچینم با استفاده از css این کدها رو برای left و right مینویسم ولی برای اون یکی div وستی نمی دوم چیکار کنم که نشون داده بشه البته موقع طراحی درست نشون داده می شه ولی وقتی اجرا میگیرم وسطی نشون داده نمیشه؟؟؟؟؟؟؟؟؟؟؟؟

سلام.
لطفا HTML اش رو هم بذارید.

موفق باشید.

پاورقی: برای آشنایی با نحوه کارکرد CSS ها، من کتاب CSS: The missing manual رو پیشنهاد میدم.
elmira_63
دوشنبه 10 اسفند 1388, 12:05 عصر
سلام.
لطفا HTML اش رو هم بذارید.

موفق باشید.

پاورقی: برای آشنایی با نحوه کارکرد CSS ها، من کتاب CSS: The missing manual رو پیشنهاد میدم.




<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="MasterPages_Site" %>
<!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>Untitled Page</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<link href="../Styles/Div.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div class="Div_Banner_Left">

<img src="Images/Banner/iranjob.gif" style="width: 165px; height: 80px" /></div>
<div class="Div_Banner_Right">
</div>
<div class="Div_Banner_Middle">
</div>
<div class="Div_TopMenue">
</div>
<div class="Dive_Border_Top_Middle">
<div class="Dive_Border_Top_Left">
<img src="Images/Banner/Left_Border_UP.gif" style="width: 22px; height: 22px" /></div>
<div class="Dive_Border_Top_Right">
<img src="Images/Banner/Right_Border_Up.gif"
style="width: 22px; height: 22px" /></div>
</div>
<div>
<div class="Div_Border_Left_Middle">
</div>
<div class="Div_Border_Right_Middle">
</div>
<div class="Div_Border_Content">
</div>
</div>
<div class="Dive_Border_Top_Right">
</div>
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">



</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
mehdi.mousavi
دوشنبه 10 اسفند 1388, 12:15 عصر
سلام.
اینقدر بد این tag ها رو بهم چسبوندید و ... واقعا اعصاب خورد کن هستش ASPX ای که گذاشته اید. با این فایلی که بهتون میدم شروع کنید...

<!DOCTYPEhtmlPUBLIC"-//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>
<style type="text/css">
#container {
width: 100%;
}
.middle {
width: 20%;
}
.left, .right {
width: 40%;
}
.left, .right, .middle {
height: 83px;
float: left;
margin: 0;
}
</style>
</head>
<body>
<div id="container">
<div class="left">
LEFT PANE</div>
<div class="middle">
MIDDLE PANE</div>
<div class="right">
RIGHT PANE</div>
</div>
</body>
</html>
elmira_63
دوشنبه 10 اسفند 1388, 12:54 عصر
سلام.
اینقدر بد این tag ها رو بهم چسبوندید و ... واقعا اعصاب خورد کن هستش ASPX ای که گذاشته اید. با این فایلی که بهتون میدم شروع کنید...

<!DOCTYPEhtmlPUBLIC"-//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>
<style type="text/css">
C#‎ontainer {
width: 100%;
}
.middle {
width: 20%;
}
.left, .right {
width: 40%;
}
.left, .right, .middle {
height: 83px;
float: left;
margin: 0;
}
</style>
</head>
<body>
<div id="container">
<div class="left">
LEFT PANE</div>
<div class="middle">
MIDDLE PANE</div>
<div class="right">
RIGHT PANE</div>
</div>
</body>
</html>


ممنون مشکلم با اون container حل شد فقط میشه یه توضیح کوچیک در موردش برام بدید؟؟؟
در ضمن کدهام رو هم مرتب کردم که دعوام کردید :ناراحت:
mehdi.mousavi
دوشنبه 10 اسفند 1388, 14:21 عصر
ممنون مشکلم با اون container حل شد فقط میشه یه توضیح کوچیک در موردش برام بدید؟؟؟ در ضمن کدهام رو هم مرتب کردم که دعوام کردید :ناراحت:

سلام.
چه جور توضیحی؟ اون container در واقع div های داخلی رو محدود میکنه تا بتونم روی div های contained شده، کنترل داشته باشم. (مثلا عرض صفحه رو محدود کنم به تعداد پیکسل خاصی و از این قبیل کارها).

اما در مورد مرتب کردن کدها... باور کنید، کدهایی که Submit میشه، اگر خوانا و مرتب نوشته بشه، خیلی سریعتر بهش پاسخ داده میشه. و الا، من نوعی فرصت اینو ندارم که بشینم اول کد شما رو مرتب کنم، بعد تست کنم ببینم ایرادش چیه، بعد رفعش کنم و بهتون توشیح بدم و ...

در هر حال، اگر توی Visual Studio کلید CTRL-K و سپس CTRL-D رو بزنید، Source اتون مرتب میشه...

موفق باشید.
mohsen507
دوشنبه 10 اسفند 1388, 15:42 عصر
در هر حال، اگر توی Visual Studio کلید CTRL-K و سپس CTRL-D رو بزنید، Source اتون مرتب میشه...



:تشویق:سپاس
elmira_63
دوشنبه 10 اسفند 1388, 16:12 عصر
اگه بخوام دوتا از div ها رو whit اش رو به pixel بدم یکیش رو به درصد بدم به مشکل بر میخورم چیکار کنم که مشکلم حل شه؟؟؟

من میخوام توی دوتا از div ها عکس بندازم div وسطی رو بهش درصد بدم که سایز صفحم هرچی بود بهم نخوره برای اون دوتا div ها مجبورم whit اش رو به pixel بدم
elmira_63
سه شنبه 11 اسفند 1388, 11:30 صبح
جواب سوال بالایی رو که ندادین
حالا من توی مستر پیج میخوام با استفاده از div یه جدول 3*3 ایجاد کنم که contentplaceholder دقیقا توی div وسط (وسط از بالا و پایین) قرار میگیره حالا مشکلی که دارم توی ردیف دوم این جدول یه عکسی رو در راسای عمودی تکرار میکنم به عنوان background ولی چون موقعیت قرار گرفتن div رو از بالای صفحه و راست و چپ صفحه تعین کردم با بزرگ شدن contentplaceholder این سطر دوم و سوم هم میریزه کدای html و css رو براتون میزارم




C#‎ontainer
{
width: 100%;
}
C#‎ontainer1
{
width: 100%;
}
C#‎ontainer2
{
width: 100%;
}
C#‎ontainer3
{
width: 100%;
}
C#‎ontainer4
{
width: 100%;
}
C#‎ontainer5
{
width: 100%;
}
C#‎ontainer6
{
width: 100%;
}
Div.Banner_Left
{
width: 40%;
height: 83px;
position:absolute;
left: 1%;
margin: 0px;
background-image: url( '../Images/Banner/Back_Banner.gif');
background-repeat: repeat-x;
}
Div.Banner_Middle
{
width: 20%;
position:absolute;
left:41%;
height: 83px;
margin: 0px;
background-image: url( '../Images/Banner/Back_Banner.gif');
background-repeat: repeat-x;
float: left;
}
Div.Banner_Right
{
width: 38%;
height: 83px;
left: 61%;
position: absolute;
margin: 0px;
background-image: url( '../Images/Banner/Back_Banner.gif');
background-repeat: repeat-x;
}
Div.TopMenue
{
margin: 0px;
width: 98%;
position:absolute;
left: 1%;
top: 99px;
background-image: url('../Images/Banner/Top.gif');
background-repeat: repeat-x;
height: 48px;
}
Div.Border_Top_Left
{
width: 22px;
margin: 0px;
position:absolute;
left:1%;
top:147px;
background-image: url( '../Images/Banner/Left_Border_UP.gif');
height: 22px;
}
Div.Border_Top_Middle
{
margin: 0px;
background-image: url( '../Images/Banner/UP_Border_Midle.gif');
background-repeat: repeat-x;
position:absolute;
height:22px;
left:33px;
right:33px;
top:147px;

}
Div.Border_Top_Right
{
width: 22px;
margin: 0px;
position:absolute;
right:1%;
top:147px;
height: 22px;
background-image: url( '../Images/Banner/Right_Border_Up.gif');
}
Div.Border_Middle_Left
{
background-image: url( '../Images/Banner/Left_Border_Midle.gif');
background-repeat: repeat-y;
margin: 0px;
width: 22px;
position:absolute;
left: 1%;
top: 169px;
}
Div.Border_Content
{
margin: 0px;
position:absolute;
left:33px;
right: 33px;
top: 169px;
}
Div.Border_Middle_Right
{
background-image: url( '../Images/Banner/Right_Border_Midle.gif');
background-repeat: repeat-y;
margin: 0px;
width: 22px;
position:absolute;
right:1%;
top:169px;
}
Div.Border_Down_Left
{
width: 22px;
margin: 0px;
position: absolute;
left: 1%;
bottom:1%;
background-image: url( '../Images/Banner/Left_Border_Down.gif');
height: 22px;
}
Div.Border_Down_Middle
{
margin: 0px;
background-image: url( '../Images/Banner/Down_Boredr_Midle.gif');
background-repeat: repeat-x;
position: absolute;
height: 22px;
left: 33px;
right: 33px;
bottom:1%;
}
Div.Border_Down_Right
{
width: 22px;
margin: 0px;
position: absolute;
right: 1%;
bottom:1%;
height: 22px;
background-image: url( '../Images/Banner/Right_Border_Down.gif');
}
elmira_63
سه شنبه 11 اسفند 1388, 11:31 صبح
اینم html



<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="MasterPages_Site" %>
<!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>Untitled Page</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href="../Styles/Div.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#continer
{
height: 82px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div class="Banner_Left">
</div>
<div class="Banner_Middle">
</div>
<div class="Banner_Right">
</div>
</div>
<div class="TopMenue">
</div>
<div id="container1">
<div class="Border_Top_Left">
</div>
<div class="Border_Top_Middle">
</div>
<div class="Border_Top_Right">
</div>
</div>
<div id="container2">
<div class="Border_Middle_Left">
</div>
<div class="Border_Content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="Border_Middle_Right">
</div>
</div>
<div id="container3">
<div class="Border_Down_Left">
</div>
<div class="Border_Down_Middle">
</div>
<div class="Border_Down_Right">
</div>
</div>
</form>
</body>
</html>
elmira_63
سه شنبه 11 اسفند 1388, 12:27 عصر
ببینید اصلا سوالم رو اینطور مطرح میکنم
چطور میشه با div یه جدول 3*3 ایجاد کرد طوری که با رشد کردن سلول وسطی (وسط از بال و پایین) دو سلول دیگر چپ و راست این سلول نیز رشد کنه و سلول های ردیف پایین این سلول هم به پایین تر منتقل بشه
دقیقا کاری که یه table 3*3 میکنه منتها با div
elmira_63
سه شنبه 11 اسفند 1388, 15:10 عصر
کیست مرا یاری کند ؟؟؟
iman_ad
سه شنبه 11 اسفند 1388, 15:38 عصر
source بزار
elmira_63
سه شنبه 11 اسفند 1388, 17:07 عصر
source بزار

به خدا سورس گذاشتم دو سه تا پست پیش هم کدای html هم css

اصلا کل سورس سایت ضمیمه هست
elmira_63
چهارشنبه 12 اسفند 1388, 08:42 صبح
کسی نیست جواب ما رو بده ؟؟
elmira_63
چهارشنبه 12 اسفند 1388, 13:01 عصر
به روش آزمون و خطا بلاخره درست شد