Mérei Tamás webdesigner   »   HTML, CSS   »   CSS pozicionálás

CSS pozicionálás

Szerző:   |   2014-07-19

Ez a rész valamiért teljesen kimaradt a korábbi HTML+CSS videókból, úgyhogy most megnézzük mi a különbség a static, absolute, relative és fixed pozicionálás között.

A működő kódot ide kattintva tudod megnézni.

Videó

Videó

HTML forráskód


<html>
<head>
	<title>CSS</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="style.css">
	<script src="jquery.js"></script>
	<script src="script.js"></script>
</head>
<body>
	<header>fejléc</header>
	<section>
		<article>
			<div class="image">
				<span class="sale">-20%</span>
				<span class="icon-star"></span>
				<a href=""><img src="1.png" alt=""></a>
			</div>
			<h2><a href="">LG G3 D855 16GB Mobiltelefon</a></h2>
			<p>150 000 Ft</p>
			<button>kosárba <span class="icon-cart"></span></button>
		</article>
	</section>
</body>
</html>

CSS forráskód


@font-face {
	font-family: 'fontello';
	src: url('font/fontello.eot?83039761');
	src: url('font/fontello.eot?83039761#iefix') format('embedded-opentype'), url('font/fontello.woff?83039761') format('woff'), url('font/fontello.ttf?83039761') format('truetype'), url('font/fontello.svg?83039761#fontello') format('svg')
}
[class^="icon-"]:before, [class*=" icon-"]:before {
	font-family: "fontello";
	display: inline-block
}
.icon-star:before { content: '\e800' }
.icon-cart:before { content: '\e801' }
*  {
	padding:0;
	margin:0;
	border:0;
	outline:none;
	font-family:arial;
	font-size:14px
}
a {
	text-decoration:none;
	color: #0d9ac7
}
section {
	margin: 100px auto 1000px auto;
	width: 200px
}
article {
	background: #f4f4f4;
	border: 1px solid #ddd;
	text-align: center;
	padding: 10px
}
button {
	background: #0d9ac7;
	color: #fff;
	padding: 5px 15px;
	font-size: 18px;
	cursor: pointer;
	margin-top: 10px
}
button:hover { background: #0b7ea2 }
button .icon-cart {
	margin-left: 5px;
	font-size: 20px
}
p {
	font-weight: bold;
}
h2 {
	margin: 10px 0;
	font-weight: normal
}
.image {
	background: #fff;
	padding: 10px;
	position: relative
}
.image span {
	position: absolute
}
.image .icon-star {
	top: 10px;
	left: 10px;
	font-size: 20px;
	color: lightgrey;
	display: none;
	cursor: pointer
}
.image:hover .icon-star,
.icon-star.active {
	display: inline-block
}
.icon-star.active {
	color: orange;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.2)
}
.image .sale {
	background: green;
	color: #fff;
	font-weight: bold;
	font-size: 15px;
	padding: 3px 10px;
	bottom: 10px;
	right: 10px
}
header {
	background: #0d9ac7;
	color: #fff;
	text-align: center;
	padding: 10px;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100
}

jQuery forráskód


$(document).ready(function() {
	$(".icon-star").click(function(){
		$(this).toggleClass("active");
	});
});

10 hozzászólás

  1. 2015. április 18. szombat - 15:22

    Hello Cyrex!
    Az miért van, hogyha a menüt absolute pozícionálom a headeren belüli divhez (ugyan úgy ahogy a te blogodon is van) akkor a menü utolsó elemét mindig a sor alá töri? Nálad ahogy néztem nem adtál meg a nav tagre 100%-os szélességet mégsem törik meg a menü, hanem felveszi azt a szélességet amekkorát a benne lévő tartalom igényel.

    Válaszodat előre is köszönöm!

    Válasz
    • 2015. május 9. szombat - 11:48

      Gondolom nincs elég helye a menünek, ezért töri alá az utolsó menüpontot.

  2. 2015. február 16. hétfő - 19:40

    szia, egy kis segítséget szeretnék kérni, a képeimet szeretném középre helyezni mint pl http://wphu.org/ ezen az oldalon, annyi különbséggel hogy nem a backroundban akarom deklarálni hanem classban, hogy több képhez is hozzá tudjam adni

    válaszodat előre is köszönöm

    Válasz
    • 2015. február 19. csütörtök - 22:55

      Nézem a wphu.org oldalt, de nem értem pontosan, hogy mire gondolsz.

  3. 2014. augusztus 1. péntek - 20:21

    Hello, köszi a videót hasznos volt. Az lenne a kérdésem ami már régóta motoszkál az agyamba, hogy lehet title szöveg mellé képet beszúrni?

    Válasz
    • 2014. augusztus 3. vasárnap - 20:04

      Title attribútumba nem lehet képet rakni. Van olyan megoldás amivel meg lehet oldani, hogy feljöjjön egy magyarázó szöveg amikor a link fölé húzod az egeret, és oda lehet képet is beszúrni, de ez már JS.

  4. 2014. július 21. hétfő - 21:21

    Nagyon szépen köszönöm Tamás a videót, hasznos volt, sok újdonságot tanultam ami már rég törte a fejemet. 🙂
    További szép napot.

    Válasz
  5. 2014. július 21. hétfő - 09:10

    Remek videó ! Köszönjük.

    Válasz
  6. 2014. július 19. szombat - 15:27

    Szia!
    Nagyon hasznos volt számomra ez a tutorial, mivel css-hez annyira nem értek. 😀
    Viszont lenne egy kérdésem ami nem éppen a témához kapcsolódik:
    Lesz-e esetleg egy olyan tutorial sorozat, amelyben egy teljes websiteot csinálsz?
    magyarul: belépés,regisztráció,profil,hírek stb..
    Nem egy Facebook nagyságú oldal, csak egy ilyen alap cucc 😀
    Előre is köszi a választ:
    Balu 🙂

    Válasz
    • 2014. július 21. hétfő - 21:49

      Nem, mert ez egy webdesign blog én pedig nem vagyok programozó.

Hozzászólás mégsem

  Adatvédelmi nyilatkozat

Keresés a blogon
Kategóriák
Legújabb hozzászólások