Pomoc oko HTML/CSS

Lotina · 22.04.2016

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>


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



<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

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



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)

kobayashi · 22.04.2016

Mnogo stvari je postavljeno pogrešno, ako je ovo u svrhe učenja, onda je OK što pitaš, ali ti niko neće detaljno navoditi šta i kako da uradiš, već moraš nešto konkretno da uradiš pa da pitaš za savet ili ispravku greške.

Ovaj kod koji si dao je totalno haotičan.

Prvo, pravougaonici u kojima se nalaze proizvodi ne moraju da budu liste (to može biti OK za menije i sl., ovde je potpuno deplasirano), već mogu biti DIV elementi, koji imaju svoju visinu i širinu (očigledno je okvir istih dimenzija za sve proizvode), i svi mogu biti float:left, tako da se na širim ekranima prikazuje po 3, 4 ili čak svih 6 proizvoda u jednom redu (mada ne bih dozvoljavao toliku širinu strane).

Drugo, zašto svaka slika ima svoju class atribut, bolje je onda da bude id, mada je nepotrebno, mogu sve sličice da imaju jednu klasu koja će odrediti njihov izgled i poziciju.

Što se tiče oznake za korpu, u pitanju je najverovatnije tekstualni simbol (imaš Web fontove sa takvim simbolima), a pozicije tih elemenata možeš postaviti apsolutno u odnosu na okvir u kome se nalazi proizvod.

Ne možeš tražiti da ti sad neko reši 10 detalja na jednoj strani. Uradi nešto sam, pa pitaj za konkretan detalj, mada je najbolje da prvo pogledaš na stackoverflow, jer je verovatno neko već imao takav problem, postavio pitanje i dobio odgovor.

Opet kažem, ako je zbog učenja OK, ako ti je neko tražio da mu uradiš ovakav sajt, reci mu da kupi dizajn (pošto postoje webshop templejt sa ovakvim dizajnom, ali ne besplatni).
I ovo se ne radi u čistom HTML+CSS+JS, koristi se aplikacija na strani servera i baza podataka za proivode, a HTML se generiše na strani servera prema šablonu (templejtu).

Lotina · 22.04.2016

kobayashi je napisao(la):
Mnogo stvari je postavljeno pogrešno, ako je ovo u svrhe učenja, onda je OK što pitaš, ali ti niko neće detaljno navoditi šta i kako da uradiš, već moraš nešto konkretno da uradiš pa da pitaš za savet ili ispravku greške.

Ovaj kod koji si dao je totalno haotičan.

Prvo, pravougaonici u kojima se nalaze proizvodi ne moraju da budu liste (to može biti OK za menije i sl., ovde je potpuno deplasirano), već mogu biti DIV elementi, koji imaju svoju visinu i širinu (očigledno je okvir istih dimenzija za sve proizvode), i svi mogu biti float:left, tako da se na širim ekranima prikazuje po 3, 4 ili čak svih 6 proizvoda u jednom redu (mada ne bih dozvoljavao toliku širinu strane).

Drugo, zašto svaka slika ima svoju class atribut, bolje je onda da bude id, mada je nepotrebno, mogu sve sličice da imaju jednu klasu koja će odrediti njihov izgled i poziciju.

Što se tiče oznake za korpu, u pitanju je najverovatnije tekstualni simbol (imaš Web fontove sa takvim simbolima), a pozicije tih elemenata možeš postaviti apsolutno u odnosu na okvir u kome se nalazi proizvod.

Ne možeš tražiti da ti sad neko reši 10 detalja na jednoj strani. Uradi nešto sam, pa pitaj za konkretan detalj, mada je najbolje da prvo pogledaš na stackoverflow, jer je verovatno neko već imao takav problem, postavio pitanje i dobio odgovor.

Opet kažem, ako je zbog učenja OK, ako ti je neko tražio da mu uradiš ovakav sajt, reci mu da kupi dizajn (pošto postoje webshop templejt sa ovakvim dizajnom, ali ne besplatni).
I ovo se ne radi u čistom HTML+CSS+JS, koristi se aplikacija na strani servera i baza podataka za proivode, a HTML se generiše na strani servera prema šablonu (templejtu).

Ovo je zbog ucenja.Znam da je dosta haoticno i da ima sta da se prepravi,zato sam i stavio kod da se ne bi lupala glava sta sam hteo da kazem i da bi mi se dala smernica sta da prepravim.Dugoooo nisam radio nista u html/css zato sam i postavio pitanje.Nisam nista hteo na gotovo da mi neko uradi,vec sam trazio neku sugestiju.

Bazduljica · 25.04.2016

Imam par saveta i sugestija

Nije mudro raditi takav sajt kao HTML. Bolje se opredeliti za WordPress. Postoji gomila gotivih eCommerce šablona, a nisu ni preterano skupi.
Baza podataka je neophodna jer je nemoguće kontrolisati mnoštvo podataka (artikli, cene, ulaz-izlaz, zalihe...). Zašto gubiti vreme i izmišljati toplu vodu kada je ona odavno izmišljena.
Za vikend bilo malo viška vremena, pa sam jedan moj WordPress šablon malo "našminkala" za tvoje potrebe i konvertovala iz PHP u HTML (ako ne vladaš sa PHP da ti bude jasnije).
Šablon je WordPress, zove se Kimbo, premium je (plaća se), ali nije dobar za tebe jer je namenjen za blog tj. nije eCommerce tema. Ovde možeš da pogledaš kako izgleda originalni DEMO
Ovde je taj isti šablon, ali konvertovan u HTML. Slobodno ga PREUZMI ODAVDE radi vežbanja. Elementi su urađeni baš onako kako je sugerisao Kobayashi tj. kao DIV elementi. Nemoj da te zbuni preopširan CSS koji je za pravljen za kompletan šablon, a ja nisam htela da gubim vreme uklanjajući nepotrebne elemente.

Na kraju još jedan savet. Dok učiš apsolutno ZANEMARI ESTETIKU i posveti se isključivo suštini. Ako sve fercera bez greške, onda je lako da se naknadno našminka i okreči... :gl_wacko:

Bazduljica · 27.04.2016

U prethodnom postu sam se malo našalila... Sada sam potpuno ozbiljna.
Ovde sam dodala link gde možeš pogledati kako, na primer, izgleda prodaja Božićnih poklona u šablonu koji se zove TREND i pravljen je za WordPress:

U šablonu TREND moguće je birati čak TRI različita izgleda, a ponuđeni su Standardni, Parallax ili Fancy izgled.
Za svaki izgled postoji demo prikaz u okviru kojih su tematske prodaje za FASHION, FURNITURE, FLOWERS, FOOD, HANDMADE, VINES... pa biraj šta ti drago.

Naravno, niko ti ne brani da dan-dva preturaš po internetu tražeći bolji (lepši) šablon. Čak i da izgubiš 5 dana na surfovanje i to je manje vremena nego što je potrebno da sve uradiš sam od nule. A vreme je novac.
Sve ove šablone dobijaš za samo 59 $. Ako želiš da zarađuješ preko interneta dobro je znati da se u svaki posao mora uložiti neki dinarčić (evrić, dolarčić).

Lotina · 29.04.2016

Hvala puno na smernicama i na primerima

Sada cu da se bacim na posao i trazenje idealnog resenja tj. template-a

Pomoc oko HTML/CSS

Lotina

kobayashi

Lotina

Bazduljica

Bazduljica

Lotina