Az előző példában úsztatással pozicionáltuk a hasábokat. Ebben a példában float (usztatás) nélkül, a position: relative és position: absolute CSS tulajdonságok segítségével fogunk hasonló elrendezést létrehozni:
Layout with “position” CSS property
A dobozok elrendezése:
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <title>Layout with position</title> <link rel="stylesheet" href="stlye.css"> </head> <body> <div id="container"> <div id="header"></div> <div id="content-wrapper"> <div id="menu-bar"></div> <div id="content"></div> <div id="side-bar"></div> </div> <div id="footer"></div> </div> </body> </html>
A HTML tartalom:
<body>
<div id="container">
<div id="header">
<h1>Layout with position</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque veniam aliquid.</p>
</div>
<div id="content-wrapper">
<div id="menu-bar">
<ul id="menu">
<li>Menuitem 1</li>
<li>Menuitem 2</li>
<li>Menuitem 3</li>
<li>Menuitem 4</li>
<li>Menuitem 5</li>
</ul>
</div>
<div id="content">
<h2>Layout with position</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt blanditiis, aspernatur eius labore, cum dolorem officia laudantium nemo sapiente obcaecati asperiores itaque, perspiciatis. Tenetur maxime exercitationem voluptas, consequatur soluta incidunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae inventore, qui dicta ut eaque minus ducimus, quis culpa suscipit ratione dolor, distinctio. Harum, hic nobis repudiandae deleniti corrupti eveniet beatae.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi et magni repudiandae id provident? At itaque aperiam, quae deserunt exercitationem ea. Dolores ad perferendis enim vero. Ut, nemo consectetur iusto.</p>
</div>
<div id="side-bar">
<h3>Side-bar</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt aperiam, ut voluptate, dicta magni error illum enim sit vel modi corporis minima doloribus quidem dolore debitis atque est! Earum, et.</p>
</div>
</div>
<div id="footer">
<p>Copyright © 2018</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id vero pariatur accusantium, doloribus doloremque facere, sequi ipsum est laboriosam sint. Consequuntur atque quaerat sequi, perspiciatis distinctio omnis aspernatur voluptates modi.</p>
</div>
</div>
</body>Lássuk az egyes dobozok CSS tulajdonságait:
#container:
#container {
max-width: 800px;
margin: 20px auto;
}A #container szélességét célszerű max-width-el megadni, hogy minimálisan reszponzív legyen.
#header:
#header {
background: #5b5;
border-radius: 5px;
padding: 20px;
margin-bottom: 10px;
color: white;
}#content-wrapper:
#content-wrapper {
position: relative;
}A HTML elemek alapértelmezetten position: static; tulajdonságúak, ami gyakorlatilag azt jelenti, hogy nincsenek pozicionálva, hanem az oldal normál folyásának megfelelően helyezkednek el. Ezzel együtt nem hatnak rájuk a pozicionált elemekre érvényes top, right, left, bottom tulajdonságok. A position: relative; tuladonság azt jelenti, hogy az adott elem a normál elhelyezkedéséhez képest (azaz relatíve) hol helyezkedjen el. Az pozicionálást a top, right, left, bottom tulajdonságokkal lehet megadni. Mivel nem adtunk meg erre vonatkozóan semmit a #content-wrapper elemre, ezért gyakorlatilag – egyelőre – semmi latható változást nem okoz. Jelentősége a benne elhelyezett elemek esetében lesz.
#content:
#content {
margin: 0 200px;
padding: 10px;
}A #content elemre méretes margókat alkalmazunk jobb és bal oldalon, ezzel készítjük elő a helyet a #menu -bar és #sidebar elemeknek:
#menu-bar:
#menu-bar {
position: absolute;
top: 0;
left: 0;
width: 200px;
border-radius: 5px;
}#side-bar:
#side-bar {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 180px;
background: #39d;
border-radius: 5px;
padding: 10px;
color: white;
}A #menu-bar és a #side-bar elemekre a position: absolute; tulajdonságot állítjuk be. A position: absolute; tulajdonság azt jelenti, hogy az adott elemet a hozzá legközelebb levő pozicionált (az az position tulajdonsággal rendelkező) szülő eleméhez képest tudjuk pozicionálni. A viszonyítási pont ezen szülő elem (vagyis a #content-wrapper ) bal felső sarka. A #menu-bar esetén a top: 0; és left: 0;, a #side-bar esetén a top: 0; és a right: 0; tulajdonságokkal tudunk a #content-wrapper bal- és jobb felső sarkához igazítani.
Ezt kaptuk:
Néhány további formázás a #menu-n és a #footer-en, és készen is van.
#menu:
/* Menu */
#menu {
list-style: none;
padding: 0;
}
#menu li {
padding: 10px;
background: #eee;
margin-bottom: 5px;
border-radius: 5px;
}#footer:
#footer {
border: 1px solid #ccc;
border-radius: 5px;
background: #eee;
padding: 10px;
font-size: 80%;
margin-top: 10px;
}Végeredmény itt látható: Layout with position
1 comment for “Egyszerű elrendezés position-el (float nélkül)”