<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class = "wrapper">
<header>
<div class = "CentralHeader">
<div class = "LinkBar" id = "HeaderBar" >All</div>
<div class = "SampleMenu">
<ul>
<li>Movies</li>
<li>Events</li>
<li>Sports</li>
<li>Plays</li>
</ul>
</div>
</div>
</header>
<main>
<div class = "main">
<div class = "TopMovies" >
</div>
<div class = "JustForYou">
</div>
</div>
</main>
</div>
</body>
<style type="text/css">
.wrapper{
height: 100vh;
display: flex;
flex-direction:column;
}
header{
height: 400px;
border-bottom: 4px solid beige;
}
main{
flex:1
}
.LinkBar {
cursor: pointer;
width: 140px;
height: 37px;
border: 1px solid #c02c3a;
margin-top: 50px;
margin-left: 300px;
background-color: #c02c3a;
text-align: center;
padding-top: 9px;
color: white;
display: inline-block;
}
div.SampleMenu ul {
list-style-type: none;
width: 140px;
background-color: Grey;
margin-left: 300.5px;
padding: 0;
margin-top: 0px;
display: none;
border-top: 2px solid #fff;
}
div.SampleMenu ul li {
color: White;
padding: 0;
}
div.SampleMenu ul li a {
color: white;
display: block;
padding: 10px;
font-size: large;
text-align: center;
}
#HeaderBar:hover~.SampleMenu ul,
.SampleMenu ul:hover {
display: block;
}
.main{
width:auto;
height: 500px;
border:2px groove red;
}
</style>
</body>
</html>
In the above segment,the container space of "header" is altered on hovering the LinkBar.On hovering ,the dropdown is displayed with the mentioned height for the header but in normal state,header height is decreased.When the CSS property for the wrapper tag is removed ,the functionality i.e container space for header is available as mentioned in CSS (400px).What is causing the height of the header to be dynamic?
If you want the menu to overlap the header, you need to add "position: absolute;" to the menu (div.SampleMenu ul in your case to be specific) and "position: relative;" to the header.
You should read more about the ways of positioning and how they interact with each other.
Related
Am having layout issues, trying to understand floats and how to position elements. Am very new to css/html. Could someone help me understand how this layout is going to work. Some problems:
1) Unable to change the height of footer without ruining layout, footer seems to get pushed upwards.
2) When i inspect the page through chrome the footer div is included inside the 'wrapper' div when it's outside it in the code.
3) Adding padding to the content div also seems to break the layout
<!DOCTYPE html>
<html lang="en">
<head>
<title>DCW</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<!--NAV BAR -->
<nav>
<ul>
<div class="float-left">
<li><a class="active" href="default.asp">PD</a></li>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
</div>
<div class="float-right">
<li>Hire Us!</li>
</div>
</ul>
</nav>
<!-- HEADER -->
<header>
<div id="title_wrapper">
</div>
</header>
<!-- BODY CONTENT -->
<div id="wrapper">
<div id="content">
<div class="info">
col1
</div>
<div class="info">
col2
</div>
</div>
<!-- SIDEBAR -->
<div id="sidebar">
<div id="sidebar-text">
content 2
</div>
</div>
</div>
<!-- FOOTER -->
<footer>
Footer
</footer>
</body>
CSS:
html, body
{
width: 100%;
height: 100%;
margin:0;
padding: 0;
}
p.thick {
font-weight: bold;
}
h1, p {
padding: 0;
margin: 0;
}
/*Nav */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav li {
float: left;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
nav li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.float-left {
float:left;
}
.float-right {
float:right;
}
/* Header */
header #title_text{
font-size: 100px;
font-family: arial;
}
header #title_wrapper{
text-align:center;
position: relative;
top: 200px;
}
header {
background-color: orange;
position: relative;
height:100%;
width: 100%;
color:white;
margin:0;
}
/*Content*/
#wrapper{
min-height: 70%;
height: auto;
height: 70%;
}
#content{
float:left;
width:100%;
height: 100%;
text-align: center;
}
#sidebar{
float: left;
background-color: lightgrey;
height: 75%;
text-align: center;
width: 100%;
}
#sidebar-text{
font: 14px/22px normal helvetica, sans-serif;
padding-top: 30px;
text-decoration: none;
line-height: 200%;
}
.img-circle {
border-radius: 50%;
}
.info{
width: 50%;
float: left;
}
blockquote.style2 {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
outline-style: double;
outline-color: lightgrey;
}
/* footer */
footer{
background-color: orange;
}
Cheers
I did make a +200px padding content with a +200px footer. Didn't changed anything besides the display:inline-block on the footer plus box-sizing: border-box; on the content.
html, body
{
width: 100%;
height: 100%;
margin:0;
padding: 0;
}
p.thick {
font-weight: bold;
}
h1, p {
padding: 0;
margin: 0;
}
/*Nav */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav li {
float: left;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
nav li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.float-left {
float:left;
}
.float-right {
float:right;
}
/* Header */
header #title_text{
font-size: 100px;
font-family: arial;
}
header #title_wrapper{
text-align:center;
position: relative;
top: 200px;
}
header {
background-color: orange;
position: relative;
height:100%;
width: 100%;
color:white;
margin:0;
}
/*Content*/
#wrapper{
min-height: 70%;
height: auto;
height: 70%;
}
#content{
float:left;
width:100%;
height: 100%;
text-align: center;
padding:100px;
box-sizing: border-box;
}
#sidebar{
float: left;
background-color: lightgrey;
height: 75%;
text-align: center;
width: 100%;
}
#sidebar-text{
font: 14px/22px normal helvetica, sans-serif;
padding-top: 30px;
text-decoration: none;
line-height: 200%;
}
.img-circle {
border-radius: 50%;
}
.info{
width: 50%;
float: left;
}
blockquote.style2 {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
outline-style: double;
outline-color: lightgrey;
}
/* footer */
footer{
display: inline-block;
background-color: orange;
height:200px;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>DCW</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<!--NAV BAR -->
<nav>
<ul>
<div class="float-left">
<li><a class="active" href="default.asp">PD</a></li>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
</div>
<div class="float-right">
<li>Hire Us!</li>
</div>
</ul>
</nav>
<!-- HEADER -->
<header>
<div id="title_wrapper">
</div>
</header>
<!-- BODY CONTENT -->
<div id="wrapper">
<div id="content">
<div class="info">
col1
</div>
<div class="info">
col2
</div>
</div>
<!-- SIDEBAR -->
<div id="sidebar">
<div id="sidebar-text">
content 2
</div>
</div>
</div>
<!-- FOOTER -->
<footer>
Footer
</footer>
</body>
It is not necessary to give width and height as 100% for html and body or div in css width is 100% by default. You can mention the width only when it is required.
for giving height to footer just add clear:both for footer selector
footer{background-color: orange;clear:both;height:50px;}
this will solve problems 1 & 2. When you add padding the design breaks because each time when you add width it keeps adding to the current width already given to the same div or element. This can be solved either by re adjusting the element width or using box-sizing: border-box.
I have to make a website for computer science at school and I have a problem with centering the menu bar. I want it to be centered around the menu button, but it puts the icon off-center the way I do it.
How can I center the entire menu around the central li element?
Here's the code:
body {
background-color: /*#C94421*/
#353535;
margin: 0;
/* reset de standard marges van de body -> geen randen links en rechts naast .menuBar div */
text-align: center;
}
.menuBar {
height: 70px;
width: 100%;
}
.menuBar img {
text-align: center;
}
.menuBar ul li {
display: inline;
padding-right: 65px;
line-height: 70px;
}
.menuBar ul li a {
color: white;
text-decoration: none;
line-height: 70px;
font-family: 'Raleway', sans-serif;
font-size: 36px;
width: 100px;
}
.menuBar a:hover {
border-bottom: 1px solid white;
}
.jumbotron .container {
height: 550px;
width: 60%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
border-top: 4.5px double white;
border-bottom: 4.5px double white;
}
<!DOCTYPE html>
<html>
<head>
<title> Homepagina </title>
<link rel="stylesheet" type="text/css" href="main.css">
<link href='https://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
</head>
<body>
<div class="menuBar">
<ul>
<li> Over mij </li>
<li> Hobbies </li>
<li>
<img src="logoNaam.jpg">
</li>
<li> Muziek </li>
<li> Waarom informatica </li>
</ul>
</div>
<div class="jumbotron">
<div class="container">
hoi
</div>
</div>
</body>
</html>
Here are the changes in the code :
You have to add :
.menuBar ul{
padding-left: 0px;}
also relace this :
.menuBar ul li {
display: inline;
padding-right: 65px;
line-height: 70px;}
with
.menuBar ul li {
display: inline-block;
width: 150px;
padding-right: 15px;
line-height: 70px;}
Also remove width: 100px; from .menuBar ul li a
Better to reduce the font size to get it well aligned in the frame.
I got the image centered using a flexbox layout. The image is always in the exact center of the page, and the menu items flow to the left and right of the centered image.
I adjusted the font sizes and padding so that it shows up well in the demo. I also needed to change the li to div to get the menu to work semantically after the changes.
Live Demo:
body {
background-color: /*#C94421*/ #353535;
margin: 0; /* reset de standard marges van de body -> geen randen links en rechts naast .menuBar div */
text-align: center;
}
.menuBar {
height: 70px;
width: 100%;
}
.menuBar img {
text-align: center;
}
.menuBar {
display: flex;
}
.menuBar > div {
display: block;
line-height: 70px;
flex-basis: 0;
flex-grow: 1;
}
.left {
text-align: right;
}
.right {
text-align: left;
}
.menuBar > div > div {
display: inline-block;
padding: 0 15px;
}
.menuBar > div.central {
flex-basis: auto;
flex-grow: 0;
padding: 0 15px;
}
.menuBar > div a {
color: white;
text-decoration: none;
line-height: 70px;
font-family: 'Raleway', sans-serif;
font-size: 14px;
width: 100px;
}
.menuBar a:hover {
border-bottom: 1px solid white;
}
.jumbotron .container {
height: 550px;
width: 60%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
border-top: 4.5px double white;
border-bottom: 4.5px double white;
}
<div class="menuBar">
<div class="left"><div> Over mij </div>
<div> Hobbies </div></div>
<div class="central"> <img src="logoNaam.jpg"> </div>
<div class="right">
<div> Muziek </div>
<div> Waarom informatica </div>
</div>
</div>
<div class="jumbotron">
<div class="container">
hoi
</div>
</div>
JSFiddle Version: https://jsfiddle.net/2ejfdoc3/1/
I'm trying to make a website with an image horizontally aligned with a navigation bar, but I cant figure out how. I've tried floating, but all it does is put the picture on top of the navigation bar. Maybe I'm doing it wrong?
Thanks!
CSS and HTML-
#logo {
float: left;
width: 550px;
height: 250px;
}
#navbar {
background-color: #E66916;
border: 3px solid #FFFFFF;
width: 800px;
height: 250px;
}
a {
color: #FFF;
font-family: Baumans;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #FFDAC2;
}
li {
display: inline;
padding: 50px;
}
ul {
text-align: center;
list-style-type: none;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>My Physical Fitness Tracker</title>
<style>
</style>
</head>
<body>
<header>
<img id="logo" src="file:///C:/Documents%20and%20Settings/Owner/Desktop/Commander%20%20Outpost/IMAGES/MPFT.png" alt="Personal Physical Fitness Tracker" />
<div id="navbar">
<nav>
<ul>
<li>home
</li>
<li>about
</li>
<li>myfitness
</li>
<li>confidencebooster
</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
Set display:inline-blockto #logo and #navbar
CSS
#logo {
float: left;
width: 550px;
height: 250px;
display: inline-block;
}
#navbar {
background-color: #E66916;
border: 3px solid #FFFFFF;
width: 800px;
height: 250px;
display: inline-block;
}
DEMO HERE
Note: You need to horizontal expand the browser because your image and menu have a size...you must expect that!
If you want to force it you must set white-space:nowrap on header
CSS
header{
white-space:nowrap;
}
DEMO HERE
Fiddle for context http://jsfiddle.net/1f050smo/1/
You can set #logo and #navbar to display: inline-block;
You also need to set vertical-align: top to both the #logo and #navbar elements as the default value is baseline, which would place #navbar toward the bottom of #logo.
#logo,
#navbar {
display: inline-block;
vertical-align: top;
}
and remove the float from #logo
#logo {
width: 500px;
height: 250px;
}
I am going through a tutorial right now but for some reason my code (even though it looks the same) it won't display correctly. I was hoping someone could explain why the header doesn't display black across the top and the image won't auto size.
<html>
<head>
<title> Englightenment Web Site </title>
<style type = "text/css">
* {margin: 0; padding: 0;}
body {
font-family: arial;
background-color: #ebebeb;
}
#header {
background-color: black;
height: 100px;
width: 100px;
}
.container {
width: 960px;
height: auto;
margin: 0 auto;
}
#logoArea {
width: 300px;
height: 100px;
background-image: url(tree.jpg);
float: left;
}
#navArea
{
height: 100px;
float: right;
}
#nav
{
list-style: none;
margin-top: 30px;
}
#nav a
{
color: white;
text-decoration: none; /*removes underline*/
}
#nav li
{
float: left;
margin-left:30px;
background-color: #252525;
padding: 8px;
bording: 1px solid silver;
border-radius: 5px;
}
#nav li:hover
{
background-color: gray;
}
.page
{
background-color: white;
padding: 20px;
}
</style>
</head>
<body>
<div id = "header">
<div class = "container">
<div id = "logoArea"></div>
<div id = "navArea">
<ul id = "nav">
<li> Home </li>
<li> Forum </li>
<li> Enlightener </li>
<li> Contact </li>
</ul>
</div>
</div>
</div>
<div id = "mainArea">
<div class = "container page">
<h3> One Can't Understand without First Listening </h3>
</div>
</div>
</body>
</html>
So I resized the original image to fix the size of my css format for the logo. It now works. Guess you need an exact pic size initially? Seems a little off but oh well I got it to fix.
I am having trouble getting my menu items to align next to my logo, within my navbar. My menu items are appearing just below my logo and to the right, the horizontal position is correct, I need to adjust the vertical position up so that the items are in line and within the navigation bar.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Serving Grace - Home</title>
<!-- Stylesheet -->
<link href="Private/stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="content">
<nav id="nav">
<ul>
<li><img src="Logo/logo.png"/></li>
<li>Home</li>
<li>About</li>
<li>Volunteer</li>
<li>Donate</li>
<ul>
</nav>
<div id="image">
<img src="Images/Content.png"/>
</div>
<div id="info">
<img src="Images/info.png"/>
</div>
<div id="footer">
<img src="Images/Facebook.fw.png">
<img src="Images/Twitter.fw.png">
<img src="Images/Google.fw.png">
<p id="copyright">© 2013 Jeffery Evans</p>
</div>
</div>
</body>
</html>
CSS
body {
background-color: #C8C8C8;
}
#content {
width: 1090px;
height: 900px;
background-color: white;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 3px 5px #888;
min-height: 100%;
position: relative;
}
#nav {
background-color: #222222;
height: 100px;
border: 1px solid black;
}
#nav li {
text-decoration: none;
display: inline;
margin: 25px 20px 10px 10px;
font-family: Arial;
color: #F59239;
position: relative;
}
#nav li a {
text-decoration: none;
color: #F59239;
font-family: Arial;
font-size: 18px;
}
#logo {
padding-right: 300px;
position: inline-block;
}
#nav li a:hover {
color: #222222;
}
#image {
top: 100px;
position: relative;
float: left;
left: 15px;
}
#info {
top: 100px;
position: relative;
float: left;
left: 30px;
}
#footer {
display: table-cell;
width: 1090px;
height: 70px;
background-color: #222222;
bottom: 0;
position: absolute;
}
#footer a {
margin-left: 15px;
}
#copyright {
color: white;
text-align: center;
vertical-align: middle;
}
instead of
#nav {
height: 100px;
}
try something like
#nav {
line-height: 100px;
}
if that doesn't work, then also try using line-height for your nav li and/or nav a
THE EASIEST WAY would be to do something just like this
#logo {
padding-top: 10px;
}
That will just push the logo down by 10px , adjust accordingly
If the logo.png is very wide, it may be pushing the menu items to the next line. I tried your code a with small gif for the logo and it worked fine (image and menu text were aligned at bottom) in both Firefox and Chrome.