PDA

View Full Version : مشکل با DIV


nemo php
سه شنبه 24 تیر 1393, 22:56 عصر
سلام
ببینید کادرای سیا قرمز وابی DIVهستند وقسمت سبز رنگ سمت راست داخلDIV دیگری قرار دارد اما ببینید با اضافه شدن به جدول(کادر سبز سمت راست) به همریختگی به وجود میاد یعنی جدول از دیو پرنت خودش بیرون زده. به دیو کادر مشکی وقرمز پدینگ ومارجین به صورت جدا گانه داده ام ام کار نمیکنه به هم میریزه.خواهشا کمک کید ممنون میشم

121142
H:Shojaei
سه شنبه 24 تیر 1393, 23:18 عصر
سلام..
دوست عزیز من که هرچی نگاه کردم این دو عکس هیچ فرقی با هم ندارن (مثل این بازیا که باید فرقاشونو پیدا کنی حتی :لبخند:)
به جایی که خراب میشه با یه فلشی چیزی اشاره کن...
nemo php
سه شنبه 24 تیر 1393, 23:23 عصر
سلام عکس بالایی مورد نظره.پایینی اشتباهی لود شده.ببینید من میخوام کادر قرمز با تمام محتویات توش زیر کادر مشکی قرار بگیره
H:Shojaei
سه شنبه 24 تیر 1393, 23:30 عصر
واقعا سوالتون نا مفهومه میخواید کادر ها تو یه راستای افقی فرار بگیرن کنار هم؟؟
مثلا کادر departur.. , outbound... کنار هم باشنو بالا پایین نباشن آره؟
H:Shojaei
سه شنبه 24 تیر 1393, 23:33 عصر
آهان فکر کنم منظورتونو فهمیدم واسه اون کادرهای مشکی و قرمز و آبی تو استایل بذارید height: auto; ببینید درست میشه...
اگه نشد کدشو بذارید...
nemo php
سه شنبه 24 تیر 1393, 23:52 عصر
<div class="container">
<div class="sidebar1">
<div class="tosidebar1 sidebar">
<h4 align="center">راهنمایان خشکی</h4>
<table align="center">
<tr>
<td>ودرتازرتاراهنماها</td>
<td>.2</td>
<td>مدتلالات</td>
<td>.1</td>
</tr> <tr>
<td>ازلازلاطزلاز</td>
<td>.4</td>
<td>انبتابلیغف</td>
<td>.3</td>
</tr> <tr>
<td>ارتبعلبای</td>
<td>.6</td>
<td>رتاتزالز</td>
<td>.5</td>
</tr> <tr>
<td></td>
<td>.8</td>
<td>ففففففف</td>
<td>.7</td>
</tr> <tr>
<td></td>
<td>.10</td>
<td></td>
<td>.9</td>
</tr> <tr>
<td></td>
<td>.12</td>
<td></td>
<td>.11</td>
</tr></table>

</div>

<div class="tosidebar2 sidebar">

<h4 align="center">راهنمایان دریا</h4>
<table align="center" >
<tr>
<td>qsfaefaefa</td>
<td>.2</td>
<td>راهنمادریا</td>
<td>.1</td>
</tr> <tr>
<td>رضا قوچان «زاد</td>
<td>.4</td>
<td>حمید رضا </td>
<td>.3</td>
</tr> <tr>
<td>ارتبعلبای</td>
<td>.6</td>
<td>رتاتزالز</td>
<td>.5</td>
</tr> <tr>
<td></td>
<td>.8</td>
<td>ففففففف</td>
<td>.7</td>
</tr> <tr>
<td></td>
<td>.10</td>
<td></td>
<td>.9</td>
</tr> <tr>
<td></td>
<td>.12</td>
<td></td>
<td>.11</td>
</tr></table></div>
<div class="tosidebar3 sidebar">
<h4 align="center">لنگرگاه خارجی</h4>
<table align="center">
<tr>
<td>لنگرگاه خارجی</td>
<td>.2</td>
<td>لنگرگاه خارجی</td>
<td>.1</td>
</tr> <tr>
<td>لنگرگاه خارجی</td>
<td>.4</td>
<td>لنگرگاه خارجی</td>
<td>.3</td>
</tr> <tr>
<td>لنگرگاه خارجی</td>
<td>.6</td>
<td>لنگرگاه خارجی</td>
<td>.5</td>
</tr> <tr>
<td></td>
<td>.8</td>
<td>ففففففف</td>
<td>.7</td>
</tr> <tr>
<td></td>
<td>.10</td>
<td></td>
<td>.9</td>
</tr> <tr>
<td></td>
<td>.12</td>
<td></td>
<td>.11</td>
</tr></table></div>
<div class="tosidebar4 sidebar">
<h4 align="center">لنگرگاه داخلی</h4>
<table align="center">


