I was just wondering how I can better optimize my website (its just a project, not real) for Snap mode in Windows. Whenever I go into that mode, it screws up the entire webpage (see attached photo).
Thanks Jacob
http://i.stack.imgur.com/V4yF2.jpg
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<link type="text/css" rel="stylesheet" href ="C:\Users\toshiba\Documents\NetBeansProjects\HTML5Application\public_html\css\index.css">
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css" rel ="stylesheet">
<meta charset="UTF-8">
<title> JP's Webservices</title>
</head>
<body>
<div id ="body">
<div class = "nav">
<ul>
<li>
About Me
</li>
<li>
Contact Me
</li>
<li>
Pricing
</li>
</ul>
</div>
<div class ="jumbotron">
<div class ='container'>
<div id ='h1'>
<h1> Need a website? </h1>
<p> Look no further </p>
</div>
</div>
</div>
<div id ="white">
<h1> Qualities </h1>
<h3> What makes me unique? </h3>
</div>
<div id ="gray">
</div>
<div class ="des" >
<div class ="row">
<div class= "col-md-4">
<h2> Knowledge. </h2>
<p> Straight 'outta Compton 1231231231231231231231231231231231231231231231231231231231 </p>
<hr>
</div>
<div class="col-md-4">
<h2> Commitment. </h2>
<p> To excellence and to serve as a value resource 123123123123123123123123123123123123 </p>
<hr>
</div>
<div class="col-md-4">
<h2> Perspective. </h2>
<p> New outlook on your web designs 12312312312311111111111111111111111111111111111111111 </p>
<br>
</div>
</div>
</div>
</body>
<footer>
<div id ='footer'>
</div>
<div id ='footer1'>
<p> Copyright #2014-2015 Jacob Platin </p>
<div id ='foot1'>
<a href="https://twitter.com/TheJakeoShark" target=newtab><img src="https://g.twimg.com/Twitter_logo_blue.png" width="72" height="46" border="0" /></a>
</div>
<div id ='facebook'>
<a href ='https://facebook.com/jacob.platin' target=newtab><img src = 'http://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/267px-F_icon.svg.png' width ="65" height =" 53" /></a>
</div>
</div>
</footer>
</html>
CSS
.des {
position: absolute;
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px rgba(0,0,0,0.5);
text-align: center;
}
.nav li {
list-style-type: none;
text-align: center;
float: left;
width: 33.3%;
position: relative;
z-index: 10;
color: black;
padding-top: 17px;
font-weight: 700;
font-size: 18px;
}
.nav {
background-color: #660000;
height: 85px;
z-index: 1;
box-shadow: 1px 1px 5px black;
}
.nav a {
text-decoration: none;
color: black;
font-weight: 700;
color: white;
}
.jumbotron {
position:relative;
background-image: url(http://www.welivesecurity.com/wp-content/uploads/2013/01/012838004-printed-internet-html-code-tec.jpg);
width: 100%;
height: 530px;
}
#h1 > h1 {
color:#660000;
text-align:left ;
padding-top: 34px;
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px black;
}
#h1 > p {
color:white;
text-align:left ;
padding-left: 5px;
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px black;
font-weight: 300;
}
#master_wrapper{overflow:hidden!important;}
#footer {
width: 1902px;
height: 170px;
background-color: black;
box-shadow: 1px 1px 12px 4px black;
position: absolute;
top: 1300px;
}
#footer1 {
height: 85px;
width: 1902px;
background-color: #660000;
position: absolute;
margin-top: 0px;
box-shadow: -4px -2px 9px black;
top: 1300px;
}
#footer1 > p {
text-align: center;
font-family: 'Georgia', sans-serif;
color: white;
font-size: 18px;
padding-top: 24px;
}
#foot1 {
padding-top: 42px;
text-align: center;
padding-left: 205px;
}
#facebook {
margin-left: 820px;
position: absolute;
bottom: 3px;
top: 95px;
}
.des > h2 {
padding-top: 80px;
color: #660000
}
#photo1 {
background-image: url(http://financeandcareer.com/wp-content/uploads/2013/03/webProgrammingInternship.jpg);
width: 240px;
height: 200px;
position:relative;
}
.des > img {
margin-top: 40px;
box-shadow: 01px 01px 01px 5px black;
}
#h1 {
box-shadow: -1px -1px -32px black;
}
#gray {
width: 100%;
height: 300px;
background-color: #f7f7f7;
position: absolute;
z-index: -11;
margin-top: 0px;
}
#white > h1 {
z-index: 1;
padding-bottom: 100px;
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px rgba(0,0,0,0.5);
color:#660000;
text-align: center;
}
#white > h3 {
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px rgba(0,0,0,0.5);
color:#660000;
position: absolute;
bottom: 230px;
text-align:center;
z-index: 0;
margin-left: 43.3%;
}
.row {
padding-left: 56px;
z-index:-1;
}
Are you referring to resizing the site via snapping (taking up 50%) of the screen width? If you want your site to work whatever the the screen width you need to use fluid containers and media queries, which make up the concept of responsive web design.
From the looks of things your site uses fixed widths which limit the ability for the content to re-size fluidly with the browser when you snap.
Responsive webdesign needs to be integrated form the get go, it can be annoying to update an existing site (but still possible). I'd recommend taking a look at this tutorial/overview: http://www.w3schools.com/html/html_responsive.asp
In short to fix your site you will need to get rid of the fixed widths you have set in pixels and uses percentages as they will adapt depending on the available width.
Related
I just recently fixed, thanks to you guys, how to get my header to not overlap my content when the size of page changes. Now, I was told to group my nav bar, with my h1 header, so that they can be in a fixed position together, but when I do that, it messes everything up. So now I'm looking to get some help into making my nav bar stay right under my header in a fixed position without overlapping content. It can be seen when you view my website, in a full page, how I want it. You can also see how the nav bar gets messed up when you change the size of the webpage.
first of my webpage is hosted here: https://knox-enterprise-inc.herokuapp.com/About.html
second here is my code for this page:
<!DOCTYPE html>
<html lang="en-us">
<link rel="stylesheet" href="normalize.css">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet/less" type="text/css" href="style.less" />
<script src="less.js" type="text/javascript"></script>
<title> Knox Enterprises Inc.</title>
</head>
<body>
<header>
<h1>Knox Enterprises Inc.</h1>
<div class="nav">
Home
About
Contact
</div>
</header>
<div class="content">
<div class="home">
<div class="home-pictures">
<img src="http://i64.tinypic.com/14o91c1.jpg" width="300px" height="225px">
<img src="http://i63.tinypic.com/2rpzh3p.jpg" width="300px" height="225px">
</div>
<div class="home-pictures2">
<img src="http://i68.tinypic.com/rswqoy.jpg" width="300px" height="225px">
<img src="http://i66.tinypic.com/2lm8bdg.jpg" width="300px" height="225px">
</div>
<div class="home-description">
<ul>
<h5>Riveredge, NJ</h5>
<h5>Date Completed: June 2014</h5>
</ul>
</div>
<div class="home">
<div class="home-pictures">
<img src="home_5.jpg" width="300px" height="225px">
<img src="home_6.jpg" width="300px" height="225px">
</div>
<div class="home-pictures2">
<img src="home_7.jpg" width="300px" height="225px">
<img src="home_8.jpg" width="300px" height="225px">
</div>
<div class="home-description">
<ul>
<h5>Teaneck, NJ</h5>
<h5>Date Completed: March 2015</h5>
</ul>
</div>
<div class="home">
<div class="home-pictures">
<img src="home_9.jpg" width="300px" height="225px">
<img src="home_10.jpg" width="300px" height="225px">
</div>
<div class="home-pictures2">
<img src="home_11.jpg" width="300px" height="225px">
<img src="home_12.jpg" width="300px" height="225px">
</div>
<div class="home-description">
<ul>
<h5>Tenafly, NJ</h5>
<h5>Date Completed: August 2016</h5>
</ul>
</div>
</div>
</body>
</html>
css:
html, body {
margin: 0;
padding: 0;
background-image:url("backround.jpg");
background-repeat: repeat-y;
}
header {
height: 220px;
}
#about-header{
height: 100px;
}
#contact-header{
height: 100px;
}
/*Knox Header*/
h1 {
position: fixed;
top: -40px;
width: 100%;
font-family: Georgia;
color: white;
text-shadow: 4px 4px black;
background-image: url("header.jpg");
font-size: 60px;
text-align: center;
text-transform: uppercase;
border-bottom: 5px solid orange;
border-top: 5px solid orange;
z-index: 1;
}
/*Nav Menu/Home Page*/
.nav {
position: fixed;
top: 78px;
background-image:#606060;
overflow: hidden;
}
.nav a {
font-family: Helvetica;
background-color:black;
float: left;
color: #f2f2f2;
text-align: center;
padding: 10px 12px;
text-decoration: none;
font-size: 12px;
border-right: 2px solid orange;
border-bottom: 2px solid orange;
border-top: 2px solid orange;
letter-spacing: 2px;
}
.nav a:hover {
background-color: #ddd;
color: black;
}
.home {
text-align:center;
padding-top: 10px;
padding-bottom: 10px;
}
.home-pictures, .home-pictures2{
height:auto;
width:auto;
display: inline-block;
margin-left: auto;
margin-right: auto;
}
.home img {
border: 1px solid white;
}
.home-description {
line-height: 0px;
color: white;
letter-spacing: 2px;
font-family: Helvetica;
font-size: 18px;
}
/*About Page*/
.about, .about-description {
text-align: center;
color: white;
font-family: helvetica;
letter-spacing: 2px;
}
.about-description {
padding-top:100px;
}
.about-description p {
font-family: helvetica;
letter-spacing: 2px;
margin:0 auto;
width: 40%;
color:white;
}
.about img {
position: relative;
top: 80px;
margin-left:0 auto;
margin-right:0 auto;
padding-top: 30px;
padding-bottom: 30px;
transform: rotate(90deg);
}
#last{
padding-bottom: 40px;
}
.contact {
text-align:center;
padding-top:125px;
color:white;
font-family: helvetica;
letter-spacing: 2px;
}
#phone-contact img{
border-radius:100%;
}
#email-contact img{
border-radius: 30%;
}
The main problem that your position: fixed is on your <h1> tag instead of your header itself. To rectify this, first shift all of your h1 styling to #about-header instead:
#about-header {
position: fixed;
top: -40px;
width: 100%;
font-family: Georgia;
color: white;
text-shadow: 4px 4px black;
background-image: url("header.jpg");
font-size: 60px;
text-align: center;
text-transform: uppercase;
border-bottom: 5px solid orange;
border-top: 5px solid orange;
}
Next, remove the pre-existing heights of 100px and 220px in #about-header and header respectively. These are set on lines 10 and 7 of style.css respectively.
Also remove top: -40px, and lower the font-size to 0.9em (you may want a media query to modify that font at different sizes).
Finally, you need to make use of z-index so that your header appears on top of any content that it scrolls over:
#about-header {
z-index: 1;
}
Your final #about-header should end up as:
#about-header {
position: fixed;
width: 100%;
font-family: Georgia;
color: white;
text-shadow: 4px 4px black;
background-image: url(header.jpg);
font-size: 0.9em;
text-align: center;
text-transform: uppercase;
border-bottom: 5px solid orange;
border-top: 5px solid orange;
z-index: 1;
}
This will cause the sub-header to 'attach` to main header for both desktops and mobiles, and both headers will overlap all other content on all resolutions.
Hope this helps! :)
So I've been testing how my website looks with different screen sizes and I noticed my footer is positioned correctly at the bottom right of the screen for resolutions 800x600 to 1920x1080 BUT on 2560x1600 it does NOT position at the bottom right
/w h y/ ?
Im using CrossBrowserTesting
Here's my code:
body {
font-family: 'Courier New', Courier, monospace;
background: linear-gradient(to bottom, #1D4350 , #A43931);
background-attachment: scroll;
}
html, body, #wrapper {
max-width: 100%;
min-height: 100%;
min-width: 960px;
margin: 0 auto;
}
#wrapper {
position: relative;
}
#content {
height: 1200px;
}
.Octagon {
color: #2aa186;
text-align: center;
line-height: 30%;
margin-top: 25px;
}
.LT {
text-align: center;
color: #3a5454;
line-height: 0%;
font-style: italic;
}
.boi {
cursor: pointer;
margin-right: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
right: 16px;
}
.boi:active {
top: 2px;
}
.iob {
cursor: pointer;
margin-left: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
}
#verr {
}
.boi:active,
.iob:active {
top: 2px;
}
#manyarms {
position: absolute;
margin-top: 30px;
margin-left: 31px;
}
#sensible {
position: absolute;
margin-top: 30px;
margin-right: 31px;
right: 10px;
}
.boi:hover,
.iob:hover {
text-shadow: 0 0 10px #a193ff;
}
#footer {
padding-left: 93%;
}
<html>
<head>
<title>The Pragmatic Octopus</title>
<meta charset="utf-8"/>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1 class="Octagon">The Pragmatic Octopus</h1>
<p class="LT">Lee Townsend</p>
<a href="www.google.com">
<p class="boi">Contact</p>
</a>
<a href="www.google.com">
<p class="iob">Information</p>
</a>
</div>
<div id="content">
<div id="manyarms">
<img src="https://s32.postimg.org/406x38nlh/imageedit_1_3827627792 .jpg" alt="mmm~" style="width:310px; height:250px;">
<p style="color: #6458b7;" id="verr">Here comes a very special boi!</p>
</div>
<div id="sensible">
<img src="http://www.wonderslist.com/wp-content/uploads/2014/07/Blue-ringed-octopus.jpg" alt="~mmm" style="width:310px; height:250px;">
<p style="color:#6458b7;">He loves to pose for photos!</p>
</div>
</div>
<div id="footer">
© Hecc
</div>
</div>
</body>
</html>
Is this an error in my code or this a bug in CrossBrowserTesting?
Any assistance is greatly appreciated!
If you replace your :
#footer {
padding-left: 93%;
}
with
#footer {
float: right;
margin-right: 10px;
}
You will fix your div on the right and that regardless if the screen is large, medium or small.
your #wrapper streches and its css is - max-width: 100%;and your #footer is inside the #wrapper
soo maybe your content doesnt stretch the wrapper to full width and thats why the #footer isnt in the far right of screen(because its in far right of #wrapper)try to take #footer out of #wrapper OR make #wrapper width:100% and body and html width:100%
I am working with a landing page that has a blue hero arrow pointing down in the content areas. I want to make it center align whenever the user minimizes the browser window size, but I cannot seem to do it with my current setup.
* {
margin: 0px;
}
body {
width: 1024;
border-size: 3px;
border-color: gray;
}
/*Blue header*/
.whiteheadline {
font-size: 48px;
font-family: "Open Sans";
color: rgb(255, 255, 255);
font-weight: bold;
}
.header-rectangle {
background-color: rgb(104, 115, 251);
text-align: center;
line-height: 143px;
width: 1024px;
position: relative;
margin: 0 auto;
}
#header-bg {
background-image: url(http://ppc-genius.com/wp-content/uploads/2015/11/sliceimage.png);
background-repeat:no-repeat;
height:426px;
width: 1024px;
position: relative;
margin: 0 auto;
z-index: 1;
overflow:auto;
}
/*CTA Rectangle and form*/
#cta-rectangle {
background-color: rgb(224, 223, 223);
box-shadow: 0px 9px 11.18px 1.82px rgba(0, 0, 0, 0.55);
position: relative;
width: 451px;
height: 334px;
z-index: 2;
margin: 40px auto;
}
/*Hero separator and testimonial text*/
.hero {
position:relative;
background-color: rgb(104, 115, 251);
height:128px;
width:1024px;
margin: 0 auto;
text-align:center;
}
.hero:after {
content:'';
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: solid 50px rgb(104, 115, 251);
border-left: solid 50px transparent;
border-right: solid 50px transparent;
}
.hero-quote {
font-size: 26px;
font-family: "Open Sans";
color: rgb(255, 255, 255);
font-style: italic;
line-height: 1.2;
text-align: center;
position: absolute;
width: 989px;
height: 88px;
padding-top: 15px;
}
/*Body content and images*/
.body-container {
width: 1024px;
margin: 0 auto;
margin-top: 60px;
}
.body-container h1 {
font-size: 36px;
font-family: "Open Sans";
color: rgb(0, 0, 0);
line-height: 1.2;
text-align: left;
position: absolute;
width: 548px;
height: 37px;
margin: 0 auto;
}
.text-container-1 {
max-width: 544px;
}
.text-container-1 p {
font-size: 18px;
font-family: "Open Sans";
color: rgb(0, 0, 0);
line-height: 1.2;
text-align: left;
padding-top: 8px;
padding-left: 4px;
}
/*Check marks and header*/
.check-mark-header {
background-color: rgb(224, 223, 223);
position: relative;
width: 907px;
text-align: center;
margin: 0 auto;
}
.check-mark-header h1 {
font-size: 30px;
font-family: "Open Sans";
color: rgb(0, 0, 0);
line-height: 1.2;
text-align: left;
position: absolute;
width: 548px;
height: 37px;
margin: 0 auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Webinar Event Landing Page by Eric Conklin">
<meta name="description" content="">
<meta name="keywords" content="">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Event Lander</title>
</head>
<body>
<!--Blue Header-->
<div class="header-rectangle">
<h1 class="whiteheadline">Join Us for a Free Webinar!</h1>
</div>
<!--Header image and form-->
<div id="header-bg" align="center">
<div id="cta-rectangle">
<h1>Hello!</h1>
</div>
</div>
<!--Hero-->
<div class="hero">
<h1 class="hero-quote">“I can’t thank you enough for your coaching and support. My business has never been more profitable or easier to manage. Thank you!” <br> -Jim Smith</h1>
</div>
<!--Section for content-->
<section class = "body-container">
<div class="container">
<div class="row">
<div class="col-md-4">
<img class="img-responsive" src="img/jane.png" />
</div>
<div class="col-md-8">
<div class="text-container-1">
<h1>Hello! My Name is Jane Smith!</h1><br><br>
<p>I’m an experienced and certified AdWords professional. I lead a monthly mastermind group of like-minded business owners and consultants. We use webinars to teach the principals of campaign development, including keyword research, split-testing, tracking, reporting and optimization.</p><br>
<p>Going it alone is rough and boring. We lead these webinars as a free training and networking opportunity to help like-minded individuals achieve sucess in their busineses and see results like never before.</p><br>
<p>Not only does this give me the opportunity to teach, it also gives me the opportunity to learn by hearing your story, learning about your business and helping share amazing ideas with fellow entrepreneurs.</p><br>
</div>
</div>
</div>
</div>
</section>
<!--Checkboxes and lower page content-->
<section class="checkmarks">
<div class="check-mark-header" align="center">
<h1>Ready to Get Started? Here's What's Included</h1>
</div>
</section>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Any tips to help would be great!
There are other issues you'll need to overcome but the basic idea is to set the :after arrow to left: 50% to center it on the page and then use negative margin to shift it back by half its width. Here are the changes.
.hero {
width:100%;
}
.hero:after {
left: 50%;
margin-left: -25px;
}
Example here: http://jsfiddle.net/xf9Lexkq/
Remove most of the explicit widths. Wrap your content in a container, and center your background image.
html
<div class="container">
<!--Blue Header-->
<div class="header-rectangle">
<h1 class="whiteheadline">Join Us for a Free Webinar!</h1>
</div>
<!--Header image and form-->
<div id="header-bg" align="center">
<div id="cta-rectangle">
<h1>Hello!</h1>
</div>
</div>
<!--Hero-->
<div class="hero">
<h1 class="hero-quote">“I can’t thank you enough for your coaching and support. My business has never been more profitable or easier to manage. Thank you!” <br> -Jim Smith</h1>
</div>
<!--Section for content-->
<section class="body-container">
<div class="container">
<div class="row">
<div class="col-md-4">
<img class="img-responsive" src="img/jane.png" />
</div>
<div class="col-md-8">
<div class="text-container-1">
<h1>Hello! My Name is Jane Smith!</h1><br><br>
<p>I’m an experienced and certified AdWords professional. I lead a monthly mastermind group of like-minded business owners and consultants. We use webinars to teach the principals of campaign development, including keyword research, split-testing, tracking, reporting and optimization.</p><br>
<p>Going it alone is rough and boring. We lead these webinars as a free training and networking opportunity to help like-minded individuals achieve sucess in their busineses and see results like never before.</p><br>
<p>Not only does this give me the opportunity to teach, it also gives me the opportunity to learn by hearing your story, learning about your business and helping share amazing ideas with fellow entrepreneurs.</p><br>
</div>
</div>
</div>
</div>
</section>
<!--Checkboxes and lower page content-->
<section class="checkmarks">
<div class="check-mark-header" align="center">
<h1>Ready to Get Started? Here's What's Included</h1>
</div>
</section>
</div>
CSS
* {
margin: 0px;
}
body {
border-size: 3px;
border-color: gray;
}
/*Blue header*/
.whiteheadline {
font-size: 48px;
font-family: "Open Sans";
color: rgb(255, 255, 255);
font-weight: bold;
}
.header-rectangle {
background-color: rgb(104, 115, 251);
text-align: center;
line-height: 143px;
position: relative;
margin: 0 auto;
}
#header-bg {
background-image: url(http://ppc-genius.com/wp-content/uploads/2015/11/sliceimage.png);
background-repeat:no-repeat;
height:426px;
position: relative;
margin: 0 auto;
z-index: 1;
overflow:auto;
}
/*CTA Rectangle and form*/
#cta-rectangle {
background-color: rgb(224, 223, 223);
box-shadow: 0px 9px 11.18px 1.82px rgba(0, 0, 0, 0.55);
position: relative;
width: 451px;
height: 334px;
z-index: 2;
margin: 40px auto;
}
/*Hero separator and testimonial text*/
.hero {
position:relative;
background-color: rgb(104, 115, 251);
height:128px;
margin: 0 auto;
text-align:center;
}
.hero:after {
content:'';
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: solid 50px rgb(104, 115, 251);
border-left: solid 50px transparent;
border-right: solid 50px transparent;
}
.hero-quote {
font-size: 26px;
font-family: "Open Sans";
color: rgb(255, 255, 255);
font-style: italic;
line-height: 1.2;
text-align: center;
position: absolute;
height: 88px;
padding-top: 15px;
}
/*Body content and images*/
.body-container {
margin: 0 auto;
margin-top: 60px;
}
.body-container h1 {
font-size: 36px;
font-family: "Open Sans";
color: rgb(0, 0, 0);
line-height: 1.2;
text-align: left;
position: absolute;
height: 37px;
margin: 0 auto;
}
.text-container-1 {
max-width: 544px;
}
.text-container-1 p {
font-size: 18px;
font-family: "Open Sans";
color: rgb(0, 0, 0);
line-height: 1.2;
text-align: left;
padding-top: 8px;
padding-left: 4px;
}
/*Check marks and header*/
.check-mark-header {
background-color: rgb(224, 223, 223);
position: relative;
text-align: center;
margin: 0 auto;
}
.check-mark-header h1 {
font-size: 30px;
font-family: "Open Sans";
color: rgb(0, 0, 0);
line-height: 1.2;
text-align: left;
position: absolute;
height: 37px;
margin: 0 auto;
}
I just have a quick question about my website. I have a huge whitespace between my footer and the end of my background image, about 500 or so pixels. I can't seem to find the problem and any help is appreciated.
Thanks,
Jacob
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<link type="text/css" rel="stylesheet" href ="C:\Users\toshiba\Documents\NetBeansProjects\HTML5Application\public_html\css\index.css">
<meta charset="UTF-8">
<title> JP's Webservices</title>
</head>
<body>
<div id ="body">
<div class = "nav">
<ul>
<li>
About Me
</li>
<li>
Contact Me
</li>
<li>
Pricing
</li>
</ul>
</div>
<div class ="jumbotron">
<div class ='container'>
<div id ='h1'>
<h1> Need a website but don't know how? Look no further </h1>
</div>
<p> Web engineer for hire
</div>
</div>
<div style='align:center;text-align:center' class ="des" >
<h2> Knowledge. </h2>
<p> Straight 'outta Compton </p>
<hr>
<h2> Commitment. </h2>
<p> To excellence and to serve </p>
<hr>
<h2> Perspective. </h2>
<p> New outlook on your web designs </p>
<br>
</div>
</div>
</body>
<footer>
<div id ='footer'>
<p> Copyright #2014-2015 Jacob Platin
</div>
<div id ='footer1'>
<div id ='foot1'>
<a href="https://twitter.com/TheJakeoShark" target=newtab><img src="https://g.twimg.com/Twitter_logo_blue.png" width="72" height="46" border="0" /></a>
</div>
<div id ='facebook'>
<a href ='https://facebook.com/jacob.platin' target=newtab><img src = 'http://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/267px-F_icon.svg.png' width ="65" height =" 53" /></a>
</div>
</div>
</footer>
</html>
CSS
.jumbotron {
background-image: url(http://cam-consultants.net/wp-content/uploads/2014/05/servers.jpg);
z-index: 110;
position: relative;
}
.des {
position: relative;
bottom: 1564px;
background-color: #e3e3e3;
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px rgba(0,0,0,0.5);
box-shadow: 1px 5px 35px black;
text-align: center;
width: 1050px;
height:1000px;
position: relative;
z-index: -1;
margin: 0 auto;
}
.nav li {
list-style-type: none;
text-align: center;
float: left;
width: 33.3%;
position: relative;
z-index: 10;
color: black;
padding-top: 12px;
font-weight: 700;
font-size: 18px;
}
.nav {
background-color: #660000;
height: 65px;
box-shadow: 2px 2px 8px 3px black;
}
.nav a {
text-decoration: none;
color: black;
padding-top: 15px;
font-weight: 700;
color: white;
}
.container > p {
padding-top: 100px;
height: 500px;
position: relative;
bottom: 140px;
font-weight: 700;
color: #cc0000;
text-align: center;
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px blue;
}
.jumbotron {
background-image: url(http://cam-consultants.net/wp-content/uploads/2014/05/servers.jpg);
background-position: -10px -60px;
z-index: -1;
height: 1700px;
}
#h1 {
position: relative;
top: -50px;
text-align: center;
font-family: 'Georgia', times, serif;
background-color: black;
color: #e3e3e3;
text-shadow: 5px 5px 5px white;
height: 150px;
width: auto;
margin: 0;
margin-left: 44px;
margin-right:44px;
position: relative;
z-index: -1;
}
#master_wrapper{overflow:hidden!important;}
#footer {
width: 2000px;
height: 200px;
background-color: black;
box-shadow: 1px 1px 12px 4px black;
position: relative;
bottom: -100px;
}
#footer1 {
height: 78px;
width: 2000px;
background-color: #660000;
position: relative;
margin-top: 24px;
}
#footer > p {
text-align: center;
font-family: 'Georgia', sans-serif;
color: white;
font-size: 18px;
padding-top: 24px;
}
#foot1 {
padding-top: 15px;
text-align: center;
}
#facebook {
position: relative;
bottom: 123px;
text-align: center;
}
.des > h2 {
padding-top: 80px;
color: #660000
}
#photo1 {
background-image: url(http://financeandcareer.com/wp-content/uploads/2013/03/webProgrammingInternship.jpg);
width: 240px;
height: 200px;
position:relative;
}
.des > img {
margin-top: 40px;
box-shadow: 01px 01px 01px 5px black;
}
When you use position: relative; the browser thinks, "Ok, I'm going to keep the element's technical location the same, but I'm going to make it appear to be in a different spot." You have the following CSS on your .des element:
.des {
position: relative;
bottom: 1564px;
}
This says, "Keep .des there, but make it appear 1564 pixels higher (further away from the original bottom)". This results in a blank space, which is the height of the element, showing up where the element technically still is, even though it appears elsewhere.
You also have the following CSS on your #footer element:
#footer {
position: relative;
bottom: -100px;
}
This makes it appear 100px lower on the page, but keeps the original spot there, and now blank.
Unless I'm mistaken, these two gaps combine for a whopping 1038px of blank space on your page. The solution? You're probably looking for position: absolute;, which doesn't keep the original spot for the element. In fact, I think that if you changed the positioning part of the CSS on .des to be
.des {
position: absolute;
top: 260px;
}
or something close to that, it would get rid of most of the gap, minus the 100px on #footer. Here's a JSFiddle, if you'd care to have a look.
The height of your background image in your CSS is set to height: 1700px; but the background image that you link to is only 1200px high. That would seem to account for the 500px difference
I have been trying to add three icons for like 6 hours and nothing works can someone please help :(
Want the icon to show up above "Performance", "Technology", and "Design".
In addition I wanted to add quote icons to the <p> tags inside the three div's.
Also wanted to change the color of the icons to match the hr tag with the same hue of red.
Here is my HTML
<html>
<header>
<title>NavBar</title>
<link type="text/css" rel="Stylesheet" href="NavBar Example.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</header>
<body>
<div id="menu wrapper" class="red">
<div class="left"></div>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Contact</li>
<li class="login"><a class="login" href="#">Log In</a></li>
</ul>
</div>
<div class="header">
<img class="head-image" src="banner2.jpg">
</div>
<div class="hr">
<hr />
</div>
<div class="content">
<div class="container">
<div class="icon1">
<i class="fa fa-rocket fa-5x"></i>
<h2>Performance</h2>
<hr class="ptd" />
<p>Best in class when it comes to raw power!</p>
</div>
<div class="icon2">
<i class="fa fa-power-off fa-5x"></i>
<h2>Technology</h2>
<hr class="ptd" />
<p>Oringinal Innovations pushing the boundaries of modern technology</p>
</div>
<div class="icon3">
<i class="fa fa-laptop fa-5x"></i></a>
<h2>Design</h2>
<hr class="ptd" />
<p>Designed with you in mind</p>
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>
Here is my CSS
body {
background-image: url(black-Linen.png);
}
/* NavBar */
#menu {
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 50px 0;
padding: 0;
list-style-type: none;
background-color: #800000;
font-size: 13px;
height: 40px;
border-bottom: 2px solid #5A0000;
}
#menu li {
float: left;
margin: 0;
}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color: #FFF;
}
#menu li a:hover {
background-color: #CC0000;
border-bottom: 2px solid #DDD;
color: #000;
}
#menu_wrapper ul {
margin-left: 12px;
}
#menu_wrapper {
padding: 0 16px 0 0;
background-color: #666666;
}
#menu_wrapper div {
float: left;
height: 44px;
width: 12px;
background-color: #666666;
}
.header {
height: 720px;
width: 1600px;
margin: 0 auto 0 auto;
padding: 10px 10px 20px 10px;
overflow: hidden;
}
.head-image {
height: 720px;
width: 1600px;
box-shadow: 5px 5px 3px #000;
}
div.hr {
height: 32px;
background: url(fire.png) no-repeat scroll center;
}
div.hr hr {
display: none;
}
.content {
width:1600px;
height: 250px;
margin: 25px auto 15px auto;
padding: 10px;
}
/*Performance*/
.icon1 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: auto;
margin-left: auto;
}
.container i {
display: block;
margin: 10px auto 0 auto;
width: 32px;
color: #800000;
border-radius:50%;
}
/*Technology*/
.icon2 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: 42px;
margin-left: 42px;
}
/*Design*/
.icon3 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: auto;
margin-left: auto;
}
h2 {
text-align: center;
font-weight: bold;
font-family: roboto, sans-serif;
margin-top: 2px;
}
h2 a {
text-decoration: none;
color: #FFF;
}
h2 a:hover, a:active {
color: #9f1111;
}
.ptd {
width: 40%;
}
p {
text-align: center;
font-style: italic;
font-family: roboto, sans-serif;
color: #FFF;
}
I think it's actually working fine, I can see icons in my JS Fiddle.
Could the problem be your link to your CSS file? Should there be a space within the href?
<link type="text/css" rel="Stylesheet" href="NavBar Example.css">
http://jsfiddle.net/Delorian/1x6u553h/
Start by double checking your markup. You have two IDs "menu" + "wrapper" and one selector "#menu_wrapper". I think you should keep IDs just for actions and add classes to add style.
Your markup:
<div id="menu wrapper" class="red">
...
</div>
Correct markup:
<div id="menu" class="wrapper red">
...
</div>
You are missing the protocol http:// on your link to the bootstrap CDN.
Try to add it to the link and see if it works:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">