I want to make my entire div a link like the a tag. Of course this may be possible with js, but I'm interested in seeing if this is possible to do with only css.
I have this:
#my_div {
width: 200px;
background-color: #090;
}
#my_div:hover {
background-color: #0f0;
}
Where the page structure is:
<div id="my_div">link</div>
You can make inline elements act as block level elements by setting their display property to block:
/* Make all a tags that are decedents of the
element with an id of `my_div` be displayed as block level elements */
#my_div a {
display: block;
width: 200px;
height: 100px;
text-align: center;
background-color: #090;
}
/* Handle the color change on hover */
#my_div a:hover { background-color: #0f0; }
You don't actually need the wrapping div - you can just target the particular a tag directly if you give it a class or id.
You can't make an element with CSS, but you can wrap your div with an a tag instead. It would look like this:
<div id="my_div"></div>
That makes the entire div a link to whatever your href is.
CSS3 does have the content property now, but I don't think you can put raw HTML into it. That would be pretty bad security wise if anyone had access to your .css files...
Anyways, I think the above solution is the simplest way to achieve what you asked.
Try this:
#my_div a {
display: block;
width: 100%;
}
You need to set your pseude class to the a tag not to the div:
#my_div a:hover {
background-color: #0f0;
}
That should do it's work :-)
I think you should check out this question that was posted to stack overflow.
Make a div into a link
It was the first result on Google for how to make a div a link.
Please:
HTML adds structure to content (e.g. chapters of a book, what is emphasized ...)
CSS adds what colors/fonts/placement for those items
Javascript adds makes it interactive.
You weren't clear whether you meant without "a href" or without using the "<a" tag.
If, on the offchance you meant the latter, the only other way I can think to make something clickable go someplace is to make it a form submit button.
Related
I created a div with "commonDiv" id (example), then is create multiple divs inside it, div, div in divs etc. All divs contains button(s). I want to add a common style for the buttons. I'd like to add a css only one settings for it.
I tried the following but it's not worked:
div#commonDiv .button{
background-color: #4CAF50;
border: none;
color: white;
}
What's the right way?
Well the best way is mentioning class for all of your <div>s and then adding style in the CSS code using your class.
.your_class_name {write any style you want for all of them !}
Try it this way:
div#commonDiv button{
background-color: #4CAF50;
border: none;
color: white;
}
I removed the period before .button.
The rules you declared didn't match the <button> tag but any element that has class "button"...
If it doesn't solve your issue feel free to leave a comment.
You can see a very good document about CSS selectors here. And if your buttons have not any class may be this code fix your problem:
div#commonDiv button{
...
}
I figured out the solution which is the following: div#commonDiv input[type=button]
I'm doing homework for my html class. And the book makes us insert some css. So I copy pasted it. Here it is.
body {
font-family: Arial, Verdana, Garamond;
font-size: 11pt;
}
a {
text-decoration: none;
color: #122973;
}
table {
width: 65%;
margin-left: auto;
margin-right: auto;
border-spacing:10px;
}
.menu {
text-align: left;
width: 20%;
}
.content {
width: 80%;
}
But I don't understand what .content is. Or .menu.
When I googled content, it showed me things like
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;
Here's the solution image to my homework.
What part of that picture uses the .menu and .content rule?
In my homework it never said to give anything a class called content or menu.
.content is just a class selector - it selects any element on the page that has a class of 'content'.
Identifiers preceeded by a dot (.) are class selectors. They refer to the value of a class attribute of an HTML elmement.
The page creator can make up these names themselves, so googling them is pointless. 'content' probably refers to the content section on the page, but you would have to check the HTML to be sure. Judging by the image you added, this seems about right, there is a menu which is about 20% wide and a content section that occupies the rest of the space.
So if your assignment is to write the HTML, you just have to apply the right styles to the right elements by adding class="content" to the proper elements.
.content targets to a class selector.
HTML markup for:
<div class="content"></div>
This can be used many times inside of a page, unlike id which should be unique per page.
content and menu are the names of classes of elements within the HTML code of the page. Class names are prepended with a dot (.) when referenced in CSS.
This is a good resource for CSS selectors: http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
the ".content" references to the class "content", where you have all that text, and you are defining in that class that you want the content box to be 80% of the size of the website.
I see lot of times attempts to hide text with CSS, for instance:
<a class="back">back</a>
a.back { text-indent: -9999px; display:block; width: 100px; height: 50px; background: url(/images/back.png); }
I always wonder why not to use:
a.back { color: transparent; display:block; width: 100px; height: 50px; background: url(/images/back.png); }
It seems to me semantically correct, and in addition, when I tried the text-indent approach, it caused a bug in iPad display: The text was displayed 99999px left to the anchor tag and caused a strange unnecessary horizontal scroll.
Is there a common known problem with the second code or it's OK to use?
font-size: 0px; should do the trick.
If you want to make the button smaller than the text, you'll also need to add line-height: 1em; or something similar.
Using the display property allows you to edit the state of an element in C#.
Here are 4 main display elements people use:
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags. visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page
But if you want to learn more about them you can go to this site: https://www.w3schools.com/cssref/pr_class_display.asp
w3schools explains a lot of languages in a simple and understandable way.
Don't hide content and depend on a background image at all.
HTML provides a way to include images which have meaning (the <img> element) with text content for situations where the image can't be displayed (the alt attribute). There is no need to fake it with the stylesheet.
<a class="back"><img alt="back" src="/images/back.png"></a>
Icons are content and deserve to be treated as such. All efforts to use text and background images are ultimately hacks with limitations. The <img> element was designed for this use case.
I have made a simple fragment of html, which contains this:
<div>Something here</div>
It obviously alert me that div cannot be inside an <a> tag. I have used a div, because I want the whole box (div in this case) to be a button. So the subclass :hover and a proper button area applies to the whole box, not only a text inside. As far as I remember divs can be used inside tags in html5. I use XHTML 1.0 Transitional. Is there anything I can replace a div with to avoid errors in the code? or should I change xhtml to html5? will it work good without touching the rest of the code? thank you.
You could use display:block.
An example is as follows:
HTML:
<a href="#" class="btn">Button</a>
CSS:
a.btn{
display: block;
background-color: Green;
width: 50px;
height: 25px;
text-align: center;
text-decoration: none;
color: White;
}
a.btn:hover{
background-color: lightGreen;
color: Black;
}
You can test it live here: http://jsfiddle.net/YdCzY/
Try using this:
HTML:
<a id="block-a" href="#">Something here</a>
CSS:
#block-a {
display: block;
}
You could try using 'span' elements within the 'a' element instead of divs...
You can apply styles to the span so that it behaves just like the div you wanted (e.g. rich content which is also overally a link).
AFAICS, the only difference between span and div are the default styles, and the elements they're allowed to be children of. But I am willing to be corrected by more learned contributors...
Use
<div onclick="..">...</div>
or a display: block; on your a-tag (http://green-beast.com/blog/?p=74)
It is way more easier at least
`<div onclik="window.location.href='url'">
</div>`
Two parts to my question:
1) Is there a way to inherit another control's attributes and styles in CSS? Assume the controls have no parent/child hierarchy and can be completely different control types:
IE:
#MyFirstControl
{
width: 100px;
}
#MySecondControl
{
width: MyFirstControl.styles.width; /* This doesn't work */
}
2) Assume a Label tag is a child of any other tag. The width attribute will neither work with "inherit" nor "auto". What's wrong?
IE:
<style>
div
{
width: 100px;
}
</style>
<div>
<!-- This label does what it wants for width. It's not the width of the containing div -->
<label style="width: inherit">Some Text</label>
<div>
Part 1: you want to use class names, not ids, to control the styles:
.control_a {
width: 100px;
}
<blah id='MyFirstControl' class='control_a'/>
<blah id='MySecondControl' class='control_a'/>
This lets you share styles across any number of tags. Also, keep in mind, you can use more than one class name on a single element:
.control_a {
width: 100px;
}
.red { background: #f00; }
.blue { background: #00f; }
<blah id='MyFirstControl' class='control_a red'/>
<blah id='MySecondControl' class='control_a blue'/>
This lets you select many different sources of style for a single element.
There is no way to inherit CSS "objects". You can inherit styles from tags inside other tags, but it is the tag inheriting and not the style itself. If you place a tag inside a tag with another style, it will inherit from that style.
It might be interesting if CSS styles were treated as objects, as you could avoid a lot of coding, but since you can create a class that can be applied to disparate types of objects, and even apply multiple classes to a tag, it is more interesting than necessary.
I am not sure about the second question, but I would imagine it has to do with the fact you are applying to a tag name, and not using a class or id. I would have to play with it some more to see if I can figure something out.
1) Since CSS doesn't allow for self-reference you could have common aspects of two separate elements specified in the same style:
#MyFirstControl, #MySecondControl
{
width: 100px;
}
2) If my IDE and browser are to be believed, inherit is not a valid value for width in that context but I'm not sure why. That might be why your example doesn't work.