<tr>
<td>لنگر گاه داخلی</td>
<td>.2</td>
<td>لنگر گاه داخلی</td>
<td>.1</td>
</tr> <tr>
<td>لنگر گاه داخلی</td>
<td>.4</td>
<td>لنگر گاه داخلی</td>
<td>.3</td>
</tr> <tr>
<td>لنگرگاه خارجی</td>
<td>.6</td>
<td>لنگرگاه خارجی</td>
<td>.5</td>
</tr> <tr>
<td></td>
<td>.8</td>
<td>ففففففف</td>
<td>.7</td>
</tr></table></div>
<div class="tosidebar5 sidebar">
<h4 align="center">لنگرگاه میانی</h4>
<table align="center" >
<tr>
<td>لنگرگاه میانی</td>
<td>.2</td>
<td>لنگرگاه میانی</td>
<td>.1</td>
</tr> <tr>
<td>لنگرگاه میانی</td>
<td>.4</td>
<td>لنگرگاه میانی</td>
<td>.3</td>
</tr> <tr>
<td>لنگرگاه خارجی</td>
<td>.6</td>
<td>لنگرگاه خارجی</td>
<td>.5</td>
</tr> <tr>
<td></td>
<td>.8</td>
<td>ففففففف</td>
<td>.7</td>
</tr></table></div>
<div class="tosidebar6 sidebar">

<h4 align="center">توقیفی
</h4>
<table align="center">
<tr>
<td>لنگرگاه توقیفی</td>
<td>.2</td>
<td>لنگرگاه توقیفی</td>
<td>.1</td>
</tr> <tr>
<td>لنگرگاه میانی</td>
<td>.4</td>
<td>لنگرگاه توقیفی</td>
<td>.3</td>
</tr> <tr>
<td>لنگرگاه خارجی</td>
<td>.6</td>
<td>لنگرگاه خارجی</td>
<td>.5</td>
</tr></table></div>
</div>
<div class="content" >
<div class="depandout1">
<div class="con1">
<h4 align="center" >Arrival</h4>

<table align="center" cellspacing="1px" cellpadding="2" id="arrival">

<tr id="arrival_1">
<td width="3px">1</td>
<td width="107px;">jj</td>
<td width="24px" height="20px" align="center">j<hr style="margin:0px;"/>j</td>
<td width="8px">j</td>
<td width="25px"><img src="images/Jetty/pending.PNG" width="28px" height="20px;" /></td><td width="25px"><img src="images/along side/P.png" width="25px" height="24px;" /></td> <td width="24px"><img src="images/user/Enrique_Iglesias,_Escape.jpg" width="24px" height="31px;" /></td>
<td width="33px" style="font-size:9px;">مصطفی صفرابادی</td><td width="24px" align="left"><img src="images/River Pilot/Passenger.png" width="24px" height="31px;" /></td>
<td width="33px" style="font-size:9px;">Passenger</td> <td width="25px"><img src="images/figure/1.png" width="59px" height="33" style="padding:0px;" />
</tr><tr id="arrival_5">
<td width="3px">2</td>
<td width="107px;">M</td>
<td width="24px" height="20px" align="center">M<hr style="margin:0px;"/>M</td>
<td width="8px">M</td>
<td width="25px"><img src="images/Jetty/pending.PNG" width="28px" height="20px;" /></td><td width="25px"><img src="images/along side/S.png" width="25px" height="24px;" /></td> <td width="24px"><img src="images/user/Enrique_Iglesias,_Escape.jpg" width="24px" height="31px;" /></td>
<td width="33px" style="font-size:9px;">مصطفی صفرابادی</td><td width="24px" align="left"><img src="images/River Pilot/Passenger.png" width="24px" height="31px;" /></td>
<td width="33px" style="font-size:9px;">Passenger</td> <td width="25px"><img src="images/figure/2.png" width="59px" height="33" style="padding:0px;" />
</tr>
</table>


<!-- end .con1 --></div>

