I want to make a button and next to it a div, but div should have relative position and be moved to the left, so this way it would overlap a button and it couldn't be clicked, so I wonder is there a way to do that? except putting a button into that div.
here is something what i'm trying to do:
div {
background-color:green;
width:200px;
}
input:checked+div {
background-color:salmon;
}
<body>
<input type=checkbox>
<div style="display:inline-block;width:200px;position:relative;left:-30px;">
<p>
text
</p>
</div>
</body>
So i just need to make input here clickable
Not a good way to solve it, but you could work with position: relative; z-index: 1 on your button. I would consider creating a different structure altogether, since this is really ugly and unmanageable. See https://jsfiddle.net/w6ymq758/
Related
I am building a simple web-page with a few sections in it and I've been stomped at how to solve one little styling issue.
I have several DIVs with solid border and a few other GUI items (text boxes, buttons, etc) inside each one. Each DIV kind of "boxes" related items into a nice, visually pleasing and meaningful way. However, I would like to add a title or a caption onto the DIV in the middle of the border to describe that box's function. So far I can add text below the border or above, but not in the middle. Is that even possible?
Thank you!
What I have:
What I want:
What you want looks like a fieldset element with a legend tag inside, but I wouldn't recommend using them.
Just use position: absolute like this:
<div class='section'>
<header>Header</header>
....
</div>
.section{
position: relative;
}
.section header{
position: absolute;
top: 0;
transform: translate(0, -50%);
background: white;
}
What you looking for is build in HTML nativly: The border Frame is part of the <fieldset> while the title is the <legend>
<fieldset>
<legend>Header</legend>
</fieldset>
I am trying to include an image and some text inside a button element. My code is as follows:
<button class="testButton1"><img src="Car Blue.png" alt="">Car</button>
The CSS is:
.testButton1
{
font-size:100%;
height:10%;
width: 25%
}
.testButton1 img
{
height:80%;
vertical-align:middle;
}
What I would like to do is to position the image to the left edge of the button, and position the text either in the center or to the right. Using   works, but is perhaps a bit crude. I have tried to surround the image and text with spans or divs and then positioning those, but that seems to mess things up.
What appears to be happening is that anything inside the button tag (unless formatted) is positioned as one unit in the center of a wider button (not noticeable if button width is left to auto adjust as both items are side-by-side.
Any help, as always, is appreciated. Thank you.
Background Image Approach
You can use a background image and have full control over the image positioning.
Working example: http://jsfiddle.net/EFsU8/
BUTTON {
padding: 8px 8px 8px 32px;
font-family: Arial, Verdana;
background: #f0f0f0 url([url or base 64 data]);
background-position: 8px 8px;
background-repeat: no-repeat;
}
A slightly "prettier" example: http://jsfiddle.net/kLXaj/1/
And another example showing adjustments to the button based on the :hover and :active states.
Child Element Approach
The previous example would work with an INPUT[type="button"] as well as BUTTON. The BUTTON tag is allowed to contain markup and is intended for situations which require greater flexibility. After re-reading the original question, here are several more examples: http://jsfiddle.net/kLXaj/5/
This approach automatically repositions image/text based on the size of the button and provides more control over the internal layout of the button.
Change button display style to inline-block, img float to left. Add margin to img as necessary.
<button style="display:inline-block">
<img src="url" style="float:left;margin-right:0.5em">Caption
</button>
If you want to use image inside the button not in the CSS I think this help you:
http://jsfiddle.net/FaNpG/1/
Adding float left to the image works to an extent. A judicious use of padding and image sizing fixes the issue with having the text stuck to the top of the button. See this jsFiddle.
I can position a background image using the background property in an input field but I want an action to trigger when it is clicked.
Can I trigger an action on a background image click?
I just want to place a small 'X' image over the right hand side of input which clears the input.
You can absolutely position a link over the <input> and then apply a text-indent to the <input> to make room for the image. For example:
<div id="outer">
<img src="http://placekitten.com/16/16">
<input type="text">
</div>
And:
#outer {
position: relative;
}
#outer a {
position: absolute;
top: 0;
left: 0;
}
#outer input {
text-indent: 16px;
}
Live demo: http://jsfiddle.net/ambiguous/TgaFf/
The outer <div id="outer"> is just there to give me something to apply position: relative to; absolutely positioned elements are positioned with respect to the nearest ancestor whose position is anything other than static. The text-indent on the <input> starts the input cursor 16px from the left side of the <input> and thus leaves space for the image. In the real world you would, of course, adjust the top, left, margins, paddings, ... to make everything line up properly and look pretty.
sorry i misunderstood your question, add a class to the input, and you can do it with a jquery click function or a javascript onClick
Maybe, if you can pass a class to it with Jquery/ js. Otherwise there are some CSS3 options like transitions - to animate, see www.css3please.com Depends what you're wanting to do?
<html>
<head>
<script type="text/javascript">
function callmee()
{
alert("call");
}
</script>
</head>
<body>
<input type="button" style="background-image:url(shahrukh2.jpg);" onclick="callmee()"></div>
</body>
i think, u want this..
regardz
I'm trying to make a html/css based poker program and at the moment im trying to figure out how I am going to put the chips on the table or move my chat window on table.
my code is in index.html
<body>
<div id="content">
<div id="table">
<div id="boardImage"><img src="./img/poker_table_new.png" /></div>
</div>
<div id="chat">
<textarea id="chatBox"></textarea>
<input id="message" type="text">
<input id="sendButton" type="submit" value="Send">
</div>
</div>
and in CSS
#content {
position:relative;
z-index:-1;
}
#table {
position:inherit;
z-index:-1;
}
#chat {
z-index:2;
position:inherit;
left:500px;
}
#boardImage {
position:inherit;
z-index:-1;
}
#chatBox {
position:inherit;
z-index:2;
width: 300px;
height: 300px;
}
and basically im trying to move the chatbox on my table picture, but it is not moving on top of it.
im not sure if i should use position relative for my poker program? or am i using the z-index correctly? must i put the z-index for all the divs?
at the moment there is a poker table on top of the html and when i scroll down, there is my chatbox, but they should be on eachother.
do i have too much same code? too much writing z-index? and positioning for my poker program, must i move everything with pixels and which would be the best positioning way to go? later on i must start moving chips and cards on table etc.
picture:
z-index only works on positioned elements. position: relative positions according to where that element would originally have been, but you're not specifying anything like top or left so it stays in the same place — so yes, you're using all of that correctly!
My approach when writing CSS is to write something that works (which you've done here) and then 'factor out' anywhere I've repeated myself. You've got lots of position: inherit;, so you might combine those into a single rule. For example:
.inherit-position {
position: inherit;
}
You could then remove the repeated position styles from the CSS, and just give those div elements an extra class like this:
<div id="chat" class="inherit-position"></div>
In short, you're not doing anything wrong here at all — but your CSS could be improved a little by spotting any repetition, and trying to eliminate that.
I had to wrestle with this recently. z-index does not seem take effect globally. The function of z-index seems to affect the order in which things are draw by the parent element. If two elements are not contained by the same parent, then their relative z-index values are meaningless. Just something to bear in mind.
It does seem like the chatbox would be draw after (and obscuring) the table, but while you have given it a size, you haven't told it where to be drawn within the parent "container". I'm guessing you want to position the "chat" element using the "left:0" and "top:0" styles.
I'm looking to clone the Google Instant "underlay/type ahead" type look, where what the system is predicting is grayed out and infront of what you are typing.
The technical part of it I am completely sorted, as well as representing the text. I simply am unable to work out how to do the CSS positioning and transparent textbox over the top of the gray text.
Anyone know how to simply do this?
I've tried to adapt code from other sources, but been unable to get the text with the gray text underneath a transparent textbox.
I believe you're looking for something like this. Keep in mind they need to be posiitoned together, so it's probably a good idea to wrap this in a div together.
HTML
<div class='top'>
<input type='text' id='gray'/>
</div>
<div>
<input type='text' id='type'/>
</div>
CSS
.top {
background:transparent;
position:relative;
}
input {
font-size: 14px;
width: 200px;
}
#type {
background: transparent;
z-index: 1;
}
#gray {
position: absolute;
z-index: -1;
color: silver;
}
Live Example
http://jsfiddle.net/r4jSR/
Edit
This positioning works by stacking a position:relative div on top of another block level element, then setting the div's contents to absolute, but with no positioning. This causes the div to collapse as it has no contents, and - as long as neither block element has a margin - the 0,0 coordinates for absolute positioning should put it right on top of the block element below. Presto. This is the way Google does it.