I'm trying to build a new Homepage... but i got Problems with the Padding of the Navigationbar. Here is my Navigationbar:
CodePen
body {
background: black;
font-family: Oswald;
font-size: 20px;
font-weight: normal;
line-height: 1;
margin: 0;
min-width: 960px;
padding: 0;
}
a {
text-decoration: none;
outline: none;
}
a:active {
background: none;
}
img {
border: none;
}
/*-------------------------------------------Header-------------------------------------------*/
p {
color: #252525;
line-height: 20px;
margin: 0;
padding: 0;
}
p a {
color: #252525;
text-decoration: underline;
}
.border-right {
border-right: 5px solid #A40900;
}
.border-left {
border-left: 5px solid #A40900;
}
#header {
margin: 0 auto;
padding: 4px 0 0px;
text-align: center;
width: 960px;
}
#header a.logo {
display: block;
margin: 0 auto;
padding: 0;
width: 540px;
}
#header a.logo img {
border: 0;
display: block;
margin: 0;
padding: 0;
width: 100%;
}
#header ul {
margin: 0;
padding: 0;
background-color: white;
height: 35px;
padding-top: 2%;
border-top: 5px solid #A40900;
border-bottom: 5px solid #A40900;
}
#header ul li {
display: inline-block;
list-style: none;
margin: 0px;
padding: 0;
text-align: center;
}
#header ul li a {
color: #000;
font-family: Oswald ExtraLight;
font-size: 20px;
font-weight: normal;
margin: 0;
padding: 0;
text-decoration: none;
text-transform: uppercase;
}
#header ul li a:hover, #header ul li.selected a {
color: #0ba39c;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Willkommen beim Phönix-Brandschutz</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" type="text/css" href="css/mobile.css">
<script src="js/mobile.js" type="text/javascript"></script>
</head>
<body>
<div id="header">
<img src="images/logo.png" alt="">
<ul id="navigation">
<span id="mobile-navigation"> </span>
<li class="selected border-right">
Startseite
</li>
<li class="border-right">
Über uns
</li>
<li class="border-right">
Anfahrt
</li>
<li class="border-right">
Leistungen
</li>
<li class="border-right">
Kontaktanfrage
</li>
<li>
Allgemeine Informationen
</li >
<li class="border-left">
Impressum
</li>
</ul>
</div>
</body>
</html>
But it should look like :
Could you help me with my padding issue ?
Find the following block in your CSS:
#header ul li {
display: inline-block;
list-style: none;
margin: 0px;
padding: 0;
text-align: center;
}
And change the padding: 0; to padding: 0 5px;
Adjust the 5px to whatever value you want, bigger or smaller. Bigger values will mean bigger gaps, and smaller values smaller gaps.
So you end up with:
#header ul li {
display: inline-block;
list-style: none;
margin: 0px;
padding: 0 5px;
text-align: center;
}
And it will look like your screenshot
Below is the code from your codepen, with the CSS edit. Next time remember to include the code in you question
body {
background: black;
font-family: Oswald;
font-size: 20px;
font-weight: normal;
line-height: 1;
margin: 0;
min-width: 960px;
padding: 0;
}
a {
text-decoration: none;
outline: none;
}
a:active {
background: none;
}
img {
border: none;
}
/*-------------------------------------------Header-------------------------------------------*/
p {
color: #252525;
line-height: 20px;
margin: 0;
padding: 0;
}
p a {
color: #252525;
text-decoration: underline;
}
.border-right {
border-right: 5px solid #A40900;
}
.border-left {
border-left: 5px solid #A40900;
}
#header {
margin: 0 auto;
padding: 4px 0 0px;
text-align: center;
width: 960px;
}
#header a.logo {
display: block;
margin: 0 auto;
padding: 0;
width: 540px;
}
#header a.logo img {
border: 0;
display: block;
margin: 0;
padding: 0;
width: 100%;
}
#header ul {
margin: 0;
padding: 0;
background-color: white;
height: 35px;
padding-top: 2%;
border-top: 5px solid #A40900;
border-bottom: 5px solid #A40900;
}
#header ul li {
display: inline-block;
list-style: none;
margin: 0px;
padding: 0 5px;
text-align: center;
}
#header ul li a {
color: #000;
font-family: Oswald ExtraLight;
font-size: 20px;
font-weight: normal;
margin: 0;
padding: 0;
text-decoration: none;
text-transform: uppercase;
}
#header ul li a:hover,
#header ul li.selected a {
color: #0ba39c;
}
<div id="header">
<a href="index.html" class="logo">
<img src="images/logo.png" alt="">
</a>
<ul id="navigation">
<span id="mobile-navigation"> </span>
<li class="selected border-right">
Startseite
</li>
<li class="border-right">
Über uns
</li>
<li class="border-right">
Anfahrt
</li>
<li class="border-right">
Leistungen
</li>
<li class="border-right">
Kontaktanfrage
</li>
<li>
Allgemeine Informationen
</li>
<li class="border-left">
Impressum
</li>
</ul>
</div>
body {
background: black;
font-family: Oswald;
font-size: 20px;
font-weight: normal;
line-height: 1;
margin: 0;
min-width: 960px;
padding: 0;
}
ul{
margin:0;
padding:0;
}
a {
text-decoration: none;
outline: none;
}
a:active {
background: none;
}
img {
border: none;
}
/*-------------------------------------------Header-------------------------------------------*/
p {
color: #252525;
line-height: 20px;
margin: 0;
padding: 0;
}
p a {
color: #252525;
text-decoration: underline;
}
.border-right {
border-right: 5px solid #A40900;
}
.border-left {
border-left: 5px solid #A40900;
}
#header {
margin: 0 auto;
padding: 4px 0 0px;
text-align: center;
}
#header a.logo {
display: block;
margin: 0 auto;
padding: 0;
width: 540px;
}
#header a.logo img {
border: 0;
display: block;
margin: 0;
padding: 0;
width: 100%;
}
#header ul {
margin: 0;
padding: 0;
background-color: white;
border-top: 5px solid #A40900;
border-bottom: 5px solid #A40900;
padding: 10px 0;
}
#header ul li {
display: inline-block;
list-style: none;
margin: 0px;
padding: 0 15px;
float: left;
text-align: center;
}
#header ul li a {
color: #000;
font-family: Oswald ExtraLight;
font-size: 20px;
font-weight: normal;
margin: 0;
padding: 0;
text-decoration: none;
text-transform: uppercase;
}
#header ul li a:hover, #header ul li.selected a {
color: #0ba39c;
}
<!DOCTYPE HTML>
<html>
<head>
<title>XOXO</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="so/sample.css" />
</head>
<body>
<div id="header">
<img src="images/logo.png" alt="">
<ul id="navigation">
<span id="mobile-navigation"> </span>
<li class="selected border-right">
Startseite
</li>
<li class="border-right">
Über uns
</li>
<li class="border-right">
Anfahrt
</li>
<li class="border-right">
Leistungen
</li>
<li class="border-right">
Kontaktanfrage
</li>
<li>
Allgemeine Informationen
</li >
<li class="border-left">
Impressum
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript" src="so/sample.js"></script>
</body>
</html>
Please find code here. Check result in full page
When you use percentage values for vertical padding or margin, it uses the width to calculate it.
https://www.w3.org/TR/CSS2/box.html#padding-properties
You may here, instead, use line-height to use some percentage value in regards to the height you want to give to your element.
Example: line-height:35px; will give for one line an height of 35px to the container.
Your screen shows an height at average 60px. You may use (without height) :
line-height:60px;
or (DEMO)
font-size:20px;
line-height:300%;
line-height:200%; is equal to line-height:2em; twice the font-size .
Why line-height would be a good idea ?
because static height is not needed, if the menu breaks into many lines (font-family not loaded,visitor zooming, ...) , it will not be messy and will expand without overflowing on next content, ...
body {
background: black;
font-family: Oswald;
font-size: 20px;
font-weight: normal;
line-height: 1;
margin: 0;
min-width: 960px;
padding: 0;
}
a {
text-decoration: none;
outline: none;
}
a:active {
background: none;
}
img {
border: none;
}
/*-------------------------------------------Header-------------------------------------------*/
p {
color: #252525;
line-height: 20px;
margin: 0;
padding: 0;
}
p a {
color: #252525;
text-decoration: underline;
}
.border-right {
border-right: 5px solid #A40900;
}
.border-left {
border-left: 5px solid #A40900;
}
#header {
margin: 0 auto;
padding: 4px 0 0px;
text-align: center;
width: 960px;
}
#header a.logo {
display: block;
margin: 0 auto;
padding: 0;
width: 540px;
}
#header a.logo img {
border: 0;
display: block;
margin: 0;
padding: 0;
width: 100%;
}
#header ul {
font-family: 'Open Sans Condensed', sans-serif;
margin: 0;
padding: 0;
background-color: white;
line-height: 60px;/* will size height and also center text/inline boxes on this value */
border-top: 5px solid #A40900;
border-bottom: 5px solid #A40900;
}
#header ul li {
display: inline-block;
list-style: none;
margin: 0px;
padding: 0;
line-height: 100%;/*reset to normal*/
text-align: center;
}
#header ul li a {
color: #000;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 20px;
font-weight: normal;
margin: 0;
padding: 0 1em;
text-decoration: none;
text-transform: uppercase;
}
#header ul li a:hover,
#header ul li.selected a {
color: #0ba39c;
}
<link href='https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'><!-- had to pick up a font close to yours -->
<div id="header">
<img src="images/logo.png" alt="">
<ul id="navigation">
<span id="mobile-navigation"> </span>
<li class="selected border-right">
Startseite
</li><!--
--><li class="border-right">
Über uns
</li><!--
--><li class="border-right">
Anfahrt
</li><!--
--><li class="border-right">
Leistungen
</li><!--
--><li class="border-right">
Kontaktanfrage
</li><!--
--><li>
Allgemeine Informationen
</li><!--
--><li class="border-left">
Impressum
</li>
</ul>
</div>
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 cant seem to figure out how to get the menu inline with the text in the heading which is in the centre of the heading already. I'm sure it isnt a difficult problem but i cant figure it out as im trying to teach myself.
Any help would be appreciated.
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
font-family: sans-serif, arial;
}
#toplocation {
background-color: black;
color: grey;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
#heading {
background-color: #2b2b2b;
color: white;
padding-top: 14px;
padding-right: 14px;
padding-bottom: 14px;
padding-left: 14px;
}
#redline {
background-color: #ff0a0a;
height: 2px;
border: 0;
padding: 0;
}
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: #383838;
color: white;
padding: 4px 11px;
text-decoration: none;
border-radius: 3px 3px 3px 3px;
}
ul#menu li a:hover {
background-color: #ff0a0a;
}
<link href="http://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<!DOCTYPE html>
<div id="toplocation">
<i class="fa fa-fax"></i>
(01)-8393790      
<i class="fa fa-map- marker"> Baldoyle Industrial Estate</i>
</div>
<div id="heading">
<h3>Kilbride Classic Cuisine
<ul id="menu">
<li>Home</li>
<li>Products</li>
<li>MyOwn Gym Foods</li>
<li>Contact Us</li>
</ul>
</h3>
</div>
<div id="redline"></div>
Is this what you are looking for ? Making a few guesses from your description.
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
font-family: sans-serif, arial;
}
#toplocation
{
background-color:black;
color:grey;
margin-top: 0;
margin-bottom:0;
margin-right: 0;
margin-left: 0;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
#heading
{
background-color:#2b2b2b;
color:white;
padding-top: 14px;
padding-right: 14px;
padding-bottom: 14px;
padding-left: 14px;
}
#redline
{
background-color:#ff0a0a;
height: 2px;
border: 0;
padding: 0;
}
.pull-left{
float:left;
display:inline-block;
margin-right:100px;
}
.h2{
font-size:22px;
}
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: #383838;
color: white;
padding: 4px 11px;
text-decoration: none;
border-radius: 3px 3px 3px 3px;
}
ul#menu li a:hover {
background-color: #ff0a0a;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="HomepageStyleSheet.css">
<title>Kilbride Classic Cuisine</title>
</head>
<body>
<div id="toplocation">
<i class="fa fa-fax"></i>
(01)-8393790      <i class="fa fa-map- marker"> Baldoyle Industrial Estate</i>
</div>
<div id="heading">
<div class="h2">
<span class="pull-left">Kilbride Classic Cuisine </span>
<ul id="menu">
<li>Home</li>
<li>Products</li>
<li>MyOwn Gym Foods</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div id="redline"></div>
Firstly, your really shouldn't put the ul inside the h3.
Then to align the Heading h3 and menu, set them both to display:inline-block and vertical-align:middle;.
The menu and heading will then line up provided there is enough room for both on the same line.
Codepen Demo
#toplocation {
background-color: black;
color: grey;
padding: 5px;
}
#heading {
background-color: #2b2b2b;
color: white;
padding: 14px;
}
#heading h3 {
display: inline-block;
}
ul#menu {
padding: 0;
display: inline-block;
vertical-align: middle;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: #383838;
color: white;
padding: 4px 11px;
text-decoration: none;
border-radius: 3px 3px 3px 3px;
}
ul#menu li a:hover {
background-color: #ff0a0a;
}
<div id="toplocation">
<i class="fa fa-fax"></i>
(01)-8393790 <i class="fa fa-map-marker"> Baldoyle Industrial Estate</i>
</div>
<div id="heading">
<h3>Kilbride Classic Cuisine </h3>
<ul id="menu">
<li>Home</li>
<li>Products</li>
<li>MyOwn Gym Foods</li>
<li>Contact Us</li>
</ul>
</div>
Take a look at this, I've fixed your code: https://jsfiddle.net/geof9LuL/2/
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
font-family: sans-serif, arial;
}
#toplocation {
background-color: black;
color: grey;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
#heading {
overflow:hidden;
background-color: #2b2b2b;
color: white;
padding-top: 14px;
padding-right: 14px;
padding-bottom: 14px;
padding-left: 14px;
}
#redline {
background-color: #ff0a0a;
height: 2px;
border: 0;
padding: 0;
}
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: #383838;
color: white;
padding: 4px 11px;
text-decoration: none;
border-radius: 3px 3px 3px 3px;
}
ul#menu li a:hover {
background-color: #ff0a0a;
}
.title {
display: inline-block;
}
.menu-container {
display: inline-block;
float:right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="HomepageStyleSheet.css">
<title>Kilbride Classic Cuisine</title>
</head>
<body>
<div id="toplocation">
<i class="fa fa-fax"></i> (01)-8393790      
<i class="fa fa-map- marker"> Baldoyle Industrial Estate</i>
</div>
<div id="heading">
<h3 class="title">Kilbride Classic Cuisine</h3>
<div class="menu-container">
<ul id="menu">
<li>Home</lai>
<li>Products</li>
<li>MyOwn Gym Foods</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div id="redline"></div>
Also, in your example you had the menu inside the <h3> which isn't valid.
The ul#menu and the h3 tag both should be declared as display: inline.
Try to avoid to do something in the <h3>-tag expect text because some search-engines are looking for those tags and use them.
<h3>Kilbride Classic Cuisine</h3>
<ul id="menu">...</ul>
For the <div id="heading"> you could use the new html tag <header id="heading">.
Edited
Is that what you want?
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
font-family: sans-serif, arial;
}
#toplocation
{
background-color:black;
color:grey;
margin-top: 0;
margin-bottom:0;
margin-right: 0;
margin-left: 0;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
h3{float:left;margin:12px 10px;}
#heading
{
background-color:#2b2b2b;
color:white;
padding-top: 14px;
padding-right: 14px;
padding-bottom: 14px;
padding-left: 14px;
}
#redline
{
background-color:#ff0a0a;
height: 2px;
border: 0;
padding: 0;
}
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: #383838;
color: white;
padding: 4px 11px;
text-decoration: none;
border-radius: 3px 3px 3px 3px;
}
ul#menu li a:hover {
background-color: #ff0a0a;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="HomepageStyleSheet.css">
<title>Kilbride Classic Cuisine</title>
</head>
<body>
<div id="toplocation">
<i class="fa fa-fax"></i>
(01)-8393790      <i class="fa fa-map- marker"> Baldoyle Industrial Estate</i>
</div>
<div id="heading">
<h3>Kilbride Classic Cuisine </h3>
<ul id="menu">
<li>Home</li>
<li>Products</li>
<li>MyOwn Gym Foods</li>
<li>Contact Us</li>
</ul>
</div>
<div id="redline"></div>
Adding display: inline to your ul#menu should do the trick.
margin-left: 20px; to have spacing between heading and menu.
Modified ul#menu as below
ul#menu {
padding: 0;
margin-left: 20px;
display: inline;
}
Here is the full Snippet:
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
font-family: sans-serif, arial;
}
#toplocation {
background-color: black;
color: grey;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
#heading {
background-color: #2b2b2b;
color: white;
padding-top: 14px;
padding-right: 14px;
padding-bottom: 14px;
padding-left: 14px;
overflow: hidden;
}
#redline {
background-color: #ff0a0a;
height: 2px;
border: 0;
padding: 0;
}
ul#menu {
padding: 0;
margin-left: 20px;
display: inline;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: #383838;
color: white;
padding: 4px 11px;
text-decoration: none;
border-radius: 3px 3px 3px 3px;
}
ul#menu li a:hover {
background-color: #ff0a0a;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="HomepageStyleSheet.css">
<title>Kilbride Classic Cuisine</title>
</head>
<body>
<div id="toplocation">
<i class="fa fa-fax"></i>
(01)-8393790      
<i class="fa fa-map- marker"> Baldoyle Industrial Estate</i>
</div>
<div id="heading">
<h3>Kilbride Classic Cuisine
<ul id="menu">
<li>Home
</li>
<li>Products
</li>
<li>MyOwn Gym Foods
</li>
<li>Contact Us
</li>
</ul>
</h3>
</div>
<div id="redline"></div>
</body>
I am having an issue where my navigation a is conflicting with an a href on .content - I have been trying to tackle this for the last few hours and no luck, thanks.
ul.nav {
list-style-type: none;
margin: 0;
min-width: 360px;
}
ul.nav li {
display: table-cell;
text-align: center;
}
a.active {
background-color: #cc293f;
font-weight: 700;
}
.nav-container {
font-family: 'Catamaran', sans-serif;
background-color: #505050;
margin: 5px 0 0;
}
.table {
display: table;
margin: 5px auto;
}
a {
font-family: 'Catamaran', sans-serif;
background-color: #505050;
border-right: 1px solid #fff;
color: #fff;
float: left;
padding: .2em .6em;
text-decoration: none;
width: 10em;
}
a:hover {
background-color: #cc293f;
}
.content {
border-radius: 10px 10px 10px 10px;
border: 2px solid #cc293f;
margin-top: 10px;
min-width: 360px;
min-height: 650px;
}
.content h1 {
font-size: 26px;
color: #fff;
text-align: center;
margin-top: 5px;
}
.content h2 {
font-size: 22px;
text-align: center;
margin-top: -35px;
}
.content p {
font-size: 18px;
margin-top: -5px;
margin-left: 10px;
}
.content #p2 {
font-size: 19px;
margin-left: 50px;
margin-top: -5px;
}
<html>
<body>
<div class="nav-container">
<div class="table">
<ul class="nav">
<li style="border-left:1px solid white;"><a class="active" href=
"index.html">Home</a></li>
<li>FAQs</li>
<li>Resolution Center</li>
<li>Upload</li></ul>
</div>
</div>
<div class="content">
<p>example</p>
<img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png" height="75" width="75">
</body>
</html>
You declare style for global <a> tag, so all <a tags will use that style. Special style for <a tags from .content class can be achieved by adding to your css file: .content a { your instructions }.
Furthermore, use ul nav li a to specify your desired options for the menu. If you have multiple ul list in your project, use a specific class for each of them.
See this now has very different properties on default and hover.
ul.nav {
list-style-type: none;
margin: 0;
min-width: 360px;
}
ul.nav li {
display: table-cell;
text-align: center;
}
a.active {
background-color: #cc293f;
font-weight: 700;
}
.nav-container {
font-family: 'Catamaran', sans-serif;
background-color: #505050;
margin: 5px 0 0;
}
.table {
display: table;
margin: 5px auto;
}
a {
font-family: 'Catamaran', sans-serif;
background-color: #505050;
border-right: 1px solid #fff;
color: #fff;
float: left;
padding: .2em .6em;
text-decoration: none;
width: 10em;
}
a:hover {
background-color: #cc293f;
}
.content {
border-radius: 10px 10px 10px 10px;
border: 2px solid #cc293f;
margin-top: 10px;
min-width: 360px;
min-height: 650px;
}
.content h1 {
font-size: 26px;
color: #fff;
text-align: center;
margin-top: 5px;
}
.content h2 {
font-size: 22px;
text-align: center;
margin-top: -35px;
}
.content p {
font-size: 18px;
margin-top: -5px;
margin-left: 10px;
}
.content #p2 {
font-size: 19px;
margin-left: 50px;
margin-top: -5px;
}
.content a {
background:blue;
transition:1s;
}
.content a:hover {
transform:translateX(500px);background:red;
}
<html>
<body>
<div class="nav-container">
<div class="table">
<ul class="nav">
<li style="border-left:1px solid white;"><a class="active" href=
"index.html">Home</a></li>
<li>FAQs</li>
<li>Resolution Center</li>
<li>Upload</li></ul>
</div>
</div>
<div class="content">
<p>example</p>
<img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png" height="75" width="75">
</body>
</html>
I am building a menu. I have this code:
<nav>
<ul>
<li>Kontakt</li>
<li>Reference</li>
<li>Moje služby</li>
<li>Kdo jsem</li>
</ul>
</nav>
And CSS:
nav{
width: 100%;
height: 90px;
border-top: 3px solid red;
border-bottom: 1px solid gray;
background-color: white;
}
nav li{
float: right;
padding: 20px 35px 0 0px;
}
nav ul{
margin-right: 100px;
height: 90px;
list-style-type: none;
}
nav a{
text-decoration: none;
color: black;
font-size: 17px;
font-family: Montserrat;
font-weight: 700;
}
nav a:hover{
text-align: center;
color: 33adae;
What I am trying to do is to make the links clickable like blocks with the height of the whole navbar. The way I have done It so far, you can click only the text in the links.
Generally all that is needed is.
nav a{
display:block;
}
However for a fuller example it's generally easier to let the links determine the height of the header.
For centering, don't use floats, set the ul to text-align:center and the li to display:inline-block.
* {
margin: 0;
padding: 0;
;
box-sizing: border-box;
}
nav {
border-top: 3px solid red;
border-bottom: 1px solid gray;
background-color: white;
overflow: hidden;
/* clearfix */
}
nav li {
display: inline-block;
}
nav ul {
list-style-type: none;
text-align: center;
}
nav a {
display: block;
text-decoration: none;
color: black;
font-size: 17px;
font-family: Montserrat;
font-weight: 700;
height: 90px;
line-height: 90px;
padding: 0 25px;
}
nav a:hover {
text-align: center;
color: 33adae;
background: plum;
<nav>
<ul>
<li>Kontakt
</li>
<li>Reference
</li>
<li>Moje služby
</li>
<li>Kdo jsem
</li>
</ul>
</nav>
You could remove the padding from your lis and add it to your a tags. See example http://codepen.io/anon/pen/gaGxpb
Move your <li> padding to the <a> children, and give the links a height:
See codepen
NB: Added a border to the links so as you see the boundaries.
display the links as blocks display: block; and use the line-height to give them the height you want. Try this:
nav {
width: 100%;
height: 90px;
border-top: 3px solid red;
border-bottom: 1px solid gray;
background-color: white;
}
nav li {
float: right;
padding: 0px 35px 0 0px;
}
nav ul {
margin: 0 100px 0 0;
height: 90px;
list-style-type: none;
}
nav a {
display: block;
line-height: 90px;
text-decoration: none;
color: black;
font-size: 17px;
font-family: Montserrat;
font-weight: 700;
}
nav a:hover {
text-align: center;
color: 33adae;
<nav>
<ul>
<li>Kontakt</li>
<li>Reference</li>
<li>Moje služby</li>
<li>Kdo jsem</li>
</ul>
</nav>
Here is my version using height and with properties instead of padding, i used background colors so you can see how is working: http://codepen.io/aluknot/pen/wKrqaG
HTML:
<nav>
<ul>
<li>Kontakt</li>
<li>Reference</li>
<li>Moje služby</li>
<li>Kdo jsem</li>
</ul>
</nav>
CSS:
nav {
width: 100%;
height: 90px;
border-top: 3px solid red;
border-bottom: 1px solid gray;
background-color: white;
}
nav li{
float: right;
background: red;
text-align: center;
height: 100%;
width: 120px;
line-height: 90px
}
nav ul{
margin: 0;
padding-right: 100px;
height: 90px;
list-style-type: none;
background: green;
}
nav a{
text-decoration: none;
color: black;
font-size: 17px;
font-family: Montserrat;
font-weight: 700;
display: block;
width: 100%;
height: 100%;
background: blue;
}
nav a:hover {
background: black;
color: white;
}
I am testing a pages CSS by wrapping it in a media query.
#media screen and (min-width: 1200px)
If I don't wrap the CSS in the media query everything looks fine. If I do wrap it, 99% looks fine, but on some of my list items the formatting gets weird. Little dots appear as if I had set a list style, but I didn't. If I mouse over the li, the formatting clears up.
This doesn't happen if I don't add the media query. I'm trying to work formatting for a large and small screen, and am trying to get the large screen portion operational.
Here is a snippet of the code. I set it to use a min width of 600, since that was what would work in JFiddle. If you run this code as is, and then hover over the Sports, you'll notice some weird artifacts on the tabs. Move the cursor and the artifacts disappear. If you remove the encapsulating #media query the artifacts don't appear at all.
#media screen and (min-width: 600px) {
* {
margin: 0;
padding: 0;
}
body {
font: 300 15px/1.5"Helvetica Neue", helvetica, arial, sans-serif;
background: #FFF;
margin: 15px;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-style: normal;
background-color: #fff;
border: 0;
}
#navigation {
width: auto;
margin: 0;
padding: 0;
border: 0;
clear: both;
}
#column_l {
position: relative;
float: left;
}
#column_r {
float: left;
}
#footer {
width: auto;
clear: both;
overflow: auto;
}
.float_right {
float: right;
}
article {
width: 100%;
margin: 0 auto;
background: #0047FF;
color: #fff;
border-radius: 5px;
box-shadow: 0 0 15px 2px #666;
}
article P {
background: #0047FF;
}
img {
max-width: 100%;
max-height: 100%;
}
section {
clear: left;
}
#main_content {
padding: 60px;
}
p {
margin: 15px 0;
}
#container {
width: 100%;
margin: 0;
background-color: #fff;
position: relative;
padding: 0;
}
#masthead {
text-align: right;
width: 100%;
background-color: #c5d5e5;
margin: 0;
padding: 0;
overflow: auto;
}
#page_content {
position: relative;
width: 98%;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCAA77;
left: 20px;
}
/* Styles for Footer */
#footer p {
font-size: x-small;
text-align: center;
color: #393939;
margin: 10px;
padding: 1px;
}
#footer a {
color: #393939;
text-decoration: underline;
}
#footer a:hover {
color: #000;
text-decoration: none;
}
#footer {
background-color: #dfcfbf;
padding-bottom: 5px;
}
/* Styles for Masthead */
#masthead img {
float: left;
margin: 0;
padding: 0;
}
#masthead p {
font-size: small;
text-align: right;
color: #000;
margin: 0 0 0 0;
padding: 0;
}
/* Styles for Navigationcommon */
#navigationcommon {
background-color: #548EBE;
overflow: hidden;
}
#navigationcommon ul {
list-style-type: none;
width: 100%;
margin: 0;
padding: 0;
}
#navigationcommon li {
float: left;
}
#navigationcommon a {
color: #FFF;
text-decoration: none;
display: block;
padding: 5px;
border: 1px solid #D3D3D3;
background-color: #548EBE;
}
#navigationcommon a:hover {
color: #000;
text-decoration: none;
border: 1px solid #D3D3D3;
background-color: #ADD8E6;
}
/*Menu Color Classes*/
.green {
background: #6AA63B;
}
.yellow {
background: #FFFF00;
}
.red {
background: #CC6666;
}
.purple {
background: #CC99FF;
}
.siteblue {
background: #0047FF;
}
.blue {
background: #0292C0;
}
.purplered {
background: #66FFFF;
}
.yellowgreen {
background: #99FF33;
}
.orange {
background: #FF9900;
}
.bluegrey {
background: #669999;
}
/**
* horizontal navigation (SO)
*/
/* Targeting both first and second level menus */
#nav {
position: relative;
font-size: 13px;
}
#nav li {
list-style: none;
float: left;
}
#nav li a {
display: block;
padding: 8px 6px;
text-decoration: none;
}
#nav li a:hover {
background-color: red;
color: #FFF;
opacity: 1;
-webkit-border-top-left-radius: 30px 15px;
border-top-left-radius: 30px 15px;
-webkit-border-top-right-radius: 30px 15px;
border-top-right-radius: 30px 15px;
}
/* Targeting the first level menu */
#nav {
top: 158px;
min-width: 100%;
display: block;
height: 36px;
z-index: 1000;
position: absolute;
color: black;
background: url('images/sscbanner.png') 50% 50%;
}
#nav > li > a {} #nav a {
color: black;
}
/*added by me */
#nav li:hover {
background-color: red;
color: #FFF;
opacity: 1;
}
/*added by me */
#nav li {
max-width: 150px;
background-color: #CCCCCC;
-webkit-border-top-left-radius: 30px 15px;
border-top-left-radius: 30px 15px;
-webkit-border-top-right-radius: 30px 15px;
border-top-right-radius: 30px 15px;
list-style: none;
/*-webkit-border-radius: 30px 30px 0px 0px;
border-radius: 30px 30px 0px 0px;*/
border-left: 2px dotted black;
}
/* Targeting the second level menu */
#nav li ul {
color: black;
display: none;
position: absolute;
min-width: 100%;
background-color: #0047FF;
}
#nav li ul li {
display: inline;
/*added by me
line-height: 50px;*/
margin: 0;
padding: 10px 4px 0 4px;
color: black;
height: 50px;
text-align: center;
max-width: 150px;
background-color: #CCCCCC;
border-left: 2px dotted black;
list-style: none;
}
/*this is hitting all of the a elements */
#nav li ul li a {
border: none;
/*line-height: 50px;*/
margin: 0;
padding: 0 4px 0 4px;
color: black;
}
#nav li ul li a:hover {
background-color: red;
color: #FFF;
opacity: 1;
-webkit-border-top-left-radius: 30px 15px;
border-top-left-radius: 30px 15px;
-webkit-border-top-right-radius: 30px 15px;
border-top-right-radius: 30px 15px;
}
/* Third level menu */
#nav li ul li ul {
top: 0;
min-width: 100%;
}
ul.child {
background-color: #FFF;
}
/* A class of current will be added via jQuery */
#nav li.current > a {
background: #f7f7f7;
float: left;
}
/* CSS fallback */
#nav li:hover > ul.child {
left: 0;
top: 34px;
display: inline;
position: absolute;
text-align: left;
}
/*added by me */
#nav ul > li:hover > ul.child {
left: 0;
top: 50px;
display: inline;
position: absolute;
text-align: left;
}
#nav li:hover > ul.grandchild {
display: block;
}
.linktable {
border-spacing: 0;
table-layout: fixed;
border: thick;
border-style: solid;
}
#nav .linkul {
width: 500px;
}
#nav .linkrow {
height: 50px;
}
#nav .linkcell {
padding: 0px;
border: thin;
border-style: solid;
margin: 0px;
font-size: 12px;
width: 100px;
background-color: #FFFF66;
text-align: center;
}
#nav .nonlinkcell {
padding: 0px;
border: thin;
border-style: solid;
margin: 0px;
font-size: 12px;
width: 100px;
text-align: center;
}
#nav .tablelink {
padding: 0px 0px 0px 0px;
margin: 0px;
font-size: 12px;
text-align: center;
background-color: #FFFF66;
line-height: inherit
}
#nav li ul li ul table tr td {
line-height: 12px;
}
#nav li ul li ul table tr td a:hover {
background-color: #FFFF66;
color: red;
opacity: 1;
}
#nav ul li:first-of-type {
-webkit-border-top-left-radius: 30px 15px;
border-top-left-radius: 30px 15px;
-webkit-border-top-right-radius: 30px 15px;
border-top-right-radius: 30px 15px;
}
#nav ul li ul li:first-of-type {
-webkit-border-top-left-radius: 30px 15px;
border-top-left-radius: 30px 15px;
-webkit-border-top-right-radius: 30px 15px;
border-top-right-radius: 30px 15px;
}
#nav ul li:last-of-type {
-webkit-border-top-left-radius: 30px 15px;
border-top-left-radius: 30px 15px;
-webkit-border-top-right-radius: 30px 15px;
border-top-right-radius: 30px 15px;
}
#nav ul li:first-of-type {
border-left: none;
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882" xmlns:mso="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>My Testing Page Issue</title>
<meta name="author" content="Me" />
<style>
</style>
<script type="text/javascript">
</script>
<meta name="processowner" content="Me" />
<script type="text/javascript">
</script>
</head>
<body>
<div id="container">
<article onclick="">
<ul id="nav">
<li><a id="close" href="" onclick="showiframe(this.id); return false;">Fruit</a>
<ul class="child">
<li>
<a id="fruit" href="" onclick="showiframe(this.id); return false;">
<br />About</a>
</li>
<li>Oranges</li>
<li>
<br />Grapes</li>
<li>
<br />Apples</li>
<li>
<br />Bananas</li>
<li>
<br />Pears</li>
</ul>
</li>
<li><a id="close0" href="" onclick="showiframe(this.id); return false;">Sports</a>
<ul class="child">
<li>
<a id="sports" href="" onclick="showiframe(this.id); return false;">
<br />About</a>
</li>
<li>
<br />Hockey</li>
<li>Professional
<br />Soccer</li>
<li>Professional <br /> Football
<ul class="child">
<table class="linktable blue">
<tr class="linkrow blue">
<td class="linkcell blue">Miami Dolphins
</td>
</tr>
</table>
</ul>
</li>
<li>
<br />Tennis</li>
<li>
<a href="#">
<br />Bowling</a>
</li>
<li>
<a href="#">
<br />NASCAR</a>
</li>
<li>
<a href="#">
<br />Swimming</a>
</li>
<li>
<a href="#">
<br />Fishing</a>
<ul class="child">
<table class="linktable blue">
<tr class="linkrow blue">
<td class="linkcell blue">Fly Fishing
</td>
</tr>
</table>
</ul>
</li>
<li>Olympics
</li>
<li>Baseball
<ul class="child">
<table class="linktable blue">
<tr class="linkrow blue">
<td class="nonlinkcell blue">NY Mets</td>
<td class="linkcell blue"><a class="tablelink" href="">Boston Redsox</a>
</td>
<td class="nonlinkcell blue">Los Angeles Dodgers</td>
<td class="nonlinkcell blue">New York Yankees</td>
<td class="linkcell blue"><a class="tablelink" href="">San Diego Padres</a>
</td>
<td class="linkcell blue"><a class="tablelink" href="">Cincinatti Reds</a>
</td>
<td class="linkcell blue"><a class="tablelink" href="">San Francisco Giants</a>
</td>
<td class="nonlinkcell blue"></td>
<td class="nonlinkcell blue"></td>
<td class="nonlinkcell blue"></td>
</tr>
</table>
</ul>
</li>
</ul>
</li>
</ul>
</article>
</div>
</body>
</html>