Pereiti prie turinio

Pagalba su CSS

bladex19

Sukūrė bladex19
Programuotojų kampas

 Dalintis Sekėjai 1

Rekomenduojami pranešimai

bladex19

bladex19 57

Sukurta
Sukurta (redaguota)

Sveiki, mokinuos front-end programavimo darydamas oldschool PSD to HTML.

 

Atsirado problema, kad puslapis išsiplėtė į ilgį kai tvarkiau navigaciją. Nežinau kaip sutvarkyti, kad nereiktų slinkti puslapio į dešinę. Gal kas gali užvesti ant kelio?

 

HTML kodas

 

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style.css" rel="stylesheet" type="text/css">
<title>Movies</title>
 </head>
 <body>
   <div class="container">
     <header>
    <div class="logo">
      <a href="index.html"><img src="Images/logo.jpg" height="21" width="83" alt="logo"></a>
	</div>
    <ul>
      <li><a href="#">Browse</a></li>
	  <li><a href="#">Movies</a></li>
	  <li><a href="#">TV Shows</a></li>
	  <li><a href="#">News</a></li>
    </ul>
  </header>
  <div id="hero">
    <div id="content">
	  <div id="hero-logo">
	    <img src="Images/daredevil.png" height="141" width="375" alt="daredevil">
	  </div>
	  <div id="hero-logo2">
	    <img src="Images/netflix.png" height="18" width="54" alt="netflix">
	  </div>
	  <div id="text">
	    <p class="description">Matt Murdock, with his other senses superhumanly<br> enhanced, 
		fights crime as a blind Lawyer<br> by day, and vigilante by night.<p>
		<p class="info">54min  |  Action, Crime, Drama  |   TV Series (2015– )</p>
	  </div>
	  <div id="button">
	    <a href="#">Watch e#keiksmažodis#de</a>
	  </div>
	</div>
  </div>
  <main>
    <div id="container">
	  <div id="movies">
	    <a href="#"><h1>Popular Movies</h1></a>
	  </div>
	  <div id="grid">
	    <a href="#"><img src="Images/movie1.jpg" height="280" width="185" alt="movie"></a>
		<a href="#"><img src="Images/movie2.jpg" height="280" width="185" alt="movie"></a>
		<a href="#"><img src="Images/movie3.jpg" height="280" width="185" alt="movie"></a>
		<a href="#"><img src="Images/movie4.jpg" height="280" width="185" alt="movie"></a>
		<a href="#"><img src="Images/movie5.jpg" height="280" width="185" alt="movie"></a>
		<a href="#"><img src="Images/movie6.jpg" height="280" width="185" alt="movie"></a>
	  </div>
	  <div id="tv">
	    <a href="#"><h1>Popular TV Shows</h1></a>
	  </div>
	  <div id="grid">
	  <a href="#"><img src="Images/tv1.jpg" height="280" width="185" alt="tvshow"></a>
	  <a href="#"><img src="Images/tv2.jpg" height="280" width="185" alt="tvshow"></a>
	  <a href="#"><img src="Images/tv3.jpg" height="280" width="185" alt="tvshow"></a>
	  <a href="#"><img src="Images/tv4.jpg" height="280" width="185" alt="tvshow"></a>
	  <a href="#"><img src="Images/tv5.jpg" height="280" width="185" alt="tvshow"></a>
	  <a href="#"><img src="Images/tv6.jpg" height="280" width="185" alt="tvshow"></a>
	  </div>
	</div>
	<div id="news">
	  <div id="newstext">
	    <p>Get the movie & TV Shows straight<br> in your inbox each week</p>
	  </div>
	  <div id="inputs">
	    <input id="fn" type="text" value="First Name">
		<input type="text" value="Email">
	  </div>
	  <div id="btn">
	    <a href="#">Subscribe</a>
	  </div>
	</div>
  </main>
  <footer>
    <div id="flogo">
	  <img src="Images/flogo.png" height="21" width="83" alt="flogo">
	</div>
	<p id="cr">2016 Movies . All Rights Reserved</p>
	<ul id="fnav">
	  <li id="tos"><a href="#">Terms of Service</a></li>
	  <li><a href="#">Privacy Policy</a></li>
	</ul>
  </footer>
   </div>
 </body>
