i'm having this really frustrating problem where a thin silver of the color that i'm applying as the a:hover,a:active is appearing outside of where it should. i have an image in absolute positioning right above the menu that is exhibiting this....i could just move the image up one but i want to solve it the correct way....here is my css
.logo
{
width:200px;
height:108px;
position:absolute;
left:5px;
top:10px;
}
#menu
{
position:relative;
top:110px;
padding-top:0px;
clear:both;
}
ul
{
list-style-type:none;
overflow:hidden;
padding:0px;
width:900px;
}
a
{
text-decoration:none;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
font-weight:bold;
text-align:center;
background-color:#ffffff;
padding:3px;
width:120px;
height:auto;
color:#000000;
float:left;
}
a:hover,a:active
{
background-color:#804000;
color:#ffffff;
}
here is my corresponding html:
Sorry, your browser doesn’t support JavaScript!
U4U Test Page
<div class="header">
<img class="logo" src="linktofilehere" alt="U4U Logo" />
</div>
<div id="menu">
<ul>
<li><a href="/" >Home</a></li>
<li>About Us</li>
<li>Programs</li>
<li>US Movement</li>
<li>Sponsorship</li>
<li>Donate</li>
</ul>
</div>
</body>
</html>
i've searched through the help knowledge and couldn't find anything related really....i'm sure it is something simple....any help would be appreciate, i think it might have to do with positioning or not defining the hover area correctly but i'm not sure....i just started learning html and css last week so please be kind!
You will need to create a new style for the 'a' of your image. If you don't, it will use the standard 'a' stylings of your CSS.
Like this :
a.imglink:hover
{
background:none;
}
I'd add a style to remove the background color from linked images - that way you won't run into issues with transparent PNGs etc:
.imglink:hover {
background-color:transparent;
}
I just specifically targetted links inside the list for the background color on hover..
CSS:
#menu > ul > li > a:hover,a:active
{
background-color:#804000;
color:#ffffff;
}
http://jsfiddle.net/cSSU7/
Did this solve your problem?
/* remove the background */
.imglink:hover { background: none; }
/* if you run into specificity issues, be more selective! :) */
a.imglink:hover { background: none; }
/* or remove the padding from just the first a */
a:first-of-type{ padding: 0; }
/* or remove the background from the first link */
a:first-of-type{ background: none; }
DEMO
Related
I've been trying to code this tumblr page of mine and I'm currently stuck at the links section. I want my sidebar image to change when I'm hovering over my links, the "HOME", "ASK" etc. Is it possible to do this without using javascript? I've googled it but I haven't been able to come up with a solution, having tried adding different image classes, etc. All I've been able to do is have images appear UNDER the links. I've added the sidebar and links code from my page below. Thanks in advance!
#sidebar {
position:fixed;
width:203px;
top:70px;
left:70px;
height:auto;
padding:15px;
background-color:#1c1c1c;
}
#sidebarimg img {
width:203px;
padding-bottom:5px;
}
#links {
width:203px;
height:auto;
margin-left:auto;
margin-right:auto;
font-family:times;
text-align:center;
text-transform:uppercase;
opacity:2;
}
#links a {
margin-top:1px;
margin-bottom:2px;
border:1px solid #fff;
width:98px;
display:inline-block;
color:#999999;
padding-top:5px;
padding-bottom:5px;
font-size: 13px;
-moz-transition-duration:0.8s;
-webkit-transition-duration:0.8s;
-o-transition-duration:0.8s;
}
#links a:hover {
background:#fff;
color:#000;
-moz-transition-duration:0.8s;
-webkit-transition-duration:0.8s;
-o-transition-duration:0.8s;
}
<div id="sidebar">
<div id="sidebarimg"><img src="{image:sidebar}"></div>
<div id="links">
{text:Link 1 Text}
ASK
MY EDITS
{text:Link 4 Text}
</div>
EDIT: thanks for the help guys!
No, this is not possible. You can only change an element based on CSS hover behaviours based on the hover state of itself or one of the higher identifiers in your selector.
You can 'cheat' a little using the adjacent and general sibling selectors, but not to entirely different parts of the DOM tree.
Here's an example of both cases where the hovering of an element can affect another element's rendering:
div {
border:1px solid black;
padding:5px;
}
div:hover button:first-of-type {
background:red;
}
button:hover + button {
background:red;
}
<div>
<p>The first button will highlight when you mouse into the container. The second button will highlight when you hover over the first.
<button>Button 1</button><button>Button 2</button>
</div>
In all more complex cases you'll need Javascript.
You could add an :after pseudo element to the links.
The pseudo element could then be position absolutely above the links.
Then apply a different background-image for each link.
See this jsFiddle
#links a:after {
content: '';
position: absolute;
top: 15px;
left: 15px;
width: 200px;
height: 200px;
}
#links a:nth-child(1):hover:after {
background-image: url('...');
}
I want to change the colour of the border on my navigation bar but it ain't working for me.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<title> site </title>
</head>
<style type="text/css">
body
{
background-color:#75b5d6;
color:white;
font-family:"Arial";
text-align:center;
}
a:link
{
color:white;
}
a:visited
{
color:white;
}
a:hover
{
color:white;
}
a:active
{
color:white;
}
.nav
{
border:3px solid white;
border-width:0px;
list-style:none;
margin:2;
padding:2;
text-align:center;
background-color:orange;
font-family:"Bookman Old Style";
}
.nav li{
display:inline;
}
.nav a
{
display:inline-block;
padding:10px;
}
h1
{
font-size:40;
font-family:"Lucida Handwriting";
}
h2
{
font-size:27.5;
text-decoration:underline;
}
p
{
font-size:12;
}
</style>
<body>
<h1> Kevril.net </h1>
<ul class="nav">
<li>Home</li>
<li>site1</li>
<li>site2</li>
</ul>
<h2>Welcome</h2>
<p>Hellow</p>
</body>
</html>
what did i do wrong? Is it something in the css part or the html? I would be very happy if you can help. thanks.
I'm assuming you mean the .nav class. If so, you have:
border:3px solid white;
border-width:0px;
Make sure it has a width and you'll see the colour you set.
You have a border-width:0px; in your style for .nav which is making your border not appear. Remove that line (you set your width in the shorthand border definition anyway) and it should work.
It's handy for these kind of things to use a developer tool such as Chrome's "Inspect Element" to help you work out what style's breaking it.
(IE has "Developer tools" and Firefox has something similar built in, or you can install firebug)
That's because on .nav you've specified border-width:0;.
That's effectively rendering your border with no width, even though you specified 3px in your border style.
Take that off and it works.
DEMO: http://jsfiddle.net/cVNwn/
Remove border-width:0px; from your .nav and it should work
Demo: http://jsfiddle.net/zRQdj/
I'am trying to make a navigation bar horizontal but at the moment its vertical. Any help would be great. The problem is that its vertical. I have made the list in html and then used my other file in css to edit it.
HTML:
<html>
<head>
<link rel="stylesheet" href="Style/style.css" type="text/css"/>
</head>
<body>
<div class="horizontal">
<ul>
<li>Home</li>
<li>News</li>
<li>Articles</li>
</ul>
</div>
</body>
<html>
CSS:
div.horizontal
{
width:100%;
height:63px;
}
div.horizontal ul
{
list-style-type:none;
margin:0;
padding:0;
}
div.horizontal li
{
float:left;
}
div.horizontal a
{
display:block;
width:86px;
}
div.horizontal a:link,div.horizontal a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
div.horizontal a:hover,div.horizontal a:active
{
background-color:#7A991A;
}
Personally, I always set up my horizontal nav bars with CSS like this (using your current CSS as starting point):
div.horizontal li {
width:86px;
height:inherit;
display:inline-block;
/* Fix bug in IE7 and below */
zoom:1;
*display:inline;
}
div.horizontal li a {
display:block;
width:100%;
height:100%;
}
The inline-block on the li will let it sit horizontally, and declaring its width/height creates the appropriate container for the a. The a then inherits the height/width from the li container. The lack of float:left also eliminates the need to clear anything.
Edit: updated to show the workaround for IE7 and below not respecting inline-block;
Try:
div.horizontal a
{
display:block;
width:86px;
float: left;
}
Use
display:inline-block;
You can't use the current method for Horizontal ,As blocks position themselves vertically in the flow.
But this attribute overrides the flow and makes it see itself as a inline/block hybrid.
i have made a toolbar using links placed inside listitems but the problem is that i cant get my toolbar to sit on a "div" placed below it. This is what i want to see.
but this is what am getting in firefoxNotice the space between my 'toolbar' and the div below it. Questionswhy is the code displaying properly in jsfiddle but displaying badly if i run it directly in fierfox?How can i solve the problem?
ps:
here is the html
<html><head>
<link rel='stylesheet' type='text/css' href='style.css'>
</head><body>
<div id='headercontainer'>
<h2>welcome to research club</h2>
<ul class='mainNavigation'>
<li><a class='currentPage' href='#'>Home</a></li>
<li><a href='#'>Meetups</a></li>
<li><a href='#'>Feedback</a></li>
<li><a href='#'>About</a></li>
</ul>
</div>
<div id='page'>
<p> this is a simple paragraph inside the page that is full of meaningless words but tries to populate a page . mama miya tolina galya mamba eno.</p>
</div><!--#page-->
</html>
Here is the css
div#headercontainer
{
position:relative;
}
div#page
{
margin:0px 50px 0px 50px;
padding:0 450px 0 30px;
position:relative;
background:#181C21;
clear:right;
color:white;
}
ul.mainNavigation
{
list-style:none;
margin:0px 50px 0px 0px;
position:absolute;
bottom:0; right:0;
padding:0;
}
ul.mainNavigation li
{
background:#192839;
color:white;
float:left;
height:1.6em;
padding:5px;
}
ul.mainNavigation li a
{
color:#bbbbbb;
display:block;
text-decoration:none;
height:1.6em;
font-size:0.9em;
}
ul.mainNavigation li a:hover
{
border-bottom:2px solid #0F67ff;
color:white;
}
ul.mainNavigation li a.currentPage
{
border-bottom:2px solid #176092;
}
I'm guessing that you haven't added a general selector to put all margins and paddings to 0, in this case you would need to add:
div#headercontainer {
position:relative;
padding:0px;
margin:0px;
}
or
*{
padding:0px;
margin:0px;
border:0px;
}
All browsers have some basic setups for non defined elements meaning I can set the I want all texts to be white instead of black and if you haven't set the color all the texts will be written in white.
Hoping this will help…
Use float and clear instead of position absolute.
Like this:
div#headercontainer{
float:left;
position:relative;
}
h2{
float:left;
}
ul.mainNavigation{
float:right;
}
#page{
clear:both;
float:left;
}
Hope this help... (This is my first answer on this website :S)
I have a navigation bar with a semi-transparent background but the navigation links are also semi-transparent. How can I make it so my links do not become transparent? I have attached a copy of my code below (also available on JSFiddle.
<style type="text/css">
body{
margin:0;
padding:0;
}
a{
font-family:sans-serif;
font-size:15px;
}
#nav{
height:30px;
background-color:#dddddd;
filter:alpha(opacity=60);
opacity:0.6;
}
#right{
position:absolute;
top:0;
right:0;
}
.gbt{
display:inline-block;
line-height:26px;
}
.gbtc{
margin:0;
padding:0;
}
.gbts{
padding:6px;
}
</style>
<div id="nav">
<ol class=gbtc>
<li class=gbt><span class=gbts>Link</span></li>
<li class=gbt><span class=gbts>Link</span></li>
<li class=gbt><span class=gbts>Link</span></li>
<li class=gbt><span class=gbts>Link</span></li>
<li class=gbt><span class=gbts>Link</span></li>
</ol>
</div>
Any ideas are much appreciated and I hope you can understand what I'm trying to describe. The code I have provided is easier to see with a background image.
Thanks in advance,
Callum
To set the opacity of the background only, you can set an rgba value for the background colour. This will not affect any child elements.
#nav {
background:rgba(221, 221, 221, 0.6);
}
IE does not support rgba however. For this, you need to use a proprietary filter:
#nav {
background:rgba(221, 221, 221, 0.6);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=# 99dddddd);
}
I would do it like this: http://jsfiddle.net/5p3vN/
html:
<div id="bg"></div>
<div id="nav">
<!-- the list -->
</div>
css:
#bg{
height:30px;
width: 100%;
background-color:#dddddd;
filter:alpha(opacity=60);
opacity:0.6;
}
#nav{
position: absolute;
top:0;
}
The opacity in CSS is inherited to children. Full Stop. To overcome this create a the transparent background to your navigation seperately and absolutely position your li items over it with a higher z-index. There are other workarounds but they all require some form of js, but to do it with pure css this is what you want.