CSS pozicionálás

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");
    });
});