|
Poslao: 11 Feb 2015 10:25
|
offline
- tomislav91
- Počasni građanin
- Pridružio: 31 Maj 2008
- Poruke: 885
|
Kao sto mozete videti na slici ne daje mi celu pozadinu na mom 15.6'' ekranu...
Sto se tice responsive, koristio sam bootstrap, i nesto tu ne funkcionise, a sad rucno i nema logike da menjam kod svakog screen size-a.
Evo ga css
/* ==== Google font ==== */
@import url('http://fonts.googleapis.com/css?family=Lato:400,300,700,900');
html,body {
height: 100%;
margin:0;
padding:0;
}
body {
background: #394864;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 16px;
color: #555;
line-height: 1.6em;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Lato', sans-serif;
font-weight: 300;
color: #444;
}
h1 {
font-size: 40px;
}
h3 {
font-weight: 400;
}
h4 {
font-weight: 400;
font-size: 20px;
}
p {
margin-bottom: 20px;
font-size: 16px;
}
a {
color: #ACBAC1;
word-wrap: break-word;
-webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
-moz-transition: color 0.1s ease-in, background 0.1s ease-in;
-ms-transition: color 0.1s ease-in, background 0.1s ease-in;
-o-transition: color 0.1s ease-in, background 0.1s ease-in;
transition: color 0.1s ease-in, background 0.1s ease-in;
}
a:hover,
a:focus {
color: #4F92AF;
text-decoration: none;
outline: 0;
}
a:before,
a:after {
-webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
-moz-transition: color 0.1s ease-in, background 0.1s ease-in;
-ms-transition: color 0.1s ease-in, background 0.1s ease-in;
-o-transition: color 0.1s ease-in, background 0.1s ease-in;
transition: color 0.1s ease-in, background 0.1s ease-in;
}
.alignleft {
text-align: left;
}
.alignright {
text-align: right;
}
.aligncenter {
text-align: center;
}
.btn {
display: inline-block;
padding: 10px 20px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.428571429;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 0;
}
.btn-theme {
color: #fff;
background-color: #4F92AF;
border-color: #4F92AF;
}
.btn-theme:hover {
color: #fff;
background-color: #444;
border-color: #444;
}
form.signup input {
height: 42px;
width: 200px;
border-radius: 0;
border: none;
}
form.signup button.btn {
font-weight: 700;
}
form.signup input.form-control:focus {
border-color: #fd680e;
}
/* wrapper */
#wrapper {
text-align: center;
padding: 50px 0;
background: url(../img/slika.jpg) no-repeat center top;
background-attachment: relative;
background-position: center center;
min-height: 650px;
width: 100%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
}
/*animation social icons hower*/
.grow {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.grow:hover {
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
/*end of animation social icons hower*/
@font-face {
font-family: 'Amatic-Bold';
src: url(../fonts/Amatic-Bold.ttf) format('truetype');}
@font-face {
font-family: myFirstFont;
src: url(../fonts/JosefinSlab-Regular.ttf);
}
@font-face {
font-family: mySecondFont;
src: url(../fonts/Code.otf);
}
.form-control
{
font-family:myFirstFont;
}
.withFont {
font-family: myFirstFont;
color: #fff;
font-size: 75px;
position:relative;
top:50px;
}
#wrapper h1 {
margin-top: 60px;
margin-bottom: 40px;
color: #fff;
font-size: 45px;
font-weight: 900;
letter-spacing: -1px;
}
h2.subtitle {
color: #fff;
font-size: 30px;
font-family:mySecondFont;
}
/* countdown */
#countdown {
font-size: 48px;
color: #fff;
line-height: 1.1em;
margin: 40px 0 60px;
}
/* footer */
p.copyright {
margin-top: 50px;
color: #fff;
text-align: center;
}
Ovo je html za formu
<form action="sendToFile.php" method="POST"
class="form-inline signup" role="form">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1"
placeholder="Enter your email address">
</div>
<button type="submit" class="btn btn-theme">Find out more!</button>
</form>
Koristio sam te dve klase za button, ali on nikako ne stoji kako treba..
|
|
|
|
|
Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
|
|
|
Poslao: 11 Feb 2015 22:11
|
offline
- m4rk0
- Administrator
- Administrator tech foruma
- Marko Vasić
- Gladijator - Maximus Decimus Meridius
- Pridružio: 14 Jan 2005
- Poruke: 15766
- Gde živiš: Majur (Colosseum)
|
Citat:Kao sto mozete videti na slici ne daje mi celu pozadinu na mom 15.6'' ekranu...
Mozes li da uokviris taj deo koji nije popunjen slikom, posto ne vidim u cemu je problem. Jel ovaj skorz levi crni deo ?
|
|
|
|
|
|
|
Poslao: 12 Feb 2015 09:59
|
offline
- tomislav91
- Počasni građanin
- Pridružio: 31 Maj 2008
- Poruke: 885
|
Ne,ne, taj crni deo je deo slike. Ono ispod skroz, plavo, uokvirio sam ja to na slici, pozadina mi ne ide skroz do dole..A i ovaj responsive ne znam sto ne funkcionise skroz kako treba..
Evo body tag
<body>
<div id="wrapper">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<h1 class="withFont">Coming soon!</h1>
</div>
</div>
<div class="row">
<div class="logo">
<h1>Logo</h1>
</div>
</div>
<div class="row">
<h2 class="subtitle">We're currently under construction!</h2>
</div>
<div id="countdown"></div>
<div class="row">
<form action="sendToFile.php" method="POST"
class="form-inline signup" role="form">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1"
placeholder="Enter your email address">
</div>
<button type="submit" class="btn btn-theme">Find out more!</button>
</form>
</div>
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<p class="copyright">
Copyright © 2015 - <a href="#">Yoursite.com</a>
</p>
</div>
</div>
</div>
<div id="social-icons">
<a href="#"><img class="grow" src="cs/img/twitter.png" width="30" height="30"
alt="Twitter" /></a> <a href="#"><img class="grow" src="cs/img/facebook.png"
width="30" height="30" alt="Facebook" /></a>
<a href="#"><img class="grow" src="cs/img/googlePlus.png"
width="30" height="30" alt="gplus" /></a>
<a href="#"><img class="grow" src="cs/img/pinterest.png" width="30" height="30"
alt="pinterest" /></a>
<a href="#"><img class="grow" src="cs/img/rss.png" width="30" height="30"
alt="rss" /></a>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="cs/js/jquery.countdown.min.js"></script>
<script type="text/javascript">
$('#countdown').countdown('2016/01/01', function(event) {
$(this).html(event.strftime('%w:%d:%H:%M:%S'));
});
</script>
</body>
|
|
|
|
|
|
|
Poslao: 12 Feb 2015 10:41
|
offline
- m4rk0
- Administrator
- Administrator tech foruma
- Marko Vasić
- Gladijator - Maximus Decimus Meridius
- Pridružio: 14 Jan 2005
- Poruke: 15766
- Gde živiš: Majur (Colosseum)
|
Stavio si background image u wrapper ID a istovremeno mu zadao top i bottom pading 50px. Ako hoces da fituje, ne sme da ima paddinge.
|
|
|
|
|
|
|
|
|
Poslao: 12 Feb 2015 14:49
|
offline
- Pridružio: 16 Feb 2011
- Poruke: 1630
- Gde živiš: Pancevo
|
Nisam gledao kod preveliki je ali cu ti dati savet za tako velike slike koje zelis kao pozadine.
Stavljaj ih u html:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Za IE:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";
Za Responsive:
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
|
|
|
|
|
|
|
Poslao: 13 Feb 2015 20:12
|
offline
- tomislav91
- Počasni građanin
- Pridružio: 31 Maj 2008
- Poruke: 885
|
Evo ovako sam odradio u wrapperu, i radi mi sada to, fitujekako treba
#wrapper {
text-align: center;
background-image: url('../img/slika.jpg');
background-position: center center;
background-size: cover;
width: auto;
height: auto;
min-height: 100%;
min-width: 100%;
position: absolute;
width: auto;
text-align: center;
z-index: 1;
overflow: hidden;
}
..
Samo jos ne radi skroz za svaki telefon responsive...malo sam ga izmenio, i prilagodio, ali jos ne funkcionise za neke telefone..
|
|
|
|
|
|
|
Poslao: 14 Feb 2015 03:18
|
offline
- Pridružio: 16 Feb 2011
- Poruke: 1630
- Gde živiš: Pancevo
|
pa podesi @media screen za ostale device
|
|
|
|
|
|
|
Poslao: 14 Feb 2015 15:13
|
offline
- tomislav91
- Počasni građanin
- Pridružio: 31 Maj 2008
- Poruke: 885
|
pa fora je sto sam hteo preko bootstrapa to da resim...ali ne kontam zasto ne funkcionise..
|
|
|
|
|
|
|
Poslao: 14 Feb 2015 19:32
|
offline
- Pridružio: 16 Feb 2011
- Poruke: 1630
- Gde živiš: Pancevo
|
Pa jesi override bootstrap ? Overriduj ga i postavi svoj meta print
|
|
|
|
|
|
