Egyszerű elrendezés position-el (float nélkül)

Az előző példában úsztatással pozicionáltuk a hasábokat. Ebben a példában float (úsztatás) nélkül, a position: relative és position: absolute CSS tulajdonságok segítségével fogunk hasonló elrendezést létrehozni:

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 &copy; 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

Egyszerű elrendezés position-el (float nélkül)

1 thought on “Egyszerű elrendezés position-el (float nélkül)”

Leave a Comment Cancel Reply