</html>

 

CSS kodas

 

* {
margin: 0;
   padding: 0;
   border: 0;
}

a {
text-decoration: none;
}

body {
background: #f1f1f1;
font-family: Calibri;
}

.container {
width: 1366px;
margin: 0 auto;
}

header {
height: 88px;
background: #fff;
}

.logo {
float: left;
margin-top: 34px;
margin-left: 59px;
}

header ul {
float: right;
list-style: none;
margin-top: 32px;
}

header ul li {
display: inline;
margin-right: 68px;
}

header ul li a {
font-size: 21px;
color: #b3b2b2;
}

header ul li a:hover  {
color: #000;
}

#hero {
background: url(Images/hero.jpg) no-repeat 50% 50%;
background-size: cover;
height: 634px;
}

#content {
float: right;
}

#hero-logo {
margin-top: 115px;
margin-right: 145px;
}

#hero-logo2 {
float: right;
margin-right: 170px;
margin-top: -35px;
}

#text {
margin-top: 15px;
margin-left: 18px;
}

p.description {
font-size: 21px;
color: rgb(220, 220, 220);
opacity: 0.4;
}

p.info {
font-size: 20px;
color: #fff;
margin-top: 30px;
}

#button a {
color: #fff;
font-size: 18px;
text-transform: uppercase;
float: right;
margin-top: 65px;
margin-right: 90px;
background-color: #b51c1c;
border: 1px solid #b51c1c;
border-radius: 5px;
padding: 10px 30px;
}

#container {
width: 1210px;
height: 1120px;
margin: 0 auto;
}

h1 {
font-size: 32px;
color: #5d5d5d;
}

#grid {
display: grid;
grid-template: 280px / repeat(6, 1fr);
}

#movies {
height: 170px;
}

#movies h1 {
padding-top: 110px;
}

#tv {
height: 220px;
}

#tv h1 {
padding-top: 160px;
}

#news {
height: 445px;
background: #2a292e;
text-align: center;
}

#newstext {
padding-top: 115px;
}

#newstext p {
font-size: 30px;
color: #fff;
}

#inputs {
margin-top: 36px;
}

input {
background-color: #403f44;
color: #fff;
font-size: 15px;
border: 2px solid #403f44;
border-radius: 5px;
padding: 15px 0px 15px 27px;
width: 200px;
}

#fn {
margin-right: 25px;
}

#btn a {
font-size: 15px;
color: #fff;
font-weight: bold;
background-color: #6ee595;
border: 1px solid #6ee595;
border-radius: 10px;
margin-top: 36px;
padding: 9px 50px 9px 50px;
display: inline-block;
}

footer {
height: 260px;
text-align: center;
}

#flogo {
padding-top: 55px;
}

#cr {
font-size: 24px;
color: #5d5d5d;
margin-top: 35px;
}

footer ul {
margin-top: 25px;
}

#fnav li {
display: inline;
}

#fnav a {
font-size: 19px;
color: #5d5d5d;
}

#fnav a:hover {
color: #000;
}

#tos {
margin-right: 25px;
}

 

P.S. Ar gerai rašau kodą? Jei kas blogai - sakykit.

Redagavo bladex19
Nuoroda į pranešimą
Dalintis kituose puslapiuose
bladex19

bladex19 57

Atrašyta
  • Autorius
Atrašyta (redaguota)

Kaip suprantu nori panaikinti scroll barą esantį apačioje? jeigu taip tai pridėk šitą rule

*{

overflow-y: hidden;

}

 

tada nukerpa ir apačią, net jei ir apačioje kažkas yra, rodo tik tiek kiek telpa į ekraną.

Redagavo bladex19
Nuoroda į pranešimą
Dalintis kituose puslapiuose
Dsmol

Dsmol 3

Atrašyta
Atrašyta (redaguota)

.Container: width: 1366px (tu jam liepi, kad uzimtu 1366px, tai jeigu ekranas 800px, like pixeliai eina uz ekrano ir gauni scroll bara, turi nurodyti, kad maximaliai gali uzimti tiek ir tiek pixeliu, o, kai ekranas bus mazesnis uz max-width, tai ir uzims atitinkamai.)

 

