I'm building a page with a header at the top, a menu on the left and a footer at the borrom. I've defined all of these using .
The link is in the menu. As long as I'm not applying the css, the links work, but as soon as I apply the css that is in an external file it stops working.
I can see it change when I hover and disappear when I click on it, but the page doesn't change.
It only works if I open the link in a new window or in a new tab. Why is it doing this? How can I fix it?
Here's the HTML code :
<body>
<div id="container">
<div id="header">
<h1>Site HTML</h1>
</div>
<div id="menu" >
<h1>Navigation</h1>
<ul>
<li> Javascript </li>
</ul>
</div>
<div id="content">
<p>
</p>
</div>
</body>
and here is the CSS for the menu and the link to clic on.
#menu {
min-width:20%;
max-width:20%;
min-height:80%;
max-height:80%;
background-color:#
margin:0;
padding:0;
position:fixed;
top:10%;
overflow:auto;
}
#menu li {
list-style-type:none;
font:large, arial,sans-serif;
}
#menu a:link,a:visited{
display:block;
font-weight:bold;
color:#FF6600;
background-color:black;
width:75%;
text-align:center;
padding:4px;
text-decoration:none;
}
#menu a:hover {color:#0000FF;}
#menu a:active {visibility:hidden;}
Remove #menu a:active {visibility:hidden;}
Don't think it makes any difference.
Because you are setting the property visibility hidden on active pseudo class. Just remove the line:
#menu a:active {
visibility:hidden;
}
http://jsfiddle.net/gomflo/KEq8U/
Related
I have linked between different pages. Now I want that if a visitor visits any page by clicking on the link, that link will changed into different colors.
In my case it's not working, I don't know why.
My code:
HTML:
<div id="pageLink">
<ul>
<li><div id="indexDiv">Welcome</div></li>
<li><div id="aboutMeDiv">Bio</div></li>
</ul>
</div>
CSS:
#index,#aboutMe{
text-decoration:none;
}
#index:visited,#aboutMe:visited{
color:red;
}
#indexDiv,#aboutMeDiv {
display:block;
text-decoration:none;
padding:5px;
color:green;
font-family:Tahoma;
font-size:20px;
}
#indexDiv:hover,#aboutMeDiv:hover{
color:gray;
}
#pageLink li{
display:inline-block;
list-style:none;
}
Here is the Live
you are having a div inside a anchor tag with style color:green;
change the css snippet as
#index:visited > div,
#aboutMe:visited > div {
color:red;
}
you will get red color when the anchor tag has :visited pseudo class.
I am new to web development and I building my first website. I want to create a header that has an image in the center and the nav menu surrounding it.
Here is the code I'm working with:
HTML:
</head>
<body>
<div id ="header">
<div id="nav">
<ul>
<li>About</li>
<li>Philanthropy</li>
<li><img src="http://i.imgur.com/cosDXx1.png"/></li>
<li>Why Join?</li>
<li>Contact</li>
</ul>
</div>
</div>
</body
>
CSS:
body {
margin:0px;
padding:0px;
}
#header{
width:100%;
height:110px;
background-color:black;
}
#nav ul{
list-style-type:none;
font-family:"Slabo 13px",serif;
float:center;
}
#nav ul li{
padding:10px;
display:inline;
margin-left:60px;
margin-bottom:20px;
}
#nav ul li a{
text-decoration:none;
color:#006600;
}
#nav ul li a:hover{
color:#CC0000;
}
JSfiddle link:
http://jsfiddle.net/5g6sm01q/
On my screen it is in a line but when I shrink it (and in the jsfiddle example) it is not. Please any tips or help with this problem would appreciated.
Convert all the pixel values into % or atleast the padding and the left and right margins, and see the change..I've just edited your fiddle a little bit..
see this http://jsfiddle.net/5g6sm01q/2/
Chnge the css like this
body {
margin:0px;
padding:0px;
}
#header{
width:100%;
height:110px;
background-color:black;
}
#nav ul{
list-style-type:none;
font-family:"Slabo 13px",serif;
float:center;
}
#nav ul li{
padding:0.5%;
display:inline;
margin-left:2%;
margin-bottom:20px;
}
#nav ul li a{
text-decoration:none;
color:#006600;
}
#nav ul li a:hover{
color:#CC0000;
}
UPDATE
As #Krodmannix mentioned in his comment,there is a way in CSS to dictate how to format the page based on different screen sizes using media queries.It makes it very easy to adapt your site to mobile screens without any page redirection
The website I'm developing has a horizontal scroll bar and I'm not sure why.
Fiddle
HTML
<body>
<div id="header">
<div id="logoHolder">
Logo
</div>
<div id="loginHolder">
Login
</div>
<div class="container_12">
<div class="grid_12">
<div id="navigationHolder">
<ul id="navigation">
<li>GuidedChoice</li>
<li>Pricing</li>
<li>FAQs</li>
<li>Investment Tools</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</div>
</body>
CSS
body {
}
/*Header*/
#logoHolder{
width:20px;
background-color:green;
float:left;
}
#loginHolder{
width:20px;
background-color:green;
float:right;
}
#navigationHolder{
display:block;
margin-left:auto;
margin-right:auto;
width:775px;
background-color:brown;
height:auto;
}
/*Navigation*/
#navigation{
list-style:none;
font-family:Arial;
font-size:1.3em;
}
#navigation li{
float:left;
display:block;
}
#navigation li a{
color:inherit;
text-decoration:none;
display:block;
text-align:center;
padding:1.25em;
}
#navigation li a:hover{
background:#609941;
text-decoration:underline;
}
I'm using the 960 gridsystem as well.
Example
It is #loginHolder
You can either take away width:20px; or give it a margin-right:20px; and it will go.
You ought to be using the development tools that are built into browsers these days. Firefox and Chrome both have features that can be accessed by pressing F11. There is also Firebug for firefox.
Any of these will go into an 'inspect elements' mode where you can hover over your page and identify where your elements sit and exactly how big they are, even when they are filled with whitespace.
These tools also let you experimentally edit css directly in situ, so you can find a better way to style the elements the way you intended them to work.
Also Chris Pederick's Web Developer Toolbar has proven to be a useful development tool.
My final goal is to create what you see in image B. Note: the menu bar must be centered on the page. I did create B by setting the vertical-align on the image to middle. However, as a result of doing this my dropdown menu is slightly separated from the main header. Therefore, i cannot select the sub-menu items when i move my mouse cursor down. Any ideas on making this work ? Thanks Jillian
<style>
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
position:relative;
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
#nav ul{
position:absolute;
/*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */
left:-9999px;
margin:0;
padding:0;
text-align:left;
}
#nav ul li{
display:block;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
text-decoration:underline;
background:#f1f1f1;
}
#nav li:hover ul a{
text-decoration:none;
background:none;
}
#nav li:hover ul a:hover{
text-decoration:underline;
background:#f1f1f1;
}
#nav ul a{
white-space:nowrap;
display:block;
border-bottom:1px solid #ccc;
}
a{
color:#c00;
text-decoration:none;
font-weight:bold;
}
a:hover{
text-decoration:underline;
background:#f1f1f1;
}
</style>
</head>
<body>
<ul id="nav">
<li>Item one</li>
<li>Item two
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
<li class="double-line">
<img style="vertical-align:middle" src="img/logo_large.png" alt="logo" /></li>
<li>The Fourth</li>
<li>Last</li>
</ul>
</body>
</html>
You do something like,
#nav ul{
background:url('img/logo_large.png') no-repeat center center;
/* more CSS here */
}
unless you have to use it as a link. Then consider position:absolute; for the image with #nav ul being position:relative;, and use a floating layout for the other links with a z-index to overlap where they should hang over.
You can just offset the submenu up to cover the logo height.
Here is a JSfiddle using the google logo and altering the submenu style by adding this:
#nav ul {
top: 20px;
}
Try to insert in CSS line-height: X px; (for example, parent div height) in each menu title (Item one, Item two, The Fourth, etc.)
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