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.
Related
I'm really sorry if I didn't phrase my question correctly, I'm really new at all of this.
I want to put my menu items (I made an unordered list) within my nav block, but they are showing underneath it instead. It overlaps with my body content (not pictured), which is really problematic. Could someone help me?
The pink box is my nav block. I want to put my menu buttons inside it.
I know that the pink block is in fact the nav block?
HTML:
<header>
<h1>Header</h1><h2> | chapter</h2>
</header>
<nav>
<ul id="menu">
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
<li>delta</li>
</ul>
</nav>
CSS:
header{
background-color: green;
border: 1px solid purple;
width: 100%;
height: auto;
}
nav{
background-color: pink;
border: 1px solid grey;
width: 100%;
height: auto;
}
h1, h2{
display: inline;
}
/*Set li as buttons*/
#menu li{
float: left;
list-style-type: none;
width: 5em;
margin-left: -2.5em; /*Removes default indentation of lists*/
margin-right: 5em;
display: block;
}
/*display anchor tags as buttons*/
#menu a{
display: block;
background-color: white;
border: 3px solid blue;
text-align: center;
text-decoration: none;
color: black;
}
/*display setting on button hover*/
#menu a:hover{
color: white;
background-color: black;
}
Thank you!
There are many errors in your CSS:
list-style-type: none; goes on the list, not on its items. It's what disables default list-behavior and makes the list stand on one line.
float: left; will make the elements float, but will also make the parent shrink as if it didn't have any content, which is why the elements sit below the nav block.
display: block; on items makes them stand on their own line. If you want multiple elements to stand side-by-side yet still have margins and paddings like blocks, you need to use inline-block instead. This is much easier to maintain than floating elements.
The margins on the list items are also way too big, I got rid of those. Honestly though, I really don't get why people use lists anymore. You could very well just put the links in the nav directly and save a lot of code.
header {
background-color: green;
border: 1px solid purple;
width: 100%;
height: auto;
}
nav {
background-color: pink;
border: 1px solid grey;
width: 100%;
height: auto;
}
h1,
h2 {
display: inline;
}
/*Set li as buttons*/
#menu {
list-style-type: none;
}
#menu li {
width: 5em;
margin: 0;
display: inline-block;
}
/*display anchor tags as buttons*/
#menu a {
display: inline-block;
background-color: white;
border: 3px solid blue;
text-align: center;
text-decoration: none;
color: black;
}
/*display setting on button hover*/
#menu a:hover {
color: white;
background-color: black;
}
<header>
<h1>Header</h1>
<h2> | chapter</h2>
</header>
<nav>
<ul id="menu">
<li>alpha
</li>
<li>beta
</li>
<li>gamma
</li>
<li>delta
</li>
</ul>
</nav>
You need to clear the container of the floated elements, as they don't properly stretch the container.
Add the clearfix CSS to your sheets:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
and then add the clearfix class to menu:
<ul id="menu" class="clearfix">
fiddle
Alternatively, pick one of the other clearfix solutions from here (where I got the solution above).
Get rid of the float left under menu li and replace it with
#menu li{
display:inline-block;
list-style-type: none;
width: 5em;
margin-left: -2.5em; /*Removes default indentation of lists*/
margin-right: 5em;
}
and if you want to move it over to the right a bit more
#menu li{
display:inline-block;
list-style-type: none;
width: 5em;
margin-right: 5em;
}
Probably one noob question, but I can't understand positioning in css very good. Yesterday I had a problem with background and drop-down menu, so I decided to start again from scratch. The problem persists.
My h1 couldn't be in position I wanted so I made its position:relative and then I could move it, but because of that I can't click on my drop-down menu or even on logo. Just half of it.
HTML:
<link rel="stylesheet" type="text/css" href="./style2.css" />
</head>
<body>
<div id="stajl">
<ul>
<li>Home Page </li><li>
Services <span class="arrow">▼</span>
<ul><li>
Trades </li><li>
Exchanges </li><li>
Business to Business </li>
</ul>
<li>About </li><li>
Contact </li>
</ul>
</div>
<div id="img">
<img src="pfslogo2.png" />
</div>
<div id="header">
<h1>We're here to help! </h1>
</div>
</body>
</html>
CSS:
body {
overflow-y: scroll;}
#stajl ul {
list-style-type: none;
margin:0;
padding:0;
float: right;
}
#stajl ul li:hover a{
background-color: #d7e6fa;
}
#stajl ul li {
display: inline-block;
}
#stajl ul li a {
text-decoration: none;
display: block;
padding: 15px;
color: white;
background-color: #0099cc;
}
#stajl ul ul {
display: none;
position: absolute;
margin-left: -105px;
}
#stajl ul li:hover ul {
display: block;
}
#stajl ul ul li {
display: block;
color: white;
width: 352px;
}
#stajl ul li li a:hover {
color: cyan;
}
.arrow {
font-size: 10px;
vertical-align: middle;
}
#img img {
margin: 0;
padding: 0;
height: 50px;
width: 100px;
top: 0;
left:0;
}
#header h1 {
padding: 0;
margin:0;
text-align: center;
position: relative;
top: -40px;
left: -60px;
color: #0099cc;
}
Codepen created by Dorvalla for my problem: codepen.io/anon/pen/VeXyRY
Any advice will be appreciated! Thanks
The H1 is Blocking the Cursor, you need to set the H1 to be a bit shorter:
#header {
text-align:center;
}
#header h1 {
display:inline-block;
}
http://codepen.io/niorad/pen/EPEQxJ
Set the z-index of your menu higher than that of the div.
Put a z-index: -1; on your h1, then your navigation will work again.
I am trying to develop a website which contains dropdown menu and in the next division below menu there is a slider division but when mouse is hover on menu the submenu displays and the slider division is shifts down.
So can anyone suggest how I can accomplish the task
The code is as follows
<html>
<head>
<style type="text/css">
#header{
height: 90px;
}
#navigation{
height: 30px;
background-color: #0099FF;
border: 1px solid #0099FF;
border-radius: 10px;
z-index:1000;
}
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
ul li {
display: block;
position: relative;
float: left;
padding-right: 40px;
}
li ul {
display: none;
}
ul li a {
display: block;
padding: 5px 10px 5px 10px;
text-decoration: none;
color: #FFFFFF;
font:Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
}
ul li a:hover {
background: #00CCFF;
}
li:hover ul {
display: block;
z-index: 1000;
}
li:hover li {
float: none;
}
li:hover a {
background: #00CCFF;
}
li:hover li a:hover {
background: #D2F5FF;
}
#drop-nav li ul li {
border-top: 0px;
}
#clearmenu{
clear: left;
}
#sliderandnews{
height: 300px;
}
#slidermain{
height: 300px;
width: 65%;
float: left;
}
#news{
height: 300px;
width: 33%;
border: 2px solid #F0FFFF;
border-radius: 20px;
float: right;
background-color: #F0FFFF;
}
.clear{
height: 40px;
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="navigation">
<ul id="drop-nav">
<li>Home</li>
<li>About Us</li>
<li>Academic Programs
<ul>
<li>BBA</li>
<li>BCA</li>
<li>BE</li>
</ul>
</li>
<li>Faculties</li>
<li>Admission</li>
<li>Downloads</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="clear"></div>
<div id="sliderandnews">
<div id="slidermain">
This section is changes its position on mousehover
</div>
<div id="news">
</div>
</div>
</body>
</html>
The problem is that your elements are relative positioned. So, when the submenu appears, all elements below are shifted down. You can add absolute positioning to navigation bar, and determine its displacement from top using the top property in CSS. This allows you to eliminate #header (which has only the role to give a top margin).
#navigation{
position:absolute;
top:90px;
}
Similarly you can do with the #sliderandnews block. Since you've given an absolute positioning to navigation menu, navigation is removed from HTML elements flow inside the page. To compensate this, you have to add a proper top margin to this element.
#sliderandnews{
height: 300px;
margin-top:190px;
}
And here's the final fiddle.
I'm trying to write a simple menu for my site's backend. I'd like to acomplish that there is no space between the menu an the top of my site. It looks ok until I add a <h> or <p>
element. The menu moves about 30px down.
Why is it happening and how can I fix it?
<!DOCTYPE html>
<head >
<title>my page</title>
<link href="Styles.css" rel="stylesheet" />
</head>
<body>
<div id="PageWrapper">
<nav>
<ul id="navMenu">
<li>Home</li>
<li>Manage Books
<ul>
<li>New Book</li>
</ul>
</li>
<li>Reservations</li>
<li>Lendings</li>
<li>Back>></li>
</ul>
</nav>
<section>
<h1>Welcome to the management part of your site.</h1>
<section>
</div>
And the css file:
body {
margin: 0;
background-color: whitesmoke;
}
#PageWrapper {
width: 1000px;
margin: auto;
}
nav {
clear: both;
width: 100%;
float:left;
margin-bottom:30px;
margin-top:0px;
background-color:#666666;
}
ul#navMenu {
padding:0px;
margin:auto;
list-style: none;
}
ul#navMenu ul {
position: absolute;
left: 0;
top: 100%;
display: none;
padding: 0px;
margin: 0px;
}
ul#navMenu li {
display: inline;
float: left;
position: relative;
}
ul#navMenu a {
font-family:Arial, Helvetica, sans-serif;
font-size:small;
text-transform:uppercase;
text-decoration: none;
padding: 10px 0px;
width: 150px;
background: #666666;
color: #ffffff;
float: left;
text-align: center;
border-right: 1px solid #ffffff;
}
ul#navMenu a:hover {
background: #cccccc;
color: #333333;
}
ul#navMenu li:hover ul {
display: block;
}
ul#navMenu ul a {
width: 150px;
}
ul#navMenu ul li {
display: block;
margin: 0px;
}
I tried to look for unwanted margins in browser developer tools but I haven't seen anything obvious.
Remove the float and clear from nav and replace with overflow:hidden to contain the floats applied to the underlying li menu items.
This forces the nav into a new block formatting context, which will display as anticipated.
Demo Fiddle
nav {
width: 100%;
margin-bottom:30px;
margin-top:0px;
background-color:#666666;
overflow:hidden;
}
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