Fixas:

 

.container keisk i:

 

max-width: 1366px;

margin: 0 auto;

header ul keisk i:

 

display: flex;

justify-content: flex-end;

list-style: none;

margin-top: 32px;

 

Dabar pamegink mazint ekrana.

 

p.s. stenkis vengt floatu, o jei naudoji, tai turi naudot ir clearfixus (pagooglink), dizaino layoutui ismok GRID ir Flex sistemas.

 

Taip pat, jeigu mazinsi ekrana iki telefono dydzio, pamatysi, kad tavo navbaro li itemai nebetelpa ir turesi deti media querius, kai pasieksi tam tikra ekrano dydi perrasyk klases atitinkamiem elementam. Dabar pasidaryk maza ekrana ir perrasyk header ul i:

 

display: flex;

flex-direction: column

align-items: flex-end

list-style: none;

margin-top: 32px;

 

Bet 99 atvejais is 100 tu noresi tureti paslepta meniu ir tiesiog turetu mygtuka, kuri paspaudus, tau parodytu menu, pagoolink (hamburger menu)

Redagavo Dsmol
Nuoroda į pranešimą
Dalintis kituose puslapiuose
Interesantas02

Interesantas02 90

Atrašyta
Atrašyta

Neesu mėgėjas CSS, bet jei tokį width darai - 1366px, gal ne be reikalo. Tada media queries naudok.

 

O šiaip, dabar nelabai kas žaidžia taip. Imi kokį flex-layout ar kt. ir dėlioji, nes statiški saitai jau retokai kam reikalingi, kad sukoduotų. WP ir pan jais užsiima. Jei koderis, manau turi daugiau laiko skirt visokiem tool'sam pažint. Tokie laikai

Nuoroda į pranešimą
Dalintis kituose puslapiuose
bladex19

bladex19 57

Atrašyta
  • Autorius
Atrašyta

.Container: width: 1366px (tu jam liepi, kad uzimtu 1366px, tai jeigu ekranas 800px, like pixeliai eina uz ekrano ir gauni scroll bara, turi nurodyti, kad maximaliai gali uzimti tiek ir tiek pixeliu, o, kai ekranas bus mazesnis uz max-width, tai ir uzims atitinkamai.)

 

Fixas:

 

.container keisk i:

 

max-width: 1366px;

margin: 0 auto;

header ul keisk i:

 

display: flex;

justify-content: flex-end;

list-style: none;

margin-top: 32px;

 

Dabar pamegink mazint ekrana.

 

p.s. stenkis vengt floatu, o jei naudoji, tai turi naudot ir clearfixus (pagooglink), dizaino layoutui ismok GRID ir Flex sistemas.

 

Taip pat, jeigu mazinsi ekrana iki telefono dydzio, pamatysi, kad tavo navbaro li itemai nebetelpa ir turesi deti media querius, kai pasieksi tam tikra ekrano dydi perrasyk klases atitinkamiem elementam. Dabar pasidaryk maza ekrana ir perrasyk header ul i:

 

display: flex;

flex-direction: column

align-items: flex-end

list-style: none;

margin-top: 32px;

 

Bet 99 atvejais is 100 tu noresi tureti paslepta meniu ir tiesiog turetu mygtuka, kuri paspaudus, tau parodytu menu, pagoolink (hamburger menu)

 

Ačiū už patarimus.

 

Įkeliu jau baigtą kodą šiam etapui.

 