<!--div dovom-->
<div class="con2">
<h4 align="center" >Inbound Vessel</h4>
<table align="center" cellspacing="1px" cellpadding="2" class="tbl_inbound" id="inbound">
<tr>
<td width="3px">1</td>
<td width="107px;">m</td>
<td width="24px" height="20px" align="center">m<hr style="margin:0px;"/>m</td>
<td width="8px">111</td>
<td width="25px"><img src="images/Jetty/pending.PNG" width="28px" height="20px;" /></td><td width="25px"><img src="images/along side/S.png" width="25px" height="24px;" /></td> <td width="24px"><img src="images/user/Koala.jpg" width="24px" height="31px;" /></td>
<td width="33px" style="font-size:9px;">کوالا</td> <td width="24px"><img src="images/user/None.PNG" width="24px" height="31px;" /></td>
<td width="33px" style="font-size:9px;">none</td> <td width="25px"><img src="images/figure/1.png" width="59px" height="33" style="padding:0px;" />
</tr><tr>
<td width="3px">2</td>
<td width="107px;">m</td>
<td width="24px" height="20px" align="center">mm<hr style="margin:0px;"/>m</td>
<td width="8px">12</td>
<td width="25px"><img src="images/Jetty/pending.PNG" width="28px" height="20px;" /></td><td width="25px"><img src="images/along side/P.png" width="25px" height="24px;" /></td> <td width="24px"><img src="images/user/Enrique_Iglesias,_Escape.jpg" width="24px" height="31px;" /></td>
<td width="33px" style="font-size:9px;">مصطفی صفرابادی</td> <td width="24px"><img src="images/user/Koala.jpg" width="24px" height="31px;" /></td>
<td width="33px" style="font-size:9px;">کوالا</td> <td width="25px"><img src="images/figure/2.png" width="59px" height="33" style="padding:0px;" />
</tr><tr>
<td width="3px">3</td>
<td width="107px;">m</td>
<td width="24px" height="20px" align="center">m<hr style="margin:0px;"/>m</td>
<td width="8px">12</td>
<td width="25px"><img src="images/Jetty/pending.PNG" width="28px" height="20px;" /></td><td width="25px"><img src="images/along side/P.png" width="25px" height="24px;" /></td> <td width="24px"><img src="images/user/None.PNG" width="24px" height="31px;" /></td>
<td width="33px" style="font-size:9px;">none</td> <td width="24px"><img src="images/user/" width="24px" height="31px;" /></td>
<td width="33px" style="font-size:9px;"></td> <td width="25px"><img src="images/figure/2.png" width="59px" height="33" style="padding:0px;" />
</tr><tr>
<td width="3px">4</td>
<td width="107px;">m</td>
<td width="24px" height="20px" align="center">m<hr style="margin:0px;"/>m</td>
<td width="8px">12</td>
<td width="25px"><img src="images/Jetty/pending.PNG" width="28px" height="20px;" /></td><td width="25px"><img src="images/along side/P.png" width="25px" height="24px;" /></td> <td width="24px"><img src="images/user/Koala.jpg" width="24px" height="31px;" /></td>
<td width="33px" style="font-size:9px;">کوالا</td> <td width="24px"><img src="images/user/" width="24px" height="31px;" /></td>
<td width="33px" style="font-size:9px;"></td> <td width="25px"><img src="images/figure/2.png" width="59px" height="33" style="padding:0px;" />
</tr></table>

<!-- end .con2 --></div>

<!-- end .con1,2 --></div>
<div class="depandout2">

<div class="con1">
<h4 align="center" >Departure</h4>

<table align="center" cellspacing="1px" cellpadding="2" class="tbl_departure" >


</table>


<!-- end .con1 --></div>

<!--div dovom-->
<div class="con2">
<h4 align="center" >Outbound Vessel</h4>
<table align="center" cellspacing="1px" class="tbl_outbound" >
<tr>
<td width="3px">1</td>
<td width="107px;">IRAN KHALIJ</td>
<td width="24px" height="20px" align="center">78<hr style="margin:0px;"/>2.2</td>
<td width="8px">15:00</td>
<td width="25px"><img src="images/Jetty/J.PNG" width="25px" height="12px;" />12</td> <td width="24px"><img src="images/user/Enrique_Iglesias,_Escape.jpg" width="24px" height="31px;" /></td>
<td width="33px" style="font-size:9px;" colspan="1">مصطفی صفرابادی</td> <td width="25px"><img src="images/figure/2.png" width="59px" height="33" style="padding:0px;" />
</tr><tr>
<td width="3px">2</td>
<td width="107px;">mm</td>
<td width="24px" height="20px" align="center">m<hr style="margin:0px;"/>m</td>
<td width="8px">12</td>
<td width="25px"><img src="images/Jetty/pending.PNG" width="28px" height="20px;" /></td> <td width="24px"><img src="images/user/Enrique_Iglesias,_Escape.jpg" width="24px" height="31px;" /></td>
<td width="33px" style="font-size:9px;" colspan="1">مصطفی صفرابادی</td> <td width="25px"><img src="images/figure/2.png" width="59px" height="33" style="padding:0px;" />
</tr><tr>
<td width="3px">3</td>
<td width="107px;">mm</td>
<td width="24px" height="20px" align="center">m<hr style="margin:0px;"/>m</td>
<td width="8px">12</td>
<td width="25px"><img src="images/Jetty/pending.PNG" width="28px" height="20px;" /></td> <td width="24px"><img src="images/user/Enrique_Iglesias,_Escape.jpg" width="24px" height="31px;" /></td>
<td width="33px" style="font-size:9px;" colspan="1">مصطفی صفرابادی</td> <td width="25px"><img src="images/figure/2.png" width="59px" height="33" style="padding:0px;" />
</tr>
</table>
<!-- end .con2 -->
</div>

