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! :)
Related
I'm working on a Site for myself, but I have no clue how I get the Navigationbar centered in the site.
I thought that maybe someone else has an idea :) the whole navigation bar is slightly to the left & I don't know how to fix it.. Hope you guys out there can do this :) I'm a beginner # coding & I have so much more to learn ..
screenshot of the page
logo
thank you for your help :)
Html:
<!DOCTYPE html>
<html>
<head>
<title>Meine Seite!</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li>Sets</li>
<li>About</li>
<li class="logo">SueZ Logo</li>
<li>Gigs</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="features">
<figure>
<img src="" alt="trololololol">
<figcaption>Fresh Baked Techno</figcaption>
</figure>
<figure>
<img src="" alt="lalala">
<figcaption>?</figcaption>
</figure>
<figure>
<img src="" alt="Bla bli blub">
<figcaption>?</figcaption>
</figure>
</section>
<footer>Copyright © 2020 SueZ</footer>
</body>
</html>
CSS:
body {
background: rgb(58, 58, 58);
color: rgb(174, 62, 50);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: black;
background-image: url("Fotos/background-warehouse.jpg");
background-size: 100%;
background-position: center;
height: 150px;
padding: 20px;
text-align: center;
}
header a {
color: rgb(174, 62, 50);
text-decoration: none;
text-transform: uppercase;
margin-top: 60px;
text
}
header .logo a {
background-image: url(Fotos/SueZ_Logo_Red_BG_Transparent.PNG);
background-size: 100px;
background-repeat: no-repeat;
display: inline-block;
height: 190px;
position: relative;
text-indent: -9999999px;
top: -40px;
width: 200px;;
margin-left: 20%;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
display: inline-block;
margin-right: 20px;
}
.features {
background: white;
color: gray;
padding: 20px;
display: flex;
flex-direction: row;
}
.features figure {
margin: auto;
text-align: center;
text-transform: uppercase;
width: 200px;
}
.features figure img {
border: 1px solid white;
border-radius: 50%;
box-shadow: gray 0 0 10px;
width: 200px;
}
footer {
background: black;
color: gray;
font-size: 12px;
padding: 20px 20px;
text-align: center;
}
Here I made a snippet for the solution of your issue. check it. Hope it helps.
Updated CSS marked with /*----------*/
...............................................................................
A TIP for you
Don't use height.
body {
background: rgb(58, 58, 58);
color: rgb(174, 62, 50);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
}
/*------------------------*/
header {
background-color: black;
background-image: url("Fotos/background-warehouse.jpg");
background-size: 100%;
background-position: center;
/*height: 150px;*/
padding: 40px;
text-align: center;
position:relative;
}
.logo{width:100px;position:absolute; left:0; right:0; margin: 0 auto; top:0; z-index:10;}
.logo img{width:100%;}
/*------------------------*/
header a {
color: rgb(174, 62, 50);
text-decoration: none;
text-transform: uppercase;
margin-top: 60px;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
display: inline-block;
margin-right: 20px;
}
/*------------------------*/
nav li:last-child{margin-right:0}
nav li:nth-child(2){margin-right:120px}
/*------------------------*/
.features {
background: white;
color: gray;
padding: 20px;
display: flex;
flex-direction: row;
}
.features figure {
margin: auto;
text-align: center;
text-transform: uppercase;
width: 200px;
}
.features figure img {
border: 1px solid white;
border-radius: 50%;
box-shadow: gray 0 0 10px;
width: 200px;
}
footer {
background: black;
color: gray;
font-size: 12px;
padding: 20px 20px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Meine Seite!</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="logo">
<img src="https://i.stack.imgur.com/yfW19.png" alt="logo">
</div>
<nav>
<ul>
<li>Sets</li>
<li>About</li>
<li>Gigs</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="features">
<figure>
<img src="" alt="trololololol">
<figcaption>Fresh Baked Techno</figcaption>
</figure>
<figure>
<img src="" alt="lalala">
<figcaption>?</figcaption>
</figure>
<figure>
<img src="" alt="Bla bli blub">
<figcaption>?</figcaption>
</figure>
</section>
<footer>
Copyright © 2020 SueZ
</footer>
I want to create a homepage where you see an image at first with the actual navigation bar on the bottom of the browser. When you scroll down the navigation should stick to the top when it reaches the top of the browser.
I got 1 Logo on the left of the screen and the navigation on the right. The navigation should have a background as a bar across the screen and the logo should overlap this. When I scroll down i first want the logo (which is for example 250px high) to stick to the top and then when i further scroll down i want the navigation + background (about 100px) also to stick to the top. I don't know why the white space is generated either. Between the first and the second picture there should only be about 100px (the height of the grey bar(navigation bar). With this code everything except the background bar works..
#charset "utf-8";
*{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.top-container{
position: absolute;
width: 100%;
}
.stopleft{
padding-top: 34%;
width: 50%;
margin: 0px 0px 0px 0px;
border: solid 0px #000;
float: left;
}
.stopright{
padding-top: 44.2%;
width: 50%;
margin: 0px 0px 0px 0px;
border: solid 0px #000;
float: right;
}
.whiteBarSmall{
width: 100%;
padding-top: 5%;
background-color: #fff;
position: absolute;
}
.logo{
position: sticky;
top: 0;
width: 50%;
float: left;
}
.navigation{
margin: 0px 0px 0px 0px;
border: solid 0px #000;
position: sticky;
top: 0;
width: 50%;
float: right;
}
.navigation ul{
height: 100px;
}
.button{
list-style: none;
margin: 25px 20px 25px 20px;
float: right;
}
.navBackground{
border: solid 0px #000;
position: sticky;
top: 0;
width: 100%;
padding-top: 5%;
background-color: #a7a7a7;
float: right;
z-index: -1;
}
.whiteBarLarge{
width: 100%;
padding-top: 10%;
background-color: #fff;
}
.indexImage{
width: 100%;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 102px;
}
footer{
width: 100%;
padding-top: 2.5%;
background-color: #a7a7a7;
}
.navigation a:link {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
.navigation a:visited {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
.navigation a:focus {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
.navigation a:hover {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
.navigation a:active {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Test</title>
<meta name="description" content="…." />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="icon" href="pics/favicon.ico" />
<link rel="stylesheet" href="styles/basics.css" type="text/css" />
<link rel="stylesheet" href="styles/index.css" type="text/css" />
<link rel="stylesheet" href="styles/links.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Volkhov" rel="stylesheet">
</head>
<body>
<div class="top-container">
<img src="https://pre00.deviantart.net/e893/th/pre/i/2006/132/b/4/widescreen_dreamy_world_6th_by_grafixeye.jpg" alt="Test header" width="100%" />
</div>
<div class="stopleft"></div>
<div class="stopright"></div>
<div class="logo"><img src="https://png.icons8.com/ios/1600/external-link-squared-filled.png" alt="Logo" width="50%" /></div>
<div class="navigation">
<ul>
<li class="button">Über uns</li>
<li class="button">Kontakt</li>
<li class="button">Preise</li>
<li class="button">Blog</li>
<li class="button">Galerie</li>
</ul>
</div>
<div class="navBackground"></div>
<div class="indexImage">
<img src="http://www.hdwallpapery.com/static/images/dual-monitor-wallpapers-hd_dJyDicr.jpg" alt="" width="100%" />
</div>
<div class="whiteBarLarge">
</div>
<div class="indexImage">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUPqqyzvnT6JVdDUeUgzDvX9tUpwjKv59spOBgVdYtf-2EaLhD" alt="" width="100%" />
</div>
<div class="whiteBarLarge"></div>
<footer></footer>
</body>
</html>
I am having a lot of trouble with this bar...
Hope someone can help me. Thanks!
Is that what you want?
#charset "utf-8";
body {margin:0;}
.navbar {
overflow: hidden;
background-color: #808080;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.main {
padding: 16px;
margin-top: 30px;
/* height: 1500px; */ /* Used in this example to enable scrolling */
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<div class="navbar">
<img src="https://png.icons8.com/ios/1600/external-link-squared-filled.png" alt="Logo" class-="logo" height=50 width=50 style="float: left">
Galerie
Blog
Preise
Contact
Über uns
</div>
<div class="main">
<div class="top-container">
<img src="https://pre00.deviantart.net/e893/th/pre/i/2006/132/b/4/widescreen_dreamy_world_6th_by_grafixeye.jpg" alt="Test header" width="100%" />
</div>
<div class="indexImage">
<img src="http://www.hdwallpapery.com/static/images/dual-monitor-wallpapers-hd_dJyDicr.jpg" alt="" width="100%" />
</div>
<div class="whiteBarLarge">
</div>
<div class="indexImage">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUPqqyzvnT6JVdDUeUgzDvX9tUpwjKv59spOBgVdYtf-2EaLhD" alt="" width="100%" />
</div>
<div class="whiteBarLarge"></div>
<footer></footer>
</div>
</body>
</html>
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 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.
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">