HTML: 

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style.css" rel="stylesheet" type="text/css">
<title>Movies</title>
 </head>
 <body>
   <div class="container">
     <header>
    <div class="logo">
      <a href="index.html"><img src="Images/logo.jpg" height="21" width="83" alt="logo"></a>
	</div>
    <ul>
      <li><a href="#">Browse</a></li>
	  <li><a href="#">Movies</a></li>
	  <li><a href="#">TV Shows</a></li>
	  <li><a href="#">News</a></li>
    </ul>
  </header>
  <div id="hero">
    <div id="content">
	  <div id="hero-logo">
	    <img src="Images/daredevil.png" height="141" width="375" alt="daredevil">
	  </div>
	  <div id="hero-logo2">
	    <img src="Images/netflix.png" height="18" width="54" alt="netflix">
	  </div>
	  <div id="text">
	    <p class="description">Matt Murdock, with his other senses superhumanly<br> enhanced, 
		fights crime as a blind Lawyer<br> by day, and vigilante by night.<p>
		<p class="info">54min  |  Action, Crime, Drama  |   TV Series (2015– )</p>
	  </div>
	  <div id="button">
	    <a href="#">Watch e#keiksmažodis#de</a>
	  </div>
	</div>
  </div>
  <main>
    <div id="container">
	  <div id="movies">
	    <a href="#"><h1>Popular Movies</h1></a>
	  </div>
	  <div id="grid">
	    <a href="#"><img src="Images/movie1.jpg" height="280" width="185" alt="movie"></a>
		<a href="#"><img src="Images/movie2.jpg" height="280" width="185" alt="movie"></a>
		<a href="#"><img src="Images/movie3.jpg" height="280" width="185" alt="movie"></a>
		<a href="#"><img src="Images/movie4.jpg" height="280" width="185" alt="movie"></a>
		<a href="#"><img src="Images/movie5.jpg" height="280" width="185" alt="movie"></a>
		<a href="#"><img src="Images/movie6.jpg" height="280" width="185" alt="movie"></a>
	  </div>
	  <div id="tv">
	    <a href="#"><h1>Popular TV Shows</h1></a>
	  </div>
	  <div id="grid">
	  <a href="#"><img src="Images/tv1.jpg" height="280" width="185" alt="tvshow"></a>
	  <a href="#"><img src="Images/tv2.jpg" height="280" width="185" alt="tvshow"></a>
	  <a href="#"><img src="Images/tv3.jpg" height="280" width="185" alt="tvshow"></a>
	  <a href="#"><img src="Images/tv4.jpg" height="280" width="185" alt="tvshow"></a>
	  <a href="#"><img src="Images/tv5.jpg" height="280" width="185" alt="tvshow"></a>
	  <a href="#"><img src="Images/tv6.jpg" height="280" width="185" alt="tvshow"></a>
	  </div>
	</div>
	<div id="news">
	  <div id="newstext">
	    <p>Get the movie & TV Shows straight<br> in your inbox each week</p>
	  </div>
	  <div id="inputs">
	    <input id="fn" type="text" value="First Name">
		<input type="text" value="Email">
	  </div>
	  <div id="btn">
	    <a href="#">Subscribe</a>
	  </div>
	</div>
  </main>
  <footer>
    <div id="flogo">
	  <img src="Images/flogo.png" height="21" width="83" alt="flogo">
	</div>
	<p id="cr">2016 Movies . All Rights Reserved</p>
	<ul id="fnav">
	  <li id="tos"><a href="#">Terms of Service</a></li>
	  <li><a href="#">Privacy Policy</a></li>
	</ul>
  </footer>
   </div>
 </body>
</html>

 

CSS:

 

* {
margin: 0;
   padding: 0;
   border: 0;
}

a {
text-decoration: none;
}

body {
background: #f1f1f1;
font-family: Calibri;
}

.container {
width: 1366px;
margin: 0 auto;
}

header {
height: 88px;
background: #fff;
}

.logo {
float: left;
margin-top: 34px;
margin-left: 59px;
}

header ul {
float: right;
list-style: none;
margin-top: 32px;
}

header ul li {
display: inline;
margin-right: 68px;
}

header ul li a {
font-size: 21px;
color: #b3b2b2;
}

header ul li a:hover  {
color: #000;
}

#hero {
background: url(Images/hero.jpg) no-repeat 50% 50%;
background-size: cover;
height: 634px;
}

#content {
float: right;
}

#hero-logo {
margin-top: 115px;
margin-right: 145px;
}

#hero-logo2 {
float: right;
margin-right: 170px;
margin-top: -35px;
}

#text {
margin-top: 15px;
margin-left: 18px;
}

p.description {
font-size: 21px;
color: rgb(220, 220, 220);
opacity: 0.4;
}

p.info {
font-size: 20px;
color: #fff;
margin-top: 30px;
}

