Bit new at CSS and been looking around at various sites and bits of code trying to get a centered drop down menu which I managed to get :).
However as soon as I added some images to make up the heading the menu shifted off to the left and I have not been able to budge it ever since, any help? Code is below.
<style type="text/css">
<!--
body {
background-image: url();
background-color: #0099FF;
}
.style1 {color: #FFCC00}
.style2 {color: #FF9900}
.style3 {
color: #FFCC00;
font-weight: bold;
font-size: 12px;
}
.style4 {
color: #000099;
font-weight: bold;
}
.style5 {color: #000099; font-weight: bold; font-size: 12px; }
.style6 {color: #000099}
* { padding: 0; margin: 0; }
body { padding: 5px; }
ul { list-style: none; margin: auto}
ul li { float: left; padding-right: 0px; position: relative; }
ul a { display: table-cell; vertical-align: middle; width: 100px; height: 50px; text-align: center; background-color: #0099EE; color: #000000; text-decoration: none; border: 1px solid #000000;}
ul a:hover { background-color: #0066FF; }
li > ul { display: none; position: absolute; left: 0; top: 100%; }
li:hover > ul { display: inline; }
li > ul li { padding: 0; padding-top: 0px; }
#menu-outer {
height: 84px;
background: url(images/bar-bg.jpg) repeat-x;
}
.table {
display: table;
margin: 0 auto;
}
ul#horizontal-list {
min-width: 696px;
list-style: none;
padding-top: 20px;
}
ul#horizontal-list li {
display:inline
}
-->
</style></head>
<body>
<div id="menu-outer"></div>
<div class="table"></div>
<div align="center"><img src="logo_with_words_3.jpg" width="172" height="145"><img src="heading.gif" width="557" height="69"><img src="logo_with_words_3.jpg" width="172" height="145">
</div>
<ul id="horizontal-list">
<li>
Home
</li>
<li>About Us
<ul>
<li>History</li>
<li>Guest Comments</li>
</ul>
<li>News</li>
<li>Accommodation
<ul>
<li>Rooms</li>
<li>Bedrooms</li>
<li>St Joseph's Annexe</li>
</ul>
<li>Visiting St Katharine's
<ul>
<li>Retreats</li>
<li>B&B</li>
<li>Events</li>
<li>Conferences</li>
<li>Catering</li>
</ul>
<li>Contact Us
<ul>
<li>Find Us</li>
</ul>
<li>Walled Garden</li>
<li>Sue Ryder Legacy
<ul>
<li>Sue Ryder</li>
<li>Prayer Fellowship</li>
<li>LRWMT</li>
</ul>
</ul>
</body>
You aren't really using a table, but you can add something like this: #horizontal-list {margin: auto; width: 850px;}
JS Fiddle with your code
Related
I have menu bar which need to be margin-top: 150px;
But visually in Firefox looking different as on Chrome.
Header code: https://codepen.io/bugerman21/pen/rNxvyOv
Chrome:
Correct display
Firefox:
Incorrect display
HTML:
<nav>
<ul class="nav">
<li class="category"><span>Category <i class="fas fa-sort-down"></i></span>
<ul>
<li>Qwerty 1</li>
<li>Qwerty 2</li>
<li>Qwerty 3</li>
<li>Qwerty 4</li>
</ul>
</li>
<li>Cuntact us</li>
<li>FAQ</li>
</ul>
CSS:
* {
margin: 0;
pading: 0;
}
.nav li ul {
position: absolute;
margin-top: 150px;
min-width: 150px;
list-style-type: none;
display: none;
}
How to do margin-top only for the Firefox browser?
Unsuccessful attempt:
#-moz-document url-prefix() {
.nav li ul {
margin-top: 150px;
}
}
Here ya go buddy, sorry I left for the day yesterday but see the changes made and I left outlines on the elements to give a better visual reference. As it is now it will display as expected on all browsers even old internet explorer. Although you could accomplish the same thing cleaner overall, this at least gets you back on track. Cheers and welcome to StackOverflow! :)
PS : since the nav menu items don't have a fixed height you might want to consider making that something static so you can change the top: 56px to a value that places the drop down consistently no matter the width of the screen. If you make the example full screen you'll see what I mean.
header {
display: flex;
margin: 0;
padding: 0 20px;
justify-content: space-between;
align-items: center;
background-color: silver;
}
.header {
grid-area: header;
background-color: #1f1f1f;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
/*---------- Logo ----------*/
.logo {
font-family: 'Gentium Book Basic', serif;
font-size: 2.5em;
color: #808080;
}
/*---------- Nav menu ----------*/
.nav {
list-style-type: none;
display: flex;
justify-content: flex-start;
margin: 0;
}
.nav > li {
text-decoration: none;
font-family: 'Roboto', sans-serif;
color: #ffffff;
transition: background-color .25s ease;
}
.nav a {
display: block;
padding: 20px;
color: #ffffff;
font-size: 1em;
}
.category {
padding: 0 20px;
display: flex;
align-items: center;
position: relative;
overflow: visible;
border: red 1px solid;
}
/*---------- Sub menu ----------*/
.nav li ul {
position: absolute;
top: 56px;
left: 0;
min-width: 150px;
margin: 0;
padding: 0;
list-style-type: none;
display: none;
border: green 1px solid;
}
.nav li > ul li {
border-bottom: 1px solid #ffffff;
background-color: #1f1f1f;
}
.nav li > ul li a {
text-transform: none;
}
.nav li:hover > ul {
display: block;
}
.nav > li:hover {
background-color: #404040;
/* box-shadow: -5px 5px #1f1f1f; */
}
.nav li ul > li:hover {
background-color: #404040;
}
/*---------- Search & Profile----------*/
.search_and_profile {
display: flex;
align-items: center;
}
.search_and_profile > p {
margin: 0;
color: #ffffff;
}
.search-container button {
float: right;
padding: 6px 10px;
background: #e0e0e0;
font-size: 17px;
border: none;
cursor: pointer;
}
.search-container input[type=text] {
padding: 6px;
font-size: 17px;
border: none;
}
<header class="header">
<span class="logo">Qwerty</span>
<nav>
<ul class="nav">
<li class="category"><span>Category <i class="fas fa-sort-down"></i></span>
<ul>
<li><a href=#>Qwerty 1</a></li>
<li>Qwerty 2</li>
<li>Qwerty 3</li>
<li>Qwerty 4</li>
</ul>
</li>
<li>Cuntact us</li>
<li>FAQ</li>
</ul>
</nav><!-- .nav -->
<div class="search_and_profile">
<div class="search-container">
<form action="#">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div><!-- .search-container -->
</div><!-- .search_and_profile -->
</header>
It will work for me, additionally i included color too to make sure.
Also you try this option too
#media screen and (-moz-images-in-menus:0) {
/* your style */
}
* {
margin: 0;
pading: 0;
}
.nav li ul {
position: absolute;
margin-top: 150px;
min-width: 150px;
list-style-type: none;
display: none;
}
/* Added */
#-moz-document url-prefix('') {
.nav li ul {
margin-top: 150px;
color: orange;
}
}
<div class="nav">
<ul>
<li>Home</li>
<li>About
<ul>
<li>Some text</li>
<li>Some more text</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
I'm very new to Dreamweaver, CSS and HTML. So I apologise if there's any obvious mistakes or solutions.
I'm trying to figure out how to separate words in my navigation menu. Because they always seem to be centred. I've tried adding "word-spacing" and other adjustments but wasn't able to come to a solution.
Just wondering if anyone's able to offer any suggestions in how I can fix this.
Any help is much appreciated,
Thank you.
CSS
.nav {
width: 100%;
height: 40px;
margin-top: 20px;
text-align: center;
}
ul {
margin: 0 auto;
padding: 0 100px;
border: 0;
list-style: none;
}
ul li {
float: left;
text-color: white;
font: Helvetica;
font-size: 100%;
outline: 0 none;
width: 100%;
}
HTML
<div class="menu">
<ul class="nav">
<li id="nav-products">Products</li>
<li id="nav-contact">Contact</li>
<li id="nav-about">About</li>
</ul>
</div>
Remove width:100% from li so menu start from left side
.nav {
width: 100%;
height: 40px;
margin-top: 20px;
text-align: center;
}
ul {
margin: 0 auto;
padding: 0 100px;
border: 0;
list-style: none;
}
ul li {
float: left;
color: white;
font: Helvetica;
font-size: 100%;
outline: 0 none;
}
ul li + li{
margin-left:10px;
}
<div class="menu">
<ul class="nav">
<li id="nav-products">Products</li>
<li id="nav-contact">Contact</li>
<li id="nav-about">About</li>
</ul>
</div>
or You want menu start from center remove float:left from li and add display: inline-block
.nav {
width: 100%;
height: 40px;
margin-top: 20px;
text-align: center;
}
ul {
margin: 0 auto;
padding: 0 100px;
border: 0;
list-style: none;
}
ul li {
display: inline-block;
color: white;
font: Helvetica;
font-size: 100%;
outline: 0 none;
}
ul li + li{
margin-left:10px;
}
<div class="menu">
<ul class="nav">
<li id="nav-products">Products</li>
<li id="nav-contact">Contact</li>
<li id="nav-about">About</li>
</ul>
</div>
I'm hoping someone might be able to help me with this. It looked fine in the preview mode of my program. However, when I opened it in IE and Chrome, the dropdown remains dropped at all times. I'm guessing it's a simple solution to fix it, but I have been staring at this screen for too long. To see what I'm talking about, please see the picture below.
http://img.photobucket.com/albums/v299/insane43/DropdownError_zpsa3e89f8a.jpg
CSS
body {
background: #eaeff2 url("BG Top.jpg") repeat-x right top }
.menu {
background-color: #97a7b7;
font-family: times;
color: #ffffff;
line-height: 50px;
text-align: center;
margin: 0px auto;
display: block}
.menu ul li:hover > ul {
display: block;
width: auto;}
.menu li:hover ul {
position: absolute;
display: block;
left: auto; }
.menu ul {
margin: 0px auto;
padding: 0;
display: inline-block;
text-align: center;
list-style-type: none; }
.menu ul ul{
background: #eaeff2;
top: 100%;
position: absolute}
.menu ul ul li {
float: none;
position: relative;
background-color: #97a7b7}
.menu li {
float: left;
position: relative:
width: 98%:}
.menu li ul {
display: none; }
.menu a:link, a:visited {
display: block;
height: 50px;
margin-left: 30px;
margin-right: 30px;
font-family: times;
font-size: 16px;
color: #ffffff;
text-align: center;
font-weight: bold;
text-transform: uppercase;
text-decoration: none }
.menu a:hover, a:active {
background-color: #4f5963;
text-decoration: none }
.header {
font-family: times;
color: #ffffff;
font-size: 40px;
vertical-align: middle }
.frame {
width: 98%;
text-align: center;}
iframe {
overflow: hidden;
border: 0px;
padding: 0px;
margin: 0px }
.header img {
vertical-align: middle}
.petpics img {
opacity: 0.7;
filter: alpha(opacity=70);}
HTML
<div id="header" class="header" style="position: absolute; top: 0px; text-align: center; width: 100%"><img height="140px" src="Logo.png">   <span class="petpics" class="petpics"><img height="194px" src="Lily.jpg"><img height="194px" src="Annie.jpg"><img height="194px" src="Smoki.jpg"></span></div>
<div id="menu" class="menu" style="position: absolute; top:194px; left:0px; text-align: center; width: 100%; z-index:1"><center>
<ul>
<li>Home</li>
<li>About</li>
<ul>
<li>Our Board</li>
<li>Our Staff</li>
</ul>
<li>Adopt</li>
<ul>
<li>Cats</li>
<li>Dogs</li>
</ul>
<li>Lost Pets</li>
<ul>
<li>Lost</li>
<li>Found</li>
</ul>
<li>Volunteer</li>
<ul>
<li>Become a Volunteer</li>
<li>Volunteer Login</li>
</ul>
<li>How to Help</li>
<ul>
<li>Membership</li>
<li>Donate</li>
<li>Upcoming Events</li>
</ul>
<li>Education</li>
<ul>
<li>Information</li>
<li>Educational Events</li>
</ul>
</ul>
</center>
</div>
<div id="frame" class="frame" style="position: absolute; top: 280px; width: 98%; height: 100%; z-index:0">
<iframe name="display" width="100%" height="100%" overflow="visible" scrolling="hidden" seamless="seamless" border="0" margin="0" src="Home.html">
</iframe>
</div>
Thank you! Your help is appreciated. Edited to add full code.
I have a footer menu I am creating for WordPress. I have my main navigation links then at the end I want a collapsing/expanding link for social icons. I have created both separately but do not know how to make them display on one line. Any help is appreciated.
Main Navigation:
<!DOCTYPE html>
<html>
<head>
<style>
#footernav {
width: 100%;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-weight:bold;
text-align: center;
}
#footernav li {
margin-right: 20px;
display: inline;
}
</style>
</head>
<body>
<div id="footernav">
<li>Customer Care</li>
<li>Privacy Policy</li>
<li>Terms</li>
<li>Newsletter</li>
<li>Contact</li>
</div>
</body>
</html>
Expanding/Collapsing Social Link:
<!DOCTYPE html>
<html>
<body>
<style type="text/css">
/*SOCIAL*/
.list {
display:none;
height:auto;
margin:0;
float: center;
}
.show {
display: none;
}
.hide:target + .show {
display: inline;
}
.hide:target {
display: none;
}
.hide:target ~ .list {
display:inline;
}
.hide:hover, .show:hover {
color: #eee;
font-weight: bold;
opacity: 1;
margin-bottom: 25px;
}
.list p {
height:auto;
margin:0;
.hover:hover {
-moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0px 0px 5px #000
}
/*END SOCIAL*/
</style>
<div class='social'>
Follow Us (+)
Follow Us (-)
<div class="list">
<p>
<a href="http://www.facebook.com" target= "_blank" ><img src="http://museiam.ca/wp-content/uploads/Facebook.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Facebook1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Facebook.png'" ></a>
<a href="http://www.twitter.com" target= "_blank1" ><img src="http://museiam.ca/wp-content/uploads/Twitter.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Twitter1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Twitter.png'" ></a>
<a href="http://www.instagram.com" target= "_blank2" ><img src="http://museiam.ca/wp-content/uploads/Instagram.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Instagram1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Instagram.png'" ></a>
</p>
</div>
</div>
</body>
</html>
FIDDLE: http://jsfiddle.net/7j0nb4az/
First of all, you're missing the <ul> tag wrapped around your <li>'s inside the jsFiddle. Secondly, once you wrap the <li>'s with a <ul> tag, adding this CSS to your stylesheet will solve the issue:
#footernav ul {
padding: 0px;
display: inline-block;
}
Here's a working demo:
/*MAIN NAVIGATION*/
#footernav {
width: 100%;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
text-align: center;
}
#footernav li {
margin-right: 20px;
display: inline;
}
#footernav li a {
text-decoration: none;
}
#footernav ul {
padding: 0px;
display: inline-block;
vertical-align: top;
}
a#show {
vertical-align: top;
}
#footernav li:nth-child(5) {
margin-right: 0px;
}
a.hide {
margin-left: 15px;
}
/*END MAIN NAVIGATION*/
/*SOCIAL*/
.list {
display: none;
height: auto;
margin: 0;
float: center;
}
.show {
display: none;
}
.hide:target + .show {
display: block;
}
.hide:target {
display: none;
}
.hide:target ~ .list {
display: inline;
}
.hide:hover,
.show:hover {
color: #eee;
font-weight: bold;
opacity: 1;
margin-bottom: 25px;
}
.list p {
height: auto;
margin: 0;
.hover: hover {
-moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0px 0px 5px #000
}
<!DOCTYPE html>
<body>
<div id="footernav" class="footernav">
<ul>
<li>Customer Care
</li>
<li>Privacy Policy
</li>
<li>Terms
</li>
<li>Newsletter
</li>
<li>Contact
</li>
<ul>
<div class='social'> Follow Us (+)
Follow Us (-)
<div class="list" <a href="http://www.facebook.com" target="_blank">
<img src="http://museiam.ca/wp-content/uploads/Facebook.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Facebook1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Facebook.png'">
</a>
<a href="http://www.twitter.com" target="_blank1">
<img src="http://museiam.ca/wp-content/uploads/Twitter.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Twitter1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Twitter.png'">
</a>
<a href="http://www.instagram.com" target="_blank2">
<img src="http://museiam.ca/wp-content/uploads/Instagram.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Instagram1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Instagram.png'">
</a>
</div>
I have an existing website with the menu code below and I want to add more stuff to my site but users need to nevigate to those pages please help me to add a sub menu to the code I have. Please help?
HTML
<div id="menu">
<ul>
<li>Home</li>
<li>Services</li>
<li>FAQ</li>
<li class="active">About</li>
<li>Contact Us</li>
</ul>
</div>
CSS
/** HEADER */
#header-wrapper
{
overflow: none;
height: 100px;
margin-bottom: 20px;
background: rgba(0,0,0,0.70);
}
#header {
overflow: none;
}
/** LOGO */
#logo {
float: left;
width: 10px;
height: 100px;
}
#logo h1, #logo p {
margin: 0px;
line-height: normal;
}
#logo h1 a {
padding-left: 1px;
text-decoration: none;
font-size: 1.50em;
font-weight: 600;
font-family: 'Archivo Narrow', sans-serif;
color: #FFFFFF
}
/** MENU */
#menu {
float: right;
height: 110px;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
margin-right: 1px;
}
#menu a {
display: block;
height: 100px;
padding: 0px 30px;
line-height: 100px;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
}
#menu a:hover {
text-decoration: none;
background: rgba(0,0,0,0.70);
}
#menu .active
{
background: rgba(0,0,0,0.70);
}
Working menu:
a quick fiddle for you
//HTML
<div id="menu">
<ul>
<li>Home
</li>
<li>Services
<ul>
<li>Something You do
</li>
<li>TODO
</li>
</ul>
</li>
<li>FAQ
</li>
<li class="active">About
</li>
<li>Contact Us
</li>
</ul>
</div>
//CSS
/** MENU */
#menu {
position:relative;
height: 110px;
}
#menu ul {
margin: 0px;
padding: 0px;
float:left;
line-height: 110px;
}
#menu li {
list-style:none;
}
#menu>ul>li {
float: left;
margin-right: 1px;
position:relative;
}
#menu>ul>li ul {
height:100%;
position:absolute;
bottom:-100%
}
#menu>ul>li ul>li {
bottom:0px;
display:none;
width:15em;
float:left;
}
#menu>ul>li:hover ul>li {
display:block
}
#menu a {
display:block;
padding: 0px 30px;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
background:rgba(200, 200, 200, 0.5);
}
#menu a:hover {
text-decoration: none;
cursor:pointer;
background:rgba(200, 200, 200, 1);
}
#menu .active {
}
Better to use jQuery plugin like Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
//link to the CSS files for this menu type
<link rel="stylesheet" media="screen" href="superfish.css">
// link to the JavaScript files (hoverIntent is optional)
// if you use hoverIntent, use the updated r7 version (see FAQ)
<script src="hoverIntent.js"></script>
<script src="superfish.js"></script>
// initialise Superfish
<script>
jQuery(document).ready(function(){
jQuery('#menu ul').superfish();
});
</script>
Well, first add your submenu in the markup, for example:
<li>Services
<ul>
<li> sub menu item 1 </li>
<li> sub menu item 2 </li>
</ul>
</li>
....
Position your list items:
#menu li{
position: relative;
}
Style your sub menu:
#menu ul ul{
position:absolute;
left: 0;
top: 100px; /* height of the parent list item */
display: none; /* hide it */
}
#menu li:hover > ul{ /* show it when mouse is over the parent list item */
display:block;
}
Try http://jsfiddle.net/9LcfX/