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.
Related
I cannot get hover to work on the dummy links in my CodePen. The cursor won’t even change to the hand icon. I am referring to the navigation bar, the dummy links do not work properly. Here is the CodePen
* {
box-sizing: border-box;
}
body {
width: 100%;
margin: 0 auto;
padding: 0;
background-image: url("wallpaper2.jpg");
background-repeat: repeat;
}
.header {
width: 100%;
background: black;
height: 100px;
color: white;
}
.wrapper {
margin: 0 auto;
width: 75%;
background: pink;
height: 1000px;
}
h1 {
margin: 0 auto;
position: relative;
top: 30px;
left: 15px;
font-size: 2em;
}
ul {
list-style-type: none;
float: right;
margin: auto;
}
li {
display: inline-block;
padding-left: 20px;
font-size: 1.4em;
}
.lastlist {
padding-right: 65px;
}
a:hover {
color: #f0c330;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="gallery.css">
</head>
<body>
<div class="header">
<nav>
<h1>Daniel Savva</h1>
<ul>
<li> Home </li>
<li> Gallery </li>
<li> About </li>
<li class="lastlist"> Contact </li>
</ul>
</nav>
</div>
<div class="wrapper"></div>
<div class="column"></div>
</body>
</html>
Your h1 tag is overlapping the ul tag
Solution is to add position:relative to your ul tag :)
Because Without any z-index value, elements stack in the order that they appear in the DOM and elements with non-static positioning ( relative ,absolute ..) will always appear on top of elements with default static positioning.
h1 : position:relative
ul : default static position
Adding position:relative will force your ul element to be on TOP.
* {
box-sizing: border-box;
}
body {
width: 100%;
margin: 0 auto;
padding: 0;
background-image: url("wallpaper2.jpg");
background-repeat: repeat;
}
.header {
width: 100%;
background: black;
height: 100px;
color: white;
}
.wrapper {
margin: 0 auto;
width: 75%;
background: pink;
height: 1000px;
}
h1 {
margin: 0 auto;
position: relative;
top: 30px;
left: 15px;
font-size: 2em;
}
ul {
list-style-type: none;
float: right;
margin: auto;
position : relative ;
}
li {
display: inline-block;
padding-left: 20px;
font-size: 1.4em;
}
.lastlist {
padding-right: 65px;
}
a:hover {
color: #f0c330;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="gallery.css">
</head>
<body>
<div class="header">
<nav>
<h1>Daniel Savva</h1>
<ul>
<li> Home </li>
<li> Gallery </li>
<li> About </li>
<li class="lastlist"> Contact </li>
</ul>
</nav>
</div>
<div class="wrapper"></div>
<div class="column"></div>
</body>
</html>
I'm making a website from scratch and all I currently have is the NAV bar. But I figured I'd get this problem solved before I continue on with development. Anytime I minimise the browser, my nav bar will not stay in a straight line. I've included the code below. The text editor I use is Brackets, I've tried multiple things for the past week but nothing has worked.
//CSS
body {
margin: 0;
background-color: beige;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.container {
width: 86.5%;
margin: 0 auto;
}
.header {
background-color: grey;
width: 100%;
top: 0px;
position: fixed;
}
.header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 0.5%;
}
nav {
float: right;
position: relative;
top: 0px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 99px;
padding-top: 25px;
position: relative;
}
//HTML
<!doctype html>
<html>
<head>
<link href="MPstyle.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<title>M/P</title>
</head>
<body>
<div class="header">
<div class="container">
<img src="logo.png" alt="logo" class="logo" width="50" height="50">
<nav>
<ul>
<li> Home</li>
<li> About</li>
<li> Portfolio</li>
<li> Contact</li>
</ul>
</nav>
</div>
</div>
</body>
You are probably looking for something like this.
When I'm stuck with a layout and I cannot get it right, I start by adding borders to each element. This way you see how each element is spaced on the page and based on that I start to tweak CSS properties to place items in its place. Obviously, the more you work with CSS the easier it gets. Once I'm happy with the layout I then remove the borders.
Adjustments I've made:
Made the header full width so it covers the entire width of the page
Gave the logo 20% width of the page.
The remaining space 80% is taken up by the menu
Then each list-item is allowed to take up 20%.
If you resize the page, you'll see that by using percentages it will assign space properly. I hope this helps you along and good luck with the rest of the page.
//CSS
body {
margin: 0;
background-color: beige;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.container {
margin: 0 auto;
}
.header {
background-color: grey;
width: 100%;
top: 0px;
position: fixed;
border: 1px solid black;
}
.logo {
float: left;
width: 19%;
border: 1px solid blue;
}
nav {
float: right;
position: relative;
top: 0px;
width: 80%;
border: 1px solid yellow;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
text-align: center;
}
nav li {
position: relative;
display: inline-block;
width: 20%;
margin: 1rem 0;
border: 1px solid red;
}
//HTML
<!doctype html>
<html>
<head>
<link href="MPstyle.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<title>M/P</title>
</head>
<body>
<div class="header">
<div class="container">
<img src="logo.png" alt="logo" class="logo" width="50" height="50">
<nav>
<ul>
<li> Home</li>
<li> About</li>
<li> Portfolio</li>
<li> Contact</li>
</ul>
</nav>
</div>
</div>
</body>
<!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.
My navigation bar cannot click any item except the last item. I have checked and follow the tutorial from youtube but unfortunately I checked code is same but not working at all please anyone got solution please share to me.
Here's My html
<html>
<title>UIA | Homepage</title>
<link href="Homepage.css" rel="stylesheet" type="text/css">
<header>
<div class="row">
<div class="logo">
<img src = "Logo.png">
</div>
<ul class="main-nav">
<li class = "active"> Home </li>
<li> Promotion </li>
<li> Booking </li>
<li> SignIn </li>
<li> About </li>
</ul>
</div>
<div class="title">
<h1>Ready for another adventure?</h1>
</div>
</header>
And here's my CSS.
*{
margin: 0;
padding: 0;
}
header{
background-image:
linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)), url(Homepage.jpg);
height:100vh;
background-position:center;
background-size: cover;
}
.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: 150px;
height: auto;
margin-top:10px;
float: left;
}
.row{
max-width: 1200px;
margin: auto;
}
.title{
position:absolute;
width: 1200px;
margin-left: 0;
margin-top: 0;
}
h1{
color: white;
font-size: 60px;
text-align: center;
margin-top: 255px;
}
So did I miss out something please advice me Thank you.
.title is overlapping the menu.
You can give the menu a higher z-index to ensure it is on top.
Information about z-index
updated code below
* {
margin: 0;
padding: 0;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(Homepage.jpg);
height: 100vh;
background-position: center;
background-size: cover;
}
.main-nav {
float: right;
list-style: None;
margin-top: 30px;
/* added */
position: relative;
z-index: 100;
}
.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: 150px;
height: auto;
margin-top: 10px;
float: left;
}
.row {
max-width: 1200px;
margin: auto;
}
.title {
position: absolute;
width: 1200px;
margin-left: 0;
margin-top: 0;
}
h1 {
color: white;
font-size: 60px;
text-align: center;
margin-top: 255px;
}
<header>
<div class="row">
<div class="logo">
<img src="Logo.png">
</div>
<ul class="main-nav">
<li class="active"> Home </li>
<li> Promotion </li>
<li> Booking </li>
<li> SignIn </li>
<li> About </li>
</ul>
</div>
<div class="title">
<h1>Ready for another adventure?</h1>
</div>
</header>
It is because you do not use clearfix on your floated element parent(similar issues will occur on all floated stuff if you don't use clearfix).
Add this to your css file:
.clearfix:after {
content: "";
display: table;
clear: both;
}
And add clearfix to parent of floated element, in this case to:
<div class="row clearfix">
I recommend reading these two(will come in handy in the future):
https://css-tricks.com/all-about-floats/
https://css-tricks.com/snippets/css/clear-fix/
Just in case, here is a link to jsfiddle with solution to your issue: https://jsfiddle.net/mwgjycv4/1/
I am able to correctly align the menu bar when the browser is not resized. Once i start zooming out , the content in the menu bar comes below , I am currently concentrating on zooming out the menu.
please advice me what must be the problem, and is there any way i can keep the menu items from wrapping .
<body>
<div id="wrapper">
<div id="header">
<div id="logo">CodePlayer </div>
<div id="run_btn"> <button id="run"> Run </button> </div>
<ul id="menu">
<li> HTML </li>
<li> CSS </li>
<li> JS </li>
<li> Result </li>
</ul>
<div class="clear"> </div>
</div>
</div>
</body>
CSS
body {
padding: 0;
margin: 0;
}
#wrapper {
width: 100%;
}
#header {
width: 100%;
background-color: #EDEDED;
height: 40px;
}
#header #logo {
font-weight: bold;
font-family: Helvetica;
font-size: 0.9em;
padding: 10px 10px;
float: left;
}
#header #menu {
width: 220px;
margin: 0 auto;
border: 1px solid grey;
border-radius: 3px;
height: 27px;
position: relative;
top: 5px;
padding-left: 0px;
padding-right: 0px;
}
#header ul li {
float: left;
list-style-type: none;
padding: 5px 10px;
border-right: 1px solid grey;
font-size: 1em;
}
#header ul li:last-child {
border-right: none;
}
#run_btn {
float: right;
padding: 5px 10px 0 0;
}
#run_btn #run {
font-size: 120%;
}
.clear {
clear: both
}
link
It does not work in the responsive layout . so the solution would be wither use the #media-queries or u can use the bootstrap grid layout , where u can put header as a row and giving the 3 columns of size 4 i.e 'col-md-4',
this will keep the code intact with the window resize.