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.
Related
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
So I'm trying to create a landing page exactly like this (FYI, to work on my HTML/CSS skills, I have decided to exactly imitate this landing page just for practice!)
http://oi67.tinypic.com/b8qp8i.jpg
However, as you can see from what I did, the full background picture (sailing boat + ocean) does not show up in the first column: http://oi66.tinypic.com/o7ktgl.jpg
Another issue is that on the left side of the background image on the third column, I keep seeing on a small "broken page" icon (I don't know why it's there but it's really been annoying) ... is it an image problem or something wrong with the image file?
Help would be much appreciated, thank you!
Here is my full HTML and CSS code:
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta name="description" content="Your description goes here">
<meta name="keywords" content="one, two, three">
<title>Relaxr</title>
<!-- external CSS link -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="mainColumn">
<header>
<h1>Relaxr</h1>
<h2>Get piece of mind with a single tap</h2>
</header>
<span>
<button id="getButton">Get it Now</button>
</span>
</div>
<div id="secondColumn">
<header>
<h1>Benefits</h1>
<p>The perfect personal assistant. Relaxr does your job<br>for you so you can enjoy life as it is meant to be.</p>
<ul class="benefitss">
<li>Schedule meetings for you</li>
<li>Excel automation to complete your <br>work for you</li>
<li>Responds to e-mails on your behalf</li>
<li>Does all yor work for you with our<br>revolutionary technology</li>
</ul>
</header>
</div>
<div id="thirdColumn">
<img src="../images/testimonial_bg.jpg">
<p>“Relaxr changed my life. I’ve been able<br> to travel the world, spend limited time<br> working and my boss keeps thanking<br>me for crushing work.”</p>
<p>- Amanda, Intuit</p>
</div>
<div id="fourthColumn">
<button id="signupButton">Sign Up Now!</button>
</div>
<div id="fifthColumn">
<p>Relaxr</p>
<div id="footer">
<p>Copyright 2015. Relaxr.</p>
</div>
</div>
</body>
</html>
CSS:
/******************************************
/* SETUP
/*******************************************/
/* Box Model Hack */
* {
-moz-box-sizing: border-box; /* Firexfox */
-webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
box-sizing: border-box; /* IE */
}
/* Clear fix hack */
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clear {
clear: both;
}
.alignright {
float: right;
padding: 0 0 10px 10px; /* note the padding around a right floated image */
}
.alignleft {
float: left;
padding: 0 10px 10px 0; /* note the padding around a left floated image */
}
/******************************************
/* BASE STYLES
/*******************************************/
body {
color: #000;
font-size: 12px;
line-height: 1.4;
font-family: Open Sans;
background: url(../images/header_bg.jpg) no-repeat center top;
background-size: cover;
}
/******************************************
/* LAYOUT
/*******************************************/
/*MAIN COLUMN*/
#mainColumn {
width: 100%;
height: 450px;
text-align: center;
}
#mainColumn h1 {
color: white;
padding-right: 80%
}
#mainColumn h2 {
color: white;
font-size: 24px;
font-weight: 600;
letter-spacing: 1px;
margin-top: 50px;
text-align: center;
}
header {
height: 40%;
}
/*GET IT NOW BUTTON*/
#getButton {
background-color: yellow;
border-radius: 3px;
border-style: none;
font-size: 14px;
font-weight: 700;
height: 30px;
width: 130px;
}
/*SECOND COLUMN*/
#secondColumn {
width: 100%;
margin: auto;
height: 360px;
background-color: white;
}
#secondColumn h1 {
padding-left: 65px;
padding-top: 60px;
color: navy;
font-size: 20px;
font-weight: 700;
}
#secondColumn p {
font-size: 13px;
padding-left: 70px;
}
.benefitss {
margin-left: 80px;
padding-top: 20px;
font-size: 13px;
}
.benefitss li{
padding-top: 2px;
}
/*THIRD COLUMN*/
#thirdColumn {
width: 100%;
height: 250px;
}
#thirdColumn p:nth-child(2) {
color: #ffffff;
font-style: italic;
font-size: 15px;
text-align: center;
}
#thirdColumn p:nth-child(3) {
color: #ffffff;
font-size: 18px;
font-weight: 700;
text-align: center;
}
/*FOURTH COLUMN*/
#fourthColumn {
background-color: yellow;
width: 100%;
height: 75px;
}
/*SIGN UP BUTTON*/
#signupButton {
background-color: #000040;
color: white;
border-radius: 3px;
border-style: none;
font-size: 12px;
font-weight: 800;
height: 30px;
width: 150px;
margin-left: 42.9%;
margin-top: 25px;
}
#fifthColumn {
background-color: #000000;
width: 100%;
height: 225px;
position: absolute;
}
#fifthColumn p {
color: yellow;
text-align: center;
font-size: 24px;
font-weight: 800;
}
#footer p {
font-size: 9px;
color: #ffffff;
text-align: center;
padding-top: 11%;
}
i am making a website when i am om full screen the website looks good but when i am making the screen smaller the divs come out etc.
Here is a printscreen of it:
How do i fix this?
This is the HTML and CSS im using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Jari Rengeling</title>
<link rel="stylesheet" href="../CSS/StyleSheet.css" type="text/css">
</head>
<body>
<div id="header">
<img alt="wood" src="../Images/wood.png" id="wood">
<div id="menu">
<span id="naam">Jari Rengeling</span>
<ul id="nav1">
<li class="li1">Home</li>
<li class="li1">Over mij</li>
<li class="li1">Ervaringen</li>
<li class="li1">Contact</li>
</ul>
</div>
<div id="headertext">
<h1 class="space">Welkom</h1>
<p class="space" id="headerp">Mijn naam is Jari Rengeling, ik ben een beginnend Applicatieontwikkelaar. Neem gerust een kijkje op mijn eigen portfolio.</p>
</div>
</div>
<div id="footer">
<div id="navigatie">
<h2 id="h22">Navigatie</h2>
<ul id="ul2">
<li class="li2">Home</li>
<li class="li2">Over mij</li>
<li class="li2">Ervaringen</li>
<li class="li2">Contact</li>
</ul>
</div>
<div id="projecten">
<h2 id="h21">Projecten</h2>
<div id="project1"></div>
<div id="project2"></div>
<p>Geen huidge projecten...</p>
</div>
<div id="socialmedia">
<h2 id="h23">Sociale Media</h2>
<img alt="facebook" src="../Images/facebook.png" id="facebook" class="miniaturen">
<img alt="twitter" src="../Images/twitter.png" id="twitter" class="miniaturen">
</div>
<div id="contact">
<h2 id="h24">Contact</h2>
<p>Klik hier om mijn contact gegevens te bekijken!</p>
</div>
</div>
</body>
</html>
CSS
body
{
margin: 0px;
padding: 0px;
background-color: rgba(154, 135, 100, 1.0);
width: auto;
}
#menu
{
width: 100%;
height: 100px;
z-index: 1;
background-color: rgba(154, 135, 100, 0.80);
}
#nav1
{
margin: 0px;
text-align: right;
margin-right: 400px;
}
.li1
{
display: inline;
padding-left: 2%;
font-size: 19px;
line-height: 100px;
font-family: Champagne;
color: white;
}
#wood
{
position: absolute;
z-index: -1;
height: 800px;
width: 100%;
}
#naam
{
font-family: Champagne;
font-size: 40px;
color: white;
line-height: 100px;
margin: 0px;
position: absolute;
margin-left: 400px;
}
.space
{
margin: 0px;
color: white;
padding-top: 20px;
text-align: right;
font-family: Caviar;
}
#headerp
{
max-width: 480px;
display: inline-block;
font-size: 25px;
}
#headertext h1
{
font-size: 50px;
}
#headertext
{
float: right;
margin-right: 400px;
margin-top: 240px;
}
#footer
{
background-color: rgba(154, 135, 100, 0.80);
height: 210px;
width: 100%;
margin-top: 700px;
}
#h21
{
font-family: Caviar;
margin-left: 400px;
color: white;
border-bottom: 1px solid white;
max-width: 230px;
padding-top: 10px;
}
#project1
{
border: 1px solid black;
width: 100px;
height: 100px;
margin-left: 400px;
background-color: rgba(128, 128, 128, 0.15);
position: absolute;
padding-top: 0px;
}
#project2
{
border: 1px solid black;
width: 100px;
height: 100px;
margin-left: 530px;
background-color: rgba(128, 128, 128, 0.15);
padding-top: 0px;
position: absolute;
}
p
{
font-family: Caviar;
color: #ebebeb;
}
#projecten p
{
margin-left: 400px;
margin-top: 120px;
position: absolute;
}
#projecten
{
margin-left: 200px;
margin-top: 0px;
padding-top: 0px;
}
#navigatie
{
margin-left: 400px;
position: absolute;
}
.li2
{
list-style-type: none;
}
#ul2
{
position: absolute;
margin: 0px;
padding: 0px;
padding-top: 10px;
font-family: Caviar;
color: #ebebeb;
}
#h22
{
font-family: Caviar;
color: white;
padding-top: 10px;
border-bottom: 1px solid white;
margin: 0px;
}
a:hover
{
color: black;
}
#h23
{
font-family: Caviar;
color: white;
padding-top: 10px;
border-bottom: 1px solid white;
margin: 0px;
}
#socialmedia
{
position: relative;
margin-left: 900px;
top: -56px;
padding: 0px;
max-width: 214px;
}
.miniaturen
{
padding-right: 5px;
padding-top: 20px;
}
#contact
{
position: absolute;
margin-left: 1200px;
top: 802px;
padding: 0px;
max-width: 100px;
}
#h24
{
font-family: Caviar;
color: white;
padding-top: 10px;
border-bottom: 1px solid white;
margin: 0px;
}
a
{
text-decoration: none;
color: white;
font-family: Champagne;
}
There is a rule in css known as #media rule.
#media is used for creating responsive webpage.
example of #media rule :
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
#media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>
</body>
</html>
Seeing your CSS code, I noticed you are almost always using pixels as a measure. You shouldn't do that unless you know exactly the size of the screen were your website will be open. Otherwise, using percentages is always a good thing. You can control the style like with pixels and when you resize, since everything has it's size according their parent elements, everything will resize.
I changed a bit of your CSS and HTML code for you to see it. It's not perfect but you can understand the power of using percentages instead of pixels (:
http://jsbin.com/tacayaweya/edit?html,css,output
You could use #media queries (just like it was said here) to control the style your website based on the screen size. The example of #Advaith is a good example of how to use it.
As also mentioned in the comments, using frameworks like Bootstrap can help you with the design of your website.
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.
I'm almost finished with this site, and am just now trying to make it cross-browser. It works wonderfully in everything but IE6. I've fixed two of the problems it had, but am lost on the last one. The left sidebar moves right when the window is re-sized to something around 800px. The more you re-size, the more it moves, eventually covering up the content. This also seems to affect the header by shrinking it. The header is a small problem, but mostly just an annoyance.
I've tried a few fixes, but that did nothing. The only thread I could find that relates to this mentions that jQuery may be affecting it, but I have no jQuery set on that div. I'd appreciate any help that is given, as my deadline is approaching.
My HTML is:
<!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" />
<title></title>
<script type="text/javascript" src="file:///C:/resources/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../_script/textShorten.js"></script>
<script type="text/javascript" src="file:///C:/Users/Matt/Desktop/Coding/Framed/framed_over.js"></script>
<link rel="stylesheet" href="file:///C:/Users/Matt/Desktop/Coding/Framed/framed.css" type="text/css" />
<link rel="stylesheet" href="../../_script/css.css" type="text/css" />
<style type="text/css">
_#wrapper { height: 600px; }
/* Photo Styles */
#wrapper { padding-right: 241px; }
#sidebar { right: 216px; }
#infobar { margin-right: -241px; }
#content { padding: 10px 20px; }
</style>
</head>
<body>
<div id="header"><img src="../../_images/logo.png" alt=" " id="logo" /></div>
<div id="wrapper">
<!-- START CONTENT -->
<div id="content" class="column">
<img src="-photo-images/thumb__zimmerman-thomas_01.jpg" class="framed" alt="Glasgow Necropolis 1">
<img src="-photo-images/thumb__zimmerman-thomas_02.jpg" class="framed" alt="Glasgow Necropolis 2">
<img src="-photo-images/thumb__zimmerman-thomas_03.jpg" class="framed" alt="Mother (II)">
</div>
<!-- END CONTENT -->
<div id="sidebar" class="column">
<div id="top"><!-- EMPTY DIV --></div>
Home<br />
<a href="archives.html/" id="none" >Archives</a><br />
About Us<br />
Submit Your Work<br />
<hr />
<h2>January 2011</h2>
<h3>Poets</h3>
<ul>
<li>Valentina Cano</li>
<li>Ricky Garni</li>
<li>Kyle Hemmings</li>
<li>Paulus Kapteyn</li>
<li>Tammy Ho Lai-Ming</li>
<li>Laura LeHew</li>
<li>Rhonda Maness</li>
<li>Anita McQueen</li>
<li>Rodney Nelson</li>
<li>Lise Phillips</li>
<li>Changming Yuan</li>
<li>Desmond Kon Zhicheng-Mingdé</li>
</ul>
<br />
<h3>Photographers</h3>
<ul>
<li>Leila Fortier</li>
<li>Tammy Ho Lai-Ming</li>
<li>Allicia Strickland</li>
<li>Jump Study Photography</li>
<li>Thomas Zimmerman</li>
</ul>
</div>
<div id="infobar" class="column">
<h1 id="author">Thomas Zimmerman</h1>
<br />
<!-- Poem List -->
<h4>Poems</h4>
<ul id="submitList">
<li>Glasgow Necropolis 1</li>
<li>Glasgow Necropolis 2</li>
<li>Mother (II)</li>
</ul><br />
<!-- Issue Features -->
<h4>Featured in Issues:</h4>
<ul>
<li>March 2011</li>
</ul>
<!-- Biography Start -->
<h1 id="mark">Biography</h1>
<p id="Bio">
Thomas Zimmerman teaches English, directs the Writing Center, and edits three literary magazines at Washtenaw Community College, in Ann Arbor, MI. Photographs of his have appeared recently in the small magazines Bete Noire and Muscle & Blood.
</p>
</div>
</div>
<script type="text/javascript">$("#infobar li").ellipsis();</script> <!-- For FireFox -->
</body>
My CSS:
/* Poetry Styles */
/* #wrapper { padding-right: 301px; }
#sidebar { right: 276px; }
#infobar { margin-right: -301px; }
#content { padding: 20px 50px; }
*/
/* Photo Styles */
/* #wrapper { padding-right: 241px; }
#sidebar { right: 216px; }
#infobar { margin-right: -241px; }
#content { padding: 10px 20px; }
*/
html,body,div,span,h1,h2,h3,h4,h5,h6,hr,p,a,abbr,acronym,address,big,del,em,img,
small,strike,strong,sub,sup,ul,ol,fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,optgroup,option
{ margin: 0; padding: 0; border: 0; outline: 0;
text-align: left; vertical-align: middle;
text-decoration: none; list-style: none; zoom: 1;
}
/* Layout styles */
body { min-width: 900px; }
div#wrapper { min-height: 600px; padding-left: 176px; padding-right: 301px; overflow: hidden !important; }
div.column { float: left; position: relative; padding-bottom: 20020px !important; margin-bottom: -20000px !important; }
div#content { width: 100%; min-width: 400px; }
div#sidebar { right: 276px; margin-left: -100%; _left: 201px; }
div#infobar { margin-right: -301px; }
/* Layout Styles End */
body
{ background: rgb(20, 20, 20) url("../_images/bg_main.png");
font-family: palitno linotype; color: white; font-size: 12px;
}
h1 { font-size: 20px; font-weight: normal; } h2 { font-size: 18px; font-weight: normal; } h3 { font-size: 16px; font-weight: normal; } h4 { font-size: 14px; font-weight: normal; } h5 { font-size: 12px; font-weight: normal; } h6 { font-size: 10px; font-weight: normal; }
a { color: white; position: relative; }
a:link { color: white; }
a:visited { color: rgb(205, 205, 205); }
a:hover { color: white; left: 3px; }
div#content a:hover { left: 0; }
a:active { color: white; }
a[href="index.html"], a#none, a[href="about.html"], a[href="submit.html"]
{ font-size: 14px; }
div#header
{ height: 80px;
background: rgb(27, 27, 27) url("../_images/bg_head.png") repeat-x;
border-bottom: 1px solid rgb(136, 0, 0);
overflow: hidden;
padding: 10px 40px;
} img#logo { float: left; margin-right: 100px; display: inline; }
div#content { padding: 20px 50px; text-align: center; }
h1.poemTitle { margin-bottom: 10px; text-align: left; }
p.poem { font-size: 14px; text-align: left; margin: 20px 0; line-height: 1.5; }
div#content img { margin: 10px; border: 1px solid rgb(136, 0, 0); }
div#sidebar
{ width: 150px; /* 175 - Padding-left, -right */
background: rgb(27, 27, 27);
border-right: 1px solid rgb(136, 0, 0);
padding: 10px 5px 10px 20px;
font-style: italic;
background: transparent url("../_images/bg_sidebar.png") repeat-y;
z-index: 0;
}
div#sidebar div#top
{ width: 175px; height: 200px;
position: absolute; top: 0px; left: 0; z-index: -1;
background: transparent url("../_images/bg_sidebar-top.png") no-repeat;
}
div#sidebar hr { margin: 8px -5px 8px -20px; border-top: 1px solid transparent; _border-top: 1px solid rgb(100, 0, 0); _border-bottom: 1px solid rgb(136, 0, 0); }
div#sidebar h2 { font-size: 16px; position: relative; left: -8px; }
div#sidebar h3 { font-size: 14px; }
div#sidebar li { position: relative; left: 15px; text-indent: -7px; _text-indent: 0; } /* Sets Wrap Indent. left=8+!'text-indent'; MAX 15px/-7px; */
div#sidebar ul { font-style: normal; }
div#infobar
{ width: 160px;
padding: 10px 20px;
border-left: 1px solid rgb(136, 0, 0);
background: rgb(27, 27, 27) url("../_images/bg_info.png") repeat-y;
} h1#author { position: relative; left: -10px;}
div#infobar h4 { }
div#infobar ul { position: relative; left: 10px; }
div#infobar li { white-space: normal; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; _margin-bottom: 5px; }
h1#mark { position: relative; left: -10px; margin-top: 75px; margin-bottom: 10px; }
p#Bio { max-height: 450px; white-space: normal; }
Simple; dump support for IE 6. Youtube and many other popular sites no longer support it, even Microsoft have abandoned it -- http://ie6countdown.com/