I basically have a navigation bar on the top with 6 hyperlinks and I have coded for each of them. However the hyperlink doesnt work properly. Upon further research I found that the hyperlink will be active only when clicked in a certain location. Usually top-middle of text. Here is the code I'm using. Thanks in advance for your help.
#nav {
width: 100%;
height: 550px;
background-color: #FFFFFF;
background-size: cover;
background-image: url();
border-bottom: thin solid;
font-size: large;
color: #FFFFFF;
margin-top: 0px;
;
border-bottom: thin solid #FFFFFF;
font-size: large;
color: #FFFFFF;
margin-top: 0px;
text-shadow: 0px 0px #FFFFFF;
}
#nav_wrapper {
height: 66px;
width: 100%;
margin-left: auto;
opacity: 0.8;
filter: alpha (opacity=70);
border-bottom: thin inset #000000;
text-align: right;
font-family: "SamsungSharpSansRegular Regular";
}
#nav_wrapper ul li {
list-style: none;
display: inline;
font-weight: bold;
padding: 10px;
color: #000000;
}
#nav_wrapper a {
color: #000000;
text-decoration: none;
padding: 10px;
}
#nav_wrapper ul li:hover {
background: #FFFFFF;
transition: all 0.45s;
}
<div id="nav"><br>
<div id="nav_wrapper"><br>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Developers</li>
<li>S9 | S9+</li>
<li>Forum</li>
<li>Recent</li>
</ul>
</div>
Related
As you can see in the first image, I have the underline appear under the links which covers the red "hr" that runs across the page. I want to apply the same effect on the archives and categories links but with it appearing above. I can't seem to find a way of doing it. I looked up a hover underline position, and tried using text-underline-position to being above but that doesn't do what I want it to do. How do I go about doing this?
In the second image, in the prototype I had designed to have the underline have a drop-shadow effect. How do I go about doing that with hover links? Can it even be achieved if I'm using an image as a background? Or would I need to save that as a .png with transparency? Any tips?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<header></header>
<div id="NavSection">
<div id="TopNav">
<nav id="MainNav">
<ul id="Menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<hr />
<div id="SecondNavSection">
<nav id="SecondNav">
<ul id="SecondMenu">
<li>Archives</li>
<li>Categories</li>
</ul>
</nav>
</div>
<div id="SiteTitle">
<h1 id="My">My<span id="Site">Site</span></h1>
</div>
</div>
<div id="ContentDiv">
<main id="ContentSection">
<div id="Content">
<p>Content goes here.</p>
</div>
</main>
</div>
<footer>
<p>My Site</p>
</footer>
</body>
</html>
CSS:
body {
background-color: #ffffff;
background: url(/images/background.jpg) no-repeat center center fixed;
background-size: cover;
resize: both;
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px;
font-family: Arial;
}
#font-face {
font-family: ubuntu-medium;
src: url(/fonts/ubuntu-medium.ttf);
}
/* #media (max-width:3440px){
body{background: url(/images/background.jpg) no-repeat center center fixed;}
} */
/* #media (min-width:480px){
body{background: url(/images/background.jpg) no-repeat center center fixed;}
} */
#NavSection {
margin-top: 3%;
}
#MainNav {
position: left;
margin-left: 11%;
}
#Menu li {
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
display: inline;
font-size: 15px;
list-style-type: none;
}
#Menu a:hover {
text-decoration-color: #414141;
text-underline-offset: 0.12em;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-thickness: 4px;
}
hr {
margin: 0px;
border: 2px solid red;
width: auto;
}
a {
color: #414141;
text-decoration: none;
}
a:active {
color: #ff0000;
}
#SiteTitle {
margin-left: 0%;
}
#My {
font-family: Impact;
font-weight: normal;
font-size: 30px;
color: #ffffff;
text-decoration: underline;
text-decoration-color: #414141;
text-decoration-thickness: 2px;
text-underline-offset: 0.08em;
}
#Site {
color: red;
}
ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}
#SecondNav {
float: right;
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
font-size: 15px;
margin-right: 11%;
}
#SecondMenu a:hover {
margin-bottom: 5px;
text-decoration-line: underline;
text-underline-position: above;
text-decoration-style: solid;
text-decoration-color: #414141;
text-decoration-thickness: 4px;
}
#SecondMenu li {
margin-bottom: 5px;
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
display: inline;
font-size: 15px;
list-style-type: none;
}
#ContentDiv {
width: 70%;
height: 40%;
position: absolute;
top: 30%;
left: 15%;
transform: translateX(0%);
background-color: rgba(255, 0, 0, 0.4);
}
#ContentSection {
width: 90%;
height: 60%;
position: absolute;
top: 20%;
left: 5%;
background-color: rgba(255, 255, 255, 0.9);
}
#Content {
margin: 3%;
}
Use this
HTML code
<div class="menu">
A
B
C
D
E
F
</div>
CSS
.body {
background:#222;
padding:50px;
}
.menu {
margin:0 auto;
with 90%;
}
.menu a {
display:block;
float: left;
padding:5px 0;
color:#fff;
text-decoration:none;
margin:0 10px; font-family:arial;
}
.menu a:hover {
border-bottom:3px solid #fff;
}
Hope gonna help you, also i would be glad if you rate my comment good!
Using two lists and using border on the li you can get the color.
.navbar {
position: relative;
margin-bottom: 5px;
font-family: ubuntu-medium;
font-weight: normal;
}
.navbar a {
text-decoration: none;
color: #414141;
}
.navbar ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar ul li {
display: block;
flex: 0 1 auto; /* Default */
list-style-type: none;
line-height: 2.5em;
margin-left: 1em;
}
.sub ul {
justify-content: flex-end;
}
.navbar::before{
position: absolute;
z-index: -1;
margin-top: 2.5em;
content: '';
border-top: 10px solid #FF0000;
width:100%;
}
.main li.active {
border-bottom: 10px solid #000000;
box-shadow: 0 4px 2px -2px #AAAAAA;
}
.sub li.active {
border-top: 10px solid #000000;
margin-top: -10px;
box-shadow: 0px -4px 2px -2px #AAAAAA;
}
<div class="navbar">
<nav class="main">
<ul>
<li>Home</li>
<li class="active">About</li>
<li>Contact</li>
</ul>
</nav>
<nav class="sub">
<ul>
<li class="active">Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
</nav>
</div>
I am building a menu. I have this code:
<nav>
<ul>
<li>Kontakt</li>
<li>Reference</li>
<li>Moje služby</li>
<li>Kdo jsem</li>
</ul>
</nav>
And CSS:
nav{
width: 100%;
height: 90px;
border-top: 3px solid red;
border-bottom: 1px solid gray;
background-color: white;
}
nav li{
float: right;
padding: 20px 35px 0 0px;
}
nav ul{
margin-right: 100px;
height: 90px;
list-style-type: none;
}
nav a{
text-decoration: none;
color: black;
font-size: 17px;
font-family: Montserrat;
font-weight: 700;
}
nav a:hover{
text-align: center;
color: 33adae;
What I am trying to do is to make the links clickable like blocks with the height of the whole navbar. The way I have done It so far, you can click only the text in the links.
Generally all that is needed is.
nav a{
display:block;
}
However for a fuller example it's generally easier to let the links determine the height of the header.
For centering, don't use floats, set the ul to text-align:center and the li to display:inline-block.
* {
margin: 0;
padding: 0;
;
box-sizing: border-box;
}
nav {
border-top: 3px solid red;
border-bottom: 1px solid gray;
background-color: white;
overflow: hidden;
/* clearfix */
}
nav li {
display: inline-block;
}
nav ul {
list-style-type: none;
text-align: center;
}
nav a {
display: block;
text-decoration: none;
color: black;
font-size: 17px;
font-family: Montserrat;
font-weight: 700;
height: 90px;
line-height: 90px;
padding: 0 25px;
}
nav a:hover {
text-align: center;
color: 33adae;
background: plum;
<nav>
<ul>
<li>Kontakt
</li>
<li>Reference
</li>
<li>Moje služby
</li>
<li>Kdo jsem
</li>
</ul>
</nav>
You could remove the padding from your lis and add it to your a tags. See example http://codepen.io/anon/pen/gaGxpb
Move your <li> padding to the <a> children, and give the links a height:
See codepen
NB: Added a border to the links so as you see the boundaries.
display the links as blocks display: block; and use the line-height to give them the height you want. Try this:
nav {
width: 100%;
height: 90px;
border-top: 3px solid red;
border-bottom: 1px solid gray;
background-color: white;
}
nav li {
float: right;
padding: 0px 35px 0 0px;
}
nav ul {
margin: 0 100px 0 0;
height: 90px;
list-style-type: none;
}
nav a {
display: block;
line-height: 90px;
text-decoration: none;
color: black;
font-size: 17px;
font-family: Montserrat;
font-weight: 700;
}
nav a:hover {
text-align: center;
color: 33adae;
<nav>
<ul>
<li>Kontakt</li>
<li>Reference</li>
<li>Moje služby</li>
<li>Kdo jsem</li>
</ul>
</nav>
Here is my version using height and with properties instead of padding, i used background colors so you can see how is working: http://codepen.io/aluknot/pen/wKrqaG
HTML:
<nav>
<ul>
<li>Kontakt</li>
<li>Reference</li>
<li>Moje služby</li>
<li>Kdo jsem</li>
</ul>
</nav>
CSS:
nav {
width: 100%;
height: 90px;
border-top: 3px solid red;
border-bottom: 1px solid gray;
background-color: white;
}
nav li{
float: right;
background: red;
text-align: center;
height: 100%;
width: 120px;
line-height: 90px
}
nav ul{
margin: 0;
padding-right: 100px;
height: 90px;
list-style-type: none;
background: green;
}
nav a{
text-decoration: none;
color: black;
font-size: 17px;
font-family: Montserrat;
font-weight: 700;
display: block;
width: 100%;
height: 100%;
background: blue;
}
nav a:hover {
background: black;
color: white;
}
I want to change background color (from #333333 to #292929) and keep parent image after making hover event on my list items, my problem is the color doesn't change it still always as before
this is my code :
the part of my problem:
.footer li a:hover {
border-bottom: 1px solid #484848;
border-top: 1px solid #191919;
height: 30px;
line-height: 30px;
border-left: none;
border-right: none;
display: block;
background: #292929 url(http://s10.postimg.org/yejg5cted/widget_bg.jpg);
overflow:hidden;
width: 100%
}
All css code
.footer {
background: #333333 url(http://s10.postimg.org/yejg5cted/widget_bg.jpg);
height: 318px;
}
.footer_container {
width: 960px;
height: 318px;
margin: 0 auto;
}
.footer h1 {
font-size: 18px;
font-family: Kozuka Gothic Pro;
padding-top: 46px;
color: #FFF;
}
ul.ul_links {
width: 225px;
height: 237px;
margin-top: 19px;
}
ul.ul_links a {
color: #cccccc;
text-decoration: none;
font-size: 13px;
line-height: 31px;
}
ul.ul_links a::before {
content: url(http://s3.postimg.org/7bb9a1m4v/links.png);
padding-right: 11px;
padding-left: 8px;
}
.footer li a:hover {
border-bottom: 1px solid #484848;
border-top: 1px solid #191919;
height: 30px;
line-height: 30px;
border-left: none;
border-right: none;
display: block;
background: #292929 url(http://s10.postimg.org/yejg5cted/widget_bg.jpg);
overflow:hidden;
width: 100%
}
jsfiddle
intending results :
Hello there TH3 AWAK3NING, what you need to do is simply change the opacity of your background like so
jsFiddle : https://jsfiddle.net/py3uwpxn/11/
HTML
<div class="footer">
<div class="footer_container">
<div class="Links">
<ul class="ul_links">
<li >www.example.com</li>
<li >www.1stwebdesigner.com</li>
<li >www.labzip.com</li>
<li >www.labzip.com</li>
<li >www.samplelink.com</li>
<li >www.outgoinglink.com</li>
<li >www.link.com</li>
</ul>
</div>
</div>
</div>
CSS
.footer {
background: #333333 url(http://s10.postimg.org/yejg5cted/widget_bg.jpg);
height: 318px;
}
.footer_container {
width: 960px;
height: 318px;
margin: 0 auto;
}
.footer h1 {
font-size: 18px;
font-family: Kozuka Gothic Pro;
padding-top: 46px;
color: #FFF;
}
ul.ul_links {
width: 225px;
height: 237px;
margin-top: 19px;
}
ul.ul_links a {
color: #cccccc;
text-decoration: none;
font-size: 13px;
line-height: 31px;
}
ul.ul_links a::before {
content: url(http://s3.postimg.org/7bb9a1m4v/links.png);
padding-right: 11px;
padding-left: 8px;
}
.footer li a:hover {
border-bottom: 1px solid #484848;
border-top: 1px solid #191919;
height: 30px;
line-height: 30px;
border-left: none;
border-right: none;
display: block;
background: rgba(0,0,0,.1);
overflow:hidden;
width: 100%
}
Using the background: rgba it also allows you to tint the colour of the div which will look like you have changed the colour of the background :)
This will not be possible because the actual image is what defines the original color. What you would need to do in this case is create the image with a transparent background (so it only has the grid dots) then you would be able to change the background color behind it and see the effect you want.
Once you have your new image, set the following properties:
ul.ul_links a {
background: #333333 url(http://s10.postimg.org/yejg5cted/widget_bg.jpg);
}
.footer li a:hover {
background-color: #292929;
}
Here is an example that just needs the new transparent image to be added
Just remove the background image Url from .footer li a:hover and you are good.
.footer li a:hover {
border-bottom: 1px solid #484848;
border-top: 1px solid #191919;
height: 30px;
line-height: 30px;
border-left: none;
border-right: none;
display: block;
background-color: rgba(0,0,0,0.2); //Updated
overflow:hidden;
width: 100%
}
For some reason, my drop down menu is being pushed to the right. It's supposed to open up directly below the link someone is hovering over, but it opens about 30px to the right and I can't figure out why. You can see the issue in action when you scroll over "Work" on my website: http://www.noellesnotes.com
My code:
CSS
ul.site-navigation {
text-align: center;
list-style: none;
}
ul.site-navigation li a{
padding: 50px 0 47px 0;
font-family: 'Arvo', serif, Georgia;
width: 125px;
float: left;
letter-spacing: 4px;
text-transform: uppercase;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
color: rgb(82,82,82);
border-bottom: 3px solid transparent;
}
ul.site-navigation > li {
position: relative;
width: 125px;
float:left;
margin: 0;
}
ul.site-navigation a:hover{
font-weight: bold;
border-bottom: 3px solid rgb(4,141,195);
text-shadow: rgb(200, 200, 200) 1px 1px 0px;
padding: 97px 0 0 0;
}
ul.site-navigation ul {
list-style: none;
height: 50px;
left: 0;
z-index: 1000;
padding: 0;
display: none;
}
ul.site-navigation ul li {
float: none;
}
ul.site-navigation li:hover ul {
display: block;
position: absolute;
top: 100%;
left: 0;
}
ul.site-navigation ul li a {
font-weight: regular;
font-size: 16px;
text-shadow: none;
padding: 5px 10px;
width: auto;
height: auto;
text-transform: uppercase;
border: 2px solid #FFF;
color: #FFF;
margin: 5px 10px 0 0;
}
ul.site-navigation ul li a:hover {
font-weight: regular;
font-size: 16px;
text-shadow: none;
padding: 5px 10px;
width: auto;
height: auto;
text-transform: uppercase;
border: 2px solid #FFF;
color: #FFF;
}
.site-title a {
color: rgb(185,40,141);
font-family: 'Arvo', serif;
text-transform: uppercase;
font-size: 63px;
background-color: rgba(255,255,255,1);
text-align: center;
text-shadow: #FFF 1px 1px,#ccc 2px 2px;
width: 500px;
float: left;
padding-top: 13px;
font-weight: normal;
letter-spacing: normal;
}
.site-branding {
display: table;
width: 100%;
height: 400px;
font-family: 'Lato', verdana, san-serif;
font-size: 6em;
text-shadow:1px -1px rgba(242,141,89,0.2);
text-align: center;
text-transform: uppercase;
color: rgb(255,255,255);
background-image: url('http://www.noellesnotes.com/wp-content/themes/portfolio/images/lights.jpg');
background-attachment:fixed;
}
HTML:
<ul class="site-navigation">
<li>About</li>
<li>Work
<ul class="submenu">
<li>Seventeen.com</li>
<li>One Direction Connection</li>
</ul>
</li>
</ul>
You have a left margin on all uls that are direct children of lis. (li > ul {margin-left:1.5em})
Add Something like this to your css to override that for your menu:
ul.site-navigation > li > ul {
margin-left:-2.75em
}
I think its natural because li tag has ul tag
You can use margin-left:-2px to fix this
I have created Html menu as follow
Football
Basketball
Baseball
then my css file is as follow:
#main-nav a
{
display: block;
float: left;
margin: 125px 0px 0px 0px;
color: #666666;
border: 1px #C0C0C0 solid;
background-color: #EEEEEE;
font-family: Arial;
font-size: 13px;
font-weight: normal;
font-style: normal;
text-decoration: none;
width: 106px;
height: 78px;
vertical-align: middle;
line-height: 78px;
text-align: center;
}
#main-nav a:hover, #main-nav .active
{
color: #666666;
background-color: #C0C0C0;
border: 1px #C0C0C0 solid;
}
I am trying to customize it a bit more by adding 30*30 icon of football etc in each corresponding button
i have tried to make every image as a Div and use position to make it in the corresponding button but this solution is fragile and not the best option.
can idea of better solution?
You can try this code:
<div id='main-nav'> Football<div class='icon'></div>
Basketball<div class='icon'></div>
Baseball<div class='icon'></div>
</div>
whit this css:
#main-nav a {
display: block;
float: left;
margin: 125px 0px 0px 0px;
color: #666666;
border: 1px #C0C0C0 solid;
background-color: #EEEEEE;
font-family: Arial;
font-size: 13px;
font-weight: normal;
font-style: normal;
text-decoration: none;
width: 106px;
height: 78px;
vertical-align: middle;
line-height: 78px;
text-align: center;
position : relative;
}
#main-nav a .icon {
height: 30px;
width : 30px;
background : red;//change this for the img.
position : absolute;
top : 0;
left : 35px;
}
#main-nav a:hover, #main-nav .active {
color: #666666;
background-color: #C0C0C0;
border: 1px #C0C0C0 solid;
}
Changing the red background for a background: url(/path/to/image)
Please, take a look at this jsfiddle.
Note: include a <div> intro a <a> it's valid in html5 but not in html 4.01. More info here.
Try this
#main-nav a
{
display: block;
float: left;
margin: 125px 0px 0px 0px;
color: #666666;
border: 1px #C0C0C0 solid;
font-family: Arial;
font-size: 13px;
font-weight: normal;
font-style: normal;
text-decoration: none;
width: 115px;
height: 78px;
vertical-align: middle;
line-height: 78px;
text-align: center;
background:url(http://img6a.flixcart.com/image/ball/4/g/g/vector-x-football-england-100x100-imade784dbrjbdzp.jpeg) no-repeat 50% 99% #EEEEEE;
background-size:25px
}
#main-nav a:nth-child(2){
background:url(http://www.iconshock.com/img_jpg/BRILLIANT/sports/jpg/128/american_football_icon.jpg) no-repeat 50% 99% #EEEEEE;
background-size:25px
}
#main-nav a:nth-child(3){
background:url(http://www.iconshock.com/img_jpg/BRILLIANT/sports/jpg/128/archery_icon.jpg) no-repeat 50% 99% #EEEEEE;
background-size:25px
}
DEMO
DEMO UPDATED
try this. your html
<div id="main-nav">
Football
Cricket
Tennis
</div>
css
#main-nav a
{
display: block;
float: left;
margin: 125px 0px 0px 0px;
color: #666666;
border: 1px #C0C0C0 solid;
background-color: #EEEEEE;
font-family: Arial;
font-size: 13px;
font-weight: normal;
font-style: normal;
text-decoration: none;
width: 106px;
height: 78px;
vertical-align: middle;
line-height: 78px;
padding-left:50px;
}
#main-nav a.football{
background:url("http://icons.iconarchive.com/icons/ampeross/qetto/32/icon-developer-icon.png") no-repeat 10px;
}
#main-nav a.cricket{
background:url("http://icons.iconarchive.com/icons/deleket/3d-cartoon/32/Axialis-Icon-Workshop-icon.png") no-repeat 10px;
}
#main-nav a.tennis{
background:url("http://icons.iconarchive.com/icons/deleket/mac-folders/32/Blue-Apple-icon.png") no-repeat 10px;
}
#main-nav a:hover, #main-nav .active
{
color: #666666;
background-color: #C0C0C0;
border: 1px #C0C0C0 solid;
}
my fiddle http://jsfiddle.net/ponrajpaul/4VMa4/
or if you want to use same icon for all links, remove all class names from a tags and use like this
<div id="main-nav">
Football
Cricket
Tennis
<div>
#main-nav a{
background:url("http://icons.iconarchive.com/icons/deleket/3d-cartoon/32/Axialis-Icon-Workshop-icon.png") no-repeat 10px;
}
a:nth-child(numbers) will not support in ie6. If you dont need ie old
browsers support, nth-child method is best to you..