I have successfully stored a PDF object on the resume section of this website I am working on. However, I am trying to align the top of the Object (which in this case is the PDF viewer) with the bottom of the header (which is represented by a gray line in the upcoming screenshot). I keep getting whitespace in between the top of the Object and the bottom of the header, as evidenced in this screenshot.
Here is the HTML of the body section in question:
<body>
<header>
<a href="index.html" id="logo"> <h1>
<div id="header_title">
Title
</div></h1> </a>
<div id="header_border"></div>
<nav id="nav">
<ul>
<li>
<a href="index.html" class="selected" >About</a>
</li>
<li>
Resume
</li>
<li class="subNav">
<a>Portfolio</a>
<ul>
<li>
Writing Samples
</li>
<li>
Photoshop
</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</nav>
</header>
<object id="resume" data="img/Resume.pdf" type="application/pdf" style="float: left" width="100%" height="100%">
<p>
It appears you don't have a PDF plugin for this browser.
No biggie... you can <a href="myfile.pdf">click here to
download the PDF file.</a>
</p>
</object>
</body>
And CSS:
html {
height: 100%;
}
body {
font-family: 'Playfair Display', open sans;
height: 100%;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
img {
max-width: 100%; /* images fill width of parent container
image will shrink with size of container */
}
h3 {
margin: 0 0 1em 0;
}
/************************
HEADING
*************************/
header {
position: relative;
float: left;
margin: 0 0 30px 0; /* top, right, bottom, left */
padding: 5px 0 0 0; /* ibid */
width: 100%; /* since floated, this element does not have an
explicit width; therefore, it must be assigned to 100%
of page*/
}
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Playfair Display', open sans;
/* font-size: 100px; font-size is overruled in responsive.css
for computer screens set in min-width 660*/
margin: 85px 0;
font-weight: normal;
/* font-weight: normal; will unbold the headline, as headlines
are set to bold by default. */
line-height: 0.8em;
}
#header_title {
position: absolute;
bottom: 0;
left: 50px;
padding: 10px 0;
}
#header_border {
width: calc(95% - 70px);
position: absolute;
bottom: 0;
margin-left: 50px;
border-bottom: 2px solid #dddede;
}
/************************
NAVIGATION
*************************/
nav {
position: absolute;
bottom: 0;
right: 0;
padding: 10px 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav > ul > li { /* only impacts the first list items; keeps About, Portfolio, Contacts in horizontal line*/
display: inline-block;
position: relative;
}
nav > ul> li> a {
font-weight: 800;
padding: 15px 10px;
}
nav > ul > li.subNav ul > li> a {
}
nav > ul > li.subNav ul { /* now free to style/block secondary list*/
display: none;
position: absolute;
top: 100%;
left: 0;
white-space: nowrap;
background: pink;
}
nav ul li.subNav:hover ul {
display: block;
text-align: left;
}
/***********************
* BODY
*/
#resume {
height: 100%;
width: 100%;
}
Your header styles have a margin of 30px on the bottom. Remove this and the object will line up with the bottom of your header.
margin: 0 0 30px 0; /* top, right, bottom, left */
should be
margin: 0;
Related
I've been trying to make a vertical navigation for tablet and mobile.
I gave second level ul that position static, but It's still floating around like given position absolute.
the .depth2 should fit in between depth1>lis but it still floating around. the seethrough white boxes are the .depth2. how can I fix it?
<div class="header_con">
<span></span>
<p><img src="images/logo.png" alt="logo"></p>
<nav>
<ul class="depth1">
<li>코로나-19
<ul class="depth2">
<li>손세정제</li>
<li>소독제</li>
</ul>
</li>
<li>컬렉션
<ul class="depth2">
<li><small>new</small>클레멘타인 앤 바질</li>
<li><small>new</small>베티버 앤 바이올렛</li>
<li>아로마테라피 시너지</li>
<li>허벌리스트</li>
<li>풋 리바이버</li>
<li>인블룸</li>
<li>크리스탈크러쉬</li>
<li>배스타임</li>
<li>선물세트/ 기프트세트</li>
</ul>
</li>
<li>오일
<ul class="depth2">
<li>페이셜오일</li>
<li>멀티오일</li>
</ul>
</li>
.
.
.
</ul>
</nav>
</div>
</header>
navigation CSS for pc
header nav { width: 750px; position: absolute; left: 50%; margin-left: -360px;}
header ul.depth1>li{float: left; width: 70px; margin: 0 0.2%; font-size: 0.9em;
font-weight: bold; text-align: center;}
header ul.depth2{display: none; position: absolute; z-index: 100; width: 200px; margin-top: 20px;
background: #fff; text-align: left; padding: 20px; font-weight: normal; font-size: 0.8em;}
header ul.depth2>li {margin-bottom: 12px;}
navigation CSS for tablet
header div.header_con nav {/* display: none;*/ position: fixed; top: 0; right: 0; bottom: 0;
left: 0; width: 100%; height: 100%; background: #0b223b; z-index: 110; margin-left: 0;}
header div.header_con nav a{ color: white;}
header div.header_con nav .depth1{display: block; color: white; height: 100%;}
header div.header_con nav .depth1 li {float: none ;width: 100%; height: 50px; line-height: 50px;
border-bottom: 1px solid #999; }
header div.header_con nav .depth2 {display: block; position: static; width: 100%; height: auto;
margin-top: 0; padding: 0; background: rgba(255,255,255,0.4); }
header div.header_con nav .depth2 li {padding: 0 0 0 20px;}
Change position:static to position:relative on your tablet css for header div.header_con nav .depth2.
Static and absolute both pull content out of the document flow so use with care.
Also remove height:50px from header div.header_con nav .depth1 li as the 1st level li total height should also allow for the total height of nested ul
I have a photo of the most recent post on my page and would like to put a small portion of text onto the top left corner of the picture. I have tried code to do so from other online resources, but none of them have worked. Can someone please check why my code isn’t working or provide an alternate method of putting text on an image?
Here is my HTML + CSS:
* {
margin: 0;
padding: 0;
}
body {
}
nav {
width: 100%;
height: 90px;
background-color: black;
display: flex;
}
nav h1 {
text-align: center;
font-family: arial;
color: white;
font-size: 44px;
line-height: 55px;
float: left;
padding: 15px 20px;
flex: 1 0 auto;
}
nav ul {
position: absolute;
right: 0;
}
nav ul li {
float: left;
list-style: none;
position: relative; /* we can add absolute position in subcategories */
padding-right: 1em;
}
nav ul li a {
display: block;
font-family: arial;
color: white;
font-size: 20px;
padding: 34px 14px;
text-decoration: none;
}
nav ul li ul {
display: none;
position: absolute;
background-color: black;
padding: 5px; /* Spacing so that hover color does not take up entire chunk */
border-radius: 0px 0px 4px 4px;
transform: translateX(1rem);
}
nav ul li:hover ul {
/* This means when li is hovered, we want the unordered list inside list item to do something. */
display: block;
}
nav ul li ul li{
width: 130px; /* increases width so that all text can be fit */
border-radius: 4px;
}
nav ul li ul li a:hover {
background-color: #ADD8E6;
a
}
.newest-review-cover img {
height: 50%;
width: 100%;
position: relative;
display: inline-block;
}
.newest-review-cover .newest-review-title {
position: absolute;
z-index: 999;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
top: 120%; /* Adjust this value to move the positioned div up and down */
background: rgba(0, 0, 0, 0.8);
font-family: Arial,sans-serif;
color: #fff;
width: 60%; /* Set the width of the positioned div */
}
<!DOCTYPE html>
<html>
<head>
<link href="header+footer.css" rel = "stylesheet" type="text/css" />
<link href="Homepage.css" rel = "stylesheet" type="text/css" />
<meta charset="utf-8">
<title> The Novel Column - Book Reviews </title>
</head>
<body>
<nav>
<h1> The Novel Column </h1>
<ul>
<li> Resources
<ul>
<li> Book Reviews </li>
<li> Quotes and Principles </li>
<li> Community Aid </li>
</ul>
</li>
<li> About Us </li>
</ul>
</nav>
<section class="newest-review-cover">
<img src="https://thenovelcolumn.com/wp-content/uploads/2019/06/the-5am-club-poster.jpg" alt="The 5AM Club">
<div class="newest-review-title">
<p> The 5AM Club </p>
</div>
</section>
</body>
</html>
Thanks in advance for your help!
For starters, you are targeting your newest-review-title class wrong in your CSS, by using a period between review and title. Change that. Also, try making your container the relative element instead of your image, like so:
.newest-review-cover {
position: relative;
}
.newest-review-cover img {
display: block;
width:100%;
}
.newest-review-title {
position: absolute;
display:block;
z-index: 999;
margin:0 auto;
text-align: center;
top: 50%;
width: 60%;
left:20%
}
This method provides an alternative solution using the CSS background image property. Then you can place your text in the div using the CSS you already had in place. You can adjust the height by adjusting the height of the div. The size of the image can be adjusted using the CSS background-size property.
* {
margin: 0;
padding: 0;
}
body {}
nav {
width: 100%;
height: 90px;
background-color: black;
display: flex;
}
nav h1 {
text-align: center;
font-family: arial;
color: white;
font-size: 44px;
line-height: 55px;
float: left;
padding: 15px 20px;
flex: 1 0 auto;
}
nav ul {
position: absolute;
right: 0;
}
nav ul li {
float: left;
list-style: none;
position: relative;
/* we can add absolute position in subcategories */
padding-right: 1em;
}
nav ul li a {
display: block;
font-family: arial;
color: white;
font-size: 20px;
padding: 34px 14px;
text-decoration: none;
}
nav ul li ul {
display: none;
position: absolute;
background-color: black;
padding: 5px;
/* Spacing so that hover color does not take up entire chunk */
border-radius: 0px 0px 4px 4px;
transform: translateX(1rem);
}
nav ul li:hover ul {
/* This means when li is hovered, we want the unordered list inside list item to do something. */
display: block;
}
nav ul li ul li {
width: 130px;
/* increases width so that all text can be fit */
border-radius: 4px;
}
nav ul li ul li a:hover {
background-color: #ADD8E6;
a
}
.newest-review-cover {
position: relative;
height: 383px;
width: 100%;
}
.newest-review-cover_bg {
background-image: url('https://thenovelcolumn.com/wp-content/uploads/2019/06/the-5am-club-poster.jpg');
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
}
.newest-review-cover .newest-review.title {
position: absolute;
z-index: 999;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
top: 120%;
/* Adjust this value to move the positioned div up and down */
background: rgba(0, 0, 0, 0.8);
font-family: Arial, sans-serif;
color: #fff;
width: 60%;
/* Set the width of the positioned div */
}
<!DOCTYPE html>
<html>
<head>
<link href="header+footer.css" rel="stylesheet" type="text/css" />
<link href="Homepage.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<title> The Novel Column - Book Reviews </title>
</head>
<body>
<nav>
<h1> The Novel Column </h1>
<ul>
<li> Resources
<ul>
<li> Book Reviews </li>
<li> Quotes and Principles </li>
<li> Community Aid </li>
</ul>
</li>
<li> About Us </li>
</ul>
</nav>
<section class="newest-review-cover">
<div class="newest-review-cover_bg">
<p class="newest-review-cover_title">
The 5AM Club
</p>
</div>
</section>
</body>
</html>
I've already added body margin and padding to 0. However, there is still white space above my navigation bar and beneath the image above it that I can't figure out how to remove.
*,
html,
body {
padding: 0;
margin: 0;
}
* {
font-family: Arial, sans-serif;
}
.nav {
width: 750px;
margin: 0 auto;
list-style: none;
}
.nav ul {
font-size: 0;
}
.nav li {
display: inline-block;
border-right: 1px solid black;
padding: 10px 30px 10px 30px;
font-size: 22px;
font-weight: 700;
}
.nav li:first-child {
border-left: 1px solid black;
}
.nav li:hover {
background-color: #00FFFF;
}
a {
text-decoration: none;
}
<img src="image.jpg" alt="image cannot be displayed" style="width: 100%; height:150px;" />
<div class="nav">
<ul>
<li>Home</li>
<li>Second Page</li>
<li>Third Page</li>
<li>Fourth Page</li>
</ul>
</div>
Either set display: block; on your image or wrap it in a div. The whitespace is essentially a single space showing up because of the img tag styles which default to display: inline.
img {
display: block; /*add this or set container's font-size to 0 */
}
body {
padding: 0;
margin: 0;
font-size: 0; /*add this, otherwise change the img to block*/
}
Sorry for repeating this question similar to SO here: Can I create a div with a Curved bottom?
But method there does not fulfill my customization need of header.
But what i want to achieve is not quite similar to what i've achieve with the border border-bottom-left-radius and border-bottom-right-radius.
As you can see the images that header i want to achieve is linearly curved throughout the bottom but with what i've achieved is that i'm having more curvy border at the left and right portion of header and curved is not linear throughout the bottom. It becomes straight after short distance. I've tried to increase the %age but it becomes even more curved at edges.
Is there any other way of doing this so that i get linearly curved throughout the bottom?
Here is my code:
CSS Code:
header{
background-color: #000;
border-bottom-left-radius:25%;
border-bottom-right-radius:25%;
padding: 10px;
opacity: 0.35;
position: fixed;
width: 100%;
z-index: 1000;
}
Here is the link JSfiddle link: https://jsfiddle.net/ozqneuha/
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
/* --Global CSS-- */
.header-container {
margin: 0 auto;
width: 1170px;
}
ul {
padding: 0;
margin: 0;
}
/* Header CSS*/
header {
background-color: #000;
border-bottom-left-radius: 25%;
border-bottom-right-radius: 25%;
padding: 10px;
opacity: 0.35;
position: fixed;
width: 100%;
z-index: 1000;
}
header nav ul {
list-style-type: none;
}
header .logo {
display: inline-block;
}
header .header-nav {
display: inline-block;
float: right;
padding: 7px;
}
header li {
float: left;
margin-left: 20px;
}
header li a {
color: #fff;
font: 600 16px'Open Sans';
text-transform: uppercase;
text-decoration: none;
}
header li a:hover,
header li a:active {
color: #e51937;
text-decoration: none;
}
<header>
<div class="header-container">
<div class="logo">
<a href="#">
<img src="http://i.imgur.com/2JbjOqY.png" alt="logo">
</a>
</div>
<div class="header-nav">
<nav>
<ul>
<li>Search
</li>
<li>Map
</li>
<li>Properties
</li>
<li>Parking
</li>
<li>Residents
</li>
<li>Pay Online
</li>
</ul>
</nav>
</div>
<!-- /.header-nav -->
</div>
<!-- /.header-container -->
</header>
You could give clip-path a try, but make sure to check browser support.
Can I use CSS clip-path property
You basically just use an ellipse to clip your header div.
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
body {
margin: 0;
}
/* --Global CSS-- */
.header-container{
margin: 0 auto;
width: 1170px;
text-align: right;
}
ul{
padding: 0;
margin:0;
}
/* Header CSS*/
header{
background-color: #000;
/*
border-bottom-left-radius:25%;
border-bottom-right-radius:25%;
*/
padding: 10px;
opacity: 0.35;
position: fixed;
width: 100%;
z-index: 1000;
min-height: 50px;
-webkit-clip-path: ellipse(60% 100% at 50% 0%);
clip-path: ellipse(60% 100% at 50% 0%);
}
header nav ul{
list-style-type: none;
}
header .logo {
display: inline-block;
float: left;
}
header .header-nav{
display: inline-block;
/*float: right;*/
padding: 7px;
}
header li{
float: left;
margin-left: 20px;
}
header li a{
color: #fff;
font: 600 16px 'Open Sans';
text-transform: uppercase;
text-decoration: none;
}
header li a:hover,
header li a:active{
color: #e51937;
text-decoration: none;
}
#media screen and (max-width: 1169px) {
.header-container {
width: 840px;
}
header .header-nav{
display: inline-block;
}
}
#media screen and (max-width: 996px) {
.header-container {
width: 100%;
}
header .logo {
float: none;
display: block;
text-align: center;
}
header .header-nav{
display: none;
}
}
<header>
<div class="header-container">
<div class="logo">
<a href="#">
<img src="http://i.imgur.com/2JbjOqY.png" alt="logo" />
</a>
</div>
<div class="header-nav">
<nav>
<ul>
<li>Search</li>
<li>Map</li>
<li>Properties</li>
<li>Parking</li>
<li>Residents</li>
<li>Pay Online</li>
</ul>
</nav>
</div><!-- /.header-nav -->
</div><!-- /.header-container -->
</header>
Can you try this way?
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
/* --Global CSS-- */
.header-container {
margin: 0 auto;
width: 1170px;
}
ul {
padding: 0;
margin: 0;
}
/* Header CSS*/
header {
background-color: #000;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
padding: 10px 10px 35px;
opacity: 0.35;
position: fixed;
width: 100%;
z-index: 1000;
}
header nav ul {
list-style-type: none;
}
header .logo {
display: inline-block;
}
header .header-nav {
display: inline-block;
float: right;
padding: 7px;
}
header li {
float: left;
margin-left: 20px;
}
header li a {
color: #fff;
font: 600 16px'Open Sans';
text-transform: uppercase;
text-decoration: none;
}
header li a:hover,
header li a:active {
color: #e51937;
text-decoration: none;
}
<header>
<div class="header-container">
<div class="logo">
<a href="#">
<img src="http://i.imgur.com/2JbjOqY.png" alt="logo">
</a>
</div>
<div class="header-nav">
<nav>
<ul>
<li>Search
</li>
<li>Map
</li>
<li>Properties
</li>
<li>Parking
</li>
<li>Residents
</li>
<li>Pay Online
</li>
</ul>
</nav>
</div>
<!-- /.header-nav -->
</div>
<!-- /.header-container -->
</header>
This is how I did it:
.overlay {
position: absolute;
z-index: -1;
height: 100%;
border-radius: 50%;
width: 150%;
left: -25%;
top: -60%;
background: rgba(121, 121, 121, 0.8);
pointer-events:none;
}
Here is the JSFiddle demo
Adjust the width, left and top percentage to your liking :)
I've finally figured out out the solution of this problem. I've used pesudo class :before for the solution.
/* --Global CSS-- */
.header-container {
display: table;
margin: 0 auto;
width: 1170px;
height: 100%;
}
ul {
padding: 0;
margin: 0;
}
/* Header CSS*/
header {
padding: 10px;
position: fixed;
width: 100%;
z-index: 1000;
}
header:before {
background-color: rgba(0, 0, 0, 0.35);
width: 150%;
content: '';
height: 150px;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
top: -76px;
position: absolute;
z-index: -1;
margin-left: -25%;
}
header ul {
list-style-type: none;
}
header .logo {
display: table-cell;
vertical-align: middle;
}
header .header-nav {
display: table-cell;
float: right;
padding: 7px;
vertical-align: middle;
}
header li {
display: inline-block;
}
header li a {
color: #fff;
font: 600 16px'Open Sans';
padding: 0 15px 0 15px;
text-transform: uppercase;
text-decoration: none;
transition: all 0.3s;
}
header li a:hover,
header li a:active {
color: #e51937;
text-decoration: none;
}
<header>
<div class="header-container">
<div class="logo">
<a href="#">
<img src="http://i.imgur.com/2JbjOqY.png" alt="logo">
</a>
</div>
<div class="header-nav">
<nav>
<ul>
<li>Search
</li>
<li>Map
</li>
<li>Properties
</li>
<li>Parking
</li>
<li>Residents
</li>
<li>Pay Online
</li>
</ul>
</nav>
</div>
<!-- /.header-nav -->
</div>
<!-- /.header-container -->
</header>
I'm designing a horizontal menu where I use a simple one-colored image of the full menu bar, and a second image for the hover state, which is a bit darker. Actually I made just one image containing both, but that's not the point.
My problems are :
Hover image displays over the correct full width of each list item,
but it's only a link (showing hand) when hovering the text.
My attempt of double-class attributes to adjust position of hover image on first/last list item does not work. It seems this code is never reached..? Hence as image shows, I do not get adjusted the x-position of hover image.
Please note I started with CSS a few days ago, so there are likely some basic concepts I've not yet understood..
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<meta name="author" content="SS" />
<!-- Date: 2011-11-26 -->
<link href="site2.css" rel="stylesheet"type="text/css" />
</head>
<body>
<div class="header-wrap">
header
</div>
<div class="main-wrap">
<div class="main-content">
<div class="inner-header">
inner header
</div>
<div class="navbox">
<div class="navmenu">
<ul class="ul_nav">
<li class="nav-item nav-item-first">
Home
</li>
<li class="nav-item">
Page1
</li>
<li class="nav-item">
Page2
</li>
<li class="nav-item nav-item-last">
Page3
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="lower-content">
lower-content
</div>
<div class="footer">
footer
</div>
</body>
</html>
CSS:
/* Basics */
body {
background: #888 url() center 30px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
margin: 0 auto;
}
/* Main divs */
.header-wrap {
background: #ddd;
height: 35px;
color: #00f;
}
.main-wrap {
background: #000 url(07h600a.png) no-repeat center 0;
margin: 0 auto;
}
.main-content {
overflow: hidden;
position: relative;
z-index: 10;
background: transparent; /* to be transparent*/
height: 600px;
margin: 0 auto;
width: 980px;
}
.lower-content {
background: #000;
color: #888;
height: 100px;
}
.footer {
background: #777;
height: 100px;
margin: 0 auto;
}
/* Content */
/* Menu */
.navbox {
background: #660;
position: relative;
padding: 0px 0 0 0;
margin: 0 auto 0px;
font-weight: bold;
font-size: 12px;
line-height: 40px;
height: 50px;
width: 980px;
margin: 0 auto;
}
.navmenu {
margin: 0 auto 0px;
padding: 0 0 0 0;
width: 980px;
}
.ul_nav {
margin: 0;
padding: 0;
list-style: none outside none;
text-transform: uppercase;
}
.navmenu .ul_nav {
width: 980px;
position: relative;
display: table;
}
.ul_nav li {
display: table-cell;
}
.ul_nav a, .ul_nav a:visited {
padding: 0 0;
text-decoration: none;
color: #fff;
}
.navmenu .nav-item {
background: transparent url(MenuGray.png) no-repeat scroll;
background-position: 50% -10px;
}
.navmenu .nav-item-first {
background-position: 0px -10px;
}
.navmenu .nav-item-last {
background-position: 100% -10px;
}
/* Menu hover */
.ul_nav .nav-item-first li:hover {
background: transparent url(MenuGray.png) no-repeat scroll;
background-position: 0px -50px;
}
.ul_nav .nav-item-last li:hover {
background-position: 100% -50px;
}
.ul_nav li:hover {
background-position: 50% -60px;
}
/* Menu font */
.ul_nav_color a, .ul_nav_color a:visited {
color: #FFF;
}
For
You need to make sure the a tag fills the li parent by setting it to display block or inline-block and adjust padding, margin, etc., to have its edge match up to the li edge. This will get you a link over the whole space, not just the text.
You have the li listed after the class for the li, so you need this:
.ul_nav .nav-item-first:hover
Not
.ul_nav .nav-item-first li:hover
I'd suggest you go through http://css.maxdesign.com.au/listutorial/index.htm for some good examples of doing horizontal lists. Probably avoid setting your list to table.
Here is a simple horizontal list that sets the width/height of the anchor which you could change to an image if needed.
css
.newnav ul {margin:0; padding:0; list-style-type: none;}
.newnav ul li { display:inline-block;margin:0; padding:0; }
.newnav ul li a { text-decoration: none; background-color: #aaa; display:inline-block; width: 150px; height: 50px; line-height: 50px; }
.newnav ul li a:hover{background-color: #ddd;}
html
<div class="newnav">
<ul>
<li class="nav-item nav-item-first">Home</li>
<li class="nav-item">Page1</li>
<li class="nav-item">Page2</li>
<li class="nav-item nav-item-last">Page3</li>
</ul>
</div>