Gondolom nincs elég helye a menünek, ezért töri alá az utolsó menüpontot.
CSS pozicionálás
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ó
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
-
-
-
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
-
-
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?
-
-
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. -
2014. július 21. hétfő - 09:10
Remek videó ! Köszönjük.
-
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 🙂 -
Keresés a blogon
Kategóriák
Legújabb hozzászólások
-
A Bootstrap 4 grid használata
Azt használsz ami tetszik. A CSS reset cuccok többsége lassan 10 éves, ma már nem nagyon van rájuk szükség. Bootstrap akkor kell, ha az adott projekth...
-
A Bootstrap 4 grid használata
Szia! Nem rég kezdtem tanulni, kis segítséggel õssze tudok rakni egy oldalt Html+css a többivel még most ismerkednek. Nem nagyon vagyok vele tisztába ...
-
A villanyszerelés örömei panelben
Nem, én B-t raktam mindenhova és most már ötödik éve nincs vele gondom....
-
A villanyszerelés örömei panelben
Szia Jövő héten kezdek bele, egy ugyan ilyen projectbe. Még mindig tartod azt az állítást, hogy jó a C karakterisztikájú kismegszakító? És mé...
-
ActionScript 3 eseménykezelés
Sima CSS animációt....
-
ActionScript 3 eseménykezelés
Helló! Kiváló a "Banner mutációk" -ról szóló videód. A legnagyobb erénye számomra, hogy a hatékony munkavégzést is bemutattad. Amiért a flash témakor...
-
Egyszerű tükröződés készítése Photoshopban
Koszi:)...
-
Bootstrap carousel
Nem találkoztam még ilyennel, ezt a két linket találtam hozzá: https://stackoverflow.com/questions/16244306/single-picture-displaying-upside-down-in-b...
-
Adobe XD VS. Lunacy
Igen....
-
Adobe XD VS. Lunacy
Hali. Az adobe XD akkor is ingyenes, hogyha üzleti felhasználásra használom? Tehát eladom a munkám, amit vele csinálok?...
-
A Bootstrap 4 grid használata
Hali. Ez attól függ, hogy mit írsz bele a szerződésbe. Általában amúgy 50% előleget szoktak kérni, én is ennyit kérek az ügyfeleimtől, és a szerződésb...
-
Bootstrap carousel
Szia, Nem tudod miért fordít meg bizonyos képeket csak úgy a bootstrap ? Belinkelem a képet és gondol egyet és fejjel lefele illeszti be....
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!