I have a div in my html called logo and what I am trying to do is drop the margin-top or padding-top the logo so its not hard up against the body background.
I have tried the above but I cannot get it to budge.
HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Template 2011</title>
<link rel="stylesheet" href="_assets/css/style.css">
</head>
<body>
<header>
<div id="logo"></div>
<div id="line"></div>
<nav>
<ul>
<li>home</li>
<li>services</li>
<li>portfolio</li>
<li>contact us</li>
</ul>
</nav>
</header>
<section id="banner">
<img src="_assets/images/banner_1.jpg" alt="Banner" width="960px" height="161px" />
</section>
<section id="content">
<h1>Web Development Guru At Your Service </h1>
<p></p>
</section>
<footer>
<p>This is the footer</p>
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="_assets/js/cufon-yui.js" type="text/javascript"></script>
<script src="_assets/js/Myriad_Pro_400-Myriad_Pro_700.font.js" type="text/javascript"></script>
<script src="_assets/js/js.js" type="text/javascript"></script>
CSS:
html{
height:100%;
width:100%;
background:url(../images/bg.jpg) repeat;
}
body{
width:960px;
height:100%;
background-color:#e3e3e3;
margin:42px auto;
}
p,h1,h2{
margin:25px;
font:Myriad Pro;
}
h1{
color:#000;
}
header{
width:100%;
height:210px;
}
#logo{
height:115px;
width:159px;
margin:0 auto;
background:url('../images/logo.png') no-repeat;
border:1px solid red;
}
header nav{
width:410px;
height:18px;
margin:20px auto;
}
header nav ul{
width:100%;
height:18px;
margin:0 auto;
}
header nav ul li{
float:left;
display:block;
margin:0 auto;
}
header nav li a{
float:left;
width:85px;
padding:0 3px 3px 3px;
font:18px Myriad Pro;
text-decoration: none;
color:#99999a;
}
header nav li a:hover, a:active{
font:18px Myriad Pro bold;
color:#67686a;
}
#line{
clear:both;
width:610px;
height:1px;
margin:0 0 0 235px;
background:url('../images/line.png') no-repeat;
}
#banner{
width:100%;
height:161px;
}
#content{
float:left;
width:100%;
height:100%;
background-color:#e3e3e3;
}
footer{
clear:both;
height:24px;
}
Because it's the background image, you have to add space (via padding or margin) outside the div.
<div style="padding:10px;">
<div id="logo"/>
</div>
It's better to use image-replacement technique. Using <h1> tag instead of <div>
HTML
<h1 id="logo">This is my logo</h1>
CSS
#logo{
height:115px;
width:159px;
margin:0 auto;
background:url('../images/logo.png') no-repeat;
background-repeat: no-repeat;
border:1px solid red;
text-indent:-9999px;
display:block;
overflow:hidden;
}
Related
I am working on a website that has a .gif background, but the image is not the same size as my website page, so I need to stretch it.
However, I have a 140px header, which hides a big part of my background image, so I put this code in CSS:
body{
text-align:center;
background:url('file:///C:/Users/user/Desktop/Bulgaria Animated Flag.gif');
background-position:center 140px;
background-repeat:no-repeat;
background-attachment:fixed;
background-size:cover;
}
ALL CSS:
html,body {
margin:0px auto;
width:100%;
height:100%;
min-width:1320px;
text-align:center;
}
body{
text-align:center;
background:url('file:///C:/Users/user/Desktop/Bulgaria Animated Flag.gif');
background-position:center 140px;
background-repeat:no-repeat;
background-attachment:fixed;
background-size:cover);
}
header{
height:140px;
width:100%;
z-index:999;
position:fixed;
margin-top:-16px;
text-align:center;
background-color:darkred;
opacity:0.95;
}
#banner{
width:1320px;
height:500px;
position:fixed;
top:140px;
background-color:rgba(256, 33, 18,0.8);
text-align:center;
margin:0px auto 0px auto;
float:none;
left:0;
right:0;
}
#content{
width:1320px;
position:relative;
top:626px;
background:#ebebeb;
height:1500px;
margin-left:auto;
margin-right:auto;
z-index:10;
}
/*CSS Dropdown Menu*/
ul{
margin-top:0px;
margin-bottom:0px;
padding:0px;
list-style-type:none;
}
ul a{
text-decoration:none;
}
ul li{
float:left;
width:130px;
height:38px;
background-color:red;
font-size:20px;
line-height:38px;
text-align:center;
margin-left:2px;
}
ul li a:hover{
background-color:orangered;
}
ul li a{
display:block;
color:black;
}
ul li ul li{
display:none;
margin:0px;
}
ul li:hover ul li{
display:block;
}
/*Slider*/
#slider{
width:720px;
height:480px;
display:block;
position:absolute;
right:0;
left:0;
top:10px;
bottom:0;
margin:0 auto;
}
.info{
width:720px;
height:50px;
display:block;
position:relative;
background:black;
opacity:0.8;
z-index:1;
bottom:65px;
text-align:left;
}
.info h2{
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
color:white;
padding:5px 0 0 20px;
}
.info p{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:lighter;
color:white;
padding:30 0 0 20px;
line-height:1px;
}
img{
z-index:0;
}
#next{
width:40px;
height:50px;
text-align:center;
position:absolute;
top:220px;
right:10px;
background-color:black;
opacity:0.5;
color:white;
z-index:2;
font-size:45px;
font-weight:bold;
}
#prev{
width:40px;
height:50px;
text-align:center;
position:absolute;
top:220px;
left:10px;
background-color:black;
opacity:0.5;
color:white;
z-index:2;
font-size:45px;
font-weight:bold;
}
#pager{
width:100%;
text-align:center;
display:block;
position:absolute;
top:0;
right:;
background::;
color:;
cursor:pointer;
z-index:3;
}
#pager a{
width:10px;
height:10px;
display:inline-block;
border:1px solid #FFF;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<header>
<h1>HEADER</h1>
<ul>
<li>Option1
<ul>
<li>Option1.1</li>
<li>Option1.2</li>
<li>Option1.3</li>
<li>Option1.4</li>
</ul>
</li>
<li>Option2
<ul>
<li>Option2.1</li>
<li>Option2.2</li>
<li>Option2.3</li>
<li>Option2.4</li>
</ul>
</li>
<li>Option3
<ul>
<li>Option3.1</li>
<li>Option3.2</li>
<li>Option3.3</li>
<li>Option3.4</li>
</ul>
</li>
<li>Option4
<ul>
<li>Option4.1</li>
<li>Option4.2</li>
<li>Option4.3</li>
<li>Option4.4</li>
</ul>
</li>
<li>Option5
<ul>
<li>Option5.1</li>
<li>Option5.2</li>
<li>Option5.3</li>
<li>Option5.4</li>
</ul>
</li>
<li>Option6
<ul>
<li>Option6.1</li>
<li>Option6.2</li>
<li>Option6.3</li>
<li>Option6.4</li>
</ul>
</li>
</ul>
</header>
<div id="banner" style="margin:0px auto">
<div id="slider">
<div id="pager"></div>
<div id="next">></div>
<div id="prev"><</div>
<div class="items">
<img alt="Error" src="images/Albena_Bulgaria-720x480.jpg"/>
<div class="info">
<h2>Insert text here</h2>
<p>Insert more text here</p>
</div>
</div>
<div class="items">
<img alt="Error" src="images/Rila_Monastery_Bulgaria-720x480.jpg"/>
<div class="info">
<h2>Insert text here</h2>
<p>Insert more text here</p>
</div>
</div>
<div class="items">
<img alt="Error" src="images/Balchik_Bulgaria-720x480.jpg"/>
<div class="info">
<h2>Insert text here</h2>
<p>Insert more text here</p>
</div>
</div>
<div class="items">
<img alt="Error" src="images/Belogradchik_Fortress_Bulgaria-720x480.jpg"/>
<div class="info">
<h2>Insert text here</h2>
<p>Insert more text here</p>
</div>
</div>
<div class="items">
<img alt="Error" src="images/Burgas_coast_Bulgaria-720x480.jpg"/>
<div class="info">
<h2>Insert text here</h2>
<p>Insert more text here</p>
</div>
</div>
<div class="items">
<img alt="Error" src="images/Downtown_Sofia_Boby_Dimitrov_1-720x480.jpg"/>
<div class="info">
<h2>Insert text here</h2>
<p>Insert more text here</p>
</div>
</div>
</div>
</div>
<div id="content">
<p>Content</p>
</div>
</div>
</body>
</html>
Now the image is correctly displayed 140px under the top of the page. However, the image stretches 100% of its own height, not the height of the webpage, which means a big bottom part of it is not displayed. Many people have suggested putting a div, but this is not a solution for me, as my version of Expression Web has a bug, which messes up the webpage layout if you add a new div before already existing ones. I can always set height in px or %, but I am trying to achieve compatibility for all browsers.
Excuse me for incorrect formatting - this is my first question in the StackOverflow community.
Thank you in advance.
Like this, here used CSS calc() for its height, background-size: auto calc(100% - 140px);
Side note, as Daniel himself commented, and I missed in his code sample, there need to be space pre/post the operator in calc().
body {
text-align: center;
background: url('http://lorempizza.com/600/400/2');
background-position: center 140px;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: auto calc(100% - 140px);
}
If you need it to stretch full width, change the auto to 100% on background-size
body {
text-align: center;
background: url('http://lorempizza.com/600/400/2');
background-position: center 140px;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% calc(100% - 140px);
}
Based on your question edit, where you added more code, here is an update of it, with a stretched, positioned background image
By using background-attachment: fixed; it size with regard to the viewport, using scroll with regard to the element, in this case the body
html,body {
margin:0px auto;
width:100%;
height:100%;
min-width:1320px;
text-align:center;
}
body {
text-align: center;
background: url('http://lorempizza.com/600/400/2');
background-position: center 140px;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% calc(100% - 140px);
}
header{
height:140px;
width:100%;
z-index:999;
position:fixed;
margin-top:-16px;
text-align:center;
background-color:darkred;
opacity:0.95;
}
#banner{
width:1320px;
height:500px;
position:fixed;
top:140px;
background-color:rgba(256, 33, 18, 0.5); /* temp. increased transparency some so image shows better */
text-align:center;
margin:0px auto 0px auto;
float:none;
left:0;
right:0;
}
#content{
width:1320px;
position:relative;
top:626px;
background:#ebebeb;
height:1500px;
margin-left:auto;
margin-right:auto;
z-index:10;
}
/*CSS Dropdown Menu*/
ul{
margin-top:0px;
margin-bottom:0px;
padding:0px;
list-style-type:none;
}
ul a{
text-decoration:none;
}
ul li{
float:left;
width:130px;
height:38px;
background-color:red;
font-size:20px;
line-height:38px;
text-align:center;
margin-left:2px;
}
ul li a:hover{
background-color:orangered;
}
ul li a{
display:block;
color:black;
}
ul li ul li{
display:none;
margin:0px;
}
ul li:hover ul li{
display:block;
}
/*Slider*/
#slider{
width:720px;
height:480px;
display:block;
position:absolute;
right:0;
left:0;
top:10px;
bottom:0;
margin:0 auto;
}
.info{
width:720px;
height:50px;
display:block;
position:relative;
background:black;
opacity:0.8;
z-index:1;
bottom:65px;
text-align:left;
}
.info h2{
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
color:white;
padding:5px 0 0 20px;
}
.info p{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:lighter;
color:white;
padding:30 0 0 20px;
line-height:1px;
}
img{
z-index:0;
}
#next{
width:40px;
height:50px;
text-align:center;
position:absolute;
top:220px;
right:10px;
background-color:black;
opacity:0.5;
color:white;
z-index:2;
font-size:45px;
font-weight:bold;
}
#prev{
width:40px;
height:50px;
text-align:center;
position:absolute;
top:220px;
left:10px;
background-color:black;
opacity:0.5;
color:white;
z-index:2;
font-size:45px;
font-weight:bold;
}
#pager{
width:100%;
text-align:center;
display:block;
position:absolute;
top:0;
right:;
background::;
color:;
cursor:pointer;
z-index:3;
}
#pager a{
width:10px;
height:10px;
display:inline-block;
border:1px solid #FFF;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<header>
<h1>HEADER</h1>
<ul>
<li>Option1
<ul>
<li>Option1.1</li>
<li>Option1.2</li>
<li>Option1.3</li>
<li>Option1.4</li>
</ul>
</li>
<li>Option2
<ul>
<li>Option2.1</li>
<li>Option2.2</li>
<li>Option2.3</li>
<li>Option2.4</li>
</ul>
</li>
<li>Option3
<ul>
<li>Option3.1</li>
<li>Option3.2</li>
<li>Option3.3</li>
<li>Option3.4</li>
</ul>
</li>
<li>Option4
<ul>
<li>Option4.1</li>
<li>Option4.2</li>
<li>Option4.3</li>
<li>Option4.4</li>
</ul>
</li>
<li>Option5
<ul>
<li>Option5.1</li>
<li>Option5.2</li>
<li>Option5.3</li>
<li>Option5.4</li>
</ul>
</li>
<li>Option6
<ul>
<li>Option6.1</li>
<li>Option6.2</li>
<li>Option6.3</li>
<li>Option6.4</li>
</ul>
</li>
</ul>
</header>
<div id="banner" style="margin:0px auto">
<div id="slider">
<div id="pager"></div>
<div id="next">></div>
<div id="prev"><</div>
<div class="items">
<img alt="Error" src="images/Albena_Bulgaria-720x480.jpg"/>
<div class="info">
<h2>Insert text here</h2>
<p>Insert more text here</p>
</div>
</div>
<div class="items">
<img alt="Error" src="images/Rila_Monastery_Bulgaria-720x480.jpg"/>
<div class="info">
<h2>Insert text here</h2>
<p>Insert more text here</p>
</div>
</div>
<div class="items">
<img alt="Error" src="images/Balchik_Bulgaria-720x480.jpg"/>
<div class="info">
<h2>Insert text here</h2>
<p>Insert more text here</p>
</div>
</div>
<div class="items">
<img alt="Error" src="images/Belogradchik_Fortress_Bulgaria-720x480.jpg"/>
<div class="info">
<h2>Insert text here</h2>
<p>Insert more text here</p>
</div>
</div>
<div class="items">
<img alt="Error" src="images/Burgas_coast_Bulgaria-720x480.jpg"/>
<div class="info">
<h2>Insert text here</h2>
<p>Insert more text here</p>
</div>
</div>
<div class="items">
<img alt="Error" src="images/Downtown_Sofia_Boby_Dimitrov_1-720x480.jpg"/>
<div class="info">
<h2>Insert text here</h2>
<p>Insert more text here</p>
</div>
</div>
</div>
</div>
<div id="content">
<p>Content</p>
</div>
</div>
</body>
</html>
I am creating a site similar to jsbin in that site i have created menubar which is in black color and below menubar there is code container which is in grey color where user will type a code my problem is the codecontainer is overlaping the menu bar little not 100% i donot want to over lap it so how do i solve this problem
here is my code
HTML
<html>
<head>
<title>CodePlayer</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="StyleSheets/CodePlayerStyleSheet.css">
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrapper">
<!--------------------MENUBAR---------------------------------->
<div id="menubar">
<div id="logo">CodePlayer</div>
<div id="btnrun"><button id="runbtn">Run</button></div>
<div id="menubar">
<ul id="menulist">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li style="border:none;width:15%">Output</li>
</ul>
</div>
</div>
<!-------------------------------------------------------->
<div class="emptydiv"></div>
<!------------------CODECONTAINER---------------------------------------->
<div class="codecontainer" id="htmlcontainer">
<textarea>Example</textarea>
</div>
</div>
<!--------------------------------------------------------------->
<script>
</script>
</body>
</html>
CSS
body{
margin:0;
padding:0;
}
#menubar{
background-color: #000000;
width:100%;
height:50px;
}
#logo{
font-family: 'Lobster', cursive;
color:white;
font-size:30px;
padding:5px 0 0 15px;
float:left;
}
#runbtn{
float:right;
font-size:15px;
background-color:rgba(0,0,0,1.00);
border:1px solid #FFFFFF;
width:60px;
height:20px;
border-radius:10px;
color:white;
cursor:pointer;
position:relative;
top:8px;
}
#btnrun{
padding: 12px 20px 0 0;
}
#menulist{
list-style:none;
margin:0 auto;
border:1px solid #FFFFFF;
width:296px;
height:30px;
padding:0;
position:relative;
top:2px;
}
#menulist li{
float:left;
color:white;
border-right:1px solid white;
padding:5px 12px 7px 15px;
cursor:pointer;
}
li:hover{
background-color:#FFFFFF;
color:rgba(0,36,255,1.00) !important;
}
.emptydiv{
clear:both;
}
.codecontainer{
background-color:rgba(177,177,177,1.00);
color:black;
float:left;
height:100%;
width:25%;
}
Make the following change
#menubar {
background-color: #000000;
width:100%;
height:auto;
padding: 10px; /* you can change this, but it's to add some spacing on your menubar */
}
The border after every menu item ie after news,sports,whether etc are extending the top bar the height should be similiar to the top bar should not go out of the top bar
And also the the bar below the top bar which is news bar is not displaying properly check the image link which is the required output for ref see the images click on This is correct image link below
To see the code click the link below "Click Me to see the code"
This is correct image
Click Me to see the code
**HTML**
<html>
<head>
<title> BBC NEWS</title>
</head>
<body>
<div class="container">
<div class="topbar">
<div class="fixwidth">
<div class="bbclogo">
<img src="../Images/bbc logo.PNG"/>
</div>
<div class="signin">
<img src="../Images/Signin.PNG"/>Sign In
</div>
<div class="topmenu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
<li>IPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div class="search">
<input type="text" placeholder="Search"/>
</div>
<div class="empty"></div>
<div class="newsbar">
<div class="fixwidth">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
<style type="text/css">
body{
margin:0;
}
.topbar{
background-color:#7A0000;
height:40px;
width:100%;
color:white;
font-family:arial,helvetica,sans-serif;
position:fixed;
}
.fixwidth{
margin:0 auto;
width:1150px;
}
.bbclogo{
padding:5px;
float:left;
border-right:1px solid #990000;
padding-right:10px;
}
.signin{
padding:8px 80px 12px 20px;
font-weight:bold;
font-size:15px;
float:left;
border-right:1px solid #990000;
margin-top:3px;
}
.signin img{
position:relative;
top:1px;
}
.topmenu{
float:left;
}
.topmenu ul{
margin:0;
padding:0;
}
.topmenu li{
float:left;
list-style:none;
font-weight:bold;
font-size:15px;
border-right:1px solid #990000;
height:100%;
padding:10px 20px 0 20px;
line-height:1;
}
.search{
float:left;
padding:8px;
}
.search input{
height:25px;
border:none;
padding:3px;
font-size:12px;
font-family:Times New Roman;
font-style:italic;
background-image:url(../../../blq-search_grey_alpha.png);
background-repeat:no-repeat;
background-position:right center;
}
.empty{
clear:both;
}
.newsbar{
background-color:#990000;
height:40px;
width:100%;
color:white;
}
</style>
Removed the height of navbar and made necessary changes
Demo Link
<html>
<head>
<title> BBC NEWS</title>
<style type="text/css">
body{
margin:0;
}
.topbar{
background-color:#7A0000;
/*height:40px;*/ /* removed*/
width:100%;
color:white;
font-family:arial,helvetica,sans-serif;
position:fixed;
}
.fixwidth{
margin:0 auto;
width:1050px;
}
.bbclogo{
padding:13px;
float:left;
border-right:1px solid #990000;
padding-right:10px;
}
.signin{
padding:8px 80px 12px 20px;
font-weight:bold;
font-size:15px;
float:left;
border-right:1px solid #990000;
margin-top:3px;
}
.signin img{
position:relative;
top:1px;
}
.topmenu{
float:left;
}
.topmenu ul{
margin:0;
padding:0;
}
.topmenu li{
float:left;
list-style:none;
font-weight:bold;
font-size:15px;
border-right:1px solid #990000;
height:100%;
padding: 4px 20px 0 20px; /* changed */
line-height: 2.8; /* added */
}
.search{
float:left;
padding:8px;
}
.search input{
height:25px;
border:none;
padding:3px;
font-size:12px;
font-family:Times New Roman;
font-style:italic;
background-image:url(../../../blq-search_grey_alpha.png);
background-repeat:no-repeat;
background-position:right center;
}
.empty{
clear:both;
}
.newsbar{
background-color:#990000;
height:40px;
width:100%;
color:white;
}
</style>
</head>
<body>
<div class="container">
<div class="topbar">
<div class="fixwidth">
<div class="bbclogo">
<img src="../Images/bbc logo.PNG"/>
</div>
<div class="signin">
<img src="../Images/Signin.PNG"/>Sign In
</div>
<div class="topmenu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
<li>IPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div class="search">
<input type="text" placeholder="Search"/>
</div>
<div class="empty"></div>
<div class="newsbar">
<div class="fixwidth">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
for newsbar you have to change your height and width like below :
.newsbar{background-color:#990000; height:5000px; width:100%; color:white; }
Will definately works ☺
How come my padding isnt working on my logo div it was working before i added an extra div but i still cant see the reason it isn't working.Please check out my code to figure out if you can help me :)
<!DOCTYPE html>
<html>
<head>
<title>Learning Javacript</title>
<link href="main.css" rel="stylesheet" type="text/css">
<link href="normalize.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="contact_info">
<div class="email">
<img src="icons/icon_mail.png">
<p>contact#thislooksgreat.net</p>
</div>
<div class="phone">
<img src="icons/icon_phone.png">
<p>+40.727.123.456</p>
</div>
<div class="Social_Media">
<ul>
<li><img src="Social/facebook.png"></li>
<li><img src="Social/twitter.png"></li>
<li><img src="Social/youtube.png"></li>
<li><img src="Social/googleplus.png"></li>
<li><img src="Social/linked.png"></li>
</ul>
</div>
<div class="language">
<p>ENGLISH</p>
<img src="icons/arrow.png">
</div>
</div>
</header>
<div class="main_real">
<div class="main_img">
<div class="main_nav_width">
<div class="main_nav">
<div class="logo">
<img src="Logo/logo.png">
</div>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>News</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</body>
</html>
html,body,h1,h2,h3,h4,h5,h6,p,li,ul,a,nav{
padding:0px;
margin:0px;
}
header{
width:100%;
background-color:#143e6e;
height:40px;
border-top:6px solid #0d2f57;
}
.contact_info{
width:1200px;
margin:0 auto;
}
.contact_info p, img{
float:left;
}
.email p,img{
float:left;
}
.email .phone, p{
padding-top:12px;
padding-right:60px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:white;
}
.email img{
padding-top:11px;
padding-right:10px;
}
.phone p,img{
float:left;
}
.phone img{
padding-top:7px;
}
.Social_Media ul{
padding-top:10px;
padding-left:25px;
float:right;
}
.Social_Media li{
display:inline;
}
.Social_Media img{
padding-right:25px;
}
.Social_Media li:last-child img {
padding-right:0px
}
.language{
float:right;
}
.language p{
padding-right:0px;
}
.language img{
padding-top:15px;
padding-left:5px;
}
.main_nav_width{
width:100%;
background-color:white;
box-shadow: 0 5px 6px -6px black;
}
.main_nav{
width:1200px;
margin:0 auto;
height:90px;
}
}
.logo{
clear:both;
float:left;
padding-top:15px;
}
nav ul{
float:right;
padding-top:35px;
height:55px;
}
nav li{
display:inline;
}
nav li:last-child a{
margin-right:0px;
}
nav a{
width:50px;
margin-right:20px;
margin-left:20px;
padding-top:33px;
padding-bottom:40px;
text-decoration:none;
height:90px;
color:#143e6e;
}
nav a:hover {
width:90px;
padding-top:35px;
text-decoration:none;
height:15px;
color:#143e6e;
border-bottom:5px solid blue;
padding-bottom:33px;
}
nav li:last-child a:hover{
width:70px;
margin-left:20px
}
.main_img{
background-image: url("images/imac.png");
background-repeat:no-repeat;
background-position: 780px 64px;
background-repeat: no-repeat;
background-size:500px 500px;
width:100%;
height:650px;
}
.main_real{
background-image: url("images/background_jumbo.jpg");
background-repeat:no-repeat;
background-position: right top;
background-size:100% 480px;
width:100%;
}
Check your brackets. The extra curly brace might be throwing you off. If not try get a JSFiddle up.
.main_nav{
width:1200px;
margin:0 auto;
height:90px;
}
}
.logo{
clear:both;
float:left;
padding-top:15px;
}
I'm a tad rattled simply because I cannot figure this out at all.
I am trying to make a simple page layout of a header, subheader, sidebar, content pane and footer. I scripted everything and it was working fine. I then went into my javascript file to write a function, and when I came back, my sidebar jumped from the left hand side to the right, and I simply cannot figure out why. I have tried copying my script in one section at a time, and it really seems to be only the sidebar that is bugged. Any insight would be majorly appreciated!
My HTML:
<html lang ="en">
<head>
<meta charset="utf-8">
<title>....</title>
<link rel="stylesheet" type="text/css" href="../CSS/styleCss.css">
<script type="text/javascript" src="../JavaScript/dateandtime.js"></script>
</head>
<body>
<div id="header">
<a href="index.html">
<img src="..." alt="..." height="200" width="500" />
</a>
</div>
<div id="subheader">
<p id="timeStamp"><br/></p>
</div>
<div id="sidebar">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...<br /></li>
</ul>
</div>
<div id="content">content area</div>
<div id="footer">footer</div>
</body>
</html>
And my CSS:
body{
width:100%;
background-color:#e3f2fd;
}
#header {
width:1030px;
height:200px;
margin-left:50px;
background-color:#2196f3;
float:left;
}
#header img {
float:left;
}
#header h1 {
margin-left:550px;
color:black;
font-family:"arial black";
font-size:40px;
}
#header p {
margin-left:550px;
color:white;
font-family:"arial black";
font-style:italic;
font-size:200%;
}
#subheader {
position:relative;
margin-left:50px;
width:1030px;
height:75px;
background-color:black;
float:left;
border-top:1px solid red;
}
#subheader p {
margin-left:50px;
color:white;
font-family:"arial black";
font-style:italic;
font-size:150%;
float: left;
}
#sidebar {
position:relative;
font-size:20px;
margin-top:75px;
background-color:#0d47a1;
width:230px;
height:600px;
border:1px solid red;
float:left;
}
#sidebar a {
text-decoration:none;
color:white;
}
#sidebar a:hover{
background-color:black;
color:white;
}
#sidebar ul {
list-style-type:none;
}
#sidebar li {
padding-top:60px;
padding-left:0px;
font-family:"arial black";
}
#content {
position:relative;
width:798px;
margin-top:-602px;
margin-left: 282px;
height:600px;
background-color:#90caf9;
float:left;
border-top:1px solid red;
border-bottom:1px solid red;
}
#footer {
position: relative;
height:150px;
width:1030px;
background-color:#82b1ff;
margin-left:50px;
float:left;
}
I would seriously appreciate any help, I must be missing something!
Please wrap the all div in to one div like below and also update some css ID and class unwanted margin
<style type="text/css">
.main-cont {
width: 1030px;
float: left;
}
#content {
margin-left: 0;
margin-top: 0;
}
#sidebar {
margin-top: 0;
}
</style>
<body>
<div class="main-cont">
<div id="header">
<a href="index.html">
<img src="..." alt="..." height="200" width="500" />
</a>
</div>
<div id="subheader">
<p id="timeStamp"><br/></p>
</div>
<div id="sidebar">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...<br /></li>
</ul>
</div>
<div id="content">content area</div>
<div id="footer">footer</div>
</div>
</body>
one more solution And if you don't want to add <div class="main-cont"> try only this css
#subheader {
clear: both;
float: none;
}
It will set so you no need to add "main-cont" div