Started on a project that will be used for educational purposes as it requires html,css and php which
I am still learning! I want to know how can I position my H4 so it lines up with the navigation text.
Is there a better way of doing this? http://66.172.10.179/resolver/
CSS:
/* Body */
body {
background-color: #FF5930;
}
/* Navigation bar */
header {
background-color: #FF4719;
}
nav h2 a{
color: black;
text-decoration: none;
display: inline;
margin: 0;
}
nav h2 a:hover{
color: gray;
text-decoration: none;
}
nav ul li {
display: inline;
margin: 0;
}
HTML:
<header>
<nav>
<h2 class="header-text">Skype Resolver</h2>
<ul>
<li>Resolver</li>
<li>Blacklisting</li>
<li>Purchase API</li>
<li>Domain tools</li>
<li>Spam tools</li>
<li>Misc tools</li>
</ul>
</nav>
</header>
Try this:
Add margin and padding to nav ul:
nav ul {
margin:0;
padding:0;
}
Change nav ul li to this:
nav ul li {
display: inline;
}
JSFiddle Demo
Related
I'm working on a pure CSS dropdown menu but ran into some alignment issues.
Specifically: the sub-menu items get moved over to the right when hovering over their respective menu item. Here's the fiddle: https://jsfiddle.net/fhakjnhe/5/
HTML
<body>
<header>
<div id="menustrip">
<div id="logo_container">
<h1>LOGO</h1>
</div>
<div id="menu">
<nav>
<ul>
<li><a id="active-page" href="#">AAA</a></li
><li>BBB
<ul>
<li style="background-color:red;">A</li>
<li>B</li>
</ul>
</li
><li>CCC</li
><li>DDD</li
><li>EEE
<ul>
<li style="background-color:blue;">A2</li>
<li>B2</li>
</ul>
</li
><li>FFF</li
><li><a id="quote-page" href="#">GGG</a></li>
</ul>
</nav>
</div>
</div>
Related CSS
header #menustrip #menu nav ul
{
list-style: none;
position: relative;
}
header #menustrip #menu nav ul li
{
display: inline-block;
}
header #menustrip #menu nav a
{
display: block;
color: #1d120c;
font-weight: bold;
font-size: 18px;
padding: 0 /*15px*/10px;
margin: 0;
border: 2px solid transparent;
}
header #menustrip #menu nav a:hover
{
border-left: 2px solid #97bc14;
border-right: 2px solid #97bc14;
color: #97bc14
}
header #menustrip #menu nav a#active-page
{
color: #97bc14
}
header #menustrip #menu nav a#quote-page
{
margin-left: 15px;
border: 2px solid #97bc14;
color: #97bc14
}
header #menustrip #menu nav a#quote-page:hover
{
border: 2px solid #97bc14;
background-color: #97bc14;
color: #fcffff;
}
header #menustrip #menu nav ul li ul
{
/*display: none;*/
position: absolute;
padding-left: 0;
}
header #menustrip #menu nav ul li:hover > ul
{
display: inherit;
}
header #menustrip #menu nav ul li ul li
{
/*left: -100%;*/
min-width: 100px;
float: none;
display: list-item;
position: relative;
}
I checked a similar question CSS Drop Down Menu : nav ul ul li Moved to Right and checked that margin and padding were set to 0. Also in my case, the sub-item moves to the right when hovering, it seems to remain okay while "hidden".
On line 94 of the CSS file, change display: inherit; for display: block;. The inherit property is displaying the dropdown menu as an inline-block.
i suggest you to use software Web menu maker & button maker
this software let you to create professional and beautiful menus and buttons with java script or only css.
http://www.easymenumaker.com/
Good day all,
I have created a nav bar with various links, I would like to use the hover effect to have it change color on hover. Problem is that the effect is only around the word not the height of the nav bar to horizontal rules. I would like the hover effect to reach to the horizontal rules.
Here is my code:
ul{
list-style-type: none;
}
li{
display:inline;
padding-right: 50px;
}
#NavBar ul li a{
display: inline-block;
text-decoration: none;
cursor: pointer;
}
#NavBar ul li a:hover{
background-color: yellow;
}
<hr>
<nav id="NavBar">
<ul>
<li><a>Home</a></li>
<li><a>History</a></li>
<li><a>Gallery</a></li>
<li><a>Techniques</a></li>
</ul>
</nav>
<hr>
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
border: solid silver;
border-width: 1px 0;
text-align: center;
}
nav li{
display: inline-block;
margin: 0;
padding: 0;
}
nav a {
display: block;
text-decoration: none;
cursor: pointer;
padding: 1em;
}
nav a:hover {
background-color: yellow;
}
<nav>
<ul>
<li>
<a>Home</a>
</li><li>
<a>History</a>
</li><li>
<a>Gallery</a>
</li><li>
<a>Techniques</a>
</li>
</ul>
</nav>
The CSS selector only highlights the words because the a is targeted. If you change the a with li then It highlight the whole area of li.
Repalce:
#NavBar ul li a:hover{
background-color: yellow;
}
With:
#NavBar ul li:hover{
background-color: yellow;
}
Try this
li:hover {
background-color: yellow;
}
On the 'shop' tab I have 5 drop down options that link to a specific part of content on the shop page. However my code does not seem to work, as when you hover over the shop tab when on the home page, the navigation appears inline with the rest of the navigation, whereas I would like the content to display below the word shop as a drop-down list.
This is the HTML
<pre>
<div id="navigation">
<ul class="nav-bar">
<li>home</li>
<li class="current">shop
<ul>
<li>Vintage Collection</li>
<li>Sofas & Beds</li>
<li>Tables & Chairs</li>
<li>Electricals</li>
<li>Storage</li>
</ul>
</li>
<li>about</li>
<li> get involved </li>
<li> contact us</li>
</ul>
</div>
</pre>
and this is the CSS
/* drop down list */
#navigation ul ul {
display: none;
top: 100%;
left:0;
background:#A3CC39;
padding: 0;
align-content: center;
width: 100%;
}
#navigation ul ul li {
float: none;
width: 100%;
margin-left:0px;
}
#navigation ul ul a {
line-height: 120%;
padding: 10px 15px;
}
#navigation ul ul ul {
top: 0;
left: 100%;
}
#navigation ul li:hover > ul {
display: block;
}
I have a feeling the reason it isn't working is to do with my code at the very top of my css which styles the original navigation bar. Really appreciate any help
EDIT: this is rest of the css for the navigation as a whole:
* {
margin:0;
border:0;
padding:0;
}
.wrapper {
max-width: 1000px;
margin: 0px auto;
clear: both;
text-align: center;
}
li {
display: inline;
list-style-type: none;
}
#navigation a:hover{
color: black;
background-color: #6A8F28;
}
#navigation a {
text-decoration: none; color:white;
}
a:visited {
text-decoration: none;
}
I have been learning htm, css and php all at once. I am creating a website that touch's all of
these things. Its for educational purposes only.
How can I make it so that I have my websites name beside the navigation text with it all centered.
Like right now I have the website name in the nav bar with the navigation text beside it but the
navigation text isnt in the center of the line its a bit low. Here is the site: http://66.172.10.179/resolver/
CSS:
/* Body */
body {
background-color: #FF5930;
margin: 0px;
}
a {
text-decoration: none;
color: white;
}
/* Navigation bar */
header {
background-color: #FF4719;
padding: 5px 0 8px 15px;
}
header nav h2 {
display: inline;
font-family: sans-serif;
}
header nav ul {
display: inline;
}
header nav ul li {
display: inline;
padding: 0 5px;
font-size: 15px;
font-family: sans-serif;
color: white;
height: 10px;
}
header nav ul li:hover {
}
HTML:
<header>
<nav>
<h2>Skype Resolver</h2>
<ul>
<li>Resolver</li>
<li>Blacklisting</li>
<li>Purchase API</li>
<li>Domain tools</li>
<li>Spam tools</li>
<li>Misc tools</li>
</ul>
</nav>
</header>
I added line-height to H2, create a CSS thing for nav and added: display: inline-block;
Worked like a charm!
To achieve this without actually putting in any line height you can add the following:
CSS
nav{
display:table;
}
nav h2 {
vertical-align: middle;
}
nav ul{
vertical-align: middle;
}
This will vertically center your text without you having to guess the line height...
DEMO JSFiddle
Right then... I created a menu which worked perfectly fine but afterwards found out I needed to add drop-down which I done but for some reason it is showing horizontally and aligning itself to the left instead of being vertical and aligning itself underneath the link you hover over. What's annoying is that I did create one that worked perfectly fine on another site, I have tried to match up to coding from the last one to this one but as they are styled differently it is not going well.
The html for the menu is:
<body>
<div id="header">
<div id="menu_container">
<nav>
<ul>
<li>Home</li>
<li>Overview</li>
<li>Strategy</li>
<li>Marketing</li>
<li>Team and Management</li>
<li>Gallery
<ul>
<li>Edgbaston</li>
<li>Hockley</li>
<li>Selly Oak</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
The CSS is:
nav ul {
list-style: none;
text-align: center;
position: relative;
display: inline-table;
}
nav ul li {
display: inline;
}
nav ul li a:link, nav ul li a:visited {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
font-weight: normal;
width: 800px;
color: #FFFFFF;
line-height: 14px;
margin: 0px 10px;
padding-bottom: 8px;
border-bottom: 1px solid #FFFFFF;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
nav ul li a:hover, nav ul li a:active {
border-color: #f9cf19;
}
nav li ul {
display: none;
z-index: 999;
}
nav li:hover ul {
display: block;
position: absolute;
}
nav li:hover li a:hover {
background: #000000;
}
Any help would be greatly appreciated. Thanks guys.
Edit: Here is a link to the site: http://vicarage-support.com/our_hostels.html
The link is only on that page, once I have it working and the page finished I will add it to the others.
And one to a fiddle: http://jsfiddle.net/e7y6U/
SeeTheC Came up with the solution to get it to vertically align but to get it align underneath the link you hover over you have to add this to the ul li:
nav ul li {
display: inline;
position: relative;
float: left;
}
on Hover
add this :
nav li:hover>ul>li {
display: block;
}
By this it will come in vertical.
You just have to align the position of it.
try to add this :
ul > li
{
position:relative
}
Just realised it doesn't work on IE