I am trying to create a div that is a button by putting an anchor inside a div.
HTML
<div class="div1" style="width:300px;">
hello
</div>
CSS
.div1 {
background-color:red;
color:white;
margin:5px;
border-width:5px;
border-style:solid;
padding:10px;
border-radius:5px;
text-align:center;
background: #494949 !important;
}
JSFiddle: http://jsfiddle.net/BzFyS/
I think it is not working because osomething simple I am missing with positioning. Any tips?
Thanks
The simplest way: add this css:
.div1 a {
display: block;
}
That's it.
If you want the whole div be clickable (including the padding area):
.div1 {
background-color:red;
color:white;
margin:5px;
border-width:5px;
border-style:solid;
padding:0px; /* set to 0 */
border-radius:5px;
text-align:center;
background: #494949 !important;
}
.div1 a {
display: block;
padding:10px;
}
Demo: http://jsfiddle.net/BzFyS/2/
If you want the whole div to be clickable, you may do this :
HTML
<div id="div1" style="width:300px;">
hello
</div>
CSS
#div1 {
background-color:red;
color:white;
margin:5px;
border-width:5px;
border-style:solid;
padding:10px;
border-radius:5px;
text-align:center;
background: #494949 !important; /* do you really need that ? */
cursor: pointer;
}
JavaScript
document.getElementById('div1').onclick=function(){
// do something
}
But then you don't really need the a element.
Demonstration
Try to add to your CSS:
.div1 a {
display: block;
}
You have to put the tags around the div like this:
<a href="#"><div class="div1" style="width:300px;">
<p>hello</p>
</div></a>
This will work.
I am assuming you want this div to be a "button" yes?
The simple solution is to define the size of the <a> by using padding and display: block;
you can still define the colors, margins, and position of the <div>... but the clickable area is in the <a>
Related
* {
padding:0;
margin:0;
}
div.header{
width:300px;
height:150px;
border:1px solid red;
}
div.header_inside{
margin:0 auto;
width:150px;
height:100px;
border:1px solid red;
}
<div class="header">
<span>header</span>
<div class="header_inside">header_inside</div>
</div>
The text header is in the span label,it is a inline element,why it can't be displayed at the same line (or say,at the same height) with div header_inside?
To add margin-top:-20px; in css of div.header_inside can make text in span displayed at the same line with div header_inside,it is not my problem.
A div is, by default, display: block so it generates a block box with line breaks before and after it.
If you want it on the same line as some inline content, you'll need to change it to display: inline, display: inline-block, etc.
A div is a block element and need all the space. So no other element can be placed beside a block element. So you have to change the display of the div to inline or inline-block. You can change your code to the following:
* {
padding:0;
margin:0;
}
div.header {
width:300px;
height:150px;
border:1px solid red;
}
div.header_inside{
display:inline-block;
margin:0 auto;
width:150px;
height:100px;
border:1px solid red;
}
<div class="header">
<span>header</span>
<div class="header_inside">header_inside</div>
</div>
You can use the "inline-block" property, so still a inline element but u can add width and height
<!DOCTYPE html>
<html>
<style type="text/css">
*{
padding:0;
margin:0;
}
div.header{
width:300px;
height:150px;
border:1px solid red;
}
div.header_inside{
margin:0 auto;
width:150px;
height:100px;
border:1px solid red;
display: inline-block;
}
</style>
<body>
<div class="header"><span>header</span>
<div class="header_inside">header_inside
</div>
</div>
</body>
</html>
Hopefully simple enough, in the below example I want the blue section of the link to be clickable (as a link) but the red section not to be. I am planning to subscribe to the red section's onclick event after with Javascript.
Spent an hour on this and getting nowhere! Does anybody know how to do this?
.outer{
width:300px;
height:50px;
background-color:blue;
position:relative;
display:block;
color:white;
z-index:1;
}
.inner{
width:150px;
height:25px;
background-color:red;
top:0;
right:0;
position:absolute;
pointer-events:none;
z-index:2;
}
<a href="http://google.co.uk" class="outer">
Clickable
<div class="inner">
Not clickable
</div>
</a>
I thought the inner div having a higher z-index and no pointer events would do it, but doesn't seem to work.
Anybody have any ideas?
Instead of hacking the html like that, which is a very bad practice. Why not:
.outer {
background-color: red;
display: inline-block;
}
.inner {
background-color: blue;
width: 300px;
display: inline-block;
}
span {
display: inline-block;
}
<div class="inner">
Clickable
<span>Not clickable</span>
</div>
use preventDefault method.
$('.inner').click(function(e){
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<a href="http://google.co.uk" class="outer">
Clickable
<div class="inner">
Not clickable
</div>
</a>
Im busy making this website homepage but have come across a problem which must be so simple but i just can't find it anywhere, I want to position both 'topskin' and 'topskin2' next to each other, i will also be adding more which i also want next to each other.
Here is the HTML :
<div id="secondinner">
<div id="topskin">
</div>
<div id="topskin2">
</div>
This is the third segment to the home page.
</div>
Here is the CSS:
#secondinner {
padding-top:300px;
width:980px;
margin:0 auto;
}
#topskin {
background-image:url(images/topskins/1f.png);
background-size:110px;
height:220px;
background-repeat:no-repeat;
width:150px;
}
#topskin2 {
background-image:url(images/topskins/1f.png);
background-size:110px;
height:220px;
background-repeat:no-repeat;
width:150px;
}
Just to inform you, i have tried float:left, on both elements, and instead of going below each other they simply disappear.
I see at your image, your element are floarting out of div. You must set overflow:hidden to their parent to avoid that.
#secondinner {
overflow:hidden
}
Each child must be floated:
#topskin, #topskin2 {
float:left
}
There are two ways doing that.
Use float:left on #topskin and topskin2
use display: inline-block; on #topskin and topskin2
Try to use float.
FIDDLE
#secondinner {
padding-top:300px;
width:980px;
margin:0 auto;
}
#topskin {
background-image:url(images/topskins/1f.png);
background-size:110px;
height:220px;
background-repeat:no-repeat;
width:150px;
border:2px solid;
float:left;
}
#topskin2 {
background-image:url(images/topskins/1f.png);
background-size:110px;
height:220px;
background-repeat:no-repeat;
width:150px;
border:2px solid;
float:left;
}
You just have to add display: inline-block..
With this code, even if you add as many as images with div having class img-container they will appear inline.
Here's working code for you.
<div id="secondinner">
<div id="topskin" class="img-container">
</div>
<div id="topskin2" class="img-container">
</div>
This is the third segment to the home page.
</div>
img-container is class having following css property.
.img-container{
display:inline-block;
}
JSFIDDLE DEMO : http://jsfiddle.net/rahulrulez/5mnxqphx/
I am making a blog page and i have designed this http://jsfiddle.net/thiswolf/6sBgx/ however,i would like to remove white space between the grey,purple and red boxes at the bottom of the big red box.
This is the css
.top_div{
border:1px solid red;
position:relative;
}
.pink{
width:40px;
height:40px;
display:block;
background-color:pink;
}
.green{
width:40px;
height:40px;
display:block;
background-color:green;
}
.orange{
width:40px;
height:40px;
display:block;
margin-top:120px;
background-color:orange;
}
.red{
width:600px;
height:240px;
display:block;
background-color:red;
margin-left:40px;
position:absolute;
top:0;
}
.bottom{
position:relative;
}
.author,.date,.tags{
height:40px;
display:inline-block;
position:relative;
}
.author{
width:120px;
border:1px solid green;
margin-right:0;
}
.date{
width:120px;
border:1px solid green;
}
.tags{
width:120px;
border:1px solid green;
}
.isred{
background-color:red;
}
.ispurple{
background-color:purple;
}
.isgrey{
background-color:grey;
}
this is the html
<div class="top_div">
<div class="pink">
</div>
<div class="green">
</div>
<div class="orange">
</div>
<div class="red">
</div>
</div>
<div class="bottom">
<div class="author isred">
</div>
<div class="date ispurple">
</div>
<div class="tags isgrey">
</div>
</div>
That'll be the actual spaces in your HTML. Whitespace between inline-block elements is actually rendered. If you remove the whitespace, then it'll work.
e.g.
<div class="bottom"><div class="author isred"></div><div class="date ispurple">
</div><div class="tags isgrey"></div>
http://jsfiddle.net/Yq5kA/
There are the whitespaces in your source code. You can either delete the whitespaces, or set the font-size of the container to 0 (0r 0.1px to avoid certain browser problems).
Just add a wrapper div around all elements, for example named "container", and give it:
font-size: 0.1px;
See updated fiddle:
http://jsfiddle.net/6sBgx/3/
Keep in mind that for this solution, if the containing divs should have text in them, you have to reset the font-size.
Change the CSS:
.author, .date, .tags {
display: block;
float: left;
height: 40px;
position: relative;
}
I know this isn’t the desired solution, but it works:
.isred{
background-color:red;
margin-right: -5px;
}
.ispurple{
background-color:purple;
margin-right: -5px;
}
.isgrey{
background-color:grey;
}
Here's my updated css will resolve the problem
.author, .date, .tags {
height: 40px;
display: inline-block;
position: relative;
margin-right: -4px;
}
There are actual spaces between HTML elements. So For removing this you can try to do following solutions:
Read This document
Try in Jsfiddle -
Remove the spaces - http://jsfiddle.net/6sBgx/7/
Negative margin - http://jsfiddle.net/6sBgx/8/
Set the font size to zero to parent element - http://jsfiddle.net/6sBgx/6/
Just float them left - http://jsfiddle.net/6sBgx/9/
I have to make a graph using simple CSS. In this graph, a background color of grey is displayed and on top of it, varying a background color of blue is displayed of varying width showing the number of items loaded. Please refer to my jsfiddle for this example. It is located at http://jsfiddle.net/mzCdb/1/ .
The problem with my code is that I want the "4/10" overlapping between teh blue and the grey portion when the width of the blue portion is 50% unlike the second graph in my fiddle. The following is my html code :-
<div class="graph">
<div class="graph-within">
</div>
<div style="text-align:center;float:left;color:#888;font-weight:bold;
font-family:Tahoma;font-size:15px;">4/10</div>
</div>
Please view the CSS code from the fiddle. Any help will be appreciated. Thanks in advance.
You could absolutely position the text within the graph:
.graph .text {
position: absolute;
z-index: 1;
top: 0;
height: 25px;
text-align: center;
width: 100px;
}
DEMO
Use negative margins to make the blur bar occupy no space.
.graph{
background:#e5e5e5;
height:25px;
width:100px;
overflow: hidden;
}
.graph-within{
background:#0088cc;
margin-right: -100%;
height:100%;
width:40%;
float:left;
}
.label{
text-align:center;
margin-right: 5px;
color:#888;
font-weight:bold;
font-family:Tahoma;
font-size:15px;
}
http://jsfiddle.net/mzCdb/2/
JSFiddle Demo
Position the 4/10 element absolutely.
CSS
.graph {
background:#e5e5e5;
height:25px;
width:100px;
position:relative;
}
.graph-within {
background:#0088cc;
height:100%;
width:40%;
float:left;
}
span {
position:absolute;
top:2px;
left:0;
width:100%;
text-align:center;
float:left;
color:#888;
font-weight:bold;
font-family:Tahoma;
font-size:15px;
}
HTML
<div class="graph">
<div class="graph-within"></div>
<span>4/10</span>
</div>
<br>
<br>
<div class="graph">
<div class="graph-within" style="width:70%;"></div>
<span>4/10</span>
</div>