مشکل در استفاده از position ها
-
![yaraa]()
yaraa
- 95 ماه قبل
- 95 ماه قبل
- 293 نمایش
با سلام و احترام
همانطور که در تصویر زیر مشاهده میکنید طرح کلی بصورت فایل تصویری ضمیمه شده است.
همچنین کدهای دو فایل index.html و style.css طراحی شده در انتهای پست ارسال شده است.
ما دو بخش در طراحی داریم Header و Container که بصورت 2 تا DIV باید بصورت ردیفی در کنار هم قرار بگیرند. حالا Header خود 2 تا فرزند از نوع DIV دارد که نصب به آن موقعیت دهی می شوند. بنابراین position مربوط به هدر را relative و برای فرزندانش absolute در نظر می گیریم.
این امر باعث می شود DIV مربوط به Container که باید در زیر Header قرار بگیرد با مشکل مواجه شود و نمایش مورد نظر را نداشته باشیم.
حال اگر LOGO و LOGO-TITLE را از حالت absolute نسبت به والد خود Header خارج نماییم می توان پیش نمایش درست را داشت اما دیگر نمی توانیم آنها را نسبت به والدشان موقعیت دهی کنیم.
علت این امر چیست؟ راه حل رفع این مشکل چیست؟
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"/>
<div id="logo-title">Logo-Title</div>
</div>
<div id="container"></div>
</div>
</body>
</html>
@charset "utf-8";
body{
margin: 0 auto;
width: 980px;
background-color: #f1f1f1;
}
#header{
position: relative;
background-color: yellow;
height: 154px;
}
#logo{
position: absolute;
background-color: green;
width: 123px;
height: 146px;
margin-top: 4px;
margin-left: 4px;
}
#logo-title {
position: absolute;
color: darkblue;
font-size: 16pt;
bottom: 0;
margin-left: 60px;
}
#container {
background-color: white;
height: 600px;
width: 980px;
}
دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
پاسخ ها به این سوال
پست های وبلاگ
جدیدترین مقالات
سوالات محبوب
فعالترین سوالات