</div>
<div class="depandout3">

<div class="con1">
<h4 align="center" >Ready To Move</h4>

<table align="center" cellspacing="1px" cellpadding="2" class="tbl_ready">
<tr id="ready_1">
<td width="3px">1</td>
<td width="107px;">IRAN TBT</td>
<td width="24px" height="20px" align="center">12<hr style="margin:0px;"/>5.6</td>
<td width="8px">12:22</td>
<td width="25px"><img src="images/Jetty/J.PNG" width="25px" height="12px;" />12</td>
<td width="25px"><img src="images/rows/row.PNG" /></td>
<td width="25px"><img src="images/Jetty/J.PNG" width="25px" height="12px;" />18</td><td width="25px"><img src="images/along side/S.png" width="25px" height="24px;" /></td> <td width="24px"><img src="images/user/Koala.jpg" width="24px" height="31px;" /></td>
<td width="33px" style="font-size:9px;">کوالا</td> </tr></table>

<!-- end .con1 --></div>

<!--div dovom-->
<div class="con2">
<h4 align="center" >Shifting</h4>
<table align="center" cellspacing="1px" cellpadding="2" class="tbl_shifting" >
<tr>
<td width="3px">1</td>
<td width="107px;">IRAN TBT</td>
<td width="24px" height="20px" align="center">12<hr style="margin:0px;"/>5.6</td>
<td width="8px">12:42</td>
<td width="25px"><img src="images/Jetty/J.PNG" width="25px" height="12px;" />12</td>
<td width="25px"><img src="images/rows/row.PNG" /></td>
<td width="25px"><img src="images/Jetty/J.PNG" width="25px" height="12px;" />18</td><td width="25px"><img src="images/along side/S.png" width="25px" height="24px;" /></td> <td width="24px"><img src="images/user/Enrique_Iglesias,_Escape.jpg" width="24px" height="31px;" /></td>
<td width="33px" style="font-size:9px;">مصطفی صفرابادی</td> </tr>
</table>
<!-- end .con2 --></div>

</div>
nemo php
سه شنبه 24 تیر 1393, 23:53 عصر
CSS


.sidebar1 {
float: right;
width:20%;


}

.content {

padding: 10px 0px;
width: 80%;
float:none;
}

/* ~~ This grouped selector gives the lists in the .content area space ~~ */

-->
.con1
{
background-color:#FFFFFF;
width:49%;
min-height:100px;
max-height:300px;
float:left;
margin-left:5px;
margin-top:5px;
border-radius:8px;

}
.con2
{
background-color:#FFFFFF;
width:49%;
min-height:100px;
max-height:300px;
float:right;
margin-right:5px;
margin-top:5px;
border-radius:8px;

}
.con1 h4
{
background-color:#D6D6D4;
border-color:#D6D6D4;
border-radius:5px;
margin:2%;
}
.con2 h4
{
background-color:#D6D6D4;
border-color:#D6D6D4;
border-radius:5px;
margin:2%;
}
.sidebar
{

margin:5%;
float:right;
text-align:right;
font-size:12px;
width:90%;
background-color:#FFF;
color:#000;
border-radius:5px;
}
.con1 table
{ font-size:12px;
background:#C4FCBD;
border-radius:5px;
width:95%;
margin-bottom:2%;

}
.con2 table
{ font-size:12px;
background:#C4FCBD;
border-radius:5px;
width:95%;
margin-bottom:2%;

}
.con1 table tr
{
border-bottom:1px solid #FFF;
}
.con2 table tr
{
border-bottom:1px solid #FFF;
}

.depandout1
{
height:auto;

}
.depandout2
{
height:auto;
}
.depandout3
{
height:auto;
}
.sidebar h4
{
background-color:#D6D6D4;
border-color:#D6D6D4;
border-radius:2px;
margin:2%;
}
H:Shojaei
چهارشنبه 25 تیر 1393, 13:42 عصر
این مشکل شما واقعا مشکله!!
دیشب 3-4 ساعت دنبالش بودم تا آخر فهمیدم این اتفاق معمولا بخوای نخوای میافته باید دورش بزنی یه لینک پیدا کردم که حلش کرده مشکلو:
http://jsfiddle.net/kaAjW/
nemo php
جمعه 27 تیر 1393, 10:53 صبح
آقای H:Shojaei (http://barnamenevis.org/member.php?241637-H-Shojaei) خیلی خیلی ممنون.