I am using two CSS Sprites (each in their own div) to display an Android and Apple logo on my homepage. It looks fine when on a laptop, however, it does not align correctly (in the center) when viewed on a smaller device i.e. mobile device/small browser.
Could anyone lend a hand and help me get the Sprites to align vertically when viewed on mobile?
Here's what it looks like in full screen and mobile/small browser:
**Fullscreen (working): **
**Mobile (no working): **
Here's my HTML:
<body>
<div class="main-container">
<div class="left-image">
<nav class="site-nav">
<ul class="group">
<li class="nav-android">Android</li>
</ul>
</nav>
</div>
<div class="right-image">
<nav class="site-nav">
<ul class="group">
<li class="nav-ios">iOS</li>
</ul>
</nav>
</div>
</div>
</body>
and here's my CSS:
.site-nav ul {
margin: 0;
padding: 0;
}
.site-nav li {
position: relative;
list-style: none;
margin-top: 150px;
left: 20%;
}
.site-nav a {
display: inline-block;
text-align: center;
width: 300px;
height: 350px;
text-indent: 9999px;
overflow: hidden;
}
.nav-android a {
float: left;
left: 50%;
background-position: 0 0px;
background-image: url(../images/android.png);
background-repeat: no-repeat;
}
.nav-ios a {
float: left;
left: -50%;
background-position: 0 0px;
background-image: url(../images/apple.png);
background-repeat: no-repeat;
}
#media screen and (max-width: 700px) {
.nav-android a,
.nav-ios a,
{
width: auto;
float: none;
}
Use #media for css.
#media all and (max-width: 400px)
{
.nav-android a, .nav-ios a {
float: none;
display: block;
background-size: 128px 128px;
}
}
Edit:
Maybe you need to add this to head:
<meta name="viewport" content="width=device-width, user-scalable=0"/>
ul { margin: 0; padding: 0; }
.group { margin-top: 10%; text-align: center; }
.group li { display: inline-block; }
.group li a { display: block; width: 256px; height: 256px; font-size: 0; }
.nav-android a {
background-size: 100%;
background-image: url(android.png);
background-repeat: no-repeat;
background-color: green;
}
.nav-ios a {
background-size: 100%;
background-image: url(apple.png);
background-repeat: no-repeat;
background-color: grey;
}
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body>
<div class="main-container">
<ul class="group">
<li class="nav-android">Android</li>
<li class="nav-ios">iOS</li>
</ul>
</div>
</body>
</html>
Related
Working on an Angular application for a small business and for the life of me cannot solve while Google Maps keeps overlapping the fixed position navbar on the mobile site. When I scroll down, the map overlaps the navbar which is not what I want. I want it to disappear behind it. I've tried setting the z-index on both elements, but nothing works.
Here is the html for the location.component.html
<div class="md-6-col" >
<div #gmap style="width: 100%;height: 450px;"></div>
</div>
Here is the html for the navbar.component.html
<nav class='navbar'>
<div class='navbar__logo'></div>
<ul class='navbar__list'>
<li class='navbar__item'>
<a class='navbar__link' routerLink='/home' routerLinkActive='navbar__link--active'>
<i class='navbar__icon navbar__icon--home'></i>
<p class='navbar__linktext'>Home</p>
</a>
</li>
<li class='navbar__item'>
<a class='navbar__link' routerLink='/location' routerLinkActive='navbar__link--active'>
<i class="navbar__icon navbar__icon--location"></i>
<p class='navbar__linktext'>Location</p>
</a>
</li>
<li class='navbar__item'>
<a class='navbar__link' routerLink='/contact' routerLinkActive='navbar__link--active'>
<i class="navbar__icon navbar__icon--location"></i>
<p class='navbar__linktext'>Contact</p>
</a>
</li>
</ul>
</nav>
Here is the css for navbar.component.css
.navbar {
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
background-color: #4F4F4F;
}
/*
.navbar__logo {
display: inline-block;
background-image: url('/assets/mobile_logo_150x150.png');
height: 150px;
width: 150px;
}
*/
.navbar__list {
height: 100%;
margin: 0;
padding: 0;
}
.navbar__item {
align-items: center;
display: inline-flex;
height: 100%;
vertical-align: middle;
width: 33%;
}
.navbar__link {
color: #ffffff;
height: 100%;
text-decoration-line: none;
width: 100%;
}
.navbar__link--active {
font-weight: 900;
background-color: #363636;
}
.navbar__icon {
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display:block;
height: 30px;
width: 100%;
}
.navbar__icon--home {
background-image: url('/assets/home-icon.png');
}
.navbar__icon--location {
background-image: url('/assets/location-icon.png');
}
.navbar__linktext {
margin: 0;
}
#media screen and (min-width: 480px) {
.navbar {
text-align: right;
}
}
Where did you apply position: absolute for map?
Make sure you apply position: absolute property to map and position: relative to parent of map to make the z-index working.
I have searched the internet for quite a few hours now and cannot figure out why my site is responsive on the desktop but not on mobile (at least on my iphone X). On mobile, all of my elements except the gif at the top of the page are over to the left and half hidden outside the browser window (with no horizontal scroll bar btw). I have the viewport meta tag in there, which is the only solution I could find, but it did not do anything to my site's mobile view when I checked after adding it in. What else could the problem be? I am very much a beginner, so I am hoping this is just a dumb little mistake. Someone please help. I'm about to tear my hair out here!
You can visit the site here and resize to see how it should be, this is how it looks on mobile currently (not a full view btw, just a shot of the bottom sections of my site as you can see the problem most clearly from there):
Mobile Screenshot
here is my code:
<!doctype html>
<!-- This comment line needed for bootstrap to work on mobile devices -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Jasmine Thorson</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<ul id="menu">
<li>WORK</li>
<li>ABOUT</li>
<li>SKILLS</li>
<li>CONTACT</li>
</ul>
<div id="top"></div>
<div id="box0">
<img src="headergif_vert.gif" alt="myhero" class="hero">
</div>
<div id="work">
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
<div id="box4">
</div>
<div id="box5">
</div>
<div id="box6">
</div>
<div id="box7">
</div>
<div id="box8">
</div>
<div id="box9">
</div>
<div id="box10">
</div>
</div>
<div id="about"></div>
<img src="ABOUTGIF.gif" class="aboutgif" alt="aboutgif">
<div id="aboutme">
<h1 class="abouthead">I'm a young creative fresh out of college with lots of <mark class="pink">charisma.</mark></h1>
<p class="para">I believe that good design can help people laugh, cry, stay informed, & understand each other better. Design, simply, is visual communication.</p>
<p class="para">As a designer + photographer, it's my goal to capture the essence of my subject & express that essence in the most clear, consistent, & appropriate manner.</p>
</div>
<div id="skills"></div>
<div class="w3-container">
<table class="table1">
<tr>
<td><img src="ICONS_BRANDING.png" alt="branding" class="icon1"></td>
<td><img src="ICONS_INFOGRAPHICS.png" alt="info" class="icon1"></td>
</tr>
<tr>
<td><img src="ICONS_DIGITAL.png" alt="digital" class="icon1"></td>
<td><img src="ICONS_SOCIAL.png" alt="social" class="icon1"></td>
</tr>
</table>
<table class="table2">
<tr>
<td><img src="ICONS_BRANDING.png" alt="branding" class="icon2"></td>
<td><img src="ICONS_INFOGRAPHICS.png" alt="info" class="icon2"></td>
<td><img src="ICONS_DIGITAL.png" alt="digital" class="icon2"></td>
<td><img src="ICONS_SOCIAL.png" alt="social" class="icon2"></td>
</tr>
</table>
</div>
<div id="contact"></div>
<div id="contactbox">
<div class="col1"><h2>JASMINE THORSON</h2></div>
<div class="col5"><h2>INFO</h2></div>
<div class="col1">Graphic Designer + Photographer</div>
<div class="col2">Brooklyn, NY</div>
<div class="col3">605 + 268 + 3245</div>
<div class="col4">jnthorson#gmail.com</div>
<div class="col5">Resume</div>
</div>
<footer>
<img src="insta.png" id="insta" alt="gram" class="social">
<img src="behance.png" id="behance" alt="be" class="social">
</footer>
</body>
</html>
And here is my CSS:
#charset "UTF-8";
body {
background-color: #DBD9D6;
margin: 0;
padding: 0;
font-family: "Arial Rounded MT Bold";
color: #978B87;
}
p {
font-family: Geneva;
font-size: .75em;
line-height: 1.5em;
}
h1{
line-height: 1.25em;
}
h4{
color: #D41773;
column-span: all;
}
h5{
color: #D41773;
font-size: .65em;
}
#menu {
list-style-type: none;
margin: 20px;
padding: 0px;
width: 80px;
position: fixed;
font-family: "Arial Rounded MT Bold";
font-size: 9px;
line-height: 10px;
right: 0;
text-align: right;
z-index: 4;
}
#menu li, #menu a {
display: block;
color: black;
opacity: .35;
padding: 2px;
text-decoration: none;
}
#menu li, #menu a:hover {
background-color: transparent;
color: #D41773;
opacity: 1;
transition: color 0.3s linear;
}
#menu li, #menu a:active {
background-color: transparent;
color: #D41773;
}
#logo {
position: fixed;
display: inline-block;
margin: 20px;
width: 207px;
height: 53px;
background-image: url("logoheader.png");
z-index: 4;
}
#logo:hover {
background-image: url(logoheader.png);
background-position: 0 -54.5px;
}
img.hero {
display: block;
height: 100vh;
padding: 0px;
margin-left: auto;
margin-right: auto;
}
#box0{
height: 100vh;
width: 100%;
background-color: #DBD9D6;
background-size: cover;
display: table;
background-attachment: fixed;
margin-left: auto;
margin-right: auto;
}
#box1{
height: 60vh;
width: 100%;
background-image: url(box1.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box2{
height: 60vh;
width: 100%;
background-image: url(box2.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box3{
height: 60vh;
width: 100%;
background-image: url(box3.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box4{
height: 60vh;
width: 100%;
background-image: url(box4.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box5{
height: 60vh;
width: 100%;
background-image: url(box5.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box6{
height: 60vh;
width: 100%;
background-image: url(box6.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box7{
height: 60vh;
width: 100%;
background-image: url(box7.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box8{
height: 60vh;
width: 100%;
background-image: url(box8.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box9{
height: 60vh;
width: 100%;
background-image: url(box9.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box10{
height: 60vh;
width: 100%;
background-image: url(box10.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#aboutme {
margin-top: 150px;
margin-bottom: 200px;
margin-left: 25%;
margin-right: 75%;
width: 300px;
}
.abouthead{
font-size: 1.5em;
}
.para{
font-size: .55em;
}
mark.pink{
color: #D41773;
background: none;
}
.aboutgif{
float: right;
width: 200px;
margin-bottom: 50px;
margin-top: 20px;
}
#media screen and (max-width: 480px) {
.aboutgif{
display: none;
}
}
#media screen and (max-width: 768px) {
#aboutme{
width: 200px;
}
}
#media screen and (max-width: 480px) {
#aboutme{
width: 250px;
}
}
#media screen and (min-width: 768px) {
#aboutme{
width: 370px;
}
}
#media screen and (max-width: 768px) {
.abouthead{
font-size: 1.5em;
}
}
#media screen and (min-width: 768px) {
.abouthead{
font-size: 2em;
}
}
#media screen and (max-width: 480px) {
.abouthead{
font-size: 1.5em;
}
}
#media screen and (max-width: 480px) {
.para{
width: 200px;
}
}
#media screen and (max-width: 768px) {
.para{
font-size: .25em;
}
}
.w3-container{
background-color: #C5BBB6;
margin-top: 100px;
padding: 10px;
}
.table1{
width: 350px;
table-layout: fixed;
border-spacing: 0px;
margin: 0 auto;
margin-top: 100px;
margin-bottom: 100px;
text-align: center;
}
#media screen and (min-width: 768px) {
.table1{
display: none;
}
}
.table2{
width: 650px;
table-layout: fixed;
border-spacing: 0px;
margin: 0 auto;
margin-top: 100px;
margin-bottom: 100px;
text-align: center;
}
#media screen and (max-width: 768px) {
.table2{
display: none;
}
}
td{
padding-top: 20px;
vertical-align: top;
border-spacing: 0px;
}
.icon1{
width: 85px;
padding: 5px;
}
.icon2{
width: 110px;
padding: 5px;
}
#contactbox{
float: left;
width: 85%;
margin-left: 10%;
margin-top: 40px;
margin-bottom: 40px;
column-count: 5;
column-rule-width: 0px;
font-size: .5em;
}
#contactheaders{
column-span: all;
display: inline;
}
.col1{
float: left;
width: 100%;
}
.col2{
float: left;
width: 100%;
}
.col3{
float: left;
width: 100%;
}
.col4{
float: left;
width: 100%;
}
.col5{
float: left;
width: 100%;
}
footer{
position: fixed;
display: inline;
padding: 40px;
left: 0;
bottom: 0;
margin-bottom: 0px;
width: 100%;
height: 10px;
background: none;
color: black;
z-index: 5;
}
.photo{
float: left;
margin-right: 10%;
font-size: .6em;
opacity: .25;
color: black;
}
#insta{
width: 25px;
float: right;
margin-right: 65px;
padding-left: 5px;
}
#behance{
width: 25px;
float: right;
margin-left: 10%;
}
#behance.social, #insta.social {
opacity: 0.25;
filter: alpha(opacity=50);
transition: 0.3s linear;
}
#behance.social:hover, #insta.social:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
As I said before, I am a BEGINNER. Literally a beginner. We did not really learn this stuff in school, we were allowed to use Muse instead and I was afraid of how confusing coding looked so I am learning right now and I'm sorry if my code is just disgustingly awful, but I could really use some help! I ran both codes through validators and came out with minimal errors (which I fixed).
I think one possible solution would be to center your entire page. Keep your HTML as it is, and add this CSS:
html,
body {
width: 100%;
margin: 0 auto;
}
This will tell your html and body to be centered.
I hope this helps.
The nav takes the full screen width and the footer is sticking to the left. Both is wrong and I would like to have the navigation a width of 90% and both be centered. I hope I described the problem comprehensibly.
html code:
#media only screen
and (device-width: 3840px)
and (device-height: 2160px)
and (orientation: landscape) {
body {
width: 90%;
font-size: 300%;
}
.mainHeader img.Margrit {
height: auto;
width: 12%;
top: 20%;
}
.mainHeader img.Logo {
height: auto;
width: 12%;
top: 60%;
}
.mainHeader img.Couture {
height: auto;
left: 0%;
top: -18%;
width: 75%;
}
.mainHeader nav {
width: 90%;
height: 100px;
}
.mainHeader nav ul {
padding-left: 0;
}
.mainHeader nav ul li {
width: 25%;
text-align: center;
}
.mainHeader nav a:link, .mainHeader nav a:visited {
padding: 20px 367px;
height: 59px;
display: inline-block;
}
.mainFooter {
display: table;
height: 100px;
width: 90%;
text-align: center;
}
.mainFooter p {
display: table-cell;
vertical-align: middle;
text-align: left;
padding-left: 1%;
}
}
<!DOCTYPE html>
<html lang="de">
<head>
<title>Couture Anni</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header class="mainHeader">
<img class="Logo" src="resources/img/Content_variation_800_e.png" alt="Logo">
<img class="Margrit" src="resources/img/IMG_5347_small.jpg" alt="Annamaria Hofstetter">
<img class="Couture" src="resources/img/Content_variation_800_g.png" alt="Couture Anni">
<nav>
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Kontakt</li>
</ul>
</nav>
</header>
<footer class="mainFooter">
<p>Copyright © couture-anni.ch</p>
</footer>
</body>
</html>
I chose this query because it reproduces the problem. At least I think.
You should keep the body element at 100% and size the other contents from there. margin: 0 auto; takes care of centering your element.
body{
width: 100%;
}
.mainHeader{
width: 90%;
margin: 0 auto;
}
.mainFooter{
position: fixed;
width: 100%;
bottom: 3%;
}
.mainFooter .footerBody{
width: 90%;
margin:0 auto;
height: 40px;
clear: both;
text-align: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #9cb34f;
}
.mainFooter .footerBody p {
display: table-cell;
vertical-align: middle;
text-align: left;
padding-left: 1%;
margin-top: 0;
}
As for your footer, use the mainFooter class as the wrapper for the fixed positioning, then add a 90% sized container inside that and set display: block;
<footer class="mainFooter">
<div class="footerBody">
<p>Copyright © couture-anni.ch</p>
</div>
</footer>
Hope this helps!
html * {
box-sizing: border-box;
padding:0;
margin:0;
}
html,
body {
height: 100%;
font-family: 'Roboto', sans-serif;
color:#666666;
line-height: 1.7em;
}
body {
/* Location of the image */
background-image: url(1.jpg);
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
background-color: #464646;
}
#full_2, #full_3, #full_4{
position: relative;
height: 100vh;
width: 100%;
}
#full_1 {
position: relative;
height: 100vh;
width: 100%;
}
#full_1 {
background: black;
opacity: 0.36;
}
#full_4 {
background: magenta;
}
#full_2 {
background: white;
}
#full_3 {
background: lightgray;
}
.arrow-down {
position: absolute;
bottom: 10px;
width: 45px;
height: 45px;
left: calc(50% - 16px);
}
.arrow-down a img {
width: 100%;
}
.logo{float: left; width: 30%;height: 100%;padding-top: 25px;padding-left: 25px;}
.main-nav {float: right; width: 60%; height: 100%;}
.menu {
background-color: #373737;
left: -285px;
height: 100%;
position: fixed;
width: 285px;
z-index: 5;
}
#main-header a{
text-decoration: none;
color: #ffffff;
font-size:2.0em;
z-index: 10;
opacity: 1;
}
#main-header a:hover{
color: #585858;
}
#main-header {
position: absolute;
width:100%;
height:70px;
top:0;
background-color: rgba(0,0,0,0);
z-index: 100;
}
#main-header ul li {
display:inline;
padding:20px 20px;
}
#main-header ul {
float: right;
margin-top:0px;
padding:0;
padding-top: 25px;
padding-right: 25px;
text-align: right;
}
#container{
width: 90%;
}
#lupa{
float: right;
width: 40%;
height: 100%;
}
#lupa img{516 918
width: 90px;
height: 492px;
float: right;
padding-top: 90px;
}
#content_1{
float: left;
height: 100%;
width: 60%;
}
#content_container{
padding-top: 125px;
height: 100%;
width: 100%;
padding-left: 35%;
}
#nadpis1{
margin-bottom: 45px;
}
#nadpis1 img{
width: 231px;
height: 44px;
}
#content_1_1 a{
color: #014FC4;
text-decoration: none;
font-weight: 800;
font-size: 25px;
}
#content_1_1 h2, p{
color: #2F2F2F;
font-size: 25px;
text-decoration: none;
}
#footer_left{
height: 90%;
float: left;
width: 40%;
}
.footer_1, .footer_2{
height: 100%;
width: 50%;
}
.footer_1{
float: left;
}
.footer_2{
float:right;
}
.footer_3{
}
#full_5{
height:100vh;
background-color: #0F032D;
bottom: 0;
}
.footer_bottom{
color: white;
height: 10%;
width: 100%;
text-align: center;
clear: both;
bottom: 0;
padding-bottom: 10px;
z-index: 10;
}
#full_5 ul{
padding-right: 25px;
padding-top: 25px;
}
#full_5 ul li{
padding-top: 25px;
}
#full_5 ul li a{
color: white;
text-decoration: none;
font-size: 16px;
}
#media only screen and (min-width: 320px) and (max-width: 768px) {
html * {
box-sizing: border-box;
padding:0;
margin:0;
}
html,
body {
height: 100%;
font-family: 'Roboto', sans-serif;
color:#666666;
line-height: 1.7em;
}
body {
/* Location of the image */
background-image: url(1.jpg);
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
background-color: #464646;
}
#full_2, #full_3, #full_4{
position: relative;
height: 100vh;
width: 100%;
}
#full_1 {
position: relative;
height: 100vh;
width: 100%;
}
#full_1 {
background: black;
opacity: 0.36;
}
#full_4 {
background: magenta;
}
#full_2 {
background: white;
}
#full_3 {
background: lightgray;
}
.arrow-down {
position: absolute;
bottom: 10px;
width: 45px;
height: 45px;
left: calc(50% - 16px);
}
.arrow-down a img {
width: 100%;
}
#full_2 .arrow-down a img {
width: 100%;
display: none;
}
.logo{float: left; width: 30%;height: 100%;padding-top: 25px;padding-left: 25px;}
.main-nav {float: right; width: 60%; height: 100%;}
.menu {
background-color: #373737;
left: -285px;
height: 100%;
position: fixed;
width: 285px;
z-index: 5;
}
#main-header a{
text-decoration: none;
color: #ffffff;
font-size:2.0em;
z-index: 10;
opacity: 1;
}
#main-header a:hover{
color: #585858;
}
#main-header {
position: absolute;
width:100%;
height:70px;
top:0;
background-color: rgba(0,0,0,0);
z-index: 100;
}
#main-header ul li {
display:inline;
padding:20px 20px;
}
#main-header ul {
float: right;
margin-top:0px;
padding:0;
padding-top: 25px;
padding-right: 25px;
text-align: right;
}
#container{
width: 95%;
margin-right: auto;
margin-left: auto;
}
#lupa{
text-align: center;
width: 100%;
height: 100%;
float: none;
}
#lupa img{516 918
width: 90px;
height: 492px;
float: none;
padding-top: 0px;
}
#content_1{
height: 100%;
width: 100%;
text-align: center;
}
#content_container{
padding-top: 100px;
height: 100%;
width: 100%;
padding-left: 0px;
margin-bottom: 20px;
}
#nadpis1{
margin-bottom: 45px;
}
#nadpis1 img{
width: 231px;
height: 44px;
}
#content_1_1 a{
color: #014FC4;
text-decoration: none;
font-weight: 800;
font-size: 25px;
}
#content_1_1 h2, p{
color: #2F2F2F;
font-size: 25px;
text-decoration: none;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Add gospel Přerov</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link
href='http://fonts.googleapis.com/css?family=Roboto:300&subset=latin,cyrillic-ext'
rel='stylesheet' type='text/css'>
</head>
<div class="menu" >
</div>
<div id="wrapper">
<div id="main-header">
<div class="logo">
<a href="http://david.addagio.cz/gospel"><img src=""
style="max-width: 90%; height: auto;" alt="gospel logo" /></a>
</div>
<!--/.logo-->
<div class="main-nav">
<nav class="nav">
<ul>
<li class="nav-item">Aktuálně</li>
<li class="nav-item">O nás</li>
<li class="nav-item">Kontakt
<li class="nav-item">Foto/Video
</ul>
</nav>
</div>
</div>
<div id="full_1">
<div class="arrow-down">
<img src="arrow_down.png" alt="arrow-down">
</div>
</div>
<div id="full_2">
<div id="container">
<div id="content_1">
<div id="content_container">
<div id="nadpis1">
<img src="where.png" alt="where">
</div>
<div id="content_1_1">
<p>Už z našeho jména vyplívá, že se nacházíme
ve městě Přerov. Klikněte na lupu a získáte
přesnou navigaci.
Jsme od Vás příliš daleko?
kontaktujte nás zde</p>
</div>
</div>
</div>
<div id="lupa">
<img src="lupa.png">
</div>
</div>
<div class="arrow-down">
<img src="arrow_down_black.png" alt="arrow-down">
</div>
</div>
<div id="full_3">
<div class="arrow-down">
<img src="arrow_down.png" alt="arrow-down">
</div>
</div>
<div id="full_4">
<div class="arrow-down">
<img src="arrow_down.png" alt="arrow-down">
</div>
</div>
<div id="full_5">
<div id="footer_left">
<div class="footer_1">
<ul>
<li>Podmínky použití</li>
<li>Kontakty</li>
<li>Novinky</li>
<li>Fotky</li>
</ul>
</div>
<div class="footer_2">
</div>
</div>
<div class="footer_3">
</div>
<div class="footer_bottom">
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="main.js">
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('body').animate({
left: "285px"
}, 200);
});
/* Then push them back */
$('.icon-close').click(function() {
$('.menu').animate({
left: "-285px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
});
};
</script>
</body>
</html>
Hi,
Well, i am making a website.. it contains 5 divs, (full_1, full_2, full_3, full_4, full_5), all those divs are height:100vh; and width:100%;
there is a
body {
/* Location of the image */
background-image: url(1.jpg);
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
background-color: #464646;
}
now, everything just works great, but the last div has a little line below it, like 1px line (this line looks like there is a space at the bottom, below the div, cause the line looks like the background image mentioned before...)
This problem I have seen only in Microsoft Edge, but I only tried Edge and Chrome(Chrome displays it really great)
Here are photos from a) Edge , b) Chrome.
Hope, you can see it...
Also... the code snippet is maybe wrong... but it could help.
PS: Site is optimized for phones and tablets.
PPS: for clear look at the website, visit: http://david.addagio.cz/gospel
Just give boxshadow of 1px with same color on bottom
box-shadow: #0f032d 0px 1px 0;
I have seen a lot of similar topics; however I do not seem to get the css code right.
Layout of my page: has a background image. Then I want to create a white page in the middle with different blocks () starting with navigation at the top, header,content.
Im not getting the navigation bar to display at the top of the page (without space between the top of the browser and the bar) there is a small gap in between). Furthermore I want my content to always fill the screen until 'just' above the lower part of the browser.
HTML
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href ="css/main.css">
</head>
<body>
<div class="wrapper">
<div class="nav">
<ul>
<li>Home</li>
<li>Education</li>
<li>Experience</li>
<li>More</li>
<li>Contact</li>
</ul>
</div>
<div class="header">
</div>
<div class="maincontent">
</div>
</div>
</body>
</html>
CSS
html, body {
height: 100%;
margin: 0;
}
body {
background-image: url("bgimg.png");
background-repeat: repeat;
}
.wrapper{
width: 960px;
height: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0 auto;
position: relative;
top: 0px;
background-color: white;
}
.nav {
background-color: white;
width: 100%;
height: 40px;
font-family: "Sans-serif", Verdana;
}
.nav li {
float: left;
list-style: none;
float: left;
display: inline;
text-align: center;
width: 20%;
line-height: 40px;
}
.nav a {
display: block;
width: 100px;
}
.header {
background-color: #F7D358;
width: 960px;
height: 100px;
position: relative;
top: 0px;
}
.maincontent {
background-color: white;
height: 100%;
margin: 0;
padding:0;
}
Easiest way in this case is to set:
.nav ul {
margin: 0;
}
I recommend you (highly) to use CSS RESET STYLE to avoid these problems.
Example: http://meyerweb.com/eric/tools/css/reset/