A few days ago I finished editing my first site. Css displays correctly on desktop and mobile, but I notice that when I try to modify something in css to display on the browser on my phone, it does not take my settings. I keep in mind that the browser tools and the Blisk application get my settings and display the css codes correctly, but when I access the site on my phone, it does not change the setting.
I'll put two pictures down to see how it shows me on the Blisk app and how it shows me on my phone.
Blisk App :
Phone View :
#media only screen and (max-width: 360px) {
header {
height: 60px;
}
header img {
display: none;
}
nav ul {
margin-right: 15px;
margin-top: 20px;
}
nav ul li {
display: inline-block;
margin-left: 7px;
}
nav ul li a {
font-size: 14px;
}
.livada {
width: 350px;
height: 250px;
}
.container {
width: 300px;
}
.sectiune_text h2 {
text-align: center;
font-size: 40px;
font-family: font1;
}
.sectiune_text p {
text-align: center;
font-size: 17px;
}
/* DESPRE */
.sectiune_text_2 img {
display: none;
}
.container2{
width: 300px;
margin:auto;
}
.sectiune_text_2 h2 {
font-size: 40px;
font-family: font1;
text-align: center;
}
.sectiune_text_2 p {
font-size: 15px;
text-align: center;
}
.fructe2 img{
display: none;
}
.container1 {
width: 300px;
margin-top: 10px;
margin: auto; }
.p2 h2 {
text-align: center;
font-size: 40px;
font-family: font1;
}
.p2 p {
text-align: center;
font-size: 15px;
}
.footer footer {
width: 100%;
background-color: #222;
padding: 30px 0px;
margin-top: 30px;}
.footer footer h1 {
font-size: 13px;
}
/* GALERIE */
.galerie {
margin: 10px 10px;
}
.galerie img {
transition: 1s;
padding: 5px;
width: 330px;
}
.galerie img:hover {
transform: scale(1.1);
}
/* CONTACT */
#map {
height: 500px;
width: 350px;
margin: auto;
}
.adresa img {
width: 30px;
height: 40px;
margin-left: 100px;
float: left;
}
.adresa h2 {
float: left;
font-size: 30px;
margin-left: 20px;
margin-top: 5px;
font-family: Times New Roman;
}
.adresa p {
margin-left: 70px;
font-size: 20px;
float: none;
margin-top: 0px;
}
.telefon img {
width: 40px;
height: 40px;
margin-left: 90px;
float: left;
}
.telefon h2 {
float: left;
font-size: 30px;
margin-left: 20px;
margin-top: 3px;
font-family: Times New Roman;
}
.telefon p {
margin-left: 55px;
font-size: 20px;
float: none;
margin-top: 0px;
}
.email img {
width: 40px;
height: 40px;
margin-left: 90px;
float: left;}
.email h2 {
float: left;
font-size: 30px;
margin-left: 20px;
margin-top: 3px;
font-family: Times New Roman;
}
.email p {
margin-left: 65px;
font-size: 20px;
float: none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Grande Bucovina - CONTACT</title>
<link rel="stylesheet" href="css/style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
*{
margin: 0;
padding: 0;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<body bgcolor="#ebebe0">
<header>
<img src="images/logo.png" alt="logo site">
<nav>
<ul>
<li></i> ACASĂ</li>
<li><i class="fa fa-info"></i> DESPRE</li>
<li><i class="fa fa-image"></i> GALERIE</li>
<li><i class="fa fa-envelope" ></i> CONTACT</li>
</ul>
</nav>
</header>
<div id="map"></div>
<script>
function initMap() {
var location = {lat:47.680870, lng:26.266649};
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: location
});
var marker = new google.maps.Marker({
position: location,
map: map
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDSw822pwdiQ09FK5h517ZrtTQa5mp3gx4&callback=initMap"
type="text/javascript"></script>
<br><br><br><br>
<div class="adresa">
<img src="images/locatie.png" alt="locatie">
<h2>Adresa :</h2>
<br><br><br>
<p>Jud. Suceava, cartier Burdujeni, strada Aleea Dumbrăvii, nr 33</p>
</div>
<br><br>
<div class="telefon">
<img src="images/telefon.png" alt="numar telefon">
<h2>Telefon :</h2>
<br><br><br>
<p>Rotaru Sebastian - 0746547737</p>
</div>
<br><br>
<div class="email">
<img src="images/email.png" alt="email">
<h2>Email : </h2>
<br><br><br>
<p>rotaruseba.80#gmail.com</p>
</div>
<footer>
<h1><u>COPYRIGHT © S.C GRANDE BUCOVINA S.R.L</u></h1>
</footer>
</body>
</html>
This is my site
Related
I'm making a website for school, but i have a problem with my css code. I want to place the section1 and the section2 underneath the header so that it looks like that :
WANTED
The problem is that it looks like that (the problem is this enormous gap on the left) :
REALITY
I know that the problem comes from the float on the header and nav bar but i don't know how to keep the header look and having the two boxes ("section1" and "section2", grouped as "content").
The CSS code :
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body {
color: black;
background-color: white;
font-size: 16px;
text-align:justify;
text-justify:inter-word;
}
.header {
width: 100%;
height: 80px;
display: block;
background-color: #101010;
}
.header_nav {
width: 65%;
height: 100%;
display: block;
margin: 0 auto;
}
.logo {
height: 100%;
display: table;
float: left;
}
.logo h1 {
color: white;
height: 100%;
display: table-cell;
vertical-align: middle;
font-family: "Trebuchet MS";
font-size: 32px;
font-weight: 600;
}
.nav {
float: right;
height: 50%;
line-height: 70px;
}
.nav ul li {
display: inline-block;
vertical-align: middle;
line-height: normal
}
.nav-option {
height: 100%;
display: table;
float: left;
padding: 0px 20px;
display: table-cell;
vertical-align: middle;
height: 100%;
color: white;
font-family: "Trebuchet MS";
font-size: 20px;
font-weight: 50;
}
.nav-option:hover {
text-decoration: underline;
}
.content {
overflow: hidden;
}
.section1 {
background-color: red;
width: 40%;
height: 300px;
margin: 1%;
float: left;
border: inset #101010 6px ;
}
.section2 {
background-color: blue;
width: 40%;
height: 300px;
float: right;
margin: 1%;
border-left: solid #101010 10px;
}
.section2:hover {
transform: scale(1.05);
}
The HTML code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Histoire de l'Informatique</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<div class="header_nav">
<div class="logo">
<img src="logo.png">
<h1> HISTOIRE DE L'INFORMATIQUE </h1>
</div>
<div class="nav">
<nav>
<ul>
<li>Données</li>
<li>Algorithmes</li>
<li>Langages</li>
<li>Machines</li>
</ul>
</nav>
</div>
</div>
</<div>
<div class= "content">
<section class="section1">
<h1>Données</h1>
<article>
</article>
</section>
<section class="section2">
<h1>Algorithmes</h1>
<article>
</article>
</section>
</div>
<script src="script.js"></script>
</body>
</html>
Thanks for your help !
Your example seems to work for me provided .container has a width: 100% on it.
But for what you want exactly, I would use the following:
.container {
display: flex;
align-items: center;
justify-content: space-evenly; // google all the different options for this
}
// Get rid of the `float` properties on the sections, you won't need them
Below, is your original code in a snippet, and with that width property it's working for me.
But I highly recommend switching to flex box over floats, as it will give you way more control and better results.
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body {
color: black;
background-color: white;
font-size: 16px;
text-align:justify;
text-justify:inter-word;
}
.header {
width: 100%;
height: 80px;
display: block;
background-color: #101010;
}
.header_nav {
width: 65%;
height: 100%;
display: block;
margin: 0 auto;
}
.logo {
height: 100%;
display: table;
float: left;
}
.logo h1 {
color: white;
height: 100%;
display: table-cell;
vertical-align: middle;
font-family: "Trebuchet MS";
font-size: 32px;
font-weight: 600;
}
.nav {
float: right;
height: 50%;
line-height: 70px;
}
.nav ul li {
display: inline-block;
vertical-align: middle;
line-height: normal
}
.nav-option {
height: 100%;
display: table;
float: left;
padding: 0px 20px;
display: table-cell;
vertical-align: middle;
height: 100%;
color: white;
font-family: "Trebuchet MS";
font-size: 20px;
font-weight: 50;
}
.nav-option:hover {
text-decoration: underline;
}
.content {
width: 100%;
overflow: hidden;
}
.section1 {
background-color: red;
width: 40%;
height: 300px;
margin: 1%;
float: left;
border: inset #101010 6px ;
}
.section2 {
background-color: blue;
width: 40%;
height: 300px;
float: right;
margin: 1%;
border-left: solid #101010 10px;
}
.section2:hover {
transform: scale(1.05);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Histoire de l'Informatique</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<div class="header_nav">
<div class="logo">
<img src="logo.png">
<h1> HISTOIRE DE L'INFORMATIQUE </h1>
</div>
<div class="nav">
<nav>
<ul>
<li>Données</li>
<li>Algorithmes</li>
<li>Langages</li>
<li>Machines</li>
</ul>
</nav>
</div>
</div>
</div>
<div class= "content">
<section class="section1">
<h1>Données</h1>
<article>
</article>
</section>
<section class="section2">
<h1>Algorithmes</h1>
<article>
</article>
</section>
</div>
<script src="script.js"></script>
</body>
</html>
So i made a responsive website but the website doesnt change when it should.
The website that i link below this shows that on my Iphone 6 Plus it should be formatted correctly but when i check the website on my iphone its in tablet view mode.
And you can check what i mean here http://quirktools.com/screenfly/#u=http%3A//maartennauta.com&w=1024&h=600&s=1
the CSS code
html * {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body {
margin-left: auto;
margin-right: auto;
}
header {
padding-bottom: 1px;
}
footer {
text-align: center;
}
.logo {
border-radius: 10px;
height: 100px;
margin-top: 15px;
margin-bottom: 5px;
width: 178px;
margin-left: auto;
margin-right: auto;
display: block;
}
img {
width: 100%;
max-width: 100%;
height: auto;
vertical-align: middle;
}
.style-nav ul {
list-style-type: none;
text-align: center;
}
.style-nav ul li a {
text-decoration: none;
color: #2F322A;
text-align: center;
display: block;
text-transform: uppercase;
padding: 8px;
}
.style-nav ul li a:hover {
color: black;
text-shadow: 2px 2px 10px #000000;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
}
.hero {
background-image: url(../Images/Background.jpg);
background-size: cover;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 50px;
color: #FFFFFF;
text-align: center;
}
.infobox-tan {
background-color: #C29D73;
color: #FFFFFF;
padding: 30px 20px 60px;
text-align: center;
}
.infobox-grey {
background-color: #717A84;
color: #FFFFFF;
padding: 30px 20px 60px;
text-align: center;
}
.row:before,
.row:after {
content: "";
display: table;
color: #FFFFFF;
text-align: center;
}
h1.small {
font-size: 30px;
text-transform: uppercase;
font-weight: 200;
margin-bottom: 60px;
}
h2 {
font-size: 25px;
text-transform: uppercase;
font-weight: 100;
margin-bottom: 20px;
padding: 30px
}
h3 {
font-size: 16px;
text-transform: uppercase;
font-weight: 200;
margin-bottom: 60px;
}
h4 {
font-size: 16px;
font-weight: 200;
margin-bottom: 35px;
}
p {
font-size: 15px;
text-transform: none;
font-weight: 20;
margin-bottom: 60px;
}
p.footertext {
color: gray;
font-size: 15px;
text-transform: none;
font-weight: 20;
margin-top: 20px;
margin-bottom: 20px;
}
.button {
border-radius: 30px;
border: 2px #FFFFFF solid;
padding: 8px 15px;
color: #FFFFFF;
text-decoration: none;
margin-bottom: 30px;
}
.button:hover {
color: #242424;
border: 2px #242424 solid;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
}
.row:after {
clear: both;
}
.col {
width: 100%;
}
/*Tablet View*/
#media (min-width: 700px) {
.style-logo {
float: center;
}
body {
max-width: 778px;
}
.style-nav ul li {
display: inline-block;
}
h1.normal {
font-size: 57px;
text-transform: uppercase;
font-weight: 200;
margin-bottom: 60px;
}
.row:before,
.row:after {
content: "";
display: table;
padding: 5px;
color: #FFFFFF;
text-align: center;
}
.col-tablet {
width: 50%;
}
.col {
float: left;
padding-bottom: 14px;
padding-left: 7px;
padding-right: 7px;
}
}
/*Desktop View*/
#media (min-width: 1024px) {
.style-logo {
float: center;
}
.style-nav {
float: center;
}
.col-desktop {
width: 25%;
}
body {
max-width: 1200px;
}
}
<!doctype html>
<html>
<head>
<link href="CSS/Styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<meta charset="utf-8">
<title>Home</title>
</head>
<body>
<header>
<div class="row">
<div class="col">
<img class="logo" src="Images/Logo company.png" alt="Logo">
<nav class="style-nav">
<ul>
<li>Education</li>
<li>Photos</li>
<li>Services</li>
</ul>
</nav>
</div>
</div>
</header>
<main>
<div class="row">
<div class="col">
<div class="hero">
<h3>Editor's Choice</h3>
<h4>Maarten Nauta</h4>
<h1 class="normal small">Webdesign</h1>
Read More
</div>
</div>
</div>
<div class="row">
<div class="col col-tablet">
<div class="infobox-tan">
<h2>Education</h2>
<p>And a summary of my achievements</p>
Read More
</div>
</div>
<div class="col col-tablet">
<div class="infobox-grey">
<h2>Services</h2>
<p>Graphic/Web design - Video/Photo editing</p>
Read More
</div>
</div>
</div>
<div class="row">
<div class="col col-tablet col-desktop"><img src="Images/Stock-img-1.jpeg.jpg" alt="1"></div>
<div class="col col-tablet col-desktop"><img src="Images/Stock-img-2.jpeg.jpg" alt="2"></div>
<div class="col col-tablet col-desktop"><img src="Images/Stock-img-3.jpeg.jpg" alt="3"></div>
<div class="col col-tablet col-desktop"><img src="Images/Stock-img-4.jpeg.jpg" alt="4"></div>
</div>
</main>
<footer>
<div class="row">
<div class="col">
<p class="footertext">©2018 Maarten Nauta</p>
</div>
</div>
</footer>
</body>
</html>
Your iPhone has more pixels per inch than a standard desktop screen, and is in fact >700 pixels wide. In order to get a webpage to treat pixels as a unit of screen screen size you need a meta viewport tag
<meta name="viewport" content="width=device-width, initial-scale=1">
With this tag your media queries will operate as though the screen is the standard 72 ppi.
You are missing the viewport meta tag
(...) Apple introduced the "viewport meta tag" in Safari iOS to let
web developers control the viewport's size and scale. Many other
mobile browsers now support this tag, although it is not part of any
web standard. Apple's documentation does a good job explaining how web
developers can use this tag, but we had to do some detective work to
figure out exactly how to implement it in Fennec. For example,
Safari's documentation says the content is a "comma-delimited list,"
but existing browsers and web pages use any mix of commas, semicolons,
and spaces as separators.
<meta name="viewport" content="width=device-width, initial-scale=1">
This question already has answers here:
How do you keep parents of floated elements from collapsing? [duplicate]
(15 answers)
Closed 5 years ago.
Trying to apply a background color to my header but why isn't the #header background color visible? I tried
header { background: grey; width: 100%; margin: 0 auto }
I also tried diffrent colors but it doesn't seem to be working. I'm new to this field so any help will be appreciated. I attached the html and css codes.
* {
margin: 0 auto
}
#slogan {
background: #063540;
color: white;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: small;
width: 100%;
padding-left: 8%;
}
#header {
background: grey;
width: 100%;
margin: 0 auto
}
a {
text-decoration: none;
}
#logo a {
color: #063540;
}
#logo {
float: left;
padding-left: 8%;
color: #063540;
margin-top: 20px;
}
.navbar {
float: right;
top: 0px;
padding-right: 20%;
margin-top: 20px;
}
.navbar a {
padding-left: 25px;
color: #063540;
font-size: 14pt;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<title>MyWebsite</title>
</head>
<body>
<p id="slogan">We are creative agency</p>
<div id="header">
<div id="logo">
<a href="/">
<h1>MyWebsite</h1>
</a>
</div>
<div class="navbar">
Home
About
Services
Projects
Pages
Blog
Contact
</div>
</div>
</body>
</html>
It because you have floating element in your header so you need to clear the float element.
The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow.
Please refer this link for more understanding.
#header:before, #header:after {
content: "";
clear: both;
display: table;
}
*{
margin: 0 auto
}
#slogan {
background: #063540;
color: white;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: small;
width: 100%;
padding-left: 8%;
}
#header {
background: grey;
width: 100%;
margin: 0 auto
}
#header:before, #header:after {
content: "";
clear: both;
display: table;
}
a {
text-decoration: none;
}
#logo a {
color: #063540;
}
#logo {
float: left;
padding-left: 8%;
color: #063540;
margin-top: 20px;
}
.navbar {
float: right;
top: 0px;
padding-right: 20%;
margin-top: 20px;
}
.navbar a {
padding-left: 25px;
color: #063540;
font-size: 14pt;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<title>MyWebsite</title>
</head>
<body>
<p id="slogan">We are creative agency</p>
<div id="header">
<div id="logo"><h1>MyWebsite</h1></div>
<div class="navbar">
Home
About
Services
Projects
Pages
Blog
Contact
</div>
</div>
</body>
</html>
All elements inside #header are float, so #header get out of normal flow of document.
Method 1)
#header:after {
content: '';
display: block;
clear: both;
}
* {
margin: 0 auto
}
#slogan {
background: #063540;
color: white;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: small;
width: 100%;
padding-left: 8%;
}
#header {
background: grey;
width: 100%;
margin: 0 auto;
}
#header:after {
content: '';
display: block;
clear: both;
}
a {
text-decoration: none;
}
#logo a {
color: #063540;
}
#logo {
float: left;
padding-left: 8%;
color: #063540;
margin-top: 20px;
}
.navbar {
float: right;
top: 0px;
padding-right: 20%;
margin-top: 20px;
}
.navbar a {
padding-left: 25px;
color: #063540;
font-size: 14pt;
}
<p id="slogan">We are creative agency</p>
<div id="header">
<div id="logo"><h1>MyWebsite</h1></div>
<div class="navbar">
Home
About
Services
Projects
Pages
Blog
Contact
</div>
</div>
Method 2)
Insert <br style="clear: both"> to html code:
* {
margin: 0 auto
}
#slogan {
background: #063540;
color: white;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: small;
width: 100%;
padding-left: 8%;
}
#header {
background: grey;
width: 100%;
margin: 0 auto;
}
a {
text-decoration: none;
}
#logo a {
color: #063540;
}
#logo {
float: left;
padding-left: 8%;
color: #063540;
margin-top: 20px;
}
.navbar {
float: right;
top: 0px;
padding-right: 20%;
margin-top: 20px;
}
.navbar a {
padding-left: 25px;
color: #063540;
font-size: 14pt;
}
<p id="slogan">We are creative agency</p>
<div id="header">
<div id="logo"><h1>MyWebsite</h1></div>
<div class="navbar">
Home
About
Services
Projects
Pages
Blog
Contact
</div>
<br style="clear: both">
</div>
That is happening because the children from the header have float property, when an element has float property, they are actually not rendered as a block element
https://stackoverflow.com/a/16568504/2894798
That's why by default your header has height 0, so to fix it I would add a clear fix property,
* {
margin: 0 auto;
}
#slogan {
background: #063540;
color: white;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: small;
width: 100%;
padding-left: 8%;
}
#header {
background: grey;
width: 100%;
margin: 0 auto;
}
a {
text-decoration: none;
}
#logo a {
color: #063540;
}
#logo {
float: left;
padding-left: 8%;
color: #063540;
margin-top: 20px;
}
.navbar {
float: right;
top: 0px;
padding-right: 20%;
margin-top: 20px;
}
.navbar a {
padding-left: 25px;
color: #063540;
font-size: 14pt;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<title>MyWebsite</title>
</head>
<body>
<p id="slogan">We are creative agency</p>
<div id="header">
<div id="logo"><h1>MyWebsite</h1></div>
<div class="navbar">
Home
About
Services
Projects
Pages
Blog
Contact
</div>
<div style="clear:both;">
</div>
</body>
</html>
My slideshow div is paced above my header nav in HTML to create a fullscreen slideshow but all the elements on my page are fading with my slideshow, how do I prevent that?
Thank you
I'm new at this, so I'm not sure if the layout is correct or not.
enter code here
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
"use strict";
var scroll_start = 0;
var startchange = $('#about');
var offset = startchange.offset();
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$('#header').css('background-color', '#3A3939');
} else {
$('#header').css('background-color', 'transparent');
}
});
});
var currentBackground = 0;
var backgrounds = [];
backgrounds[0] = 'images/pic3.png';
backgrounds[1] = 'images/pic2.png';
backgrounds[2] = 'images/pic1.png';
backgrounds[3] = 'images/pic4.png';
function changeBackground() {
currentBackground++;
if(currentBackground > 3) currentBackground = 0;
$('.slideshow').fadeOut(900,function() {
$('.slideshow').css({
'background-image' : "url('" + backgrounds[currentBackground] + "')"
});
$('.slideshow').fadeIn(1000);
});
setTimeout(changeBackground, 3500);
}
$(document).ready(function() {
setTimeout(changeBackground, 3500);
});
</script>
</head>
<body>
<div id="home">
<div class="slideshow">
<div id="header">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
<div id="styledimg"></div>
</nav>
</div>
<div id="head-soc">
<div id="linkedin-icon">Linkedin</div>
<div id="youtube-icon">Youtube</div>
<div id="facebook-icon">Facebook</div>
</div>
<div class="content">
<p>Create, Collaborate, Innovate</p>
</div>
</div>
</div>
<div id="about">
<div class="wrapper">
<h4>Titus Jackson</h4>
<p>Film Maker ~ Screen Writer ~ Editor</p>
</div>
<img src="images/Titus-Jackson1.jpg" alt="Titus Jackson" width="425" height="365" border="0" />
<div id="section2">
<p>For over 15 years <span>Cinemuze</span> has had the honor of working with some of the most talented creative collaborators tulsa has to offer. We love working on a variety of projects. As it is our goal to be a well rounded company with our fingers in a lot of pies.</p>
<p>Our paramount value is to approach the material with excellence, and an original point of view to tell a unique and compelling story. It is our belief that life is what you make of it, and the saddest lost is not to explore all your potential in the short time you've been given.</p>
<p>We've had the opportunity to work on multiple feature films and national television shows ranging from christian television to TLC television. We've created multiple award winning music vidoes, short films and even a feature film. Feel free to take a look around the site, and drop us an email, we look forward to hearing from you.</p>
<img src="images/email1.png" alt="email" width="26" height="26" />
</div>
</div>
<div id="projects">
<h5>View our current projects:</h5>
<div class="wrapper1">
<iframe width="265" height="200" src="https://www.youtube.com/embed/8CZJzUk7fFM" frameborder="0" allowfullscreen></iframe>
<p>Eugene Gregory Promo</p>
</div>
<div id="wrapper2">
<iframe width="265" height="200" src="https://www.youtube.com/embed/cLm3Vh4_Ruc" frameborder="0" allowfullscreen></iframe>
<p>Family Cup Promo</p>
</div>
<div class="wrapper3">
<iframe width="265" height="200" src="https://www.youtube.com/embed/2t9-vVNgF7c" frameborder="0" allowfullscreen></iframe>
<p>This Generation</p>
</div>
</div>
<div id="contact">
<section3>
<h3>To connect with Us:</h3>
<p><span>Cinemuze</span> is based in Tulsa, Oklahoma and travels widely for a variety of projects.</p>
<p>If your interested in our work, you can connect with us via email or phone.</p>
</section3>
<div class="section4">
<img src="images/email1.png" alt="email" width="26" height="26" />
<a href="mailto:titusjackson#mac.com">
<p>titusjackson#mac.com</p>
</a><img src="images/phone.png" alt="phone" width="24" height="24" />
<p>+1 (918) 671-3340</p>
</div>
</div>
<footer>
</footer>
</body>
</html>
#charset "UTF-8";
/* CSS Document */
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #000;
}
#header {
width: 100%;
margin-top: -15px;
position: fixed;
background-color: transparent;
transition-duration: 1s;
}
div#header nav {
width: 1425;
height: 110px;
}
div#header ul {
list-style: none;
margin-left: 100px;
float: left;
}
div#header li {
float: left;
margin-left: 64px;
margin-top: 10px;
}
div#header a {
color: white;
text-decoration: none;
line-height: 45px;
font-size: .9em;
text-transform: capitalize;
}
div#header a:hover {
color: rgba(249,0,3,1.00);
}
div#styledimg {
background-image: url(images/logo.png);
background-repeat: no-repeat; width: 224px;
height: 85px;
float: right;
margin-right: 150px;
margin-top: 10px;
z-index: 1003;
}
/*page-specific header styles*/
#header {
background-color: rgba(60,59,59,1.00);
width: 1425;
height: 110px;
}
/* layout styles*/
/*home page*/
.slideshow {
background-image:url(images/pic3.png);
background-size: cover;
background-repeat: no-repeat;
background-position: 500px 0px 0px;
background-attachment: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 900px;
line-height: 0px;
margin-top: -330px;
padding-top: -15px;
}
#header {
background-color: transparent;
}
#head-soc {
width: 129;
height: 86;
margin: 10px;
padding: 0px;
float: right;
margin-right: 40px;
margin-top: 255px;
right: 25px;
position: fixed;
z-index: 2;
}
#head-soc a {
margin-top: 10px;
margin-right: 20px;
}
#linkedin-icon a {
text-indent: -9999px;
font-size: 0;
line-height: 0;
overflow: hidden;
height: 43px;
width: 43px;
border: 0;
background-image: url(images/socialsprites_white.png);
display: block;
float: right;
background-position: 0px 0px;
}
#linkedin-icon a:hover {
background-image: url(images/socialsprites_white.png);
background-position: 0px -43px;
}
#youtube-icon a {
text-indent: -9999px;
font-size: 0;
line-height: 0;
overflow: hidden;
height: 43px;
width: 43px;
border: 0;
background-image: url(images/socialsprites_white.png);
display: block;
float: right;
margin-left: 20px;
background-position: -43px 0px;
}
#youtube-icon a:hover {
background-image: url(images/socialsprites_white.png);
background-position: -43px -43px;
}
#facebook-icon a {
text-indent: -9999px;
font-size: 0;
line-height: 0;
overflow: hidden;
height: 43px;
width: 43px;
border: 0;
background-image: url(images/socialsprites_white.png);
display: block;
float: right;
background-position: -86px -85px;
}
#facebook-icon a:hover {
background-image: url(images/socialsprites_white.png);
background-position: -86px -128px;
}
.content p {
font-family: BlairMdITC TT-Medium;
font-size: 44px;
line-height: 120%;
width: 550px;
text-align: center;
padding-top: 360px;
margin-top: 330px;
margin-left: 575px;
color: rgba(248,241,241,1.00);
}
/* about page*/
div#about {
background-color:rgba(188,184,184,1.00);
height: 550px;
margin-top: -35px;
padding-top: 100px;
}
.wrapper h4 {
font-famiy: Geneva;
font-size: 25px;
padding-left: 224px;
color: rgba(249,0,3,1.00);
margin-bottom: -20px;
}
.wrapper p {
font-family: Geneva;
font-size: 12px;
margin-left: 226px;
margin-top: 20px;
margin-bottom: 15px;
color: rgba(134,133,133,1.00);
}
h6 {
padding-left: 225px;
margin-top: -20px;
margin-bottom: 10px;
color: rgba(60,59,59,1.00);
}
img {
float: left;
margin-left: 225px;
margin-right: 15px;
}
#section2 {
font-family: Helvetica;
font-size: 16px;
color: rgba(60,59,59,1.00);
width: 1280px;
padding-top: -80px;
height: 300px;
}
#section2 p {
color: rgba(60,59,59,1.00);
}
#section2 img {
margin-left: 2px;
}
span {
color: rgba(249,0,3,1.00);
}
/* projects page */
div#projects {
background-color: #3A3939;
background-position: 25px;
height: 450px;
margin: 0px;
line-height: 0;
padding-top: 25px;
}
.wrapper1 {
float: left;
width: 265;
height: 200px;
margin-left: 200px;
padding-top: 50px;
}
#wrapper2 {
float: right;
width: 265;
height: 200px;
margin-right: 200px;
padding-top: 50px;
}
.wrapper3 {
float: left;
margin-left: 175px;
padding-top: 50px;
width: 265;
height: 200px;
}
.wrapper1 p {
margin-left: 42px;
font-family: BlairMdITC TT-Medium;
font-size: 20px;
color: rgba(249,0,3,1.00);
margin-top: 20px;
}
#wrapper2 p {
margin-left: 65px;
font-family: BlairMdITC TT-Medium;
font-size: 20px;
color: rgba(249,0,3,1.00);
margin-top: 20px;
}
.wrapper3 p {
margin-left: 70px;
font-family: BlairMdITC TT-Medium;
font-size: 20px;
color: rgba(249,0,3,1.00);
margin-top: 20px;
}
div#projects h5 {
margin-left: 650px;
font-size: 20px;
font-family: Helvetica, Arial, sans-serif;
color:rgba(179,178,178,1.00);
padding-bottom: 45px;
margin-bottom: -15px;
}
p {
font-size: 16px;
margin-left: 195px;
color: rgba(249,247,247,1.00);
}
/* contact page */
div#contact {
background-image:url(images/studio4.png);
background-size: cover;
background-attachment: fixed;
padding-top: 35px;
padding-bottom: 100px;
}
section3 h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
color: rgba(249,0,3,1.00);
margin-left: 660px;
margin-top: 75px;
}
section3 p {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: rgba(255,255,255,1.00);
width: 650px;
padding-left: 85px;
margin-left: 385px;
}
.section4 {
font-family: Helvetica, sans-serif;
font-size: 16px;
color: rgba(255,255,255,1.00);
margin-left: 440px;
margin-top: 50px;
}
.section4 a {
text-decoration: none;
}
.section4 a p:hover {
color: rgba(249,0,3,1.00);
}
/* ~~ The footer ~~ */
/*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */
header, section, footer, aside, article, figure {
display: block;
}
You've placed all of your HTML inside of the div with the slideshow class:
<div class="slideshow"> //this is left open
//other divs are closed later on like this one:
<div id="styledimg"></div>
//but all the divs below slideshow are inside of the slideshow div
So whatever animations you're doing to the slideshow div, will affect all of its children.
my website is essentially styled to be a full screen site, taking up any available space it can to show the website. As a result, the contents of the page has to automatically adjust to the screen size it's displaying on.
For some elements I have used float so that paragraphs can appear side-by-side to each other, and as a result I had to float the footer so that if the height of the content area increases the footer will move down to accommodate for the extra space the main text needs to take up.
Without float, the footer will not move down and the main content will overflow on to it should someone have a narrow screen.
Because of this, the main content area and the footer trails off the side of the screen on an iPad. I know this is an issue with the float because the header doesn't do it; only the content area and the footer.
I would like to fix this but not sure what to do.
The website is http://neerajmorar.co.uk
It works perfectly on PC, Linux and I assume the Mac since it works fine on Safari, but not on the iPad.
HTML code for index page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Neeraj Morar | Home</title>
<meta charset="UTF-8">
<meta name="description" content="This is the personal website of Neeraj Morar.">
<meta name="keywords" content="Neeraj, Morar, neerajmorar, neerajmorar.co.uk, personal, website, portfolio, home, computing, information, systems, university, of, west, london, sql, server, web, design">
<meta name="google-site-verification" content="k3NDZl5POUlqaDoEEOTdrX50XrOcQ9nmQr9IFJK1NlU" />
<meta name="msvalidate.01" content="6F4E786D9BE746A1AC789E62D2C0F961" />
<link type="text/css" rel="stylesheet" href="StyleSheet1.css">
<link type="text/css" rel="stylesheet" href="mobile.css" media="only screen and (max-device-width: 480px)">
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script>(function (a, b) { if (/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) window.location = b })(navigator.userAgent || navigator.vendor || window.opera, 'http://m.neerajmorar.co.uk');</script>
<script type="text/javascript">
$(document).ready(function () {
$(".content").css("display", "none");
$(".content").fadeIn(5000);
if ($(".header a").click(function (event) {
event.preventDefault();
linkLocation = this.href;
$(".content").fadeOut(1000, redirectPage);
}));
else if ($(".transition").click(function (event) {
event.preventDefault();
linkLocation = this.href;
$(".content").fadeOut(1000, redirectPage);
}));
function redirectPage() {
window.location = linkLocation;
}
});
</script>
</head>
<body>
<div class="header">
<ul class="index">
<li>NeerajMorar.co.uk</li>
</ul>
<ul class="nav">
<li class="links">Home</li>
<li class="links">About Me</li>
<li class="links">Computing Skills</li>
<li class="links">Web Design</li>
<li>Contact</li>
</ul>
</div>
<div class="box">
<div class="content">
<div class="hello">
<h2>Hello, I'm Neeraj</h2>
<p>Business Systems Apprentice at Stanmore College, Student at University of West London, and TIME's Person of the Year 2006. (No, seriously, it's true!)</p>
</div>
<div class="taken">
<h2>I have a very particular set of skills...</h2>
<p>Oh, boy, do I! Pianist at heart (or a pedantic Organist, depending on how you look at it), a Black Belt in Tae Kwon Do, and a true nerd - not a skill, but I thought it would be nice to throw it in there!</p>
</div>
<div class="site">
<h2>This site?</h2>
<p>This website has been designed to give you an overview of who I am and what I do; it's a chance for you to be seduced by me! Please feel free to look around, and don't hesitate to contact me.</p>
</div>
</div>
</div>
<div class="footer">
<div class="info">
<a href="http://www.w3.org/html/logo/">
<img src="http://www.w3.org/html/logo/badge/html5-badge-h-css3.png" width="133" height="64" alt="HTML5 Powered with CSS3 / Styling" title="HTML5 Powered with CSS3 / Styling">
</a>
<small>© Copyright 2013 by Neeraj Morar. All Rights Reserved.</small>
</div>
</div>
</body>
</html>
CSS code:
#font-face
{
font-family: "Skolar OT";
src: url("fonts/SKOLAR-REGULAR-PVT.OTF");
}
html
{
overflow-y: scroll;
overflow-x: hidden;
}
body
{
font-family: "Skolar OT", Calibri, Arial, sans-serif;
margin-top: -18px;
margin-left: auto;
margin-right: auto;
text-align: justify;
font-size: larger;
background-color: #e6e6e6;
}
.header
{
height: 224px;
background-color: #ab0000;
box-shadow: 0px 4px 5px #696969;
}
.index
{
display: block;
position: relative;
top: 44%;
width: 505px;
margin-left: auto;
margin-right: auto;
}
.index li
{
display: inline;
font-size: 300%;
}
.nav
{
position: relative;
top: -83px;
margin-left: auto;
margin-right: auto;
width: 670px;
background-color: #780000;
padding: 10px;
border-radius: 0px 0px 3px 3px;
}
.nav li
{
display: inline;
font-size: x-large;
padding-left: 10px;
}
.links
{
border-style: none solid none none;
border-width: 2px;
padding-right: 10px;
}
.header a
{
color: #fff;
transition: 0.7s;
}
.header a:hover
{
color: #d2d2d2;
}
.box
{
margin-top: 10px;
min-height: 560px;
border-style: none;
margin-left: auto;
margin-right: auto;
background-color: #e6e6e6;
padding: 25px;
}
.content
{
max-width: 1500px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
}
.footer
{
float: left;
width: 97.45%;
background-color: #780000;
height: 83px;
padding: 25px;
}
.footer small
{
position: relative;
display: block;
top: 10px;
color: #e6e6e6;
}
.hello
{
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.taken
{
max-width: 600px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
}
.site
{
max-width: 600px;
margin-top: 50px;
margin-right: auto;
margin-left: auto;
}
.about
{
width: 47.5%;
float: left;
margin-right: 5%;
}
.job
{
width: 47.5%;
float: left;
}
.ambition
{
width: 47.5%;
float: left;
margin-right: 5%;
}
.other
{
width: 47.5%;
float: left;
}
.compute
{
max-width: 600px;
font-size: larger;
margin-left: auto;
margin-right: auto;
}
.web
{
width: 40%;
float: left;
margin-left: 8%;
margin-right: 5%;
}
.software
{
width: 40%;
float: left;
}
.web2
{
max-width: 700px;
font-size: x-large;
margin-left: auto;
margin-right: auto;
}
.contact
{
margin-left: 22%;
margin-right: 22%;
}
#smooth
{
width: 100%;
float: left;
}
a
{
text-decoration: none;
color: black;
}
fieldset
{
border-style: none;
border-color: black;
border-width: 1px;
}
textarea
{
font-family: Arial, sans-serif;
background-color: #fff;
background-color: rgba(203, 203, 203, 0.5);
border-color: black;
border-width: 1px;
}
input[type="text"]
{
font-family: Arial, sans-serif;
background-color: #fff;
background-color: rgba(203, 203, 203, 0.5);
border-color: black;
border-width: 1px;
}
input[type="email"]
{
font-family: Arial, sans-serif;
background-color: #fff;
background-color: rgba(203, 203, 203, 0.5);
border-color: black;
border-width: 1px;
}
li a.transition
{
font-weight: bold;
transition: 0.5s;
}
li a.transition:hover
{
opacity: 0.5;
}
li a.transition:active
{
color: #000;
}
.content p a.transition
{
font-weight: bold;
transition: 0.5s;
}
.content p a.transition:hover
{
opacity: 0.5;
}
.content p a.transition:active
{
opacity: 0.5;
}
.a1
{
font-weight: bold;
transition: 0.5s;
}
.a1:hover
{
opacity: 0.5;
}
#a1
{
font-weight: bold;
transition: 0.5s;
}
#a1:hover
{
opacity: 0.5;
}
You can just view the source code of my website and the style sheet from there...
Try using clear:both before footer and use overflow:hidden in your content area. That way you can get rid of the floats.