مشکل جالب با HTML

[javad3]

سلام خدمت دوستان
من به تازگی به این انجمن اومدم و خیلی خوشحالم در جمع شما هستم
مشکل جالبی با html داریم
این مشکل با 4 مرورگر مختلف و با 2 ادیتور یکی Dreamweaver CS5.5 و visual studio تست شده و دو ماهی هست درگیرم باهاش
ما یک دیو با مشخصات زیر درست کردیم :
<div style="position:absolute; top:13px; background-color:black; left: 28px; width: 100%; height: 57px;left:0px">
تا اینجا که مشکلی نیست داخل این دیو یک دیو دیگه درست کردم تا لوگو سایت رو بزاریم :
<div id="logo" style="position:absolute; left: 80%; top: 13px; width: 128px; height: 32px;"><img src="Logo2 (2).png" width="128" height="32"></div>

صفحه وقتی ماکزیمام هست مشکلی نیست ولی وقتی کوچیک میکنیم به هم میریزه
مانند عکس های زیر :
عکسی که به صورت ماکزیمم مرورگر گرفته شده و همه چیز اوکی هست
93119

عکسی که موقع مینیمم کردن مرورگر گرفته شده و بالاب صفحه سمت راست لوگو افتاده قسمت سفید رنگ با اینکه ما width: 100% دادیم
93120

ممنون میشم دوستان راهنمایی کنید
با تشکر

[IamOverlord]

سلام دوست عزیز...
به به، یه عکس هم از ScrollBar به سمت چپ بگیرید ببینیم (عکاسیتون خوبه!)...
احتمالا در اون صورت مکان Logo درست می شه... نه؟

[javad3]

سلام خدمت شما دوست عزیز
سمت چپ ScrollBar نداره
زمانی که مرورگر ماکزیمم باشه مثل عکس بالا مشکلی نیست وقتی مینیمم میکنم این مشکل پیش میاد
ممنونم از شما

[Saber Mogaddas]

سلام
دوست عزیز اول اینکه استفاده از position:absolute باعث شناور شدن المنت در درون مرورگر میشه مگر اینکه داخل المنتی باشه که دارای دستور css به صورت position:relative باشه..
دوم اینکه اینجا اصلا لزومی به استفاده از position:absolute نیست.
کد هاتون رو بهصورت زیر تغییر بدید :


<div style="background-color:black; width: 100%; height: 57px;margin:0;padding:0;">

اگه نیاز هست تا header سیاه رنگ از قسمت بالا فاصله داشته باشه از دستور margin-top استفاده کنید .
و استایل های دیو دوم رو به شکل زیر تنظیم کنید :


div id="logo" style="float:right; width: 128px; height: 32px;margin-right:15px;margin-top:13px;"><img src="Logo2 (2).png" width="128" height="32"></div>

با تغییر مقادیر margin-right,margin-top موقعیت لوگو رو در جایی که دوست دارید تنظیم کنید.
دقت کنید به کل دستور position رو از استایل های شما حذف کردیم و برای جایگرین از دستورات floatوmargin که قابلیت کنترل راحتی دارند، استفاده کردیم..
موفق باشید.