سوال: چرا اين المنت 100% عرض را نميگيرد؟ [بایگانی]

View Full Version : سوال: چرا اين المنت 100% عرض را نميگيرد؟

moslem-visual

پنج شنبه 30 آبان 1387, 22:33 عصر

سلام خدمت دوستان و اساتيد محترم، چند دقيقه پيش يه منوي ساده نوشتم اما نميدونم چرا menu_title عرض المنت پدرش يعني navigator رو به طور 100% اشغال نميكنه، ممنون ميشم راهنمايي كنيد، با تشكر.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
#navigator{
width: 200px;
}

.menu_title{
width: 100%;
text-align: center;
font: 17px Georgia bold;
color: #FFFFFF;
padding: 5px 0;
background: #164740;
}

#navigator ul{
list-style-type: none;
font: 13px verdana;
padding: 0;
margin: 0;
}

#navigator li{
clear: both;
width: 100%;
margin-bottom: 1px;
}

#navigator li a{
background: #BBE1D5;
border-bottom: 2px #569A75 solid;
padding: 13px 5px 7px 15px;
display: block;
width: 100%;
height: 25px;
color: #333333;
text-decoration: none;
font-weight: bold;
}

#navigator li a:hover{
background: #76B69E;
color: #FFFFFF;
}
</style>

</head>

<body>
<div id="navigator">
<div class="menu_title">- Main Menu -</div>
<ul>
<li><a href="#">Home Page</a></li>
<li><a href="#">Registration</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#">Memorize Forums</a></li>
</ul>
</div>
</body>
</html>

raravaice

پنج شنبه 30 آبان 1387, 22:39 عصر

menu_title اوضاش مرتبه مشکل از padding هست که به تگ a داخل li دادی چون padding روی طول و عرض المال اضافه میشه!

راه حل :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#navigator
{
width: 200px;
}
.menu_title
{
width: 100%;
text-align: center;
font: 17px Georgia bold;
color: #FFFFFF;
padding: 5px 0;
background: #164740;
}
#navigator ul
{
list-style-type: none;
font: 13px verdana;
padding: 0;
margin: 0;
}
#navigator li
{
clear: both;
width: 100%;
margin-bottom: 1px;
}
#navigator li a
{
background: #BBE1D5;
border-bottom: 2px #569A75 solid;
padding: 13px 0px 7px 0px;
display: block;
width: 100%;
height: 25px;
color: #333333;
text-decoration: none;
font-weight: bold;
}
#navigator li a:hover
{
background: #76B69E;
color: #FFFFFF;
}
#navigator li a span
{
margin-left: 13px;
}
</style>
</head>
<body>
<div id="navigator">
<div class="menu_title">
- Main Menu -</div>
<ul>
<li><a href="#"><span>Home Page</span></a></li>
<li><a href="#"><span>Registration</span></a></li>
<li><a href="#"><span>Photo Gallery</span></a></li>
<li><a href="#"><span>Memorize Forums</span></a></li>
</ul>
</div>
</body>
</html>

موفق باشی

moslem-visual

جمعه 01 آذر 1387, 08:49 صبح

آقا خيلي متشكر، ولي من نميتونم درك كنم كه چرا با وجود تنظيم عرض menu_title بر روي 100% اين اتفاق ميفيته، يعني padding كه باعث افزايش عرض ستون شده توسط menu_title به عرضش اضافه نميشه؟! ممنون.

Ali100

جمعه 01 آذر 1387, 11:30 صبح

raravaice کاملا درست گفته .

با دیدن این عکس که از IE8 برداشتم شاید Padding براتون مشخص تر بشه

http://i38.tinypic.com/2uo6mbk.jpg

اینجا هم در مورد Layout توضیح کامل داده .

http://www.w3.org/TR/CSS21/box.html

===========================================

من اول فکر کردم با width مشکل داری کلی مطلب در مورد width نوشتم . امیدوارم نوشته
قبلی درست Edit شده باشه .
===========================================

moslem-visual

جمعه 01 آذر 1387, 22:44 عصر

از دوستان محترم متشكرم بابت پاسخشون، اما يه مشكل ديگه هم دارم كه خواستم تاپيك تازه نزنم و همينجا مطرح كنم. در صفحه ي زير ميخوام با كيك كردن Toggle به طور آهسته بر ارتفاع options اضافه بشه اما هيچ جوابي نميگيرم! ممنون ميشم لطف كنيد و يه نگاهي بندازيد، متشكر.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
#options{
width: 60%;
position: absolute;
top: 0;
left: 20%;
background: #00FFCC;
border: 1px #009966 solid;
border-top: none;
height: 20px;
}
</style>

<script type="text/javascript">

function toggle() {
height = document.getElementById("options").style.height; //get the toggle menu hande
height = parseInt(height); // parse the numeric unit

if(height < 150) { //if NOT opened we open it!
open_side();
}
else{
close_side();
}
}

function open_side() {
side = document.getElementById("options").style;
height = parseInt(side.height);

if(height < 150){ //do it while height is < 150px
height++;
side.height = height + 'px'; //set the height with 'px' added
tm = setTimeout("open_side()" , 50); //set timer for repeating
}
}

function close_side() {
side = document.getElementById("options").style;
height = parseInt(side.height);

if(height > 20){
height--;
side.height = height + 'px';
tm = setTimeout("close_side()" , 50);
}
}
</script>
</head>

<body>
<div id="options"> </div>
<br /><br />
<a href="#" onclick="toggle()">Toggle</a>
</body>
</html>

emad_67

جمعه 01 آذر 1387, 23:36 عصر

وقتی از height استفاده میکنی اول باید اونو تعریف کرده باشی:

<div id="options" style="height:10px;"> </div>

moslem-visual

شنبه 02 آذر 1387, 10:03 صبح

بسيار متشكر، اما چرا بايد حتما مشخصه رو به صورت InLine تعريف كرد؟ چقدر ديروز دنبال دليل كار نكردنش گشتم...!!!

emad_67

شنبه 02 آذر 1387, 10:50 صبح

چون شما توی کدت داری height رو get میکنی:

height = parseInt(height);

توی این حالت وقتی height رو تعریف نکردی مقدار ارتفاعی اصلا وجود نداره که بخواد parseInt هم روش اعمال بشه. مثلا اینو ببین:

<body>
<div id="test">dddddddd</div>
</body>
<script type="text/javascript">
var s=document.getElementById("test").style.height;
alert(s);
</script>

توی alert هیچی نشون داده نمیشه. بنابراین موقع دسترسی به خاصیت باید اونو تعریف کرده باشی ولی برای Set کردن نیازی به تعریف نیست میتونی مستقیم بنویسی:

<body>
<div id="test" style="border:1px solid #000;">dddddddd</div>
</body>
<script type="text/javascript">
document.getElementById("test").style.height="200px";

</script>