• Poštovani posjetitelju, za korištenje svih mogućnosti koje InternetZarada Forum omogućuje, predlažemo ti da se registriraš. Besplatno je i tvoja privatnost je potpuno zaštićena. Registracija ti omogućuje pristup svim kategorijama i temama, mogućnost pristupa privicima u postovima (slike, video, tutorijali, uputstva itd), pristup malom oglasniku (Tržnica), direktnu komunikaciju s članovima putem privatnih poruka, automatsko praćenje tema od interesa i još mnogo toga. Veselimo se tvojoj prijavi! ❤️

Pomoc oko HTML/CSS

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 :D

<!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">&copy;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);
}
 
Napravi 6 divova iste velicine i poredjaj ih pomocu css-a...Kasnije samo ubacis slike tih proizvoda u te divove i to je to..Ako ne znas moj ti je savet da pogledas turtorijale na yt trebace ti 4,5 dana da naucis pravilno da koristis html i css.Pozdrav
 
Back
Na vrh