I got a problem with the div. It must look like this: http://cl.ly/2r0S043m301p410T2e3z but instead it looks like this: http://cl.ly/3h1t0f471W0V1U3j2S0y it is really annoying.
Here is the HTML:
<html xmlns="http://www.w3.org/1999/html">
<head>
<link href="<?php echo base_url('css/style.css');?>" rel="stylesheet" type="text/css" />
<title>Admin :: Home</title>
</head>
<body>
<div id="wrapper">
<div class="admin-form">
<div class="header">
<h1>Admin Home</h1>
</div>
<div class="content dashboard">
<ul>
<li><img src='<?php echo base_url('images/icons/scubadiving.png');?>'/><p>Duiklocaties</p></span></li>
<li><img src='<?php echo base_url('images/icons/users.png');?>'/><p>Gebruikers</p></span></li>
</ul>
</div>
</div>
</div>
</body>
</html>
and here is the CSS for that content box:
.admin-form .content .input {
width: 188px;
height: 100%;
padding: 15px 25px;
margin-left: 100px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 400;
font-size: 14px;
color: #9d9e9e;
text-shadow: 1px 1px 0 rgba(255,255,255,1.0);
background: #fff;
border: 1px solid #fff;
border-radius: 5px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
}
I'm assuming you've floated the li or a. In which case, you should add a clearfix class to the parent container
<div class="content dashboard clearfix">
Here is the clearfix class code:
.clearfix:before,.clearfix:after{
content:'\0020';
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height:0
}
.clearfix:after{clear:both}
.clearfix{zoom:1}
You don't have a tags closed. Is that typo?
<a href='<?php echo base_url('admin/DiveLocations');?>'<span...
should be
<a href='<?php echo base_url('admin/DiveLocations');?>' ><span..
Related
My CSS page makes my entire body section disappear. Everything in the header appears like it should, but literally anything I put in the body will not show up.
If I take out the CSS page, it comes in just fine. But once I put the CSS page back, the body disappears. I tried just p, h*, div, p nested in div. Everything is closed properly; the debugger can't find anything wrong with the code.
html {
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
font-size: 16px;
color: #000000;
}
/* links */
a {
color:#000000;
font-weight: bold;
}
a:visited {
color:#000000;
font-weight: bold;
}
a:hover {
color:#98ff98;
font-weight: bold;
}
a:active {
color:#000000;
font-weight: bold;
}
/* header */
header {
background-color: #98ff98;
font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
border-bottom: 1px solid #98ff98;
width: 100%;
top: 0;
padding: 0;
position: absolute;
}
#name {
float: right;
margin-right: 20px;
}
.name {
text-transform: uppercase;
font-family: "Staatliches", "Arial Black", sans-serif;
}
#nav {
text-align: center;
padding: 0 20px;
/* removed margin: 30px auto; b/c it looked weird */
}
li {
display: inline-block;
border: 1px solid #c8cfc8;
border-radius: 55px;
padding: 10px 10px;
background-color: #c8cfc8;
}
/* body? */
body {
background-color: #c8cfc8;
color: #000000;
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>website</title>
<link href="resources/css/index.css" type="text/css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght#400;700&family=Source+Sans+Pro:wght#400;700&family=Staatliches&display=swap" rel="stylesheet">
</head>
<header>
<div id="nav">
<ul>
<li class="link">Home</li>
<li class="link">Contact</li>
<li class="link">About</li>
</ul>
</div>
<div id="name">
<h1 class="name">Username</h1>
<h4 class="minibio">tag line/one sentence bio</h4>
</div>
</header>
<body>
<p>test</p>
<h1>test</h1>
<div>test</div>
<div>
<p>also test</p>
</div>
</body>
</html>
The postion: absolute in your header is doing this.
It's allowing the body to go behind the header, so the body still there, but is behind the green background color.
Replacing the position: absolute for the desired height can do the job as I saw.
html {
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
font-size: 16px;
color: #000000;
}
/* links */
a {
color:#000000;
font-weight: bold;
}
a:visited {
color:#000000;
font-weight: bold;
}
a:hover {
color:#98ff98;
font-weight: bold;
}
a:active {
color:#000000;
font-weight: bold;
}
/* header */
header {
background-color: #98ff98;
font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
border-bottom: 1px solid #98ff98;
width: 100%;
top: 0;
padding: 0;
height: 200px;
/*position: absolute;*/
}
body {
display: absolute;
}
#name {
float: right;
margin-right: 20px;
}
.name {
text-transform: uppercase;
font-family: "Staatliches", "Arial Black", sans-serif;
}
#nav {
text-align: center;
padding: 0 20px;
/* removed margin: 30px auto; b/c it looked weird */
}
li {
display: inline-block;
border: 1px solid #c8cfc8;
border-radius: 55px;
padding: 10px 10px;
background-color: #c8cfc8;
}
/* body? */
body {
background-color: #c8cfc8;
color: #000000;
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>website</title>
<link href="resources/css/index.css" type="text/css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght#400;700&family=Source+Sans+Pro:wght#400;700&family=Staatliches&display=swap" rel="stylesheet">
</head>
<header>
<div id="nav">
<ul>
<li class="link">Home</li>
<li class="link">Contact</li>
<li class="link">About</li>
</ul>
</div>
<div id="name">
<h1 class="name">Username</h1>
<h4 class="minibio">tag line/one sentence bio</h4>
</div>
</header>
<body>
<p>test</p>
<h1>test</h1>
<div>test</div>
<div>
<p>also test</p>
</div>
</body>
</html>
Simple answer here. The text is behind the header, so we just need to shift the text downwards. We can do this by adding a margin to the top of the text.
All you have to do is add the following margin-top:
body {
background-color: #c8cfc8;
color: #000000;
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
margin-top: 150px;
}
As Isabelle said, your header is now sitting in front of the body. However, another thing to note is that your header element should be inside the body. The body element should contain all the other elements. Create a div element with an id like content to use as the "body" of the page and set some padding to the top of it.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<div id="nav">
<ul>
<li class="link">Home</li>
<li class="link">Contact</li>
<li class="link">About</li>
</ul>
</div>
<div id="name">
<h1 class="name">Username</h1>
<h4 class="minibio">tag line/one sentence bio</h4>
</div>
</header>
<div id="content">
<p>test</p>
<h1>test</h1>
<div>test</div>
</div>
</body>
</html>
And add some padding
#content {
padding-top: 200px;
}
In the middle of creating one of my first webpages for a college course and ran into a really weird problem. I've been commenting out code trying to find where the issue is but I have no idea what's wrong.
I used *{ border: 1px solid red; } to see all the CSS elements, and all I see that's related is a red line that outlines the entire page.
Any help? Here's my CSS.
h1 {
font-family: "Trebuchet MS", Helvetica, sans-serif;
color:white;
text-align:center;
font-size:55px;
}
.gradPic{
display: block;
margin-left: auto;
margin-right: auto;
}
.titleBox {
background-color:black;
top:0;
left:0;
height:150px;
width:1875px;
position:static;
border:5px outset white;
border-style:groove;
}
.bio {
height:600px;
width:400px;
font-size:105%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color:black;
border:5px outset white;
border-style:groove;
margin: 15px 0px 0px 0px;
}
.movies {
height:600px;
width:400px;
font-size:105%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color:black;
border:5px outset white;
border-style:groove;
margin: 15px 0px 0px 0px;
position:relative;
left:492px;
bottom:625px;
}
.books {
height:600px;
width:400px;
font-size:105%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color:black;
border:5px outset white;
border-style:groove;
margin: 15px 0px 0px 0px;
position:relative;
left:984px;
bottom:1250px;
}
.sites {
height:600px;
width:400px;
font-size:105%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color:black;
border:5px outset white;
border-style:groove;
margin: 15px 0px 0px 0px;
position:relative;
left:1476px;
bottom:1875px;
}
body {
background-image: url("gradient.jpg");
color:white
}
And the HTML
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="StylesheetAssign2.css" type="text/css">
<title>Sujal's IT 130 Assignment 2 Page</title>
</head>
<body>
<div class="titleBox"><h1>Sujal Dantluri</h1> <!-- box at the top of the page !-->
</div>
<div class="bio"><h2 style=color:white;text-align:center>Personal Background</h2> <!-- personal info in unordered list !-->
<img src="graduation.jpg" alt="Image couldn't be loaded; try again" height="175" width="225" class="gradPic"> <!-- creates a class for the image so it can be centered !-->
<ul>
<li>18 years old</li><br>
<li>Majoring in Computer Science</li><br>
<li>Interested in Technology, Animals, and Cybersecurity</li><br>
<li>Hobbies include an unhealthy amount of gaming and napping</li><br>
<li>From Illinois</li><br>
<li>Fun Fact: I have a twin sister.</li><br>
</ul>
</div>
<div class="movies"><h2 style=color:white;text-align:center>Favorite Movies</h2>
</div>
<div class="books"><h2 style=color:white;text-align:center>Favorite Books</h2>
</div>
<div class="sites"><h2 style=color:white;text-align:center>Favorite Sites and Quotes</h2></div>
</body>
</html>
h1 {
font-family: "Trebuchet MS", Helvetica, sans-serif;
color:white;
text-align:center;
font-size:55px;
}
.gradPic{
display: block;
margin-left: auto;
margin-right: auto;
}
.titleBox {
background-color:black;
top:0;
left:0;
height:150px;
width:100%;
border:5px outset white;
border-style:groove;
}
.totaldiv{display:flex;width:100%;}
.bio {
display: inline-block;
height:600px;
width:25%;
font-size:15px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color:black;
border:5px outset white;
border-style:groove;
margin: 15px 0px 0px 0px;
}
.bio h2{margin: 0 0 10px;}
.movies {
display: inline-block;
height:600px;
width:25%;
font-size:15px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color:black;
border:5px outset white;
border-style:groove;
margin: 15px 0px 0px 0px;
left:492px;
bottom:625px;
}
.books {
display: inline-block;
height:600px;
width:25%;
font-size:15px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color:black;
border:5px outset white;
border-style:groove;
margin: 15px 0px 0px 0px;
left:984px;
bottom:1250px;
}
.sites {
display: inline-block;
height:600px;
width:25%;
font-size:15px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color:black;
border:5px outset white;
border-style:groove;
margin: 15px 0px 0px 0px;
left:1476px;
bottom:1875px;
}
body {
background-image: url("gradient.jpg");
color:white
}
<div class="titleBox"><h1>Sujal Dantluri</h1> <!-- box at the top of the page !-->
</div>
<div class="totaldiv">
<div class="bio"><h2 style=color:white;text-align:center>Personal Background</h2> <!-- personal info in unordered list !-->
<!--<img src="graduation.jpg" alt="Image couldn't be loaded; try again" height="175" width="225" class="gradPic">--> <!-- creates a class for the image so it can be centered !-->
<ul>
<li>18 years old</li><br>
<li>Majoring in Computer Science</li><br>
<li>Interested in Technology, Animals, and Cybersecurity</li><br>
<li>Hobbies include an unhealthy amount of gaming and napping</li><br>
<li>From Illinois</li><br>
<li>Fun Fact: I have a twin sister.</li><br>
</ul>
</div>
<div class="movies"><h2 style=color:white;text-align:center>Favorite Movies</h2>
</div>
<div class="books"><h2 style=color:white;text-align:center>Favorite Books</h2>
</div>
<div class="sites"><h2 style=color:white;text-align:center>Favorite Sites and Quotes</h2></div>
</div>
Your code is far from being useable for a real website (i.e. not repsponsive), but if you really want to fix such a width to the page, you should move the width setting from the header to the body, use display: inline-block; and vertical-align: top; on all those boxes that should be next to each other, and erase position: relative and all their top, bottom, leftand right` settings. That way also the whitespace at the bottom will be history...
You can create spaces between the boxes by using margin-left on them, but there are better solutions like using a (full-width) container and applying display: flex and justify-content: space-between to it.
h1 {
font-family: "Trebuchet MS", Helvetica, sans-serif;
color: white;
text-align: center;
font-size: 55px;
}
.gradPic {
display: block;
margin-left: auto;
margin-right: auto;
}
.titleBox {
background-color: black;
height: 150px;
position: static;
border: 5px outset white;
border-style: groove;
}
.bio {
height: 600px;
width: 400px;
font-size: 105%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color: black;
border: 5px outset white;
border-style: groove;
margin: 15px 0px 0px 0px;
display: inline-block;
vertical-align: top;
}
.movies {
height: 600px;
width: 400px;
font-size: 105%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color: black;
border: 5px outset white;
border-style: groove;
margin: 15px 0px 0px 0px;
display: inline-block;
vertical-align: top;
}
.books {
height: 600px;
width: 400px;
font-size: 105%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color: black;
border: 5px outset white;
border-style: groove;
margin: 15px 0px 0px 0px;
display: inline-block;
vertical-align: top;
}
.sites {
height: 600px;
width: 400px;
font-size: 105%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color: black;
border: 5px outset white;
border-style: groove;
margin: 15px 0px 0px 0px;
display: inline-block;
vertical-align: top;
}
body {
background-image: url("gradient.jpg");
color: white;
width: 1875px;
}
<div class="titleBox">
<h1>Sujal Dantluri</h1>
<!-- box at the top of the page !-->
</div>
<div class="bio">
<h2 style=color:white;text-align:center>Personal Background</h2>
<!-- personal info in unordered list !-->
<img src="graduation.jpg" alt="Image couldn't be loaded; try again" height="175" width="225" class="gradPic">
<!-- creates a class for the image so it can be centered !-->
<ul>
<li>18 years old</li><br>
<li>Majoring in Computer Science</li><br>
<li>Interested in Technology, Animals, and Cybersecurity</li><br>
<li>Hobbies include an unhealthy amount of gaming and napping</li><br>
<li>From Illinois</li><br>
<li>Fun Fact: I have a twin sister.</li><br>
</ul>
</div>
<div class="movies">
<h2 style=color:white;text-align:center>Favorite Movies</h2>
</div>
<div class="books">
<h2 style=color:white;text-align:center>Favorite Books</h2>
</div>
<div class="sites">
<h2 style=color:white;text-align:center>Favorite Sites and Quotes</h2>
</div>
I am trying to create a master page with vertical menubar and the content should show beside the menubar. Just like a normal web page having vertical menu bar in the left side and contents side by it.
But the content is pushed below the side bar. How can fix this design issue? Please help. Attached is the screen shot.
My master page
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Layout.master.cs" Inherits="FMS.UIWebUsers.Layout" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="../../css/navigationMenu.css" rel="stylesheet" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="menu12">
<ul>
<li>
<div class="bt1">
<span class="ht11">» </span>
<span class="hw12">Navigation Menu</span>
</div>
</li>
<li><a title="Home" href="#">Home</a></li>
<li><a title="Photos" href="#">Photo Gallery</a></li>
<li><a title="Events" href="#">Events Calendar</a></li>
<li><a title="Forum" href="#">Community</a></li>
<li><a title="Articles" href="#">Article Directory</a></li>
<li><a title="Link Directory" href="#">Link Directory</a></li>
<li><a title="Download" href="#">Freeware Download</a></li>
</ul>
</div>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
css for the vertical menu bar
#menu12 {
width: 178px;
padding: 0 0 0 0;
margin-bottom: 1em;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #6898d0;
color: #333;
}
#menu12 ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#menu12 li {
border-bottom: 1px solid #90bade;
margin: 0;
width: auto;
}
#menu12 li a {
display: block;
padding: 3px 0px 3px 0.5em;
border-left: 5px solid #8AA1B6;
border-right: 5px solid #8AA1B6;
background-color: #6898d0;
color: #fff;
text-decoration: none;
width: auto;
}
#menu12 li a:hover {
border-left: 5px solid #800000;
border-right: 5px solid #800000;
background-color: #FF7C3E;
color: #fff;
}
.bt1 {
width : auto;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
text-align : left;
font-weight : bold;
color : #ffffff;
background-color : #8AA1B6;
padding-top : 3px;
padding-bottom : 4px;
padding-left : 4px;
border-left: 5px solid #FF7C3E;
display : block;
}
.ht11 {
font-size : 10px;
font-weight: bold;
color : #000;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
}
.hw12 {
font-size : 11px;
font-weight : bold;
color : #ffffff;
font-family : verdana, arial, helvetica, sans-serif;
text-decoration : none;
}
My webpage code
<%# Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Layout.Master" CodeBehind="WebForm1.aspx.cs" Inherits="FMS.UIWebUsers.WebForm1" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<h2><%: Title %>.</h2>
<h3>Your application description page.</h3>
<p>Use this area to provide additional information.</p>
</asp:Content>
I am having some trouble with a site that I have to make for school. I've been troubling with it for a few days now. The problem is that my CSS styling is not showing up. Everything validates on my HTML page, and everything on the CSS page validates with the exception of my background image and a hlsa error. The image name is "background" and I am getting this error:
18 header Value Error : background-image Parse Error ("Module3/background.jpeg")
29 h1 Value Error : color 0 is not a color value : hlsa(0,0%,0%,0.2)
My stylesheet:
body
.gradient
{background-color:#666666;
background-image: linear-gradient(to bottom, #ffffff, #666666);
font-family: Arial, Helvetica, sans-serif;
Margin:0px
;
}
#container { background-color: white;
width:960px;
padding:20px;
margin-left:auto;
margin-right:auto;
box-shadow:5px 5px 5px #1e1e1e;
border-radius:15px}
header {background-image: ("Module3/background.jpeg");
background-repeat: No-repeat;
height:150px;
border:1px;
border-color: black;
border-radius:15px;
}
h1 {font-family:Impact, sans-serif;
font-size:4em;
padding-left:15px;
color: hlsa(0,0%,0%,0.2);}
h2 { font-family: Impact, Sans-serif;
font-size: 2em;
color: black;}
.photo {float:right;}
footer {border-style: solid;
border-top: thick;
font-size:.8em;
font-style: italic; }
And my HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My name</title>
<LINK href="Module3/assignment3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="w3-container">
<!--My required class information
-->
<h1>My Name</h1>
<h2>Education Goals</h2>
<img src="Module3/Sarah.jpeg" alt="Sarah" height="282" width="200">
<ul>
<li>my goals</li>
<li>Graduate from my school</li>
</ul>
<h2>Hobbies/Interests</h2>
<ul>
<li>Reading</li>
<li>Volunteering</li>
</ul>
<h2>Favorite Web Sites</h2>
<ul>
<li>Wikipedia</li>
<li>The Shakespearean Insulter</li>
</ul>
<footer>
<p> © me</p>
</footer>
</div>
</body>
</html>
To use the background-image selector, you must put the value in a url(). Example:
background-image: url("Module3/background.jpeg");
Make sure the image is being pointed to correctly also.
Keep you code clean and well formatted. Open developer tools and inspect broken properties. If you are not sure that you can write properties without making mistakes, use emmet or similar utilities.
body,
.gradient {
background-color: #666;
background-image: linear-gradient(to bottom, #fff, #666);
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
}
#container {
background-color: white;
width: 960px;
padding: 20px;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 5px 5px #1e1e1e;
border-radius: 15px;
}
header {
background-image: url("Module3/background.jpeg"); /* Be sure that path is exist */
background-repeat: no-repeat;
height: 150px;
border: 1px;
border-color: black;
border-radius: 15px;
}
h1 {
font-family: Impact, sans-serif;
font-size: 4em;
padding-left: 15px;
color: hsla(0, 0%, 0%, 0.2);
}
h2 {
font-family: Impact, Sans-serif;
font-size: 2em;
color: black;
}
.photo {
float:right;
}
footer {
border-style: solid;
border-top: thick;
font-size:.8em;
font-style: italic;
}
<div class="w3-container">
<!--My required class information-->
<h1>My Name</h1>
<h2>Education Goals</h2>
<img src="Module3/Sarah.jpeg" alt="Sarah" height="282" width="200">
<ul>
<li>my goals</li>
<li>Graduate from my school</li>
</ul>
<h2>Hobbies/Interests</h2>
<ul>
<li>Reading</li>
<li>Volunteering</li>
</ul>
<h2>Favorite Web Sites</h2>
<ul>
<li>Wikipedia</li>
<li>The Shakespearean Insulter</li>
</ul>
<footer>
<p> © me</p>
</footer>
</div>
I asked a similar question recently about navigation buttons and having whitespace below and above and it was answered very well. Here is the question Navigation Buttons no whitespace underneathe
Basically now I have whitespace above the button and I need it closed.
Also I would like the text in the buttons to be center both vertically and horizontally.
Js fiddle:
http://jsfiddle.net/ygfX7/4/
Any ideas?
html:
<div class="row">
<div class="large-9 small-12 columns" id="contact-top-pad">
<p>
<span class="contact-top">Phone</span><span class="smaller">- 0757776856</span>
<span class="contact-top">Email</span><span class="smaller">- luke#bodymetrix.com</span>
</div>
<div class="large-3 small-10 columns" id="social-btn">
<img src="img/facebook-btn.png" alt="Facebook">
<img src="img/twitter-btn.png" alt="Twitter">
<img src="img/pin-btn.png" alt="Pintrest">
<img src="img/google-btn.png" alt="Google+">
</div>
<hr>
</div>
<div class="row">
<div class="large-6 small-12 columns">
<div class="logo"><img src="img/logo.png" alt="Body Metrix"></div>
</div>
<div class="large-6 columns" id="nav-btn">
<ul class="navigation">
<li class="active">Home</li><!--
--><li class="not">About</li><!--
--><li class="not">Contact</li><!--
--><li class="not">Services</li>
</ul>
</div>
<hr>
</div><!--
CSS:
hr {
margin:0;
border: 0;
height: 0;
border-top: 1px solid rgba(0,0,0,0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
#social-btn{
display: inline;
padding-left: 50px;
padding-top: 20px;
}
#contact-top-pad {
padding-top: 25px;
}
.contact-top {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: bold;
display: inline;
}
.smaller {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: lighter;
}
.logo img {
max-width: 35%;
min-height: auto;
padding-bottom: 10px;
}
.navigation { margin:0; }
Thanks
Remove the border-bottom from hr to get rid of that small space above the options:
hr {
margin:0;
border: 0;
height: 0;
border-top: 1px solid rgba(0,0,0,0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
And also add a line-height: 100px; to .navigation li a which will center the text vertically:
.navigation li a {
text-align: center;
padding: 30px 10px 10px 30px;
line-height:100px;
}
Here is the Fiddle: http://jsfiddle.net/ygfX7/5/
Add same line-height value as same value of the li height
.navigation li a {
text-align: center;
padding: 30px 10px 10px 30px;
line-height:100px;
}
result: http://jsfiddle.net/ygfX7/1/