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
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...
-
WordPress sablon készítés
Idővel helyrejön magától....
-
WordPress sablon készítés
Üdv. Annyi lenne a kérdésem, hogy nemrég frissítettem a weboldalamon az SSL titkosítással kapcsolatos kulcsokat, certificate-okat, és minden böngészőb...
-
WordPress sablonkészítés
Nem vagyok programozó, de ezek nagyon alap dolgok. A WP-ben használt függvények nevei és paraméterei megtalálhatók a dokumentációban....
-
WordPress sablonkészítés
Szia Tamás! Valahol régebben írtad, hogy te webdesigner vagy és nem webfejlesztő (ahol már kódolás kell), mégis profin vágod a php-t. pl., hogy hívju...
-
A Bootstrap 4 grid használata
Nem tudom, én nagy projektekbe csak alvállalkozóként megyek bele ahol órabérben lehet számlázni és a fővállalkozó garantáltan fizet. De azt is csak ak...
-
WordPress sablonkészítés
Köszönöm szépen!...
-
WordPress sablonkészítés
add_action( 'wp_print_styles', 'remove_css', 100 ); function remove_css() { wp_dequeue_style( 'wp-block-library' ); wp_deregister_style( 'wp-b...
-
WordPress sablonkészítés
Szia Tamás! Hogy lehet kigyakni a head-ből az új, 5.0.2-es wordpress Gutenberg CSS link-rel sorát? Ezt: Próbáltam egy csomó remove_action-t de ...
-
A Bootstrap 4 grid használata
Az előleg hány százalék? Ha megcsinálod az egészet, és mégsem kell neki, akkor is bukod a teljes munkadíjat, nem? Vagy fázisonként fizettesz vele?...
-
Reszponzív weboldal tervezés Bootstrap használatával
A media object-ed tudod erre használni: https://www.w3schools.com/bootstrap/bootstrap_media_objects.asp...
-
Reszponzív weboldal tervezés Bootstrap használatával
Kedves Tamás! Nagyon szuper ez a videód is. Szeretnélek megkérdezni, hogy Bootstrap 3-ban működik-e az, hogy a dobozok szöveges tartalmát nem a doboz ...
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!