I cant seem to figure out how to overlap my nav bar so that it will always be on full display when scrolling. The code is given below. Please help me as i am lost for a few days. I've fixed the navagation bar by using position:fixed. i dont know whether my position of div element is wrong or there is something that i should ve known earlier before making a fixed navigation bar.
`
body{
background-image:url('https://www.pixelstalk.net/wp-content/uploads/2016/04/Blue-icy-ocean-wallpaper-HD.jpg');
}
*{
padding:0px;
margin:0px;
}
#maindiv{
width:100%;
height:100px;
}
#navdiv ul{
width:100%;
height:80px;
background-color:#000916;
line-height:80px;
position:fixed;
}
#navdiv ul li{
list-style-type:none;
display:inline-block;
float: right;
}
#navdiv ul a{
text-decoration:none;
color:white;
padding:20px;
}
#navdiv ul a:hover{
background:#000948;
transition: all 0.40s;
}
#navdiv h1{
color:white;
float:left;
width:200px;
margin-left:20px;
margin-top:10px;
cursor:pointer;
}
#about{
width:50%;
margin:auto;
background-color:#000916;
border-radius:30px;;
}
#about p{
color:white;
}
#left-text1{
padding-left:10px;
padding-top:10px;
}
.resize{
width:400px;
height:auto;
border-radius:30px;
}
<head>
<title>Portfolio</title>
</head>
<body>
<div id="maindiv">
<div id = "navdiv">
<ul>
<h1>Danial</h1>
<li>Contact</li>
<li>Portfolio</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
</div>
<div id="about">
<div class="row">
<div class="col-md-6">
<p id="left-text1">Welcome to my Site<br>I am a front-end web developer who loves to cooperate and involve in projects to either earned money or earned experience</p>
</div>
<div class="col-md-6">
<img class="resize"src="https://www.123freevectors.com/wp-content/uploads/digi/casual-man-standing-free-vector-17.jpg">
</div>
</div>
</div>
</body>
`
body{
background-image:url('https://www.pixelstalk.net/wp-content/uploads/2016/04/Blue-icy-ocean-wallpaper-HD.jpg');
}
*{
padding:0px;
margin:0px;
}
#maindiv{
width:100%;
height:100px;
}
#navdiv ul{
width:100%;
height:80px;
background-color:#000916;
line-height:80px;
position:fixed;
/* you can set who you want to be infront by the z-index prop */
z-index:99999;
}
#navdiv ul li{
list-style-type:none;
display:inline-block;
float: right;
}
#navdiv ul a{
text-decoration:none;
color:white;
padding:20px;
}
#navdiv ul a:hover{
background:#000948;
transition: all 0.40s;
}
#navdiv h1{
color:white;
float:left;
width:200px;
margin-left:20px;
margin-top:10px;
cursor:pointer;
}
#about{
width:50%;
margin:auto;
background-color:#000916;
border-radius:30px;;
}
#about p{
color:white;
}
#left-text1{
padding-left:10px;
padding-top:10px;
}
.resize{
width:400px;
height:auto;
border-radius:30px;
}
<head>
<title>Portfolio</title>
</head>
<body>
<div id="maindiv">
<div id = "navdiv">
<ul>
<h1>Danial</h1>
<li>Contact</li>
<li>Portfolio</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
</div>
<div id="about">
<div class="row">
<div class="col-md-6">
<p id="left-text1">Welcome to my Site<br>I am a front-end web developer who loves to cooperate and involve in projects to either earned money or earned experience</p>
</div>
<div class="col-md-6">
<img class="resize"src="https://www.123freevectors.com/wp-content/uploads/digi/casual-man-standing-free-vector-17.jpg">
</div>
</div>
</div>
</body>
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>
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;
}
There is some black space to the right of my sub-menu when I activate the drop down menu(through hovering). I have tried a lot of thing and can't seem to find which element I must alter to get rid of it. Help me out please, when on fiddle increase width of website, the problem becomes more apparent.I don't want any space at all, I want the sub-menus to fit the size of the menu it dropped from.
html:
<body>
<header id = "M_head">
<img id="M_logo" src="MircLogo.png">
<img id="M_logo2" src="MircLogo.png">
<h2><ul>Mc</ul></h2>
</header>
<div id="container">
<nav id="M_nav">
<ul>
<li>NEWS
<ul>
<li><a>Item1</a></li><li><a>Item1</a></li><li><a>Item1</a></li><li><a>Item1</a></li>
</ul>
</li>
<li>STORE
<ul>
<li><a>Item1</a></li><li><a>Item1</a></li><li><a>Item1</a></li><li><a>Item1</a></li>
</ul>
</li>
<li>BLOG</li>
<li>CONTACTS</li>
<li>ABOUT</li>
</ul>
</nav>
<section id="M_section">
<div id=Side_sec></div>
<div id="Side_sec2"></div>
</section>
<footer id="M_footer">
</footer>
</div>
</body>
css:
*{box-sizing:border-box;}
body{
max-width:100%;
margin:0px;
display:block;
}
#container{
padding:0;
text-align:center;
box-sizing:border-box;
margin: 0px auto;
margin-top:-.5em;
background-image:url("MircBackground.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat:no-repeat;
}
#M_logo{
margin:-25px;
float:left;
height:5em;
width:8%;
margin-left:-1.825em;
}
#M_logo2{
margin-top:-25px;
float:right;
height:5em;
width:8%;
margin-right:-1.825em;
}
#M_head{
margin:0px auto;
color:black;
width:90%;
background-color:white;
height:4em;
}
#M_head ul{
padding:0px auto !important;
margin: 0px;
margin-left:5em;
text-align:left;
font-style:italic;
font-weight:bold;
width:30%;
letter-spacing:-0.08em;
word-spacing:-0.03em;
}
#M_nav ul {
width:102.5%;
padding:0px;
padding-top:.25em;
padding-bottom:.25em;
margin-left:-2.6%;
margin-top:0em;
background-color:black;
display:inline-table;
}
#M_nav ul li{
display:inline-block;
list-style-type:none;
text-decoration:none;
text-align:center;
padding-left:3.5em;
padding-right:3.5em;
padding-top:0.35em;
padding-bottom:0.35em;
display:inline-block;
border-radius:0.25em;
color:white;
font-weight:bold;
background-color:black;
}
#M_nav ul li:hover{
background-color:#FFBF00;
color:white;
font-shadow:none;
z-index:100;
}
#M_nav ul ul{
display:none;
}
#M_nav ul li:hover >ul{
display:block;
width:20%;
position:absolute;
margin-top:.7em;
float:center;
}
#M_nav ul li:hover ul >li{
display:block;
width:60%;
}
#Side_sec{
height:50em;
width:15%;
border-left:2px solid white;
float:right;
}
#M_section{
height:50em;
width:80%;
margin:-1em auto;
border:2px solid white;
}
fiddle link:http://jsfiddle.net/ft9b6np9/
Change:
#M_nav ul li:hover ul >li{
display:block;
width:60%;
}
to:
#M_nav ul li:hover ul >li{
display:block;
}
Setting a percentage width is causing the black overflow on the right side.
Fiddle: http://jsfiddle.net/ft9b6np9/1/
I have some text on the left side of my footer and i want my links to be on the right but at the same time lined up with my text that is on the left. I tried to float the links to the right but not only are the links not in order, they also don't line up with the text on the left.
jsfiddle - http://jsfiddle.net/gL2xtezz/2/
<!DOCTYPE html>
<html lang="en">
<head>
<title>Taffies Cupakes</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<header>
<img src="images/header.png" alt="taffies logo">
</header> <!-- end of header -->
<aside class="sidebar">
<nav>
<ul>
<li>home</li>
<li>about us</li>
<li>orders</li>
<li>gallery</li>
<li>contact</li>
</ul>
</nav> <!-- end of nav -->
<div class="company_info">
<p>Taffies cupcakes</p>
<p>111 x drive road</p>
<p>milton keynes</p>
<p>l0002</p><br>
<p>telephone: 078 878-8888</p>
</div> <!-- end of compnay info text -->
</aside> <!-- end of aside -->
<section class="first_article">
<article>
<p class="first_main_paragraph">Welcome to Taffies Cupcakes website! In here you will find various types of cupcakes we offer. Our cupcakes are fresh and we deliver in 24 hours. </p>
<p class="second_main_paragraph">Check out the gallery section to see which type of cupcake you prefer. If you don't see your favorite, you can contact us and give us suggestions on what other type of cupcakes we should offer. We take feedback seriously and want to provide the best cupcakes to our customers.</p>
<img src="images/contact-button.png" alt="contact_button" class="contact_button">
<img src="images/cupcake.png" alt="cupcake" class="cupcake">
</article>
</section> <!-- end of section -->
<footer>
<p>Taffie's Cupcakes © copyright 2014</p>
<ul>
<li>home</li>
<li>about us</li>
<li>orders</li>
<li>gallery</li>
<li>contact us</li>
</ul>
</footer> <!-- end of footer -->
</div> <!-- end of container -->
</body>
</html>
*{
margin:0px;
padding:0px;
list-style-type:none;
}
header,nav,section,article,aside,footer{
display:block;
}
.container{
width:960px;
margin:0 auto;
}
body{
background-color:#e8d4cb;
}
header img{
padding:43px;
display:block;
margin:0 auto;
box-sizing:border-box;
}
.first_article{
float:left;
width:500px;
margin:25px;
}
.first_main_paragraph{
font-family:arial;
font-size:20px;
color:#846a5f;
margin-bottom:50px;
}
.second_main_paragraph{
font-family:arial;
font-size:13px;
color:#846a5f;
}
.first_article .contact_button{
float:left;
margin-top:165px;
}
.first_article .cupcake{
float:left;
margin-top:20px;
margin-left:19px;
}
.sidebar{
float:left;
margin:30px;
margin-right:40px;
}
nav ul li a{
text-decoration:none;
font-family:myriad pro;
font-size:20px;
color:#3d2316;
display:inline-block;
padding-left:85px;
padding-right:29px;
padding-top:26px;
padding-bottom:26px;
width:39%;
}
nav ul li:hover a{
color:#e8d5cc;
}
nav ul li{
margin-bottom:3px;
background-color: #CBAFA2;
}
nav ul li:hover{
background-color: #3D2316;
}
.company_info{
background-color:#cbafa2;
padding:20px;
text-align:right;
margin-bottom:100px;
font-size:14px;
color:#3d2316;
font-family:myriad pro;
}
.about_section{
float:left;
width:500px;
margin:25px;
}
.about_title{
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.about_text{
font-family:arial;
font-size:13px;
color:#846a5f;
}
.orders_section{
float:left;
width:500px;
margin:25px;
}
.orders_title{
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.second_order{
margin-top:50px;
}
.order_text{
font-family:arial;
font-size:11px;
color:#846a5f;
}
.order_numbers{
color:#3D2316;
}
.gallery_section{
float:left;
width:600px;
margin:25px;
}
.gallery_title{
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.contact_section{
float:left;
width:500px;
margin:25px;
}
.contact_title{
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.contact_text{
font-family:arial;
font-size:13px;
color:#846a5f;
}
footer{
clear:both;
font-family:arial;
border-top:1px solid #aa8573;
height:100px;
}
footer p{
color:#784f3d;
margin:10px;
float:left;
}
footer ul li a{
text-decoration:none;
font-size:13px;
color:#784f3d;
margin:10px;
float:left;
}
footer ul li a:hover{
color:#3d2316;
}
figure{
float:left;
margin:25px;
}
figcaption{
text-align:center;
font-family:arial;
font-size:13px;
color:#846a5f;
margin-top:15px;
}
span{
font-family:arial;
font-size:15px;
color:#846a5f;
font-weight:bold;
}
Change the order of li and use float: right to footer ul li
JSFiddle - DEMO
CSS:
*{
margin:0px;
padding:0px;
list-style-type:none;
}
header,nav,section,article,aside,footer{
display:block;
}
.container{
width:960px;
margin:0 auto;
}
body{
background-color:#e8d4cb;
}
header img{
padding:43px;
display:block;
margin:0 auto;
box-sizing:border-box;
}
.first_article{
float:left;
width:500px;
margin:25px;
}
.first_main_paragraph{
font-family:arial;
font-size:20px;
color:#846a5f;
margin-bottom:50px;
}
.second_main_paragraph{
font-family:arial;
font-size:13px;
color:#846a5f;
}
.first_article .contact_button{
float:left;
margin-top:165px;
}
.first_article .cupcake{
float:left;
margin-top:20px;
margin-left:19px;
}
.sidebar{
float:left;
margin:30px;
margin-right:40px;
}
nav ul li a{
text-decoration:none;
font-family:myriad pro;
font-size:20px;
color:#3d2316;
display:inline-block;
padding-left:85px;
padding-right:29px;
padding-top:26px;
padding-bottom:26px;
width:39%;
}
nav ul li:hover a{
color:#e8d5cc;
}
nav ul li{
margin-bottom:3px;
background-color: #CBAFA2;
}
nav ul li:hover{
background-color: #3D2316;
}
.company_info{
background-color:#cbafa2;
padding:20px;
text-align:right;
margin-bottom:100px;
font-size:14px;
color:#3d2316;
font-family:myriad pro;
}
.about_section{
float:left;
width:500px;
margin:25px;
}
.about_title{
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.about_text{
font-family:arial;
font-size:13px;
color:#846a5f;
}
.orders_section{
float:left;
width:500px;
margin:25px;
}
.orders_title{
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.second_order{
margin-top:50px;
}
.order_text{
font-family:arial;
font-size:11px;
color:#846a5f;
}
.order_numbers{
color:#3D2316;
}
.gallery_section{
float:left;
width:600px;
margin:25px;
}
.gallery_title{
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.contact_section{
float:left;
width:500px;
margin:25px;
}
.contact_title{
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.contact_text{
font-family:arial;
font-size:13px;
color:#846a5f;
}
footer{
clear:both;
font-family:arial;
border-top:1px solid #aa8573;
height:100px;
}
footer p{
color:#784f3d;
margin:10px;
float:left;
}
footer ul li a {
text-decoration:none;
font-size:13px;
color:#784f3d;
margin:10px;
float:left;
}
footer ul li {
float: right;
}
footer ul li a:hover{
color:#3d2316;
}
figure{
float:left;
margin:25px;
}
figcaption{
text-align:center;
font-family:arial;
font-size:13px;
color:#846a5f;
margin-top:15px;
}
span{
font-family:arial;
font-size:15px;
color:#846a5f;
font-weight:bold;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Taffies Cupakes</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<header>
<img src="images/header.png" alt="taffies logo">
</header> <!-- end of header -->
<aside class="sidebar">
<nav>
<ul>
<li>home</li>
<li>about us</li>
<li>orders</li>
<li>gallery</li>
<li>contact</li>
</ul>
</nav> <!-- end of nav -->
<div class="company_info">
<p>Taffies cupcakes</p>
<p>111 x drive road</p>
<p>milton keynes</p>
<p>l0002</p><br>
<p>telephone: 078 878-8888</p>
</div> <!-- end of compnay info text -->
</aside> <!-- end of aside -->
<section class="first_article">
<article>
<p class="first_main_paragraph">Welcome to Taffies Cupcakes website! In here you will find various types of cupcakes we offer. Our cupcakes are fresh and we deliver in 24 hours. </p>
<p class="second_main_paragraph">Check out the gallery section to see which type of cupcake you prefer. If you don't see your favorite, you can contact us and give us suggestions on what other type of cupcakes we should offer. We take feedback seriously and want to provide the best cupcakes to our customers.</p>
<img src="images/contact-button.png" alt="contact_button" class="contact_button">
<img src="images/cupcake.png" alt="cupcake" class="cupcake">
</article>
</section> <!-- end of section -->
<footer>
<p>Taffie's Cupcakes © copyright 2014</p>
<ul>
<li>contact us</li>
<li>gallery</li>
<li>orders</li>
<li>about us</li>
<li>home</li>
</ul>
</footer> <!-- end of footer -->
</div> <!-- end of container -->
</body>
</html>
jsBin demo
footer ul{
float:right; /* FLOAT RIGHT UL INSTEAD */
}
footer li{
display:inline-block; /* needed */
}
footer ul li a{
display:inline-block; /* needed in order to add padding. */
padding: 10px; /* Add some padding to your links, UX, remember? */
text-decoration:none;
font-size:13px;
color:#784f3d;
/* margin:10px; Not needed, accounted it all to padding! */
/* float:left; Not needed */
}
footer ul li a:hover{
color:#3d2316;
}