سوال: به هم ریختن منو در اثر تغییر سایز صفحه [بایگانی]

ehsan-usr

سه شنبه 09 خرداد 1391, 09:39 صبح

سلام. من یه منو آبشاری با CSS ساختم. اما وقتی توی صفحه zoo out میکنم از یک طرف کشیده میشه و یا وقتی اندازه پنجره مرورگر رو کوچیک میکنم ایتم های منو زیر هم قرار میگیره. با خاصیت float هم مقداری امتحان کردم اما نشد. باید چیکار کنم.؟اینم کد CSS منو هست.

#navigation{

width:65%;
height:30px;
background-color:#999;
margin-left:200px;
}

#navigation ul
{margin:0px; padding:0px;}

#navigation ul li
{display:inline; height:30px; float:left; list-style:none;margin-left:22px; padding-left:20px; padding-right:100px; }
#navigation li a
{color:#fff; text-decoration:none;}

#navigation li a:hover
{text-decoration:underline;}

#navigation li ul
{
margin:0px;
padding:0px;
display:none;
}

#navigation li:hover ul
{
display:block;
width:125px;
}

#navigation li li
{
list-style:none;
display:list-item;
width:100%;
}
#navigation ul li
{
display:inline;
height:30px;
float:left;
list-style:none;
margin-left:15px;
position:relative;
}
#navigation li ul
{
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
top:30px;
background-color:#999;
}
#navigation li li a
{color:#fff; text-decoration:none;}

#navigation li li a:hover
{text-decoration:underline;}

#navigation ul ul li
{
margin-left:10px;

mahrokh202

سه شنبه 09 خرداد 1391, 09:45 صبح

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

ehsan-usr

سه شنبه 09 خرداد 1391, 23:25 عصر

سلام اگه کد منوت رو تو یه تگ div قرار بدی فک کنم درس شه
خوب اون که البته. من اینجا کد CSS اون رو گذاشتم

Saber Mogaddas

چهارشنبه 10 خرداد 1391, 11:24 صبح

سلام
دوست من تنها با گذاشتن کد css که نمیشه که فهمید مشکل شما از کجاست ..
من الان می تونم از روی این css حدس بزنم که کدوم استایل برای کدوم تگ هست و یا اصلا منو شما مشکلش چیه ؟
کد های html منو رو هم بزارید تا بررسی شه..

ehsan-usr

چهارشنبه 17 خرداد 1391, 22:19 عصر

سلام
دوست من تنها با گذاشتن کد css که نمیشه که فهمید مشکل شما از کجاست ..
من الان می تونم از روی این css حدس بزنم که کدوم استایل برای کدوم تگ هست و یا اصلا منو شما مشکلش چیه ؟
کد های html منو رو هم بزارید تا بررسی شه..

دوست عزیز کد html اون رو هم گذاشتم این پایین . CSS اونو هم که اون بالا قرار دادم.

<body>

<div id="logo"><img src="public\logo.jpg"
style="width: 1000px; height: 180px; margin-left: 150px; margin-right: 150px" />
</div>
<div id="navigation" >
<ul>
<li style="font-size:22px; "><a href="">Television</a>

<ul> <li style="font-size:18px; "><a href="">Sony</a></li>
<li style="font-size:18px; "> <a href="">Samsung</a></li>
<li style="font-size:18px; "><a href="">LG</a></li>
<li style="font-size:18px; "><a href="">Panasonic</a></li>
</ul>
</li>

<li style="font-size:22px;"><a href="">LapTop</a>

<ul> <li style="font-size:18px; "><a href="">Dell</a></li>
<li style="font-size:18px; "><a href="">Sony</a></li>
<li style="font-size:18px; "><a href="">Asus</a></li>
<li style="font-size:18px; "><a href="">Toshiba</a></li>
</ul>
</li>

<li style="font-size:22px;"><a href="">Mobile </a>
<ul> <li style="font-size:18px; "><a href="">Nokia</a></li>
<li style="font-size:18px; "><a href="">Sonyericson</a></li>
<li style="font-size:18px; "><a href="">Samsung </a></li>
</ul>
</li>

<li style="font-size:22px;"><a href="">Camera</a>
<ul> <li style="font-size:18px; "> <a href="">Canon</a></li>
<li style="font-size:18px; "><a href="">Sony</a></li>
<li style="font-size:18px; "><a href="">Nikon </a></li>
</ul>
</li>
</ul>

</div>

saadatieathar

یک شنبه 21 خرداد 1391, 13:49 عصر

سلام.
من که نتونستم مشکلش رو پیدا کنم.
یه کد منوی آبشاری می ذارم برات که این مشکل رو نداره،وقتی تغییر سایز بدی یا هر کاری به هم نمی ریزه.
ظاهر خوبی هم داره،خواستی می تونی اون منوهات رو با این کد پیاده سایزی کنی فقط ظاهرش رو یه کم دستکاری کنی شبیه منوی خودت میشه.

<style>
*{ margin:0px; padding: 0px; }
#nav
{
font-family: arial, sans-serif;
position: relative;
width: 390px;
height:56px;
font-size:14px;
color:#999;
margin: 0 auto;
}

#nav ul {
list-style-type: none;
}

#nav ul li
{
float: left;
position: relative;
}

#nav ul li a
{
text-align: center;
border-right:1px solid #e9e9e9;
padding:20px;
display:block;
text-decoration:none;
color:#999;
}
#nav ul li ul
{
display: none
}
#nav ul li:hover ul
{
display: block;
position: absolute;
}

#nav ul li:hover ul li a
{
display:block;
background:#12aeef;
color:#ffffff;
width: 110px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
border-right: none;
}

#nav ul li:hover ul li a:hover
{
background:#6dc7ec;
color:#fff;
}
</style>

<div id="nav">
<ul>
<li class="first"><a href="#">Home</a></li>
<li><a href="#">About Me</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>

<li><a href="#">Portfolio</a>
<ul>
<li><a href="#">3</a></li>
<li><a href="#">2</a></li>
<li><a href="#">1</a></li>
</ul>
</li>
<li><a href="#">Contact Me</a>
<ul>
<li><a href="#">3</a></li>
<li><a href="#">2</a></li>
<li><a href="#">1</a></li>
</ul>
</li>
</ul>
</div>

Saber Mogaddas

یک شنبه 21 خرداد 1391, 14:22 عصر

سلام
استایل زیر را جایگزین navigation# بکنید..

#navigation{

width: 900px;
height:30px;
background-color:#999;
margin: 0 auto;
}

موفق باشی..

cyrusthegreat

دوشنبه 29 خرداد 1391, 16:22 عصر

دوست عزیز

مشکل شما به این بر میگرده که هر مرورگر بگونه این صفحه رو کوچیک یا بزرگ می کنه. یعنی المان های صفحه رو به یک اندازه کوچیک و یا بزرگ نمی کنه (البته کروم این قابلیت رو داره که کامل و با هم کوچیک یا بزرگ کنه). این مشکل نیست. چون حالت زوم کردن، یه قابلیت مربوط به مرورگر هست. ولی علت این اتفاق در طول عرضی هست که به المان و عناصر داخلش میدید. با سعی و خطا میشه اندازه هایی رو یافت که در اونها این مشکل وجود نداره. چون این مشکل یه مشکل روتین نیست عزیز.

ehsan-usr

سه شنبه 30 خرداد 1391, 23:03 عصر

سلام
استایل زیر را جایگزین navigation# بکنید..

#navigation{

width: 900px;
height:30px;
background-color:#999;
margin: 0 auto;
}

