I'm trying to move certain text down from the top of it's container, but it's moving the entire container down.
#import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300");
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
font-family: 'Open Sans';
background-color: lightgray;
}
a
{
text-decoration: none;
color: #fff;
}
div#header
{
background-image: url("header_img.png");
background-size: cover;
background-repeat: no-repeat;
width: 80%;
height: 220px;
margin: 0 auto;
margin-top: 50;
color: #fff;
font-size: 22px;
}
div#header span
{
font-weight: 300;
}
div#header h3
{
text-align: center;
padding-top: 85px;
}
div#header h4
{
text-align: center;
}
/*
#222222 - top nav
#F5F5F5 - sidebar background color
#FFF - sidebar link hover background color
#63B7E8 - sidebar nav link hover text color
#D8D8D8 - sidebar nav text color
50px top margin
50px bottom margin
*/
/* Navigation */
/* Nav Title */
.nav
{
background-color: dimgray;
width: 80%;
height: 40px;
margin: 0 auto;
}
/* Remove bullet points on list */
.nav ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: dimgray;
}
.nav ul li
{
float: left;
}
.nav ul li a
{
display: block;
color: #fff;
text-align: center;
padding: 14px; 16px;
text-decoration: none;
}
.nav ul li a:hover
{
color: #099;
background-color: #fff;
}
.home-content
{
width: 80%;
height: 350px;
margin: 0 auto;
margin-top: 30px;
text-align: center;
font-size: 22px;
background-color: #fff;
}
.home-content span
{
font-weight: 300;
}
/* This is the Text I want to push down from the top of it's container.*/
.title
{
margin-top: 15px;
}
/* I also tried this:
.home-content h3
{
margin-top: 15px;
}
*/
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="container">
<div id="header">
<h3>Sample<span> Text</span></h3>
<h4>Sample. Text. Here.</h4>
</div>
</div>
<div class="container">
<!-- Navigation -->
<div class="nav">
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
</ul>
</div>
<div class="home-content">
<div class="title">
<h3>Default<span> Text</span></h3>
</div>
</div>
</div>
</body>
</html>
Any tips to push just the text down? I'd appreciate it. Thanks. I have also tried padding, but it gives me the same result.
Set the position of .title to relative and use the top property instead of margin-top.
Like so:
https://jsfiddle.net/kbgb0qvr/
I was able to do it with padding on your parent container, and no margin on the child. I don't know that this is the best way to do it though.
#import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300");
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
font-family: 'Open Sans';
background-color: lightgray;
}
a
{
text-decoration: none;
color: #fff;
}
div#header
{
background-image: url("header_img.png");
background-size: cover;
background-repeat: no-repeat;
width: 80%;
height: 220px;
margin: 0 auto;
margin-top: 50;
color: #fff;
font-size: 22px;
}
div#header span
{
font-weight: 300;
}
div#header h3
{
text-align: center;
padding-top: 85px;
}
div#header h4
{
text-align: center;
}
/*
#222222 - top nav
#F5F5F5 - sidebar background color
#FFF - sidebar link hover background color
#63B7E8 - sidebar nav link hover text color
#D8D8D8 - sidebar nav text color
50px top margin
50px bottom margin
*/
/* Navigation */
/* Nav Title */
.nav
{
background-color: dimgray;
width: 80%;
height: 40px;
margin: 0 auto;
}
/* Remove bullet points on list */
.nav ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: dimgray;
}
.nav ul li
{
float: left;
}
.nav ul li a
{
display: block;
color: #fff;
text-align: center;
padding: 14px; 16px;
text-decoration: none;
}
.nav ul li a:hover
{
color: #099;
background-color: #fff;
}
.home-content
{
width: 80%;
height: 350px;
margin: 0 auto;
margin-top: 30px;
text-align: center;
font-size: 22px;
background-color: #fff;
padding-top: 15px;
}
.home-content span
{
font-weight: 300;
}
/* This is the Text I want to push down from the top of it's container.*/
.title
{
/*margin-top: 15px;*/
}
/* I also tried this:
.home-content h3
{
margin-top: 15px;
}
<div class="container">
<div id="header">
<h3>Sample<span> Text</span></h3>
<h4>Sample. Text. Here.</h4>
</div>
</div>
<div class="container">
<!-- Navigation -->
<div class="nav">
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
</ul>
</div>
<div class="home-content">
<div class="title">
<h3>Default<span> Text</span></h3>
</div>
</div>
</div>
Try this-
#import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Open Sans';
background-color: lightgray;
}
a {
text-decoration: none;
color: #fff;
}
div#header {
background-image: url("header_img.png");
background-size: cover;
background-repeat: no-repeat;
width: 80%;
height: 220px;
margin: 0 auto;
margin-top: 50;
color: #fff;
font-size: 22px;
}
div#header span {
font-weight: 300;
}
div#header h3 {
text-align: center;
padding-top: 85px;
}
div#header h4 {
text-align: center;
}
/*
#222222 - top nav
#F5F5F5 - sidebar background color
#FFF - sidebar link hover background color
#63B7E8 - sidebar nav link hover text color
#D8D8D8 - sidebar nav text color
50px top margin
50px bottom margin
*/
/* Navigation */
/* Nav Title */
.nav {
background-color: dimgray;
width: 80%;
height: 40px;
margin: 0 auto;
}
/* Remove bullet points on list */
.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: dimgray;
}
.nav ul li {
float: left;
}
.nav ul li a {
display: block;
color: #fff;
text-align: center;
padding: 14px;
16px;
text-decoration: none;
}
.nav ul li a:hover {
color: #099;
background-color: #fff;
}
.home-content {
width: 80%;
height: 350px;
margin: 0 auto;
margin-top: 30px;
text-align: center;
font-size: 22px;
background-color: #fff;
}
.home-content span {
font-weight: 300;
}
/* This is the Text I want to push down from the top of it's container.*/
.title {
position: relative;
top: 15px;
}
/* I also tried this:
.home-content h3
{
margin-top: 15px;
}
*/
<body>
<div class="container">
<div id="header">
<h3>Sample<span> Text</span></h3>
<h4>Sample. Text. Here.</h4>
</div>
</div>
<div class="container">
<!-- Navigation -->
<div class="nav">
<ul>
<li><a class="active" href="#">Home</a>
</li>
<li>Menu1
</li>
<li>Menu2
</li>
<li>Menu3
</li>
</ul>
</div>
<div class="home-content">
<div class="title">
<h3>Default<span> Text</span></h3>
</div>
</div>
</div>
</body>
Instead of using padding or margin, try using position and top attributes on .title as done in the snippet above.
Related
I am trying to make a check box to check on and off the nav bar, but it floats behind my nav bar, so I can't actually see it. I've tried to play with margins and spacing, but can't seem to get it to work. Eventually, I want to change the nav and header background color to white, but have been playing around with black just to try to get it to appear. If there is also an ability to change the color of the checkbox, that would be incredible too.
Code:
/* general formatting starts here */
:root {
--gd2-blue: rgb(13, 192, 255);
--gd2-gray: #a1a1a1;
--header-color: black;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
/* navigation styles start here */
#gd2-ventures-logo {
width: 150px;
height: auto;
}
header {
background: var(--header-color);
text-align: center;
position: fixed;
z-index: 999;
width: 100%;
margin-top: -67px;
height: 97px;
}
nav {
position: absolute;
text-align: left;
top: 100%;
left: 0;
background: var(--header-color);
width: 100%;
display: none;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin-bottom: 1em;
margin-left: 1em;
}
nav a {
color: var(--gd2-gray);
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
}
nav a:hover {
color: #000;
}
.nav-toggle:checked~nav {
display: block;
}
/* content styles start here */
.content {
height: 200vh;
background-color: var(--gd2-blue);
font-family: "Aldhabi", serif;
font-weight: 300;
}
h2 {
padding-top: 150px;
color: #ffffff;
text-align: center;
font-size: 40px;
}
<header>
<h1 class="logo">
<img id="gd2-ventures-logo" src="https://lh3.googleusercontent.com/RQ5b6Z9JKq5shKOTrkpM8mdlX3c0N270wCSMB-sCjuyumIXLMsbjQGUS14jmLE31ZJ8EGuFjrg4VAAolUIAnKjqTb6Z2yguvvtemLnNhEF0TGdo42Dtsj5lcsclEXS9GYIbdUWFFADo=w2400" alt="GD2 Ventures Logo">
</h1>
<input type="checkbox" class="nav-toggle">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Team</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="content">
<h2>GD<sup>2</sup> Ventures</h2>
</div>
Can't see the error to be honest.
/* general formatting starts here */
:root {
--gd2-blue: rgb(13, 192, 255);
--gd2-gray: #a1a1a1;
--header-color: white;
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* navigation styles start here */
#gd2-ventures-logo {
width: 150px;
height: auto;
}
header {
background: var(--header-color);
text-align: center;
position: fixed;
width: 100%;
padding: 2rem 0;
display: flex;
justify-content: space-around;
}
nav {
position: absolute;
text-align: left;
top: 100%;
left: 0;
background: var(--header-color);
width: 100%;
display: none;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin-bottom: 1em;
margin-left: 1em;
}
nav a {
color: var(--gd2-gray);
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
}
nav a:hover {
color: #000;
}
.nav-toggle:checked ~ nav{
display: block;
}
/* content styles start here */
.content {
height: 200vh;
background-color: var(--gd2-blue);
font-family: "Aldhabi", serif;
font-weight: 300;
}
h2 {
padding-top: 150px;
color: #ffffff;
text-align: center;
font-size: 40px;
}
<header>
<img id="gd2-ventures-logo" src="https://lh3.googleusercontent.com/RQ5b6Z9JKq5shKOTrkpM8mdlX3c0N270wCSMB-sCjuyumIXLMsbjQGUS14jmLE31ZJ8EGuFjrg4VAAolUIAnKjqTb6Z2yguvvtemLnNhEF0TGdo42Dtsj5lcsclEXS9GYIbdUWFFADo=w2400" alt="GD2 Ventures Logo">
<input type="checkbox" class="nav-toggle">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Team</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="content">
<h2>GD<sup>2</sup> Ventures</h2>
</div>
/* general formatting starts here */
:root {
--gd2-blue: rgb(13, 192, 255);
--gd2-gray: #a1a1a1;
--header-color: black;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
/* navigation styles start here */
#gd2-ventures-logo {
width: 150px;
height: auto;
}
header {
background: var(--header-color);
text-align: center;
position: fixed;
z-index: 999;
width: 100%;
margin-top: -40px;
}
nav {
text-align: left;
background: var(--header-color);
width: 100%;
display: none;
}
nav ul {
padding: 0px 0px 10px 10px;
list-style: none;
}
nav li {
margin-bottom: 1em;
margin-left: 1em;
}
nav a {
color: var(--gd2-gray);
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
}
nav a:hover {
color: #000;
}
/* content styles start here */
.content {
height: 200vh;
background-color: var(--gd2-blue);
font-family: "Aldhabi", serif;
font-weight: 300;
}
h2 {
padding-top: 150px;
color: #ffffff;
text-align: center;
font-size: 40px;
}
.nav-toggle {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function myFunction() {
var checkBox = document.getElementById("nav-toggle");
var text = document.getElementById("nav");
if (checkBox.checked == true){
nav.style.display = "block";
} else {
nav.style.display = "none";
}
}
</script>
<header>
<h1 class="logo">
<img id="gd2-ventures-logo" src="https://lh3.googleusercontent.com/RQ5b6Z9JKq5shKOTrkpM8mdlX3c0N270wCSMB-sCjuyumIXLMsbjQGUS14jmLE31ZJ8EGuFjrg4VAAolUIAnKjqTb6Z2yguvvtemLnNhEF0TGdo42Dtsj5lcsclEXS9GYIbdUWFFADo=w2400" alt="GD2 Ventures Logo">
<div>
<input type="checkbox" id="nav-toggle" class="nav-toggle" onclick="myFunction()">
</div>
</h1>
<nav id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Team</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="content">
<h2>GD<sup>2</sup> Ventures</h2>
</div>
So I've been learning front-end development recently, and this problem really bugs me. I wanted to make an on-hover animation for my links.
Here's the code
body{
background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(37,37,82,1)
35%, rgba(38,54,82,1) 100%);
color: white;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
padding:0;
margin:0;
}
#Title{
Font-size: 3em;
text-align: center;
}
/*Global*/
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
header {
background: rgb(0, 0, 0, 0.5);
min-height: 50px;
border-bottom: #ef3331 3px solid;
}
#branding {
float: left;
display: inline;
}
#branding h1 {
margin: 0;
padding: 0px;
}
header nav {
float: right;
margin: 10px;
display: inline;
}
header li {
display: inline-block;
float: left;
background-color: transparent;
}
header a {
overflow: hidden;
border-width: thick;
box-sizing: border-box;
border-radius: 5px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
background-color: transparent;
transition: 0.3s;
padding: 16px 22px;
text-align: center;
}
header a:hover {
background-color: black;
}
ul {
margin: 0;
padding: 0;
}
<header>
<div class="container" style="padding: 20px 0px;">
<div id="branding">
<h1>Anđelo Motika Design</h1>
</div>
<nav>
<ul>
<li>
<span>HOME</span>
</li>
<li> ABOUT ME </li>
<li> GALLERY </li>
</ul>
</nav>
</div>
</header>
The links keep moving during the page's loading phase. It is not what I want. I just wanna change the background of the a tag, not their position too.
Here's some screencaps to demonstrate my problem.
Just remove the below line from header a decorator in css file.
transition: 0.3s;
Also if you want to add text color while hovering , you can add this on the header a : hover
header a:hover {
background-color: black;
color: yellow;
}
I'm trying to reduce the height of my navigation bar. when I use min-height property, it adds a scrollbar to the navigation bar which makes it not so appealing. I would like to align the logo to the extreme left and the rest of the contents to the extreme right.I have attached the code below. Please help me to fix it.
.navigation {
background-color: rgba(15,58,114,0.9);
overflow-y: auto;
position: fixed;
left: 0;
top: 0;
text-align: left;
width: 100%;
z-index: 10000;
box-sizing: border-box;
}
.log {
text-align: right;
top: 0;
margin: 0 auto;
right: 0;
}
ul {
padding: 0;
}
li {
color: White;
display: inline-block;
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-weight: 300;
margin: 16px 20px;
text-transform: uppercase;
}
li a {
display: inline-block;
color: White;
text-align: Center;
padding: 14px 16px;
text-decoraton: none;
}
li a:hover {
background-color: rgba(0,0,0,0);
}
#logo {
color: #FFFFFF;
font-family: 'Vollkorn';
font-size: 34px;
padding: 0px 50px;
text-align: center;
}
<div class="navigation">
<ul>
<li id="logo">LOGO</li>
<div class="log">
<li>LOGIN</li>
<li>JOIN WITH US</li>
</div>
</ul>
</div>
your logo and below that your menu list - that's the problem
make its side by side
.navigation ul {
display: flex;
}
.navigation {
background-color: rgba(15,58,114,0.9);
overflow-y: auto;
position: fixed;
left: 0;
top: 0;
/*text-align: left;*/
width: 100%;
z-index: 10000;
box-sizing: border-box;
}
.navigation ul {
display: flex; /* new line added */
}
#logo {
flex: 2; /* new line added */
}
.log {
/*text-align: right;*/
top: 0;
margin: 0 auto;
right: 0;
display: flex; /* new line added */
flex: 8; /* new line added */
justify-content: flex-end; /* new line added */
}
ul {
padding: 0;
}
li {
color: White;
display: inline-block;
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-weight: 300;
margin: 16px 20px;
text-transform: uppercase;
}
li a {
display: inline-block;
color: White;
text-align: Center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: rgba(0,0,0,0);
}
#logo {
color: #FFFFFF;
font-family: 'Vollkorn';
font-size: 34px;
padding: 0px 50px;
text-align: center;
}
<div class="navigation">
<ul>
<li id="logo">LOGO</li>
<div class="log">
<li>LOGIN</li>
<li>JOIN WITH US</li>
</div>
</ul>
</div>
You had the scroll bar because the contents were too big and you had overflow-y: auto; Overflow controls the behavior when the contents are too big for the parent div size.
The float property can be used to move elements to different sides of the viewer in a consistent manner.
Your code is still not responsive and will not display correctly on screens smaller that 365px wide. The support range will get smaller if you add more menu items.
There are a lot of resources you can check out for making a responsive menu
Is this what you wanted?
body {
margin: 0 auto;
padding: 0
}
.navigation {
background-color: rgba(15, 58, 114, 0.9);
position: fixed;
height: 60px;
line-height: 60px; /* needs to be the same height as your navigation div */
top: 0;
width: 100%;
z-index: 10000;
}
.log {
float: right; /* pulls the div to the right side */
}
ul {
padding: 0;
margin: 0 auto;
}
li {
color: White;
display: inline-block;
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-weight: 300;
margin: 0 auto;
text-transform: uppercase;
}
li a {
color: White;
text-align: Center;
padding: 0 10px;
text-decoration: none;
}
li a:hover {
color:wheat;
}
#logo {
color: #FFFFFF;
font-family: 'Vollkorn';
font-size: 34px;
padding: 0px 10px;
float: left; /* pulls the div to the left side */
}
<div class="navigation">
<ul>
<li id="logo">LOGO</li>
<div class="log">
<li>LOGIN</li>
<li>JOIN WITH US</li>
</div>
</ul>
made Changes to your HTML and CSS
div with class log is a block level element, means it occupies 100% width of the page, make them display:inline-block and float it to right, make the logo wrap in a div and float it to left. since we are having two float elements navigation bar height gets collapsed to avoid it we need to add clearfix
HTML
<div class="navigation clearfix">
<div class="logo">LOGO</div>
<div class="menu">
<ul>
<li>LOGIN</li>
<li>JOIN WITH US</li>
</ul>
</div>
</div>
CSS
.navigation {
background-color: rgba(15,58,114,0.9);
overflow-y: auto;
position: fixed;
left: 0;
top: 0;
text-align: left;
width: 100%;
z-index: 10000;
box-sizing: border-box;
}
.logo{
float:left;
display:inline-block;
}
.logo a{
padding:8px 2px;
color:#fff;
display:block;
}
.menu{
float:right;
}
.clearfix::after{
content:"";
display:table;
width:100%;
}
.menu ul{
padding:0px;
list-style-type:none;
margin:0;
}
.menu ul li{
display:inline-block;
}
.menu ul li a{
color:#fff;
padding:8px 2px;
display:block;
}
Link For reference
style accordingly
hope this helps..
I've done a little change in the style:
.navigation {
background-color: rgba(15, 58, 114, 0.9);
overflow-y: auto;
position: fixed;
left: 0;
top: 0;
right: 0;
text-align: left;
width: 100%;
z-index: 10000;
box-sizing: border-box;
}
.log {
margin: 0 auto;
float: right;
}
ul {
padding: 0;
}
li {
color: White;
list-style: none;
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-weight: 300;
text-transform: uppercase;
float: right;
}
li a {
display: inline-block;
color: White;
text-align: Center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: rgba(0, 0, 0, 0);
}
#logo {
color: #FFFFFF;
font-family: 'Vollkorn';
font-size: 34px;
padding: 0px 50px;
text-align: center;
float: left !important;
margin-top: -10px;
}
<div class="navigation">
<ul>
<li id="logo">LOGO</li>
<div class="log">
<li>LOGIN</li>
<li>JOIN WITH US</li>
</div>
</ul>
</div>
How am I able to center the photo with the text, without minimizing the photo itself?
I've tried; max-height: xx, but that wasn't it.
The photo is centered in height, but not the text. How's this possible?
http://jsfiddle.net/gLpqoamn/
.hoyre{
background-color:#f19f00;
}
.hoyre:hover{
background-color:#d98500;
}
header{
background-color: white;
}
.logo{
width: 57px;
height: 34px;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
text-transform: uppercase;
width: 100%;
color: black;
}
li {
float: left;
}
li a {
display: block;
text-align: center;
padding: 20px 20px;
text-decoration: none;
color: black;
}
li a:hover {
color: #f19f00;
}
body{
margin:0;
font-family: 'Roboto', sans-serif;
background-color: #333;
}
.container{
max-width:1300px;
margin-left:auto;
margin-right:auto;
}
.active {
position: relative;
}
</style>
<body>
<header>
<div class="container">
<ul>
<li><img src="http://i.imgur.com/QAEzQxp.png" class="logo"></li>
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li class="hoyre" style="float:right;">Donate</li>
</ul>
</div>
</header>
</body>
I would use flex on the ul, then you can use align-items to vertically center or position the children. A margin-left: auto on the last link will push it to the right, then you can move the background color to the link to keep it from stretching the height of the parent
.hoyre {
margin-left: auto;
background-color: #f19f00;
min-height: 100%;
align-self: stretch;
display: flex;
align-items: center;
}
.hoyre:hover {
background-color: #d98500;
}
header {
background-color: white;
}
.logo {
width: 57px;
height: 34px;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
text-transform: uppercase;
width: 100%;
color: black;
display: flex;
align-items: center;
}
li {}
li a {
display: block;
text-align: center;
padding: 20px 20px;
text-decoration: none;
color: black;
}
li a:hover {
color: #f19f00;
}
body {
margin: 0;
font-family: 'Roboto', sans-serif;
background-color: #333;
}
.container {
max-width: 1300px;
margin-left: auto;
margin-right: auto;
}
.active {
position: relative;
}
</style>
<body>
<header>
<div class="container">
<ul>
<li>
<img src="http://i.imgur.com/QAEzQxp.png" class="logo">
</li>
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li class="hoyre">Donate</li>
</ul>
</div>
</header>
</body>
For using height:100% in your css you should define parent element height first. then you change li element to behave like table and fill 100% height.
Update your styles like this(new styles have comment in front of them):
li {
float: left;
height: 100%; /*fill height */
display: table; /* behave as table*/
}
li a {
display: table-cell; /* behave as table-cell then you can use vertical alignment*/
vertical-align: middle;
text-align: center;
padding: 20px 20px;
text-decoration: none;
color: black;
height: 100% ; /*fill height */
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
text-transform: uppercase;
width: 100%;
color: black;
height: 80px; /*define height for using height:100% for child elements */
}
I am trying to display logo at top end in HTML and CSS.
However, the logo image size is not reduced to the specified width and height and I do not see it being overridden anywhere else.
Code is as follows:
/*********************************************************************************/
/* Banner */
/*********************************************************************************/
#banner
{
overflow: hidden;
height: 300px;
position: relative;
background: url(images/pic01.jpg) no-repeat center;
background-size: cover;
}
#banner .image
{
}
#banner p{
position: absolute;
top:30%;
left: 40%;
width: 100px;
padding: 5px;
margin: 5px;
font-family: 'Lobster', cursive;
font-weight: bold;
font-size: 55px;
color: #fff;
}
/** MENU */
#menu-wrapper
{
background: #16a085;
overflow:auto;
}
#menu {
overflow: hidden;
height: 100px;
float:left;
}
#menu ul {
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: normal;
text-align: center;
}
#menu li {
display: inline-block;
}
#menu a {
display: block;
letter-spacing: 1px;
padding: 0px 40px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-size: 0.80em;
line-height: 100px;
border: none;
color: #FFF;
}
#menu a:hover, #menu .current_page_item a {
text-decoration: none;
}
#menu .current_page_item a {
background: #1abc9c;
}
#Logo{
width:10px;
height:30px;
float: left;
margin-top: 5px;
}
<div id="wrapper">
<div id="menu-wrapper">
<div id = "Logo" >
<img src="images/Logo.jpg" ></img>
</div>
<div id="menu" class="container">
<ul>
<li class="current_page_item">Homepage</li>
<li>About</li>
<li>Blog</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
/*and so on */
</div>
It looks like this:
White part in the banner is image that is taking up the width despite of having set width attribute to 10 px.
In your CSS. change the style for #Logo to #Logo img{}. you have to set the width to img tag. Not its parent container.
#Logo img{
width:100px;
height:30px;
float: left;
margin-top: 5px;
}
JS Fiddle