I am unsure why this is happening as nothing in the developer tools is showing the body going over top of the white space. The only thing that shows over the white space is when I hover my mouse over the html in my source code, in the developer element tool.
I have the body margin set to 0, so I cannot figure out why I have a white space there.
Anyone have any ideas what is causing it?
<body>
<header class="header">
<div class="header_wrap">
<span class="nav-btn"></span>
<ul class="nav_list">
<li>Home</li>
<li>Spray Foam Insulation</li>
<li>Portable Spray Foam Kits</li>
<li>Polyurea</li>
<li>Personal Protective Equipment</li>
<li>Financing</li>
<li>Contact us</li>
</ul>
</div>
</header>
<div id="lower-header">
<div id="logo-wrap">
<img src="http://sprayfoamequipmentinsider.com/images/SFEI Logo & CSS/Spray Foam equipment insider 3.jpg" id="header-logo1">
<img src="http://sprayfoamequipmentinsider.com/images/Contractor Images/top ad.png" id="header-logo2">
</div>
<div id="topnav">
<ul>
<li class="last">TECH/PARTS/REPAIRS</li>
<li>SPRAY FOAM SCHOOL</li>
<li>USED/BUY/SELL</li>
<li>SPRAY FOAM RIGS</li>
<li>SPRAY FOAM EQUIPMENT</li>
</ul>
</div>
<br class="clear" />
</div>
body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#666666; background-color:#FFFFFF;}
.header {
margin: 0;
background-color: #333;
height: 50px;
}
.header_wrap {
text-align: center;
margin: 0 auto;
position: relative;
}
.nav-btn {
display: none;
}
.nav_list {
text-decoration: none;
background: #333;
color: #FFF;
list-style: none;
position: relative;
z-index: 1;
}
.nav_list > a {
display: inline-block;
padding: 15px 12px;
text-decoration: none;
transition: ease-in-out .5s;
}
.nav_list > a:first-child {
padding-left: 0px;
margin: 0;
}
.nav_list > a > li {
text-decoration: none;
font-size: 1.1em;
color: #FFF;
}
#topbar {
display:block;
position:relative;
width:960px;
margin:0 auto;
}
/* ----------------------------------------------Header------------------------------------- */
#lower-header {
margin: 0 auto;
padding: 10px 0 20px;
z-index: 1;
color: #666666;
background: #000000;
border-bottom: 1px solid #363636;
width: 100%;
overflow: hidden;
}
#logo-wrap {
width: 960px;
margin: 0 auto;
}
#header-logo1 {
float: left;
width: 400px;
height: 93px;
}
#header-logo2 {
float: right;
width: 310px;
height: 75px;
}
#header-logo1, #header-logo2 {
border: none;
}
/*#lower-header h1, #header p, #header ul{margin:0; padding:0; list-style:none; line-height:normal;}*/
#topnav {
float: left;
padding-top: 22px;
width: 100%;
text-align: center;
font-size: 1.1em;
background: #000000;
font-family: Georgia, "Times New Roman", Times, serif;
}
#topnav li {
display: inline-block;
padding: 10px 12px 0 12px;
border-top: 2px solid transparent;
}
#topnav li:hover {
border-top: 2px solid #0C3;
color: #0C3;
}
#topnav a li {
color: #FFF;
line-height: 1.3em;
text-decoration: underline;
}
It's probably the default margins on ul.nav_list that are interfering by collapsing with its ancestors (up to and including body). Zeroing out those margins should fix it.
In console following style sheet create the spacing problem.
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
see below screenshot :
to remove this problem overwrite margin in '.nav_list' css class
Example below:
.nav_list {
text-decoration: none;
background: #333;
color: #FFF;
list-style: none;
position: relative;
z-index: 1;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
Related
As you can see in the first image, I have the underline appear under the links which covers the red "hr" that runs across the page. I want to apply the same effect on the archives and categories links but with it appearing above. I can't seem to find a way of doing it. I looked up a hover underline position, and tried using text-underline-position to being above but that doesn't do what I want it to do. How do I go about doing this?
In the second image, in the prototype I had designed to have the underline have a drop-shadow effect. How do I go about doing that with hover links? Can it even be achieved if I'm using an image as a background? Or would I need to save that as a .png with transparency? Any tips?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<header></header>
<div id="NavSection">
<div id="TopNav">
<nav id="MainNav">
<ul id="Menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<hr />
<div id="SecondNavSection">
<nav id="SecondNav">
<ul id="SecondMenu">
<li>Archives</li>
<li>Categories</li>
</ul>
</nav>
</div>
<div id="SiteTitle">
<h1 id="My">My<span id="Site">Site</span></h1>
</div>
</div>
<div id="ContentDiv">
<main id="ContentSection">
<div id="Content">
<p>Content goes here.</p>
</div>
</main>
</div>
<footer>
<p>My Site</p>
</footer>
</body>
</html>
CSS:
body {
background-color: #ffffff;
background: url(/images/background.jpg) no-repeat center center fixed;
background-size: cover;
resize: both;
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px;
font-family: Arial;
}
#font-face {
font-family: ubuntu-medium;
src: url(/fonts/ubuntu-medium.ttf);
}
/* #media (max-width:3440px){
body{background: url(/images/background.jpg) no-repeat center center fixed;}
} */
/* #media (min-width:480px){
body{background: url(/images/background.jpg) no-repeat center center fixed;}
} */
#NavSection {
margin-top: 3%;
}
#MainNav {
position: left;
margin-left: 11%;
}
#Menu li {
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
display: inline;
font-size: 15px;
list-style-type: none;
}
#Menu a:hover {
text-decoration-color: #414141;
text-underline-offset: 0.12em;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-thickness: 4px;
}
hr {
margin: 0px;
border: 2px solid red;
width: auto;
}
a {
color: #414141;
text-decoration: none;
}
a:active {
color: #ff0000;
}
#SiteTitle {
margin-left: 0%;
}
#My {
font-family: Impact;
font-weight: normal;
font-size: 30px;
color: #ffffff;
text-decoration: underline;
text-decoration-color: #414141;
text-decoration-thickness: 2px;
text-underline-offset: 0.08em;
}
#Site {
color: red;
}
ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}
#SecondNav {
float: right;
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
font-size: 15px;
margin-right: 11%;
}
#SecondMenu a:hover {
margin-bottom: 5px;
text-decoration-line: underline;
text-underline-position: above;
text-decoration-style: solid;
text-decoration-color: #414141;
text-decoration-thickness: 4px;
}
#SecondMenu li {
margin-bottom: 5px;
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
display: inline;
font-size: 15px;
list-style-type: none;
}
#ContentDiv {
width: 70%;
height: 40%;
position: absolute;
top: 30%;
left: 15%;
transform: translateX(0%);
background-color: rgba(255, 0, 0, 0.4);
}
#ContentSection {
width: 90%;
height: 60%;
position: absolute;
top: 20%;
left: 5%;
background-color: rgba(255, 255, 255, 0.9);
}
#Content {
margin: 3%;
}
Use this
HTML code
<div class="menu">
A
B
C
D
E
F
</div>
CSS
.body {
background:#222;
padding:50px;
}
.menu {
margin:0 auto;
with 90%;
}
.menu a {
display:block;
float: left;
padding:5px 0;
color:#fff;
text-decoration:none;
margin:0 10px; font-family:arial;
}
.menu a:hover {
border-bottom:3px solid #fff;
}
Hope gonna help you, also i would be glad if you rate my comment good!
Using two lists and using border on the li you can get the color.
.navbar {
position: relative;
margin-bottom: 5px;
font-family: ubuntu-medium;
font-weight: normal;
}
.navbar a {
text-decoration: none;
color: #414141;
}
.navbar ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar ul li {
display: block;
flex: 0 1 auto; /* Default */
list-style-type: none;
line-height: 2.5em;
margin-left: 1em;
}
.sub ul {
justify-content: flex-end;
}
.navbar::before{
position: absolute;
z-index: -1;
margin-top: 2.5em;
content: '';
border-top: 10px solid #FF0000;
width:100%;
}
.main li.active {
border-bottom: 10px solid #000000;
box-shadow: 0 4px 2px -2px #AAAAAA;
}
.sub li.active {
border-top: 10px solid #000000;
margin-top: -10px;
box-shadow: 0px -4px 2px -2px #AAAAAA;
}
<div class="navbar">
<nav class="main">
<ul>
<li>Home</li>
<li class="active">About</li>
<li>Contact</li>
</ul>
</nav>
<nav class="sub">
<ul>
<li class="active">Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
</nav>
</div>
I'm trying to reduce the height of my navigation bar. when I use min-height property, it adds a scrollbar to the navigation bar which makes it not so appealing. I would like to align the logo to the extreme left and the rest of the contents to the extreme right.I have attached the code below. Please help me to fix it.
.navigation {
background-color: rgba(15,58,114,0.9);
overflow-y: auto;
position: fixed;
left: 0;
top: 0;
text-align: left;
width: 100%;
z-index: 10000;
box-sizing: border-box;
}
.log {
text-align: right;
top: 0;
margin: 0 auto;
right: 0;
}
ul {
padding: 0;
}
li {
color: White;
display: inline-block;
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-weight: 300;
margin: 16px 20px;
text-transform: uppercase;
}
li a {
display: inline-block;
color: White;
text-align: Center;
padding: 14px 16px;
text-decoraton: none;
}
li a:hover {
background-color: rgba(0,0,0,0);
}
#logo {
color: #FFFFFF;
font-family: 'Vollkorn';
font-size: 34px;
padding: 0px 50px;
text-align: center;
}
<div class="navigation">
<ul>
<li id="logo">LOGO</li>
<div class="log">
<li>LOGIN</li>
<li>JOIN WITH US</li>
</div>
</ul>
</div>
your logo and below that your menu list - that's the problem
make its side by side
.navigation ul {
display: flex;
}
.navigation {
background-color: rgba(15,58,114,0.9);
overflow-y: auto;
position: fixed;
left: 0;
top: 0;
/*text-align: left;*/
width: 100%;
z-index: 10000;
box-sizing: border-box;
}
.navigation ul {
display: flex; /* new line added */
}
#logo {
flex: 2; /* new line added */
}
.log {
/*text-align: right;*/
top: 0;
margin: 0 auto;
right: 0;
display: flex; /* new line added */
flex: 8; /* new line added */
justify-content: flex-end; /* new line added */
}
ul {
padding: 0;
}
li {
color: White;
display: inline-block;
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-weight: 300;
margin: 16px 20px;
text-transform: uppercase;
}
li a {
display: inline-block;
color: White;
text-align: Center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: rgba(0,0,0,0);
}
#logo {
color: #FFFFFF;
font-family: 'Vollkorn';
font-size: 34px;
padding: 0px 50px;
text-align: center;
}
<div class="navigation">
<ul>
<li id="logo">LOGO</li>
<div class="log">
<li>LOGIN</li>
<li>JOIN WITH US</li>
</div>
</ul>
</div>
You had the scroll bar because the contents were too big and you had overflow-y: auto; Overflow controls the behavior when the contents are too big for the parent div size.
The float property can be used to move elements to different sides of the viewer in a consistent manner.
Your code is still not responsive and will not display correctly on screens smaller that 365px wide. The support range will get smaller if you add more menu items.
There are a lot of resources you can check out for making a responsive menu
Is this what you wanted?
body {
margin: 0 auto;
padding: 0
}
.navigation {
background-color: rgba(15, 58, 114, 0.9);
position: fixed;
height: 60px;
line-height: 60px; /* needs to be the same height as your navigation div */
top: 0;
width: 100%;
z-index: 10000;
}
.log {
float: right; /* pulls the div to the right side */
}
ul {
padding: 0;
margin: 0 auto;
}
li {
color: White;
display: inline-block;
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-weight: 300;
margin: 0 auto;
text-transform: uppercase;
}
li a {
color: White;
text-align: Center;
padding: 0 10px;
text-decoration: none;
}
li a:hover {
color:wheat;
}
#logo {
color: #FFFFFF;
font-family: 'Vollkorn';
font-size: 34px;
padding: 0px 10px;
float: left; /* pulls the div to the left side */
}
<div class="navigation">
<ul>
<li id="logo">LOGO</li>
<div class="log">
<li>LOGIN</li>
<li>JOIN WITH US</li>
</div>
</ul>
made Changes to your HTML and CSS
div with class log is a block level element, means it occupies 100% width of the page, make them display:inline-block and float it to right, make the logo wrap in a div and float it to left. since we are having two float elements navigation bar height gets collapsed to avoid it we need to add clearfix
HTML
<div class="navigation clearfix">
<div class="logo">LOGO</div>
<div class="menu">
<ul>
<li>LOGIN</li>
<li>JOIN WITH US</li>
</ul>
</div>
</div>
CSS
.navigation {
background-color: rgba(15,58,114,0.9);
overflow-y: auto;
position: fixed;
left: 0;
top: 0;
text-align: left;
width: 100%;
z-index: 10000;
box-sizing: border-box;
}
.logo{
float:left;
display:inline-block;
}
.logo a{
padding:8px 2px;
color:#fff;
display:block;
}
.menu{
float:right;
}
.clearfix::after{
content:"";
display:table;
width:100%;
}
.menu ul{
padding:0px;
list-style-type:none;
margin:0;
}
.menu ul li{
display:inline-block;
}
.menu ul li a{
color:#fff;
padding:8px 2px;
display:block;
}
Link For reference
style accordingly
hope this helps..
I've done a little change in the style:
.navigation {
background-color: rgba(15, 58, 114, 0.9);
overflow-y: auto;
position: fixed;
left: 0;
top: 0;
right: 0;
text-align: left;
width: 100%;
z-index: 10000;
box-sizing: border-box;
}
.log {
margin: 0 auto;
float: right;
}
ul {
padding: 0;
}
li {
color: White;
list-style: none;
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-weight: 300;
text-transform: uppercase;
float: right;
}
li a {
display: inline-block;
color: White;
text-align: Center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: rgba(0, 0, 0, 0);
}
#logo {
color: #FFFFFF;
font-family: 'Vollkorn';
font-size: 34px;
padding: 0px 50px;
text-align: center;
float: left !important;
margin-top: -10px;
}
<div class="navigation">
<ul>
<li id="logo">LOGO</li>
<div class="log">
<li>LOGIN</li>
<li>JOIN WITH US</li>
</div>
</ul>
</div>
I am trying to get my sub-menu to appear above my body div when hovering over menu. Here is a picture of my problem since the website is not live yet.
I have been messing around with this for a while now and can't seem to figure out what I have to do to get it to work. I have a z-index value for my sub menu but it still won't show. How can I get the menu to show above the body div?
#charset "utf-8";
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
http://www.alistapart.com/articles/fluid-images/
*/
img, object, embed, video {
max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}
/*
Dreamweaver Fluid Grid Properties
----------------------------------
dw-num-cols-mobile: 4;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 12;
dw-gutter-percentage: 25;
Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
*/
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
.fluidList {
list-style:none;
list-style-image:none;
margin:0;
padding:0;
}
.clearfix:after
{
display: block;
clear: both;
}
.menu
{
width: 300px;
margin: auto;
padding: 0px;
padding-top: 10px;
position: absolute;
margin-left: 0px;
top: 0;
}
.menu li
{
margin: 0px;
list-style: none;
font-size: 0px;
}
.menu a
{
transition: all linear 0.15s;
font-size: 28px;
color: black;
text-decoration: none;
}
.menu li:hover > a, .menu .current-item > a
{
text-decoration: none;
}
.menu .arrow
{
font-size: 20px;
line-height: 0%;
}
.menu > ul > li
{
float :left;
display: inline-block;
position: relative;
font-size: 19px;
}
.menu > ul > li > a
{
padding: 10px 40px;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0,0,0,0.4);
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a
{
color: blue;
}
.sub-menu
{
width: 350px;
padding: 5px 0px;
position: relative;
z-index: 999;
opacity: 0;
box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
}
.menu li:hover .sub-menu
{
opacity: 1;
}
.sub-menu li a
{
padding: 10px 50px;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
color: black;
background-color: red;
}
.sub-menu li a:hover, .sub-menu .current-item a
{
color: blue;
}
.sub-menu ul li :hover ul
{
}
.gridContainer
{
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}
.zeroMargin_desktop
{
margin-left: 0;
}
.hide_desktop
{
display: none;
}
#body
{
margin-left: auto;
margin-right: auto;
width: auto;
color: black;
}
#container
{
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-bottom-style: solid;
border-top-color: #00008B;
border-bottom-color: #00008B;
border-right-color: #00008B;
border-left-color: #00008B;
width: 968px;
background: #FFF;
margin: auto;
margin-top: 0px;
margin-bottom: 0px;
position: relative;
padding: 0px;
overflow: hidden;
}
#header
{
background-color: #EBC79E;
width: auto;
position: relative;
height: 100px;
margin: auto;
margin-top: 0px;
overflow: hidden;
}
#logo
{
width: 350px;
margin:auto;
height: auto;
padding: 0px;
padding-top: 20px;
padding-bottom: 10px;
text-align: center;
}
#logo h1
{
font-size: 55px;
}
#logo h1 a
{
list-style-type: none;
color: #000000;
text-decoration: none;
}
#footer
{
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
width: auto;
margin: auto;
background-color: #EBC79E;
position:relative;
border-top-style: solid;
border-top-color: #000;
overflow: hidden;
}
#footer p
{
padding-left: 35px;
}
#homeBody
{
border-top-style: solid;
border-top-color: #000;
width: auto;
margin: auto;
margin-bottom: -20px;
background-color: #FFF;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
background-color: #CDCDB4;
position: relative;
}
#homeBody h1
{
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 35px;
}
#homeBody h2
{
text-align: center;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
}
#homeBody p
{
padding-top: 20px;
margin-right: 25px;
margin-left: 25px;
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
}
#homeBody img
{
padding-top: 20px;
padding-bottom: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
<body bgcolor="#87CEFA">
<div id="container">
<div id="header">
<div id="logo">
<h1> New Eve Inc.</h1>
</div>
<nav class="menu">
<ul class="clearfix">
<li>
Menu <span class="arrow">▼</span>
<ul class="sub-menu">
<li>Home<br>
About<br>
Bag Sealing<br>
Club Packaging<br>
Displays<br>
Warehousing & Distribution<br>
Contact Us
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="homeBody">
<h1>New Eve Inc.</h1>
<h2>Your Partner in Fulfillment Every Step of the Way</h2>
<p>New Eve has the knowledge and expertise to provide you with the most cost-effective packaging, warehousing, and frieght solutions for your product. We understand that your product is unique, with its own market identity, packaging needs, and delivery
requirements. This is why we offer solutions that will bring your product to market quickly and more profitably.
</p>
<img src="images/high view.jpg" alt="Building">
</div>
<div id="footer">
<p> New Eve Inc. <br> 100 Enterprise Drive Carbondale PA, 18407</p>
</div>
</div>
</body>
</html>
Just change overflow: hidden to overflow: visible in #header
#charset "utf-8";
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
http://www.alistapart.com/articles/fluid-images/
*/
img, object, embed, video {
max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}
/*
Dreamweaver Fluid Grid Properties
----------------------------------
dw-num-cols-mobile: 4;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 12;
dw-gutter-percentage: 25;
Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
*/
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
.fluidList {
list-style:none;
list-style-image:none;
margin:0;
padding:0;
}
.clearfix:after
{
display: block;
clear: both;
}
.menu
{
width: 300px;
margin: auto;
padding: 0px;
padding-top: 10px;
position: absolute;
margin-left: 0px;
top: 0;
}
.menu li
{
margin: 0px;
list-style: none;
font-size: 0px;
}
.menu a
{
transition: all linear 0.15s;
font-size: 28px;
color: black;
text-decoration: none;
}
.menu li:hover > a, .menu .current-item > a
{
text-decoration: none;
}
.menu .arrow
{
font-size: 20px;
line-height: 0%;
}
.menu > ul > li
{
float :left;
display: inline-block;
position: relative;
font-size: 19px;
}
.menu > ul > li > a
{
padding: 10px 40px;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0,0,0,0.4);
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a
{
color: blue;
}
.sub-menu
{
width: 350px;
padding: 5px 0px;
position: relative;
z-index: 999;
opacity: 0;
box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
}
.menu li:hover .sub-menu
{
opacity: 1;
}
.sub-menu li a
{
padding: 10px 50px;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
color: black;
background-color: red;
}
.sub-menu li a:hover, .sub-menu .current-item a
{
color: blue;
}
.sub-menu ul li :hover ul
{
}
.gridContainer
{
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}
.zeroMargin_desktop
{
margin-left: 0;
}
.hide_desktop
{
display: none;
}
#body
{
margin-left: auto;
margin-right: auto;
width: auto;
color: black;
}
#container
{
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-bottom-style: solid;
border-top-color: #00008B;
border-bottom-color: #00008B;
border-right-color: #00008B;
border-left-color: #00008B;
width: 968px;
background: #FFF;
margin: auto;
margin-top: 0px;
margin-bottom: 0px;
position: relative;
padding: 0px;
overflow: hidden;
}
#header
{
background-color: #EBC79E;
width: auto;
position: relative;
height: 100px;
margin: auto;
margin-top: 0px;
overflow: visible;
}
#logo
{
width: 350px;
margin:auto;
height: auto;
padding: 0px;
padding-top: 20px;
padding-bottom: 10px;
text-align: center;
}
#logo h1
{
font-size: 55px;
}
#logo h1 a
{
list-style-type: none;
color: #000000;
text-decoration: none;
}
#footer
{
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
width: auto;
margin: auto;
background-color: #EBC79E;
position:relative;
border-top-style: solid;
border-top-color: #000;
overflow: hidden;
}
#footer p
{
padding-left: 35px;
}
#homeBody
{
border-top-style: solid;
border-top-color: #000;
width: auto;
margin: auto;
margin-bottom: -20px;
background-color: #FFF;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
background-color: #CDCDB4;
position: relative;
}
#homeBody h1
{
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 35px;
}
#homeBody h2
{
text-align: center;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
}
#homeBody p
{
padding-top: 20px;
margin-right: 25px;
margin-left: 25px;
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
}
#homeBody img
{
padding-top: 20px;
padding-bottom: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
<body bgcolor="#87CEFA">
<div id="container">
<div id="header">
<div id="logo">
<h1> New Eve Inc.</h1>
</div>
<nav class="menu">
<ul class="clearfix">
<li>
Menu <span class="arrow">▼</span>
<ul class="sub-menu">
<li>Home<br>
About<br>
Bag Sealing<br>
Club Packaging<br>
Displays<br>
Warehousing & Distribution<br>
Contact Us
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="homeBody">
<h1>New Eve Inc.</h1>
<h2>Your Partner in Fulfillment Every Step of the Way</h2>
<p>New Eve has the knowledge and expertise to provide you with the most cost-effective packaging, warehousing, and frieght solutions for your product. We understand that your product is unique, with its own market identity, packaging needs, and delivery
requirements. This is why we offer solutions that will bring your product to market quickly and more profitably.
</p>
<img src="images/high view.jpg" alt="Building">
</div>
<div id="footer">
<p> New Eve Inc. <br> 100 Enterprise Drive Carbondale PA, 18407</p>
</div>
</div>
</body>
</html>
I would like to add a line above and below my nav-bar that would fade out at the ends of it, like shown in the image below:
this is my HTML so far:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My Portfolio - Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="header">
<h1>Alex Trotter</h1>
<ul id="nav">
<li>Home</li>
<img class="circle" title="circle" alt="circle" src="images/circle.png" />
<li>About Me</li>
<img class="circle" title="circle" alt="circle" src="images/circle.png" />
<li>Contact</li>
</ul>
</div>
<div id="content">
<div id="webInfo">
<p>Hi, my name is Alex Trotter and this is my portfolio website</p>
<p>below you will find some of work that I have created.</p>
<p>Above you can navigate to different pages to learn more about me.</p>
</div>
<div id="exampleWork1"></div>
<div id="exampleWork2"></div>
<div id="exampleWork3"></div>
</div>
</body>
And this is my CSS:
body {
display: block;
margin: 0;
padding: 0px;
}
#header {
background-color: #b9fee2;
width: 1920px;
height: 200px;
display: inline-block;
}
h1 {
font-family: Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif;
font-size: 75px;
font-weight: 500;
text-align: center;
margin: 0px;
color: #000000;
text-decoration: none;
}
h1 a {
text-decoration: none;
}
h1 a:visited {
color: #000000;
text-decoration: none;
}
#nav {
display: inline-block;
-webkit-padding-start: 0px;
text-align: center;
margin: auto;
width: 100%;
}
#nav li {
display: inline-block;
vertical-align: top;
}
#nav a {
-webkit-transition: background-color 0.2s linear;
}
#nav a:link {
display: block;
text-align: center;
color: #000000;
text-decoration: none;
font-family: Georgia, Times, 'Times New Roman', serif;
font-size: 30px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 50px;
padding-right: 50px;
}
#nav a:visited {
color: #000000;
}
#nav a:hover {
display: block;
text-align: center;
color: #000000;
background-color: #FFFFFF;
text-decoration: none;
padding-left: 50px;
padding-right: 50px;
font-size: 30px;
}
.circle {
padding-top: 25px;
}
Whenever I try to add a border to the nav-bar it goes across the entire screen, but if I make it so that the nav-bar border is only as big as it needs to be, the nav bar isn't in the center of the screen. What is the best way to solve this problem?
A couple of positioned pseudo-elements with a linear gradient background would be probably the simplest method.
Note: Your menu HTML is invalid, ul can only have li as direct children..not images, you can search SO for other options for menu dividers.
body {
margin: 0;
padding: 0px;
}
#header {
background-color: #b9fee2;
height: 200px;
text-align: center;
}
h1 {
font-family: Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif;
font-size: 75px;
font-weight: 500;
text-align: center;
margin: 0px;
color: #000000;
text-decoration: none;
}
h1 a {
text-decoration: none;
}
h1 a:visited {
color: #000000;
text-decoration: none;
}
#nav {
display: inline-block;
-webkit-padding-start: 0px;
text-align: center;
margin: auto;
position: relative;
}
#nav::before,
#nav:after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75) 50%, rgba(0, 0, 0, 0) 100%);
}
#nav::before {
top: 0;
}
#nav:after {
bottom: 0;
}
#nav li {
display: inline-block;
vertical-align: top;
}
#nav a {
-webkit-transition: background-color 0.2s linear;
}
#nav a:link {
display: block;
text-align: center;
color: #000000;
text-decoration: none;
font-family: Georgia, Times, 'Times New Roman', serif;
font-size: 30px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 50px;
padding-right: 50px;
}
#nav a:visited {
color: #000000;
}
#nav a:hover {
display: block;
text-align: center;
color: #000000;
background-color: #FFFFFF;
text-decoration: none;
padding-left: 50px;
padding-right: 50px;
font-size: 30px;
}
<div id="header">
<h1>Alex Trotter</h1>
<ul id="nav">
<li>Home
</li>
<li>About Me
</li>
<li>Contact
</li>
</ul>
</div>
in the CSS, add a hover:
#nav {
border-top: 2px solid blue;
border-bottom: 2px solid blue;
}
#nav.noHighlight {
background:transparent;
border-color:transparent;
}
then add a jQuery script, and put
setTimeout(function(){
$('#abc').fadeIn();
$('#abc').addClass('noHighlight');
},1000);
I'm trying to let my menu stick to the bottom of my header. I've already tried getting it down, with deleting the float's, adding some, playing with padding/margin (this isn't an option seems to me?
<div id="header">
<div id="logo">
<h1>blah</h1>
<h3>Blah</h3>
</div>
<div id="menu">
<ul>
<li>qsdfqsdfqsdf</li>
<li>qsdfqdsfqsdf!</li>
<li>qdsf</li>
<li>qdsf</li>
</ul>
</div>
</div>
CSS:
/** HEADER */
#header {
height: 125px!important;
background: #000;
position: fixed;
top: 0;
width: 100%;
}
/* Logo */
#logo
{
float: left;
width: 250px;
padding: 20px 0px 0px 50px;
text-transform: uppercase;
}
#logo h3{
color: #fff;
margin-left: 1em;
font-size: 1em;
}
#logo h1
{
padding: 5px 10px 0px 0px;
}
#logo h1 span, #logo h3 span{
color: #000;
}
#logo h1 a
{
text-decoration: none;
font-size: 1.5em;
font-weight: 300;
color: #FFFFFF;
}
#logo p
{
display: block;
margin-top: -10px;
padding: 0px 0px 0px 0px;
letter-spacing: 1px;
font-size: 1.2em;
color: #FFFFFF;
}
#logo p a
{
color: #FFFFFF;
}
/* Menu */
#menu{
float: right;
width: 600px;
margin: 2em 2em 0 0;
}
#menu ul{
float: right;
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
position: relative;
display: inline-table;
}
#menu li
{
float: left;
}
#menu a
{
display: block;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
font-weight: 300;
color: #FFFFFF;
padding: 1em;
text-decoration: none;
}
#menu a:hover{
color: #000;
text-decoration: none;
background: #fff;
}
#menu ul li {
float: left;
}
#menu ul li:hover {
}
Here an example:
http://jsfiddle.net/2wmSt/
Almost there mate, just position the menu absolute to the bottom of the header.
#menu{
position:absolute;
bottom:0;
right:0;
}
jsfiddle example