موفق باشی..

سلام کاری که گفته بودی رو انجام دادم. اما هنوز این مشکل هست ؟!

Saber Mogaddas

چهارشنبه 31 خرداد 1391, 11:18 صبح

سلام
من این کدی که شما گذاشتین رو با min , max کردن مرورگر تست کردم ومشکلی که شما گفتین رو نداشت و منو سر جاش بود و آیتم های منو تغییری نکرد..
فکر کنم مشکل شما با منو حل شده و الان مشکلی که دارید از wraper اصلی سایت هست ، با توجه به اینکه شما برای وسط نگه داشتن بنر سایت از margin-left , و margin-right استفاده کردید به جای استفاده از margin : 0 auto;
من الان اون قسمت رو براتون درست کردم ولی به احتمال قوی شما در قسمت محتوای سایت نیز این مشکل رو خواهید داشت ..
برای حل این مشکل شما باید به wraper محتوای کلی که تشکیل شده از بنر ، منو ، محتوا ، فوتر .. margin:auto بدید تا در وسط صفحه قرار بگیره و همراه خودش تمامی محتویات خود رو تو وسط مرورگر قرار بده و بعد برای Wraper های داخلی مثل منو بنر و.. float:right بدید تا به ترتیب در داخل wraper اصلی قرار بگیرن..
من تو صفحه ای که در پایین ضمیمه کردم به این صورتی که گفتم بنر و منو رو داخل wraper قرار دادم ، شما نیز سعی کنید به این ترتیب محتوا و فوترتون رو داخل این wraper قرار بدید..
88497

ehsan-usr

چهارشنبه 31 خرداد 1391, 21:49 عصر

سلام
من این کدی که شما گذاشتین رو با min , max کردن مرورگر تست کردم ومشکلی که شما گفتین رو نداشت و منو سر جاش بود و آیتم های منو تغییری نکرد..
فکر کنم مشکل شما با منو حل شده و الان مشکلی که دارید از wraper اصلی سایت هست ، با توجه به اینکه شما برای وسط نگه داشتن بنر سایت از margin-left , و margin-right استفاده کردید به جای استفاده از margin : 0 auto;
من الان اون قسمت رو براتون درست کردم ولی به احتمال قوی شما در قسمت محتوای سایت نیز این مشکل رو خواهید داشت ..
برای حل این مشکل شما باید به wraper محتوای کلی که تشکیل شده از بنر ، منو ، محتوا ، فوتر .. margin:auto بدید تا در وسط صفحه قرار بگیره و همراه خودش تمامی محتویات خود رو تو وسط مرورگر قرار بده و بعد برای Wraper های داخلی مثل منو بنر و.. float:right بدید تا به ترتیب در داخل wraper اصلی قرار بگیرن..
من تو صفحه ای که در پایین ضمیمه کردم به این صورتی که گفتم بنر و منو رو داخل wraper قرار دادم ، شما نیز سعی کنید به این ترتیب محتوا و فوترتون رو داخل این wraper قرار بدید..
88497

ازتون ممنونم. و حالا یه چیز دیگه. اگر دقت کرده باشید. نوشته های منو در وسط قرار نداره. یعنی فاصله کلمه Television و Camera از دو طرف صفحه یکسان نیست. برای حل این مشکل باید چیکار کرد ؟

Saber Mogaddas

پنج شنبه 01 تیر 1391, 12:10 عصر

سلام
تو این منو از margin-left برای li ها استفاده کردین میتونید با افزایش مقدار اون آیتم های منو رو تنظیم کنید ..البته قبل این کار به ul لیست باید عرض و ارتفاع و float بدید./

mehdi-r2

شنبه 20 آبان 1391, 14:01 عصر

منم همین مشکل را دارم وقتی zoom out منو تغییر نمیکنه ولی zoom in میکنم منو میره سمت راست بنظرتون چیکار کنم درست بشه؟

Naji22

یک شنبه 15 تیر 1393, 02:54 صبح

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