I'm fairly new to HTML/CSS, and am developing a very simple website with a white menu bar on the top (it looks better than it sounds). However, unfortunately the menu bar background is transparent - text seems to appear within the menu bar as I scroll down in the page. How do I make a white background non-transparent?
Without seeing your code, I will recommend a few things.
set background: white;
set opacity: 1.0;
That should do the trick. Please post your code if you are still having problems.
You can accomplish that by declaring background color as white.
Example:
<style>
#menu-id{
background-color: white;
}
</style>
<style>#menuid{background: rgba(255, 255, 255, 0.3);}</style>
<style>#menuid {
background: rgba(255, 255, 255, 0.3);
}
</style>
Use background color just like following example, change .box background color #fff to get the white color.
.box {
width:100%;
background:#eee; /*background:#fff; use here white background */
}
.box ul {
margin:0px;
padding:0px;
list-style:none;
}
.box ul li {
display:inline-block;
}
.box ul li a {
display:block;
padding:5px;
margin:1px;
text-decoration:none;
}
.box ul li a:hover {
background:#ddd;
}
<div class="box">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
Related
Using background cover image with some transparency making my top navigation menu links text ugly and harder to read. How can I make it correct?
HTML -
<div id="wrapper"> <!-- wrapper starts here -->
<div id="header"> <!-- header starts here -->
<h1>example.com</h1>
</div> <!-- header ends here -->
<div id="top_nav"> <!-- nav starts here -->
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
<div class="clr"></div>
</div> <!-- nav ends here -->
<div style="height:1000px;"></div>
</div>
CSS -
html
{
background:url(http://www.designmyprofile.com/images/graphics/backgrounds/background0172.jpg) no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
#wrapper
{
width:980px;
margin:0 auto;
background-color:#FFFFFF;
background-color:rgba(255, 255, 255, 0.7);
}
#top_nav
{
width:100%;
background-color:#3079ED;
position:relative;
}
#top_nav ul
{
margin:0;
padding:0;
list-style-type:none;
}
#top_nav ul li
{
float:left;
}
#top_nav ul li a
{
background-color:#3079ED;
display:block;
text-align:center;
text-decoration:none;
padding:8px 16px;
color:#FFFFFF;
font-size:14px;
border-right:1px solid #6199DF;
}
#top_nav ul li:last-child a
{
border-right:none;
}
#top_nav ul li a:hover
{
background-color:#6199DF;
}
So please tell me how can I make my menu link text clean and more readable as regular text while keeping the background image transparency.
Here is DEMO
Read back again and see your main problems are how you chose to do the background, and that the bar doesn't extend across as the CSS says it should. Try to make these modifications.
In #topnav {}
Below
width: 100%;
add
height: 32px;
The height being 0px is causing the short menu bar error. Also you can remove
position:relative;
It is assumed in this case already.
I would also change the background of wrapper from
background-color:rgba(255, 255, 255, 0.7);
to
background-color:rgba(75, 75, 75, 0.45);
and add
h1
{
color: #fff;
text-shadow: 2px 2px #000;
}
This tends to do better on backgrounds comprised at least half of darker tones.
Should fix your short nav bar problem and make everything easier to read. As well as show off your background better.
DEMO
HTML
<ul id="NavList">
<li id="Home"></li>
<li id="About"></li>
</ul>
CSS:
#Home {
background: url('NavIcons/1.gif');
}
#Home a:hover {
background: url('NavIcons\2.gif');
}
I am creating a navigation list that changes its image on hover, but it doesnt work.
If you want to show the background change of #Home or #About when hovering only on a then you can use the following:
HTML
<ul id="NavList">
<li id="Home">1<div></div></li>
<li id="About">2<div></div></li>
</ul>
CSS
#Home,#About {
position:relative;
width:70px;
height:50px;
}
#Home div, #About div{
position:absolute;
background: url('http://i.stack.imgur.com/2JzQz.jpg');
background-position:-20px 0px;
top:0px;
width:100%;
height:100%;
}
#Home a,#About a{
position:absolute;
top:20px;
left:20px;
z-index:100;
}
#Home a:hover+div , #About a:hover+div{
background: url('http://i.stack.imgur.com/7rx8G.jpg');
background-position:-20px 0px;
}
Demo
Got this idea from How to style the parent element when hovering a child element? .My CSS is different but using same idea.
a tag will probably not be large enough to show your image. You can try this
#Home {
background: url('NavIcons/1.gif');
}
#Home:hover {
background: url('NavIcons/2.gif');
}
or give width and height to a.
try like this
#Home {
background: url(NavIcons/1.gif) 0 0 no-repeat;
}
#Home:hover {
background: url(NavIcons/2.gif) 0 0 no-repeat;
}
JsFiddle demo : But this for changing color on hover
Please check for image URL if not coming properly
I think you might want to try styling the A rather then the LI since it's just a placeholder as list item for the actual link.
#Home a {
background: url('NavIcons/1.gif');
}
#Home a:hover {
background: url('NavIcons/2.gif');
}
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
I have a horizontal menu composed as an un-ordered list, each list item is a link and there are special expanding list items that are, well, expandable (they open up a new vertical style menu). I want to have the menu background transparent black, and with a white border along the bottom. I also want the expandable list items to have a bottom arrow sticking out. Unfortunately setting the outer triangle to be white and the inner triangle to transparent black shows the white triangle underneath. Is there any way of getting a truly transparent inner triangle such that the menu could be placed on a background image or texture?
http://jsfiddle.net/RMCtk/2/
HTML:
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li class="expand">Product
<ul>
<li>pro1</li>
<li>pro2</li>
<li>pro3</li>
</ul>
</li>
<li>lalalalalalala</li>
<li>Pickles</li>
<li>Contact</li>
</ul>
</nav>
</body>
CSS:
nav {
top:50px;
line-height:20px;
font-size:20px;
width:calc(6*150px);
height:auto;
box-sizing:border-box;
}
nav ul {
margin:0;padding:0;
list-style-type:none;
}
nav ul li {
border:1px solid blue;
border-right:none;border-top:none;border-left:none;
float:left;
width:150px;
background-color:white;
box-sizing:border-box;
}
nav ul li a {
display:block;
width:150px;
padding:5px 0;
text-align:center;
}
nav ul li:hover {
background:orange;
}
nav ul li ul {
display:none;
}
nav ul li:hover > ul {
display:block;
position:absolute;
left:-450px+900px; /*margin-left + width of #nav*/
top:30px;
width:150px;
}
a:link, a:visited {
color:black;
font-family:Arial;
text-decoration:none;
}
li.expand:before {
content:'';
position:absolute;
height:0;
width:0;
border-left:15px solid transparent; /* left arrow slant */
border-right:15px solid transparent; /* right arrow slant */
border-top:15px solid blue; /*bg color here*/
margin-left:60px; /*75-15*/
margin-top:29px;
}
li.expand:after {
content:'';
position:absolute;
height:0;
width:0;
border-left:14px solid transparent; /* left arrow slant */
border-right:14px solid transparent; /* right arrow slant */
border-top:14px solid rgba(0,0,0,0.5); /*bg color here*/
margin-left:60.5px;
}
li.expand:hover:after,li.expand:hover:before {
display:none;
}
As you can see in the example, the border is blue, the background should be TRANSPARENT, and NOT WHITE. White would match the background of jsfiddle content box giving the illusion of transparency, but not true transparency. If this cannot be done, can anyone suggest a 'proper' way I could do this?
The trick you have used to create the triangle is by manipulating the border widths. The arrow is a border - you can't set a border color on that (if i understand what you meant correctly).
How would i change the colour of my nav bar in this code?
CSS
<style type="text/css">
body
{
background-color:#454545;
color:white;
font-family:"Courier New";
text-align:center;
}
a:link
{
color:white;
}
a:visited
{
color:white;
}
a:hover
{
color:white;
}
a:active
{
color:white;
}
.nav
{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
.nav li{
display:inline;
}
.nav a
{
display:inline-block;
padding:10px;
}
h1
{
font-size:40;
}
h2
{
font-size:27.5;
text-decoration:underline;
}
h3
{
font-size:20;
}
p
{
font-size:12;
}
</style>
HTML
<li>Home</li>
<li>Youtube</li>
<li>Twitter</li>
I've looked up how to change it but it only gave me things about twitter. I just want to know how to change the navigation bar colour not the whole page colour.
To change the background colour of the navigation bar itself, add this to the .nav class:
background-color:#002d60;
You could use something like colorpicker.com to find colour hexadecimal codes.
If you would instead like to change the colour of the text in the navigation bar, add a color property like so:
color:#003d60;
For both of these instances, you could also use rgba(n,n,n,n), rgb(n,n,n) or even hsl(n,n,n) to select colours with red-green-blue or hue-saturation-lightness values.
Add a background to the .nav block?
background: #FFDD00; //some color
Add this is the right section of css to colorize some element.
background-color:#000;
It is difficult to tell without seeing all the code or the desired effect, but background-color is the CSS property you want for changing the background, or color for changing the text color.