ورود

**AmirArshan**

سلام؛ چطور در css طول یک شیٔ را طوری تعریف کنم که بیش‌ترین حالت (maximum) باشد؟ یعنی نه روی دیگر اشیاء بیافتد و هم بیش‌ترین حالت باشد.
مثلا می‌خوام یه هم‌چین چیزی بسازم:

کلیک

با تشکّر

**SM.AZARSHIN**

(93-10-25، 12:58 عصر)AmirArshan نوشته است: سلام؛ چطور در css طول یک شیٔ را طوری تعریف کنم که بیش‌ترین حالت (maximum) باشد؟ یعنی نه روی دیگر اشیاء بیافتد و هم بیش‌ترین حالت باشد.
مثلا می‌خوام یه هم‌چین چیزی بسازم:

کلیک

با تشکّر

سلام!
فکر کنم بهتر بود سوال خود را در انجمن آموزش سی اس اس (CSS)، باز میکردید بهتر بود!در کل طرح کلی کد به شکل زیر هست
...

کد: 

background: none repeat scroll 0% 0% #0080FF;

    color: #FFF;

    text-align: right;

    padding-right: 30px;

    padding-top: 10px;

    padding-bottom: 10px;

}

**AmirArshan** · 93-10-25، 05:37 عصر

(93-10-25، 01:36 عصر)SM.AZARSHIN نوشته است:
(93-10-25، 12:58 عصر)AmirArshan نوشته است: سلام؛ چطور در css طول یک شیٔ را طوری تعریف کنم که بیش‌ترین حالت (maximum) باشد؟ یعنی نه روی دیگر اشیاء بیافتد و هم بیش‌ترین حالت باشد.
مثلا می‌خوام یه هم‌چین چیزی بسازم:

کلیک

با تشکّر

سلام!
فکر کنم بهتر بود سوال خود را در انجمن آموزش سی اس اس (CSS)، باز میکردید بهتر بود!در کل طرح کلی کد به شکل زیر هست
...

کد:

background: none repeat scroll 0% 0% #0080FF; color: #FFF; text-align: right; padding-right: 30px; padding-top: 10px; padding-bottom: 10px; }

امتحان کردم؛ متأسفانه نشد! احتمالا منظور من رو نفهمیدید. البتّه تقصیر منه! خوب توضیح ندادم Sad

می‌خوام این شکلی بشه:

دقت کنید که وقتی hover می‌شود، طویل‌تر می‌شود. با تشکّر

**HSG** · 93-10-25، 10:24 عصر

سلام
فقط به جای اندازه 100% بذارید کل صفحه رو میگیره.

کد: 

.style{width:100%;height:200px;}

**Mr.Navid** · 93-10-25، 10:38 عصر

خب باید مشخص کنید وقتی هاور شد width اضافه بشه

کد: 

.menu4{

width:40%//mesal

.

.

.

.

}

.menu4:hover{

width:80%//mesal

.

.

.

}

**AmirArshan** · 93-10-25، 11:28 عصر

(93-10-25، 10:38 عصر)happyman نوشته است: خب باید مشخص کنید وقتی هاور شد width اضافه بشه

کد:

.menu4{ width:40%//mesal . . . . } .menu4:hover{ width:80%//mesal . . . }

آخه می‌خوام تو حالت عادی هم بیش‌ترین حالت باشه!

**Mr.Navid**

خب در اینصورت به کلاس اصلی هم width دلخواه رو بدید دیگه!!!

من فک کنم منظورتون رو کامل متوجه نشدم
اگه امکانش هست کامل تر بگید یا کدتون رو قرار بدید تا بررسی بشه

**AmirArshan** · 93-10-26، 12:15 صبح

(93-10-26، 12:07 صبح)happyman نوشته است: خب در اینصورت به کلاس اصلی هم width دلخواه رو بدید دیگه!!!

من فک کنم منظورتون رو کامل متوجه نشدم
اگه امکانش هست کامل تر بگید یا کدتون رو قرار بدید تا بررسی بشه

سلام؛ اوّل از همه باید طول (width) کلاس cat (سمت راست سرچ‌باکس) بیش‌ترین حالت باشد. ازآن‌جایی که با آمدن موس طول کلاس cat زیاد می‌شود، نباید سرچ باکس به خط بعدی برود. باید چه کار کنم؟

**Mr.Navid**

من از این روش استفاده کردم:

کد: 

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled Document</title>

<style>

*{padding:0;margin:0;border:0;font-family:b yekan;text-align:center;}

.menu{

width:80%;

height:50px;

background:rgba(93,106,207,1.00);

display:inline-block;

padding-right:5px;

}

.menu ul{

list-style:none;

display:inline-block;

float:right;

}

.menu li{

margin-left:10px;

background:rgba(76,224,166,1.00);

text-align:right;

width:30px;

float:right;

height:50px;

padding-right:50px;

}

.menu li a {

display:inline-block;

text-decoration:none;

color:black;

}

.cat{

height:50px;

width:10px;

background:rgba(170,237,17,1.00);

float:right;

}

</style>

<script>

function myf (){

    var    x=document.getElementById('1');

x.style.width="55px"

}

function myf1 (){

var    x=document.getElementById('1');

x.style.width="10px"

}

function myf2 (){

    var    y=document.getElementById('2');

y.style.width="55px"

}

function myf3 (){

var    y=document.getElementById('2');

y.style.width="10px"

}

</script>

</head>

<body>

<div class="menu">

<ul>

<div class="cat" id="1"></div><li  onmouseover="myf ();" onmouseout="myf1 ();"><a href="#" >تیتر</a></li>

<div class="cat" id="2"></div><li   onmouseover="myf2 ();" onmouseout="myf3 ();"><a href="#" >تیتر</a></li>

</a></li>

</ul>

<p style="float:left;">قســـــــــــــــــــــــــــــــــــــمت جستــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ و جو</p>

</div>

</body>

</html>

پیشنمایش:
http://upcom.ir/upload/oni9mzrr1p3ba58dn0la.html

**AmirArshan** · 93-10-27، 04:14 عصر

(93-10-26، 01:24 صبح)happyman نوشته است: من از این روش استفاده کردم:

کد:

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style> *{padding:0;margin:0;border:0;font-family:b yekan;text-align:center;} .menu{ width:80%; height:50px; background:rgba(93,106,207,1.00); display:inline-block; padding-right:5px; } .menu ul{ list-style:none; display:inline-block; float:right; } .menu li{ margin-left:10px; background:rgba(76,224,166,1.00); text-align:right; width:30px; float:right; height:50px; padding-right:50px; } .menu li a { display:inline-block; text-decoration:none; color:black; } .cat{ height:50px; width:10px; background:rgba(170,237,17,1.00); float:right; } </style> <script> function myf (){ var x=document.getElementById('1'); x.style.width="55px" } function myf1 (){ var x=document.getElementById('1'); x.style.width="10px" } function myf2 (){ var y=document.getElementById('2'); y.style.width="55px" } function myf3 (){ var y=document.getElementById('2'); y.style.width="10px" } </script> </head> <body> <div class="menu"> <ul> <div class="cat" id="1"></div><li onmouseover="myf ();" onmouseout="myf1 ();"><a href="#" >تیتر</a></li> <div class="cat" id="2"></div><li onmouseover="myf2 ();" onmouseout="myf3 ();"><a href="#" >تیتر</a></li> </a></li> </ul> <p style="float:left;">قســـــــــــــــــــــــــــــــــــــمت جستــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ و جو</p> </div> </body> </html>

پیشنمایش:
http://upcom.ir/upload/oni9mzrr1p3ba58dn0la.html

سلام؛ خیلی ممنون! یه چیزایی فهمیدم. Heart

ورود
نام کاربری:
گذرواژه‌:	گذرواژه‌تان را فراموش کرده‌اید؟
	مرا به خاطر بسپار

بک لینک