Problem oko HTML/CSS strukture

NemanjaWP

Početnik
Poruka
2
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,negde imam gresku ali je ne vidim.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);
}
 
Nemanja zar ti nebi bilo lakše instalirati Wordpress i ubaciti u njega Woocommerce.
U WP možeš dodati kasnije dodatke za SEO a WC ima u sebi već implementiranu Schema.org/Product
Teško mi je za razumeti da to može dobro da izgleda u statici, pogotovo što će ti kasnije biti potreban i jedan blog
za promociju sadržaja, imajući u vidu da imaš malo proizvoda.
 
Ne kapiram ja sta ti hoces da uradis, ali za header da bi menjao boju kada skrolujes treba ti jQuery. Mozda moze da se uradi nesto pomocu samo CSS3, mada nisam siguran.
Sa jQuery-jem, cim detektujes scroll, dodas klasu lupam sada .blue_header i header ti postane plav. Ako hoces da budes hardcore, uvek mozes da radis iz obicnog JavaScripta.
 
Skinuo sam jedan template http://startbootstrap.com/template-overviews/creative/ . Ja sam nesto doradjivao(preciznije menjao na samoj strukturi tipa da sam ubacio sekciju za shop https://jsfiddle.net/usz2w5fL/ ali ne mogu da podesim da mi proizvodi izgledaju kao na slici pocevsi od naziva proizvoda,slike,opisa,cene i dugmica https://snag.gy/fTdvej.jpg .Drugi problem je da mi jedna sekcija koja izgleda ovako https://snag.gy/mStL9H.jpg, ali kada smanjim velicinu nekako se slike i tekst lepe jedna preko druge,nikako nije responsive. https://jsfiddle.net/guh7eov1/ ovo je kod za taj deo.I treci problem je footer,nesto sam pokusavao ali nikako mi ne ide Sorry .Imam tri odeljka https://jsfiddle.net/9rv17bt2/ Ne znam kako da podesim da mi budu i istoj ravni jedan pored drugog tj. logo da je prvi i 2 stavke pored.Cela html/css struktura izgleda ovako http://codepen.io/WuDangTaoist/pen/JKPrvP .
Izvinite na smetnji i Hvala unapred.
p.s. Nemojte mi zameriti ako ne znam,mozda je ovo za nekog ko je mnogo iskusniji nista,ali za nekog ko je tek poceo izgleda kao bauk.
Jos jednom izvinite na preopsirnom pitanju i hvala unapred.
 

Back
Top