#button a {
color: #fff;
font-size: 18px;
text-transform: uppercase;
float: right;
margin-top: 65px;
margin-right: 90px;
background-color: #b51c1c;
border: 1px solid #b51c1c;
border-radius: 5px;
padding: 10px 30px;
}

#container {
width: 1210px;
height: 1120px;
margin: 0 auto;
}

h1 {
font-size: 32px;
color: #5d5d5d;
}

#grid {
display: grid;
grid-template: 280px / repeat(6, 1fr);
}

#movies {
height: 170px;
}

#movies h1 {
padding-top: 110px;
}

#tv {
height: 220px;
}

#tv h1 {
padding-top: 160px;
}

#news {
height: 445px;
background: #2a292e;
text-align: center;
}

#newstext {
padding-top: 115px;
}

#newstext p {
font-size: 30px;
color: #fff;
}

#inputs {
margin-top: 36px;
}

input {
background-color: #403f44;
color: #fff;
font-size: 15px;
border: 2px solid #403f44;
border-radius: 5px;
padding: 15px 0px 15px 27px;
width: 200px;
}

#fn {
margin-right: 25px;
}

#btn a {
font-size: 15px;
color: #fff;
font-weight: bold;
background-color: #6ee595;
border: 1px solid #6ee595;
border-radius: 10px;
margin-top: 36px;
padding: 9px 50px 9px 50px;
display: inline-block;
}

footer {
height: 260px;
text-align: center;
}

#flogo {
padding-top: 55px;
}

#cr {
font-size: 24px;
color: #5d5d5d;
margin-top: 35px;
}

footer ul {
margin-top: 25px;
}

#fnav li {
display: inline;
}

#fnav a {
font-size: 19px;
color: #5d5d5d;
}

#fnav a:hover {
color: #000;
}

#tos {
margin-right: 25px;
}

 

Jei kas matysit kokių blogų vietų ar kažką, prašau pasidalinkit ir su manimi.

 

Šiaip bandžiau daug browser'ių tai visur viską gerai atvaizduoja.

 

O dėl responsive, tai dabar keisiu viską į responsive dizainą.

 

Kadangi mokiausi Codecademy.com tai praėjau kursus iki responsive ir norėjau išmėginti ar sugebėsiu kažką.

 

Responsive kursą jau praėjau, dabar keisiu šitą dizainą į responsive, o vėliau pabandysiu pažaisti su framework'ais.

Nuoroda į pranešimą
Dalintis kituose puslapiuose

Prisijunkite prie diskusijos

Jūs galite rašyti dabar, o registruotis vėliau. Jeigu turite paskyrą, prisijunkite dabar, kad rašytumėte iš savo paskyros.

Svečias
Parašykite atsakymą...

×   Įdėta kaip raiškusis tekstas.   Atkurti formatavimą

  Only 75 emoji are allowed.

×   Nuorodos turinys įdėtas automatiškai.   Rodyti kaip įprastą nuorodą

×   Jūsų anksčiau įrašytas turinys buvo atkurtas.   Išvalyti redaktorių

×   You cannot paste images directly. Upload or insert images from URL.

Įkraunama...
×
 Dalintis
Sekėjai 1
Eiti į temų sąrašą

  • Dabar naršo   0 narių

    Nei vienas registruotas narys šiuo metu nežiūri šio puslapio.

  • Prisijunk prie bendruomenės dabar!

    Uždarbis.lt nariai domisi verslo, IT ir asmeninio tobulėjimo temomis, kartu sprendžia problemas, dalinasi žiniomis ir idėjomis, sutinka būsimus verslo partnerius ir dalyvauja gyvuose susitikimuose.

    Užsiregistruok dabar ir galėsi:

    ✔️ Dalyvauti diskusijose;

    ✔️ Kurti naujas temas;

    ✔️ Rašyti atsakymus;

    ✔️ Vertinti kitų žmonių pranešimus;

    ✔️ Susisiekti su bet kuriuo nariu asmeniškai;

    ✔️ Naudotis tamsia dizaino versija;

    ir dar daugiau.

    Registracija trunka ~30 sek. ir yra visiškai nemokama.

  • Naujausios temos

  • Karštos temos

×
×
  • Pasirinkite naujai kuriamo turinio tipą...