I tried creating a link that changes color when you hover over it. It's a box element with a purple background that changes to fuchisa when you hover over it. It floats to the left of the page. Right next to it, I have another element, it's a link to google. The clear;left property is supposed to prevent the link from appearing next to the floating element on the left. It's not doing that. In style in head, I have
p.new a {
border: 1px solid purple;
float: left;
width: 80px;
height: 25px;
color: white;
text-align: center;
and
div.link {
clear: left;
}
And this is my body.
<h1>Penguins</h1>
<br>
<p class="new" >
Hover
</p>
<div id="link">
Check out the table
</div>
</body>
Full Code Here
Your css selector suggestes link is a class name, while it is id, use div#link selector.
Related
Do you have any ideas why sass does not recognise the child and creates new block instead?
HTML:
<div class="menu_inside">
Map
Users (8 / 39)
Events
<a href="#" class="menu_link" id="menu_content">Content
<div class="menu_div_dropdown">
<a>sdfsd</a>
</div>
</a>
Setup
Logs
</div>
CSS:
.menu_inside {
float: right;
text-align: center;
}
.menu_inside .menu_link {
color: #353434;
font-size: 11px;
border-right: 1px #cecccc solid;
float: left;
min-width: 53px;
padding: 10px 20px 9px 20px;
}
.menu_inside .menu_link:first-child {
border-left: 1px #cecccc solid;
}
.menu_inside .menu_link:hover {
background-color: #FFF;
}
.menu_inside #menu_content .menu_div_dropdown {
display: none;
position: absolute;
}
.menu_inside #menu_content:hover .menu_div_dropdown {
display: block;
}
I checked on inspect element on chrome and it shows that my sdfsd is in the new block but not as a Content child. If I remove the a from sdfsd it shows everything OK. Any ideas? Thank you
You can't have a div inside an anchor tag... block element inside an inline element is semantically incorrect. On top of that, you have an anchor tag within an anchor tag. Also semantically incorrect. Either make the div a span and remove the inner anchor, or rewrite your code to something else.
UPDATE
I stand corrected for HTML5...
HTML 5 states that the <a> element "may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)".
But your code is still wrong based on the fact that you have a link within another link. You still need to fix that.
I am trying to create a button for my link which has the name on the button
and allows the user to click on it and go to the link.
Also I'm not sure why but my link "click-able range" seems to be extended.
Here is the Code:
<body>
<div id="container">
<div id="link">My Favorite Website</div>
</div>
</body>
Here is the CSS:
#container {
width:960px;
margin-left: auto;
margin-right: auto;
padding: 30px 0px;
}
a {
padding: 7px 100px;
border-radius: 10px;
background-size: 80px 60px;
background-color: green;
text-decoration: none;
}
#link {
padding: 7px;
font-size: 15px;
font-weight: bold;
font-style: italic;
}
Thanks!
Your link is inline element so you need to make it block or inline-block to add your styles so:
CSS
a {
display:inline-block;
}
Having a block element within an inline one is causing your problems.
By default, anchors are displayed inline. You need to display it a little differently, as inline-block:
a {
padding: 7px 100px;
border-radius: 10px;
background-size: 80px 60px;
background-color: green;
text-decoration: none;
display:inline-block;
}
JSFiddle
Remove div tag into a tag..
Demo
<div id="container">
My Favorite Website
</div>
just add this to #link in css
appearance:button;
-moz-appearance:button;
-webkit-appearance:button;
is an inline element. To make it behave like a block level element, you need to define its display property in CSS.
a {display:block;} or a {display:inline-block;}
and your link "click-able range" seems to be extended, because you are using a , which is a block level element, inside your tag.
Block level elements take the entire width of its container.
You need to redefine its bevavior.
link{display:inline-block;} or #link{display:inline;}
So here is the head container I'm using right now.
<header>
<div class ="headcontainer">
<nav class ="links">
Home
Page1
page2
</nav>
<nav class ="login">
Login
page4
</nav>
</div>
</header>
this is the CSS part:
.headcontainer {
width: 960px;
margin: auto;
header {
width: 100%;
height: 35px;
z-index: 10;
position: fixed;
top: 0;
left: 0;
background: #A7A7A7;
}
.links {
float: left;
text-align: left;
}
.links a {
float: left;
width: auto;
height: auto;
font-size: 16px;
color: #FFF;
font-weight: 600;
margin: 10px 0 0 15px;
}
Basically I have different words I can click on at the top of the website, basically acting as a navigation header. So basically I have a stripe of line with color grey as background with white color on the text. like this:
What I want to do is that when I hover over one of these words it will turn the background white and make the text grey instead for just that word in a square. Like this:
I tried a lot of ways, but I couldn't get it to work. Would appreciate any help I can get! Thanks.
Add this to your css:
.links a:hover {
background: white;
color: gray;
}
You can use CSS :hover selector on the element(s) and then change the color and background to whatever you want Look here
Or you can use jQuery's .hover() function. Look here
You can accomplish this using jQuery.
Your container for the links will require an id.
When you hover over a chosen link an onhover action needs to be applied, this will trigger a jQuery action to amend the CSS.
A good place to start would be div background color, to change onhover accompanied with a short jQuery function to change the link colors.
So, I have a simple login page that has a light green background, and would like to change the background color to a light red when the 'loginbox' div with id = 'loginbox' also has a class 'error'. My page looks as follows:
VALID HTML http://i1154.photobucket.com/albums/p525/covertcj/ScreenShot2012-01-16at20759PM.png
with the relavent HTML looking like:
HTML (Before adding error class):
<div id="loginbox">
<span>Username:</span>
<input>
<span>Password:</span>
<input>
<button>Submit</button>
</div>
With the CSS given below, I feel that this should work; however, when adding the error class to the div, nothing happens.
CSS:
#loginbox {
margin: auto;
padding: 25px 50px;
width: 300px;
height: 100px;
border: 1px solid #e9e9e9;
background: #EBFFEF;
}
#loginbox .error {
background: #FFEBEB;
}
#loginbox input {
height: 15px;
margin: 3px 0px;
width: 190px;
float: right;
}
#loginbox span {
height: 15px;
width: 60px;
margin: 3px 0px;
padding: 3px 0px;
float: left;
}
#loginbox button {
margin-top: 30px;
float: right;
}
HTML (After after error class):
<div class="error" id="loginbox">
<span>Username:</span>
<input>
<span>Password:</span>
<input>
<button>Submit</button>
</div>
Am I possibly misusing this technique? Any help in this matter would be greatly appreciated.
Thanks,
Chris Covert
Your selector is incorrect: #loginbox .error is selecting all elements with class error contained within the element selected by #loginbox. This works exactly the same way that #loginbox input works - You're selecting input elements within the #loginbox div.
To refine a selector with additional class/attribute selectors, you need to chain them together without whitespace. In your specific example, remove the space and use:
#loginbox.error { ... }
Always remember, seperating your selectors by whitespace means you're selecting nested tags.
the problem is here:
#loginbox .error {
The #loginbox has class .error, so you need to target that with no space between:
#loginbox.error {
HTML:
<div id="loginbox" class="error">
<span>Username:</span>
<input>
<span>Password:</span>
<input>
<button>Submit</button>
</div>
Should work just fine if you change
#loginbox .error
to
#loginbox.error
Adding a space means you are styling a sub-element of #loginbox. With no space, we are selecting the <div /> with id loginbox AND having the class error
I have a div that is a link to another page. When someone hovers over the div(ie, link) I want the whole div's background color to go blue. I would like to do this all in CSS because javascript may not work with everyone.
My Problem: My code below attempts to do this, the link works fine BUT when I hover over the div the background doesn't change color. What do you think I am doing wrong & how do you think I can fix this to make the div change background color on hover?
I have a feeling that I should place the link(a element) inside the div(instead of outside) but I can never get the a to stretch to the full space of the div that way.
<html>
<head>
<style type="text/css">
<!--
body { background-color: RGB(218,238,248); }
#rentalAnnc { margin-top: 5%; border-color: #99CCFF; padding-left: 10px; padding-right: 10px;
border-width:thin; border-style:solid; border-right-width:thick;
border-bottom-width:thick; background-color: #FFFFFF; width: 300px; }
/* Using pure CSS I am trying to make the background color of the div renatalAnnc have a blue background when we hover over it*/
.sidebarLink { color: #000000; text-decoration: none; }
.sidebarLink a:hover { background-color: blue; }
/* The following on works in Firefox not IE! :( #rentalAnnc:hover { background-color: blue; } */
-->
</style>
</head>
<body>
<a class="sidebarLink" href="facilitiesForHire.html">
<div id="rentalAnnc">
<p>We have a range of Education Facilities available for lease & hire</p>
</div>
</a>
</body>
</html>
:hover support is not great for non-anchor elements in older browsers and IE, so you can attach the hover psuedo class to the <a> instead and use a simple descendant selector:
a:hover #rentalAnnc { background-color: blue; }
You should put the <a> inside the <div>. If you want it to stretch across the full space, add display: block to its style.
<div id="rentalAnnc">
<a class="sidebarLink" href="facilitiesForHire.html">
<p>We have a range of Education Facilities available for lease and hire</p>
</a>
</div>
a.sidebarLink { color: #000000; text-decoration: none; display: block; }
a.sidebarLink:hover { background-color: blue; }
Add <!DOCTYPE html> to top of your page to make it a HTML5 document and use the outcommented #rentalAnnc:hover { background-color: blue; } rule. Having a <div> inside <a> is invalid in HTML3/4, but apparently valid in HTML5 (disclaimer: HTML5 standard is still not definitive). After adding the proper doctype and the outcommented rule, your current problem (and many other (future?) layout-related issues) should be solved in MSIE.
Don't forget to fix the other http://validator.w3.org errors after adding the doctype, such as a missing title and so on. Browser behaviour is undetermined on invalid HTML.
A bit late I'm sure but I've been looking at this recently and I think the better solution is:
<style type="text/css">
body { background-color: RGB(218,238,248); }
#rentalAnnc { margin-top: 5%; border-color: #99CCFF; padding-left: 10px; padding-right: 10px;
border-width:thin; border-style:solid; border-right-width:thick;
border-bottom-width:thick; width: 300px; }
a.sidebarLink div { color: #000000; text-decoration: none; background-color: #FFFFFF;}
a.sidebarLink:hover div { background-color: blue; }
</style>
<a class="sidebarLink" href="facilitiesForHire.html">
<div id="rentalAnnc">
<p>We have a range of Education Facilities available for lease & hire</p>
</div>
</a>
Note: the rentalAnnc div does not have a background-color in it's style. This is in the link style only.
This way, the link covers the entire div exactly, not just a part of it. Also, any background-image applied to the div (eg with transparent areas for the background color to show through) will still be displayed!