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>
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>
So my mission is to get the gray rectangle (<div class="brand"> </div>) to go automatic below the others, right now it's stuck between the header and my two other body divs. As I am a beginner I have no idea about how to fix this, i've searched a little and tried to add a clear: both, but that didn't solve my problem. Would love if someone out there can take a look at my code and see what's wrong. I'm sorry for no structure in my code.
Thanks,Filip
:D
CODE (CSS FIRST, THEN HTML):
body{
background: white;
font-family: 'Montserrat', sans-serif;
padding-bottom: -1px;
}
.container{
width: 80%;
margin: 0 auto;
}
header{
background: #fff;
}
* {
margin:0;
padding:0;
}
header ::after {
content: "";
display: table;
clear: both;
}
nav{
float: right;
padding-right: 230px;
}
nav li{
display: inline-block;
padding-left: 45px;
padding-top: 20px;
padding-bottom: 20px;
}
nav ul{
list-style: none;
display: inline-block;
padding-top: 25px;
}
nav a {
font-size: 12px;
color: black;
font-weight: 600;
text-decoration: none;
text-align: center;
text-transform: uppercase;
}
nav a:hover{
color: red;
}
nav li:hover{
}
.fa-search{
color: black;
font-size: 14px;
transform:scaleX(-1);
margin-left: 50px;
}
.fa-bars{
color: black;
font-size: 14px;
padding-left: 15px;
}
nav i:hover{
color: red;
cursor: pointer;
}
.wrapper{
position: relative;
height: 100%;
width: 100%;
}
.bild1{
height: 350px;
width: 600px;
margin-top: 100px;
margin-left: 80px;
position: absolute;
z-index: 4;
background-image: url('Img/KBA.jpg');
background-position: 10% 30% ;
background-size: 180%;
}
.bild2{
height: 350px;
width: 600px;
margin-top: 140px;
margin-left: 120px;
z-index: 3;
position:absolute;
background-color: #3D6BB8;
}
.entrytext{
float: right;
margin-right: 90px;
margin-top: 175px;
clear: both;
}
.entrytext>h1{
font-weight: 800;
font-style: normal;
font-size: 54px;
}
.entrytext>button{
border: none;
display: inline-block;
background-color: #38b272;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
box-shadow: 20px 15px black;
}
.entrytext>button:hover{
border: none;
display: inline-block;
background-color: #c12147;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
}
button:focus {outline:0;}
.fa-angle-right{
font-size: 20px;
padding-left: 30px;
}
.entrytext>h2{
font-size: 14px;
font-weight: 600;
margin-top: 20px;
}
.citygalleria{
color: #CC2244;
}
.brand{
height: 100px;
weight: 400px;
background-color: gray;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8">
<script src="https://kit.fontawesome.com/908c2e5c96.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<title>Kungsmässan — Måste upplevas!</title>
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li>Butiker</li>
<li>Resturang & Café</li>
<li>Utbyggnad</li>
<li>Öppetider</li>
<i class="fas fa-search"></i>
<i class="fas fa-bars"></i>
</ul>
</nav>
</div>
</header>
<div class="wrapper">
</div>
<div class="bild1">
</div>
<div class="bild2">
</div>
<div class="entrytext">
<h1>Sveriges bästa <br/> <span class="citygalleria">citygalleria.</span> Mitt <br/> i Kungsbacka.</h1>
<h2>35 000 KVADRATMETER OCH ÖVER 100 AFFÄRER!</h2>
<button type="LÄS MER" name="button ">LÄS MER<i class="fas fa-angle-right"></i></button>
</div>
<div class="brand">
</div>
</body>
</html>
Sorry for no structure ;D
//Filip
body{
background: white;
font-family: 'Montserrat', sans-serif;
padding-bottom: -1px;
}
.container{
width: 80%;
margin: 0 auto;
}
header{
background: #fff;
}
* {
margin:0;
padding:0;
}
header ::after {
content: "";
display: table;
clear: both;
}
nav{
float: right;
padding-right: 230px;
}
nav li{
display: inline-block;
padding-left: 45px;
padding-top: 20px;
padding-bottom: 20px;
}
nav ul{
list-style: none;
display: inline-block;
padding-top: 25px;
}
nav a {
font-size: 12px;
color: black;
font-weight: 600;
text-decoration: none;
text-align: center;
text-transform: uppercase;
}
nav a:hover{
color: red;
}
nav li:hover{
}
.fa-search{
color: black;
font-size: 14px;
transform:scaleX(-1);
margin-left: 50px;
}
.fa-bars{
color: black;
font-size: 14px;
padding-left: 15px;
}
nav i:hover{
color: red;
cursor: pointer;
}
.package {
width: 80%;
margin: 30px auto;
}
.bild2 {
height: 350px;
width: 50%;
background-color: #3D6BB8;
float: left;
}
.entrytext {
margin-left: 30px;
float: left;
margin-bottom:70px;
}
.entrytext>h1{
font-weight: 800;
font-style: normal;
font-size: 54px;
}
.entrytext>button{
border: none;
display: inline-block;
background-color: #38b272;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
box-shadow: 20px 15px black;
}
.entrytext>button:hover{
border: none;
display: inline-block;
background-color: #c12147;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
}
button:focus {outline:0;}
.fa-angle-right{
font-size: 20px;
padding-left: 30px;
}
.entrytext>h2{
font-size: 14px;
font-weight: 600;
margin-top: 20px;
}
.citygalleria{
color: #CC2244;
}
.brand {
height: 100px;
background-color: gray;
clear: both;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8">
<script src="https://kit.fontawesome.com/908c2e5c96.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<title>Kungsmässan — Måste upplevas!</title>
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li>Butiker</li>
<li>Resturang & Café</li>
<li>Utbyggnad</li>
<li>Öppetider</li>
<i class="fas fa-search"></i>
<i class="fas fa-bars"></i>
</ul>
</nav>
</div>
</header>
<div class="wrapper">
</div>
<div class="bild1">
</div>
<div class="package">
<div class="bild2">
</div>
<div class="entrytext">
<h1>Sveriges bästa <br/> <span class="citygalleria">citygalleria.</span> Mitt <br/> i Kungsbacka.</h1>
<h2>35 000 KVADRATMETER OCH ÖVER 100 AFFÄRER!</h2>
<button type="LÄS MER" name="button ">LÄS MER<i class="fas fa-angle-right"></i></button>
</div></div>
<div class="brand">
</div>
</body>
</html>
Add position its styling and add botom:0;
i am a 17 year old boy and recently new at using html and css ,i have been making a website and i am trying to add a drop down menu on my existing website but i am struggling to do so as everything , i want a drop down menu on my photos tab so that i can add some pictures and one in my "ABOUT" tab as well , i tried is not working , any help will be appreciated and welcomed. Thanks in advance
*
{
margin: 0;
padding: 0;
}
header
{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(1493004618106.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav
{
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: white;
text-decoration: none;
padding; 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 15px;
}
.main-nav li.active a
{
border: 1px solid white;
}
.main-nav li a:hover
{
border: 1px solid white;
}
.logo img
{
width: 100px;
height: auto;
float: left;
}
body
{
font-family: monospace;
}
.row
{
max-width: 1200px
margin: auto;
}
.hero
{
position: absolute;
width: 1000px;
margin-left: 200px;
margin-top: 0px;
margin-right: 50px;
}
h1
{
color: white;
text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 275px;
}
.button
{
margin-top: 30px;
margin-left: 330px;
}
.btn
{
border : 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase
}
.btn-one
{
background-color: darkblue;
font-family: "Roboto", sans-serif;
}
.btn-two
{
font-family: "Roboto", sans-serif
}
.btn-two:hover
{
background-color: darkblue
}
index.html
<html>
<head>
<title>Bryan's Holidays</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="fr.png">
</div>
<ul class="main-nav">
<li class="active"> HOME</li>
<li> ABOUT</li>
<li> PHOTOS</li>
<li> CONTACT</li>
</ul>
</div>
<div class="hero">
<h1>WELCOME!</h1>
<div class="button">
Watch video
Explore more
</div>
</div>
</header>
</body>
</html>
Does this help you?
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_dropdown_hover
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>Dropdown Button</h2>
<p>Move the mouse over the button to open the dropdown content.</p>
<div class="w3-dropdown-hover">
<button class="w3-button w3-black">Hover Over Me!</button>
<div class="w3-dropdown-content w3-bar-block w3-border">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</body>
</html>
I didn't change too much of your code, just some designs and dynamics. Please sort your code later, it's a bit confusing.
CSS
{
margin: 0;
padding: 0;
}
header
{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(1493004618106.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav
{
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: white;
text-decoration: none;
padding; 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 15px;
}
.main-nav li.active a
{
border: 1px solid white;
}
.main-nav li a:hover
{
border: 1px solid white;
}
.logo img
{
width: 100px;
height: auto;
float: left;
}
body
{
font-family: monospace;
}
.row
{
max-width: 1200px
margin: auto;
padding-top: 10px;
}
.hero
{
position: absolute;
width: 1000px;
margin-left: 200px;
margin-top: 0px;
margin-right: 50px;
}
h1
{
color: white;
text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 275px;
}
.button
{
margin-top: 30px;
margin-left: 330px;
}
.btn
{
border : 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase
}
.btn-one
{
background-color: darkblue;
font-family: "Roboto", sans-serif;
}
.btn-two
{
font-family: "Roboto", sans-serif
}
.btn-two:hover
{
background-color: darkblue
}
.float-right{
margin-left: 60%
}
.dropbtn {
background-color: #464;
border-radius: 5px;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
HTML
<html>
<head>
<title>Bryan's Holidays</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="row" style="">
<div class="logo">
<img src="fr.png">
</div>
<div class="float-right">
<!-- ++++++++ Home -->
<button class="dropbtn">Home</button>
<!-- ++++++++ About -->
<div class="dropdown">
<button class="dropbtn">About</button>
<div class="dropdown-content">
Link 4
Link 5
Link 6
</div>
</div>
<!-- ++++++++ Photos -->
<div class="dropdown">
<button class="dropbtn">Photos</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<!-- ++++++++ Contact -->
<button class="dropbtn">Contact</button>
</div>
</div>
<div class="hero">
<h1>WELCOME!</h1>
<div class="button">
Watch video
Explore more
</div>
</div>
</header>
</body>
</html>
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>
I'm trying to control the "show more" link and cannot, I've used link controls before, but this one is puzzling me. The link I've tried to control so far is #r_a_show_more_link ("show more" link on right under recent activity) it's code is at the bottom of the CSS, but I can't get it to work. Maybe I'm doing something wrong with the CSS selectors? Please look at the code and run the snippet!
Thanks a lot!
/* Main Nav */
#home_icon {
height: 40px;
float: left;
padding: 10px;
position: relative;
top: 95px;
}
li {
display: inline-block;
}
ul {
float: right;
position: relative;
top: 50px;
margin: 0px;
padding: 0px;
}
li a:link {
font-weight: bold;
display: inline-block;
text-decoration: none;
font-family: times;
font-size: 24px;
list-style: none;
padding: 5px;
margin: 3px;
margin-top: 0px;
border: 2px solid #000;
border-radius: 5px;
}
nav li a:visited {
color: black;
}
nav li a:hover {
color: gray;
border-color: gray;
}
nav li a:active {
color: black;
border-color: black;
}
nav {
width: 1000px;
height: 150px;
background-color: rgba(255,255,255,0.9);
padding: 10px;
margin: 0px auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input[type=search] {
font-size: 16px;
}
#searchbox {
float: right;
margin: 15px;
display: inline-block;
background: #2b303b;
border: none;
color: #63717f;
border-radius: 5px;
}
#logo {
float: left;
height: 150px;
display: inline-block;
}
body {
background-image: url("../pictures/test.jpg");
background-color: blue;
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0px;
padding: 0px;
}
aside {
position: absolute;
right: 0px;
background-color: rgba(255,255,255,0.9);
width: 170px;
height: 600px;
margin: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px;
}
#main_content {
width: 1000px;
min-height: 600px;
display: block;
background-color: rgba(255,255,255,0.9);
margin: 0 auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative; top: 0px;
padding: 10px;
}
#here_you_can_learn {
font-size: 47px;
color: gray;
margin: 0 auto;
margin-bottom: 10px;
text-align: center;
}
#welcome {
color: white;
font-size: 130px;
margin-top: 20px;
margin-bottom: 10px;
text-align: center;
padding: 10px;
}
#down_arrow {
height: 50px;
margin: auto;
display: block;
padding: 10px;
}
#most_frequent {
width: 600px;
vertical-align: top;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#m_f_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#m_f_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#recent_activity {
width: 375px;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#r_a_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_body {
font-size: 15px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more_link :visited {
color: black;
}
#r_a_show_more_link :hover {
color: gray;
border-color: gray;
}
#r_a_show_more_link :active {
color: black;
border-color: black;
}
}
<!DOCTYPE html>
<head>
<title>Home | Jeff's Website</title>
<link href="styles/main_navigation.css" type="text/css" rel="stylesheet" />
<link href="styles/body.css" type="text/css" rel="stylesheet" />
<link href="styles/main_content.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--Main Nav-->
<header>
<nav>
<a href="">
<img id="logo" src="pictures/jeff_logo.png" alt="Logo">
</a>
<img src="pictures/home_icon.png" id="home_icon"/>
<form action="" id="searchbox">
<input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!">
<input type="submit" value="Search!">
</form>
<ul>
<li>Blog</li>
<li>Trips</li>
<li>Politics</li>
<li>Pictures</li>
<li>Videos</li>
<li>Computer</li>
<li>Misc</li>
</ul>
</nav>
</header>
<!--Welcome to jeff's website-->
<div>
<h1 id="welcome">Welcome to </br> my website!</h1>
<a href="#here_you_can_learn">
<img src="pictures/down_arrow.png" id="down_arrow"/>
</a>
</div>
<!--right side nav-->
<aside>
<p>this is aside</p>
</aside>
<!--Main Content-->
<div id="main_content">
<h2 id="here_you_can_learn">Here you can learn about me and my adventures!</h2>
<!--Most Frequently visited pages: on left side of page-->
<div id="most_frequent">
<p id="m_f_heading">Most frequently visted pages!</p>
<p id="m_f_show_more">Show More</p>
</div>
<!--Recent Activity: on the right side of page-->
<div id="recent_activity">
<p id="r_a_heading">Recent Activity</p>
<p id="r_a_body">test</p>
<p id="r_a_show_more">Show More</p>
</div>
</div>
</body>
You need to remove the space before :visited in the CSS:
#r_a_show_more_link:visited {
color: black;
}
you have an extra space before your :hover,:visited and:active, so remove it, like this:
#r_a_show_more_link:visited {
color: black;
}
#r_a_show_more_link:hover {
color: gray;
border-color: gray;
}
#r_a_show_more_link:active {
color: black;
border-color: black;
}