SvetliTheKiller
Član
- Tu od
- 2 Tra 2011
- Postova
- 21
Pozdrav svima.Imam jedan mali problem.Poceo sam da radim jedan sajt od nule.Napravio sam pocetnu formu u html-u i nesto doterao u css-u.Ali glavni problem imam sa content sadrzajem,jer tu planiram da uradim shop(ima 6 proizvoda).https://snag.gy/fTdvej ,kao sto je na slici.Kako da u html/css-u doteram da to bude kao sto je na slici(kako da poredjam proizvode i tekst koji prati te proizvode sa tim da kruzic sa kolicima bude odmah ispod proizvoda a background textura da bude vidljiva iza proizvoda.Tekst,proizvod i kruzic da budu posebni elementi..Stranica je https://snag.gy/hytuNC ovog tipa. I pokusao sam da sredim header da menja boju kada se skroluje ali nikako da uspe kao i to da podesim sekciju ispod shopa(slika sa listom,tekstom i dva pravougaonika gde se nalazi tekst i pdf slikica kao sto je na primeru. Ovo sam ja nesto pokusavao ali ne znam kako dalje,zakucao sam se .Unapred zahvalan
<!DOCTYPE html>
<html>
<head>
<title>ZeolitFit</title>
<link href="style.css" type="text/css" rel="stylesheet">
<script type="text/javascript">
$(window).on("scroll", function() {
if($(window).scrollTop() > 500) {
$(".header").addClass("active");
} else {
$(".header").removeClass("active");
}
});
</script>
</head>
<body>
<header>
<div class="wrapper">
<div class="header">
<h1 class="logo"><a href="#main-banner">ZeolitFit</a></h1>
<nav>
<h2>Main Navigation</h2>
<ul>
<li><a href="#main-banner">STARTSEITE</a></li>
<li><a href="#shop">PRODUKTE</a></li>
<li><a href="">ÜBER UNS</a></li>
<li><a href="#footer">KONTAKT</a></li>
</ul>
</nav>
</div>
</div>
</header>
<!-----Start homepage---->
<div id="main-banner">
<img src="images/Header-background.jpg" alt="Welcome to ZeolitFit">
</div>
<div class="wrapper">
<div id="second-banner">
<img src="images/second-banner1.png">
</div>
<div id="shop">
<div class="wrapper">
<section id="shop">
<ul>
<li class="pic1">
<img src="images/product1..png">
</li>
<li class="pic2">
<img src="images/product2..png">
</li>
<li class="pic3">
<img src="images/product3..png">
</li>
<li class="pic4">
<img src="images/product4..png">
</li>
<li class="pic5">
<img src="images/product5..png">
</li>
<li class="pic6">
<img src="images/product6..png">
</li>
</ul>
</section>
</div>
</div>
<div class="wrapper">
<div id="trd-banner">
<img src="images/image3289.png" height="100" width="100">
</div>
</div>
</div>
<!----End homepage------->
<footer>
<div id="footer">
<div class="wrapper">
<ul>
<li style="margin:50px"><img src="images/white-logo.png"></li>
<li style="margin:-50px 50px">©All rights reserved ZeolithFit 2016</li>
</ul>
<ul style="float:center;margin:60px -30px;padding:-50px -90px">
<li style="font-family:Sans;color:#fff;text-align:center;font-size:18px">ZeolithFit</li>
<li style="font-family:Sans;color:#fff;text-align:center;font-size:16px">Gerlgasse</li>
<li style="font-family:Sans;color:#fff;text-align:center">1030 Wien</li>
<li style="text-align:center;font-size:16px">Geschaftsfuhrung:</li>
<li style="text-align:center;font-size:16px">eMail:</li>
<li style="text-align:center;font-size:16px">www.ZeolithFit.com</li>
<li style="text-align:center;font-size:16px">Telefon: </li>
</ul>
<ul style="margin:45px;padding:-70px 90px">
<li style="margin:20px;text-align:center;font-size:18px">Bankverbindung</li>
<li style="color:#fff;text-align:center">Oberbank AG Wien</li>
<li style="color:#fff;text-align:center">IBAN </li>
<li style="color:#fff;text-align:center">BIC: </li>
</ul>
</div>
</div>
</footer>
</body>
</html>
and CSS
body{
font-family:Tahoma;
margin: 0;
}
.wrapper{
width:100%;
max-width:1900px;
padding: 0 10px;
margin: 0 auto;
}
h1.logo{
background-image:url(images/Logo.svg);
background-repeat:no-repeat;
width:200px;
height:60px;
text-indent: -10000px;
float:left;
}
header nav{
float:left;
margin:1px 330px;
}
header nav h2{
text-indent: -10000px;
height:0;
margin:0;
}
header nav li{
float:left;
list-style-type:none;
margin:30px 20px;
}
header nav li a{
text-decoration:none;
color:#333;
font-size:17px;
text-align:right;
}
#main-banner,#main-banner img{
width:100%;
}
#second-banner,#second-banner img{
width:100%;
margin-top:-1px;
margin:-5px;
position:static;
}
#trd-banner,#trd-banner img{
width:100%;
margin:-10px;
}
#footer-below,#footer-below img{
width:100%;
}
.shop{
margin-top:-18px;
background-image:url(images/shopbg.png);
width:100%;
max-width: 1400px;
}
#shop ul{
padding:0 auto;
}
#shop li{
float:left;
width:46%;
margin:10px 20px -4px;
list-style-type: none;
}
#shop li img{
width:46%;
margin:0;
margin-top:10px;
margin-bottom:100px;
padding:0;
}
.pic1 img{
float:right;
width:100%;
-webkit-transition:width 2s,height4s;
transition:width 2s,height 4s;
}
.pic1:hover{
width:300%;
height:300%;
}
.pic3 img{
float:right;
width:100%;
}
.pic2 img{
width:100%;
}
.pic4 img{
width:100%;
}
.pic5 img{
width:100%;
float:right;
}
.pic6 img{
width:100%;
}
#shop li a{
color:#333;
text-decoration:none;
float:left;
}
#shop ul:after{
content="";
display:block;
clear:both;
}
footer{
background:#2a3a44;
margin-top:-3px;
padding:30px 0;
}
footer :after{
content: "";
display:block;
clear:both;
}
footer ul{
font-family:Sans;
font-size:14px;
float:left;
padding:0;
list-style-type:none;
color:#868f99;
width:30%;
margin-right:2%;
}
footer li{
margin:10px 110px 10px;
}
header{
position:fixed;
width:100%;
display:block;
background-color:transparent;
right:0;
left:0;
padding:0px;
}
header .scrolling {
background-color:#fff;
}
<!----Proba----->
html {
background:transparent;
height: 5000px;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 0;
z-index: 10000;
transition: all 0.2s ease-in-out;
height: auto;
background-color:transparent;
text-align: center;
line-height: 40px;
}
.header.active {
background:#fff;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}
<!DOCTYPE html>
<html>
<head>
<title>ZeolitFit</title>
<link href="style.css" type="text/css" rel="stylesheet">
<script type="text/javascript">
$(window).on("scroll", function() {
if($(window).scrollTop() > 500) {
$(".header").addClass("active");
} else {
$(".header").removeClass("active");
}
});
</script>
</head>
<body>
<header>
<div class="wrapper">
<div class="header">
<h1 class="logo"><a href="#main-banner">ZeolitFit</a></h1>
<nav>
<h2>Main Navigation</h2>
<ul>
<li><a href="#main-banner">STARTSEITE</a></li>
<li><a href="#shop">PRODUKTE</a></li>
<li><a href="">ÜBER UNS</a></li>
<li><a href="#footer">KONTAKT</a></li>
</ul>
</nav>
</div>
</div>
</header>
<!-----Start homepage---->
<div id="main-banner">
<img src="images/Header-background.jpg" alt="Welcome to ZeolitFit">
</div>
<div class="wrapper">
<div id="second-banner">
<img src="images/second-banner1.png">
</div>
<div id="shop">
<div class="wrapper">
<section id="shop">
<ul>
<li class="pic1">
<img src="images/product1..png">
</li>
<li class="pic2">
<img src="images/product2..png">
</li>
<li class="pic3">
<img src="images/product3..png">
</li>
<li class="pic4">
<img src="images/product4..png">
</li>
<li class="pic5">
<img src="images/product5..png">
</li>
<li class="pic6">
<img src="images/product6..png">
</li>
</ul>
</section>
</div>
</div>
<div class="wrapper">
<div id="trd-banner">
<img src="images/image3289.png" height="100" width="100">
</div>
</div>
</div>
<!----End homepage------->
<footer>
<div id="footer">
<div class="wrapper">
<ul>
<li style="margin:50px"><img src="images/white-logo.png"></li>
<li style="margin:-50px 50px">©All rights reserved ZeolithFit 2016</li>
</ul>
<ul style="float:center;margin:60px -30px;padding:-50px -90px">
<li style="font-family:Sans;color:#fff;text-align:center;font-size:18px">ZeolithFit</li>
<li style="font-family:Sans;color:#fff;text-align:center;font-size:16px">Gerlgasse</li>
<li style="font-family:Sans;color:#fff;text-align:center">1030 Wien</li>
<li style="text-align:center;font-size:16px">Geschaftsfuhrung:</li>
<li style="text-align:center;font-size:16px">eMail:</li>
<li style="text-align:center;font-size:16px">www.ZeolithFit.com</li>
<li style="text-align:center;font-size:16px">Telefon: </li>
</ul>
<ul style="margin:45px;padding:-70px 90px">
<li style="margin:20px;text-align:center;font-size:18px">Bankverbindung</li>
<li style="color:#fff;text-align:center">Oberbank AG Wien</li>
<li style="color:#fff;text-align:center">IBAN </li>
<li style="color:#fff;text-align:center">BIC: </li>
</ul>
</div>
</div>
</footer>
</body>
</html>
and CSS
body{
font-family:Tahoma;
margin: 0;
}
.wrapper{
width:100%;
max-width:1900px;
padding: 0 10px;
margin: 0 auto;
}
h1.logo{
background-image:url(images/Logo.svg);
background-repeat:no-repeat;
width:200px;
height:60px;
text-indent: -10000px;
float:left;
}
header nav{
float:left;
margin:1px 330px;
}
header nav h2{
text-indent: -10000px;
height:0;
margin:0;
}
header nav li{
float:left;
list-style-type:none;
margin:30px 20px;
}
header nav li a{
text-decoration:none;
color:#333;
font-size:17px;
text-align:right;
}
#main-banner,#main-banner img{
width:100%;
}
#second-banner,#second-banner img{
width:100%;
margin-top:-1px;
margin:-5px;
position:static;
}
#trd-banner,#trd-banner img{
width:100%;
margin:-10px;
}
#footer-below,#footer-below img{
width:100%;
}
.shop{
margin-top:-18px;
background-image:url(images/shopbg.png);
width:100%;
max-width: 1400px;
}
#shop ul{
padding:0 auto;
}
#shop li{
float:left;
width:46%;
margin:10px 20px -4px;
list-style-type: none;
}
#shop li img{
width:46%;
margin:0;
margin-top:10px;
margin-bottom:100px;
padding:0;
}
.pic1 img{
float:right;
width:100%;
-webkit-transition:width 2s,height4s;
transition:width 2s,height 4s;
}
.pic1:hover{
width:300%;
height:300%;
}
.pic3 img{
float:right;
width:100%;
}
.pic2 img{
width:100%;
}
.pic4 img{
width:100%;
}
.pic5 img{
width:100%;
float:right;
}
.pic6 img{
width:100%;
}
#shop li a{
color:#333;
text-decoration:none;
float:left;
}
#shop ul:after{
content="";
display:block;
clear:both;
}
footer{
background:#2a3a44;
margin-top:-3px;
padding:30px 0;
}
footer :after{
content: "";
display:block;
clear:both;
}
footer ul{
font-family:Sans;
font-size:14px;
float:left;
padding:0;
list-style-type:none;
color:#868f99;
width:30%;
margin-right:2%;
}
footer li{
margin:10px 110px 10px;
}
header{
position:fixed;
width:100%;
display:block;
background-color:transparent;
right:0;
left:0;
padding:0px;
}
header .scrolling {
background-color:#fff;
}
<!----Proba----->
html {
background:transparent;
height: 5000px;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 0;
z-index: 10000;
transition: all 0.2s ease-in-out;
height: auto;
background-color:transparent;
text-align: center;
line-height: 40px;
}
.header.active {
background:#fff;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}