I have made two separate sections with two separate backgrounds. Why aren't these two divs showing up.
I am trying to have the Navbar on the top, and then another section not connected to the Navbar below it but it's just not even showing up at all, and I'd like to know why. Thanks guys!
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Hair by Michelle
</title>
<link rel="stylesheet" type="text/css" href="home.css">
</head>
<body>
<div class="all">
<div class="navbar">
<ul> <h1>Hair By Michelle</h1>
<li class="home">home</li>
<li class="about">about</li>
<li class="availability">appointments</li>
<li class="contact">contact</li>
</ul>
</div>
<img class="pic1" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7" alt="Photo of Michelle">
</div>
<div class="hours">
<h1>Hours</h1>
</div>
</div>
CSS
body {
background: gray;
background-image: url("http://i.jootix.com/r/abstract-hair-design-abstract-hair-design-1920x1080.jpg")
}
.navbar {
text-align: center;
background-color: #323232;
position: fixed;
width: 100%;
z-index:100;
}
.navbar h1 {
text-align: center;
text-shadow: -2px 1px 13px;
color: white;
}
.navbar li {
display: inline;
border-right: 2px solid black;
margin: 10px;
padding-right: 25px;
color: white;
}
.navbar li:last-child {
border-right:none;
}
.navbar li a{
text-decoration: none;
text-shadow: 2px;
}
.navbar li a:link {
color: white;
}
.navbar li a:visited {
color: white;
}
.navbar li a:active {
color: green;
}
.navbar li a:hover {
color: brown;
}
.pic1 {
width: 200px;
height: 200px;
border-radius: 100%;
margin-top:5px;
position: absolute;
z-index: 200;
}
.hours h1 {
background-color: #323232;
z-index: 300;
}
It's there but it's hidden behind your navbar and picture. You have set the navbar and image to position: fixed and position: absolute so they are removed from the flow of the DOM. The <h1> is sitting at the top because it is IN the flow of the DOM and is basically the first element as far as that's concerned. If you set the padding: "150px" you can at least see it.
You should probably think about restructuring a bit. Check out this for some good info on positioning.
The position: fixed style of the navbar is preventing the second H1 from appearing, for in this way it lays under the navbar. If you want the navbar always visible independently of the vertical scrolling state of the rest of the page, maybe adding a vertical padding to the hours div would do:
.hours {
padding-top: 100px;
}
At First, your have to improve your typesetting, which make yourself figure out nested html easily.
For Example.
<html>
<head>
</head>
<body>
<div class="all"></div>
<div class="hours">
<h1>Hours</h1>
</div>
</body>
</html>
you can realize the nested relation with a glance.
After typesetting, we can find the extra , I'm not sure if it is beneath < img > or < h1 >hours< /h1 >
Finally, I think you mean you want to show the hours under navbar. Add things below,
.all {
position: relative;
}
.hours {
position: relative;
top:120px;
}
it may match your requirement.
Related
Apologies for the rather stupid question. I am quite new to creating HTML web pages and I am just working on a basic homepage. I can't get the navbar background-color to change to any color but the :hover and the .active appear to work. I have been stuck on this for a couple of days looking it up on internet and moving code around to see whether it makes a difference...
Please excuse all the mistakes I probably would have made and thanks in advance!
I just get a bit demotivated when I hit a wall that seems rather simple.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.header {
background-color: white;
padding: 15px;
position: sticky;
top: 0;
}
<!-- Menu CSS -->
.topnav {
overflow: hidden;
/*THIS BIT IS NOT WORKING, THANKS*/
background-color: red;
}
.topnav a {
color: red;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
overflow: auto;
}
.topnav a:hover {
background-color: Yellow;
color: black;
}
.topnav a.active {
background-color: red;
color: blue;
}
</style>
</head>
<body>
<div class="header">
<div class="topnav">
<a class="active" href="#home">Home</a>
Services
News and Events
Contact
About
Data Protection
</div>
</div>
</body>
</html>
Problem seems to occur because you are using comment for HTML <!-- Menu CSS --> in CSS part of the page <style>. Same problem is in beginning of your style.
You should use CSS comments in <style> sections:
/* This is a CSS comment */
When you type a HTML comment instead of CSS one, it will break whole style only for the following selector. Rest of the code won't be affected.
Also, when I remove that comment, navigation bar is still not looking as it should.
This is because your navigation links <a> are set to display: inline as it is their default. You must change this to display: inline-block so it will still be in line but will take some space (square)
.header {
position: sticky;
top: 0;
}
.topnav {
overflow: hidden;
background-color: gray;
display: block;
}
.topnav a {
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
/* You should use inline-block to make navigation links take some space */
display: inline-block;
}
.topnav a:hover {
background-color: Yellow;
color: black;
}
.topnav a.active {
background-color: red;
color: blue;
}
<div class="header">
<div class="topnav">
<a class="active" href="#home">Home</a>
Services
News and Events
Contact
About
Data Protection
</div>
</div>
Please refer to these references
Inline-block
CSS comments
IN general your code works, only problem: you are using red as a background-color for the .topnav AND as a text-color (color) for the links in it (.topnav a). So change the link color to something else (white in my snippet) to avoid red on red = invisible text for the links.
.header {
background-color: white;
padding: 15px;
position: sticky;
top: 0;
}
.topnav {
background-color: red;
padding: 14px 0;
}
.topnav a {
color: white;
text-align: center;
text-decoration: none;
font-size: 17px;
overflow: auto;
padding: 0 16px;
}
.topnav a:hover {
background-color: Yellow;
color: black;
}
.topnav a.active {
background-color: red;
color: blue;
}
<div class="header">
<!--<div class="imgstyle"><img src="C:\Users\Tony\Desktop\Website Work\google Logo\FTLOGO_Big.png" class="imgstyle"/></div>-->
<img style="float: Left;" alt="google" src="C:\Users\Tony\Desktop\Website Work\FTLOGO_Big.png" width="70%" height="60%">
<img style="float: right; padding-top: 15px; padding-bottom:25px;" alt="Logo" src="C:\Users\Tony\Desktop\Website Work\Vector Logo.png" width="6%" height="6%">
<img style="display: inline; padding-bottom:10px" src="C:\Users\Tony\Desktop\Website Work\google Logo\Tagline.png" width="70%" height="70%"/>
<div class="topnav">
<a class="active" href="#home">Home</a>
Services
News and Events
Contact
About
Data Protection
</div>
</div>
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 4 years ago.
I am very new to HTML, having picked it up to work with electron. I have created my initial screen however I cannot figure out why there is a bar at the top of the screen, i.e. the title & selection are not at the top.
.menu-selector ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
height: 100%;
background-color: #c4c4c4;
text-align:center;
position: fixed;
overflow: auto;
}
#myList a{
display: block;
color: #000;
padding-bottom: 0;
text-decoration: none;
padding-top: 20%;
padding-bottom: 20%;
}
#myList : last-child {
border-bottom: none;
}
#myList a:hover:not(.active) {
background-color: #555;
color: white;
}
#myList a.active {
background-color: #4CAF50;
color: white;
}
body {background-color: #828c9b;}
.title {
width = 40%;
height = 40%;
padding-left: 38%;
background-color: #254982;
display: block;
border-color: #254982;
}
h1 {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link class="menu-bar" rel="stylesheet" href="../css/index.css">
<link class="container" rel="stylesheet" href="../css/menu.css">
<meta charset="utf-8">
<title>Cipher Program</title>
<style>
body {margin: 0; padding-top: 0; border-top: 0}
</style>
</head>
<body>
<div class="menu-selector">
<ul>
<li id="myList"><a class="active" href="index.html"> Menu </a></li>
<li id="myList">Ceaser Cipher</li>
<li id="myList">Vernam Cipher </li>
<li id="myList">Frequency Analysis</li>
</ul>
</div>
<!-- Page Content -->
<div class="title">
<h1> Welcome to Cipher Program </h1>
</div>
<div class="ceaser">
<h2>Menu </h2>
</div>
</body>
</html>
Thanks for your time.
Change your h1 CSS as follows:
h1 {
text-align: center;
margin-top: 0;
}
The problem is with the user agent stylesheet that automatically assigns some margin to your h1.
What you should do in your CSS files is to have a boilerplate so-called CSS Reset at the beginning of you CSS file to make sure that your html looks the same across all browsers and then style the margin etc. as needed.
Your h1 has a margin. Remove it by setting margin: 0;.
Your <h> tags have margin as deafult.
for solve
h1,h2,h3,h4,h5,h6 {
margin: 0;
}
and I suggest you investigate 'reset css'
When you are using position absolute or fixed, you must define a top attribute .
please define "top" on ".menu-selector ul" like this :
.menu-selector ul {
top: 0;
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
height: 100%;
background-color: #c4c4c4;
text-align:center;
position: fixed;
overflow: auto;
}
I wrote a website design that has a drop-down menu and a page that has a link to my facebook page. Every time you move your mouse over the drop-down menu, however, the h2 tag moves to the right. How do I get this to not happen?
Also, how can I center the "a" tag that contains the link to my FB page to be centered underneath the h2 tag? Here is the code:
<!doctype html>
<html>
<head>
<meta charset = "UTF-8">
<title>practice</title>
<link rel="stylesheet" type="text/css" href="practice.css">
<style type="text/css">
h1{
color: black;
}
body {
background-color: lightgrey;
}
#top_nav li:hover ul{
display: block;
position: relative;
}
#top_nav {
display: block;
position: relative;
background-color: grey;
border: 1px solid black;
font: bold 16px Sans-serif;
height: 40px;
width: 1000px;
margin: 0px auto;
}
#top_nav ul{
margin: 0px;
padding: 5px;
}
#top_nav li {
position: relative;
float: left;
list-style-type: none;
}
#top_nav ul:after{
content: ".";
display: block;
height: 0px;
clear:both;
visibility: hidden;
border-bottom: 1px solid black;
}
#top_nav li a {
text-decoration: none;
display: block;
color: white;
border-right: 1px solid black;
padding: 5px 25px;
}
#top_nav ul ul {
position: absolute;
display: none;
left: 0px;
background-color: grey;
}
#top_nav ul ul li {
border: 1px solid black;
width: 99%;
}
#top_nav ul ul li a {
border-right: none;
}
a {
text-decoration: none;
text-align: center;
}
</style>
</head>
<body>
<h1 style="text-align: center">This is practice</h1>
<div id = "top_nav">
<ul>
<li>contact us </li>
<li>about us
<ul>
<li>our history</li>
</ul>
</li>
</ul>
</div>
<p></p>
<h2 style="text-align: center">Facebook Page</h2>
my profile
</body>
</html>
I have also uploaded the website at: html.freeoda.com in case you want to see the code working in real time. Just navigate to the "contact" page.
Thanks!
If you want to just fix it change:
#top_nav li:hover ul{
display: block;
position: relative;
}
To:
#top_nav li:hover ul{
display: block;
position: absolute;
}
Basically what you were doing by changing it to relative was placing it back in the DOM to effect other elements, by using absolute positioning it doesnt interact with other elements the same way.
But like i said in my comment there is no reason to reinvent the wheel. Twitters bootstrap has a very nice working solution: http://getbootstrap.com/components/#dropdowns
As for centering the a tag you have a couple of options, the one i recommend would be just to make it a block element and center the text:
my profile
Add an id to make it easily selectable then add:
#fb-profile-link{
display: block;
text-align:center;
}
By default the a tags have a display of inline by changing it to block the element will automatically take up the width of its container. In this case the body of the document. Then using the text-align property we just center the text in that.
I have two problems with my menu bar. What I want to achieve is to center the links on the header (including the logo picture) and have exactly the same height for the header as the menu. When I add the links it creates a margin on top and on bottom (so the header will extend) and I have no idea why. The margin size depends on the font size and if I want to remove it I have to add a -something px margin and have to try pixel by pixel what the number should be. I'm pretty sure there's an easier solution to that... My other problem is that I can't center the whole menu bar within the header unless I specify a specific width. Obviously I don't know how wide my menu bar will be (and even if I measure it somehow, what if I change the links later?) I'm fairly new to HTML and CSS so I've probably made a bunch of mistakes, I just keep changing the codes until I get what I want but since I'm trying to learn it better I'm aiming for more understanding than random coding so feel free to correct anything. Here's the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My website</title>
<link rel="stylesheet" type="text/css" href="images/style.css" />
<link href='http://fonts.googleapis.com/css?family=Belleza' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="menu">
<ul>
<li><img src="images/ncs.png" /></li>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li id="right">English</li>
</ul>
</div>
</div>
</body>
</html>
And the CSS:
#charset "utf-8";
body {
background-color: #efe8df;
}
#header {
width: 100%;
height: auto;
background-color: #afafaf;
position: absolute;
top:0px;
left:0px;
right:0px;
}
#menu {
margin: auto;
padding: 0px;
list-style: none;
font-family:'Belleza', sans-serif;
color: white;
font-size: 22px;
/*width: 1000px;*/
height: auto;
position: relative;
}
#menu li {
list-style: none;
width: auto;
height: auto;
text-align: center;
vertical-align: middle;
display: table-cell;
border-right: 1px solid #ebeaea;
}
#menu li a {
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 30px;
border-bottom: 3px solid transparent;
}
#menu li a:visited {
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 30px;
border-bottom: 3px solid transparent;
}
#menu li a:hover {
color: #46b5c2;
text-decoration: none;
background-color: #ebeaea;
display: block;
padding: 30px;
border-bottom: 3px solid #46b5c2;
}
#menu li a:active {
color: #46b5c2;
text-decoration: none;
background-color: #ebeaea;
display: block;
padding: 30px;
border-bottom: 3px solid #46b5c2;
}
#menu #right {
border-right: 0px;
font-family: Georgia;
font-size: 14px;
}
Thanks in advance!
Header is extending because for ul and li all browser have there margin and padding standards.
You should use reset.css and normalize.css to remove default css property of some common elements.
so if you want just for list use
ul,li{margin:0; padding:0} or how much you want.
To center align you can give following css properties
to header
display: table
to menu
display : table-cell;
text-align:center
to ul
display:inline-block
to li
float:left
Check fiddle
http://jsfiddle.net/gJFy8/1/
try adding this in your css, change the width to whatever you want according to your need
#menu {
width: 900px;
add width to the #menu div
menu {
margin: auto;
padding: 0px;
list-style: none;
font-family: 'Belleza', sans-serif;
color: white;
font-size: 22px;
width: 1000px;
height: auto;
position: relative;
width: 960px; //or whatever
}
I want to put a title (a larger font than other text in navbar) on the left hand side of my navbar, so far i have achieved getting it on the left side but the text is being half cut, like half the text is outside the navbar and half of it is inside it. How can i get the text to stay fully inside the navbar?
CSS
<style>
#navbar ul {
margin:0 auto;
padding: 10px;
list-style-type: none;
text-align: center;
background:#1c1c1c;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
font-family: calibri;
font-size: large;
text-decoration: underline;
font-weight: 200;
border: 0.5px solid #242424;
border-radius: 2px;
padding:.3em 1em;
color: #ffffff;
background-color:transparent;
}
#navbar ul li a:hover {
color: #000;
background-color: #ffffff;
border-radius: 5px;
color:#1c1c1c;
}
#navbar {
position: fixed;
margin-top: 0;
top: 0;
left: 0;
width: 100%;
z-index:0;
}
#navbar {
overflow: hidden;
}
#navbar h1 {
float: left;
}
</style>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>ClickonDeal.com.au-Electronics</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
</head>
<div id="navbar">
<h1>Click</h1>
<ul>
<li>Stuff</li>
<li>more stuff</li>
<li>stuff</li>
<li>stuff</li>
<li>stuff</li>
</form>
</ul>
</div>
</div>
</html>
You have a couple of errant closing tags that are throwing errors, but that's not what's causing you trouble.
Likely issue is that H1 in most browsers will have default margins that are pushing it out of whack.
I'd investigate adding a css reset (start at http://necolas.github.io/normalize.css/) but in the mean time, you can fix this by setting margins to 0 on your h1:
#navbar h1 {
float: left;
margin: 0;
}
Here's a simple jsfiddle showing that change: http://jsfiddle.net/adnrw/BjCBf/1/ (h1 color changed to white so we can see it)
Add the below CSS to your code:
#navbar h1 {
float: left;
margin:0;
}
Check this JSFiddle