I added a CSS button like this:
http://pastebin.com/UZCgmqSN
Why can't I use simple HTML code?..
The link href gives the button a blue border + text color, and whenever I removed <A> from it, it still stays the same.
I want the whole button to be one link, not like you need to hover on the text to go to that link.
Basically I don't want the a style affect my button(s).
solution could be: disable Link styling on specify divs
thank you.
Add a padding to the this will make the area around the text also clickable.
Also, apply the following style:
a {
text-decoration:none;
}
a div {
background:#444;
color:#fff;
border:1px solid #333;
text-align:center;
padding:5px;
width:100px;
}
This should do it.
check this out : http://jsfiddle.net/yFZ4y/
EDIT : Using a div or ANY block level element inside an INLINE element (like a) is bad practice. Please use a span instead.
here is an example of a link/button http://jsfiddle.net/CRjrz/
<div>
link text
</div>
a
{
display: block;
width: 100px;
height: 35px;
text-decoration: none;
color: black;
text-align: center;
line-height: 35px;
}
div
{
border: solid 1px black;
width: 100px;
height: 35px;
}
Related
I'm trying to achieve this in CSS:
I would like the green line to always be the width of the text (no fixed width). I have a constraint, the tex is contained in an H3 tag with no ability to add a span tag inside it.
you could maybe try this aproach also:
<div class="container">
<div class="line"></div>
<h3>RECENT EPISODES</h3>
</div>
.container {
width:100%;
position:relative;
}
h3 {
display:inline-block;
border-bottom:1px solid green;
padding-bottom:10px;
margin:0;
position:relative;
}
.line {
height:1px;
background-color:#ededed;
width:100%;
position:absolute;
bottom:0;
}
http://jsfiddle.net/az6pr1mz/
The grey line needs to go on a block level tag while the green needs to go on an inline tag. This means that you need two nested tags for it to work and that you must either add a span inside the h3 or a div surrounding it. An h3 can always be made inline if needed.
A slightly different approach would be to add the secondary element outside the h3 without surrounding it and position that so it lies directly under the h3.
In any case, you will need a minimum of two elements for the borders to cling to.
Update:
I missed that you don't need span inside the h3. I added a workaround. I am not sure whether this is the only solution. But I think it can be improved though. In the below code, I am using css content property to hide the border of the container.
NOTE: Use as many dots . as you can use to make it work on all resolutions.
CSS
.container {
border-bottom: 1px solid red;
padding-bottom: 10px;
position: relative;
max-width: 100%;
word-break: break-all;
}
.container:after {
content:"....................................................................................................................";
color: transparent;
border-bottom: 1px solid green;
padding-bottom: 10px;
position: absolute;
bottom: -1px;
}
Working Fiddle
For example this code: (is clearly and not uses absolute positions)
HTML:
<h3><span>Recent episodes</span></h3>
CSS:
h3{
text-transform:uppercase;
border-bottom:1px solid #ccc;
}
h3 span{
display:inline-block;
border-bottom:1px solid #080;
margin:0 0 -1px 0;
}
http://jsfiddle.net/tp0nnapu
I have paragraphs on a page which i would like to add a border.
<p class="valid">paragraph</p>
CSS
p.valid {
padding:5px;
border: 1px solid #ccc;
}
The Problem is this displays the paragrph as 100% of the page
I have also tried adding inline-block which wraps the text as i would like, but inline is like float left.
p.valid {
padding:5px;
border: 1px solid #ccc;
display: inline-block;
}
When you float the element, also set it to clear any (left) floating elements:
p.valid {
padding:5px;
border: 1px solid #ccc;
display: inline-block;
float: left;
clear: left;
}
From the MDN documentation:
The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them
I would use a <span> tag instead of <p> because a paragraph is supposed to extend across the entire page, and it looks like <span> will help you more with what you're trying to accomplish.
I'm trying to remove the pressed effect from button on IE9. In all other browsers I have no problems.
Please take a look to the code
HTML
<button class="fancy">howdy!</button>
CSS
.fancy {
width: 60px;
height: 30px;
position: relative;
top: 0px;
margin: 0;
padding: 0px;
display: block;
border: none;
padding: 0;
color: #FFF;
font-size: 11px;
background: green;
outline: none;
overflow: hidden;
line-height: 11px;
}
.fancy:active,.fancy:focus
{
padding:0px;
margin:0px;
border: none;
outline:none;
text-indent: 0;
line-height: 11px;
}
Working demo http://jsfiddle.net/MDfvE/
As you can see, when you click the button on IE9 you will see that the text is moved to the right and bottom. I want to remove that.
Any clue? Thank you!
IE only recognizes the :active pseudo class when the element is an anchor.
http://msdn.microsoft.com/en-us/library/cc848864%28v=VS.85%29.aspx
Try changing the button element to an anchor tag and adjust the styling to recreate the look you had for your button.
It's a browser behaviour, a simple solution is to use a link tag instead of button (if its triggering a javascript function).
<img src="myimg"/>
If you still want to use the <button>, I've found that there are some characteristics on each browser (in a simple debug):
Chrome adds outline and padding
Firefox adds a whole lot of stuff with the standart button border
IE messes with the inner text position
So to fix them, you have to manipulate the pseudo selectors for the button behaviour. And for IE, a good solution is to envolve your text on a element, and make it relative positioned. Like so:
<button type="button" class="button"><span>Buttom or Image</span></button>
<style>
button,
button:focus,
button:active{
border:1px solid black;
background:none;
outline:none;
padding:0;
}
button span{
position: relative;
}
</style>
Pen
I am currently trying to make a custom underline with border-bottom. However, currently the underline is going all the way of my block-element (whole page).
I’d prefer to have it being only 50px longer than my headline (however the text is flexible and I do not know the length).
Can I do this without adding another <span> tag within the <h2> somehow? I do not wannt to add a <span> element to each <h2> just to change my design.
Current HTML is:
<h1>My title</h1>
CSS:
h1 {
font-size: 18px;
color: #b62525;
border-bottom: 2px solid #c68181;
}
Is it possible to adjust the border-bottom length to my text length? (e.g. behave like inline element for border, but like block for newlines, padding and margin)
Using display: inline-block works, the only caveat being that the content after the <h1> tag must be the full width of the container element. The other solutions here also assume this. You can also use display: inline (supported by older browsers), but inline-block allows for setting of explicit widths, should you need it.
Here's a JSFiddle
CSS
h1
{
display: inline-block;
padding-right: 50px;
border-bottom: 1px dotted #888;
}
Inline or floating methods can be problematic if you're unable to compensate for them in other rules. One alternative is to use display:table
h1
{
display:table;
border-bottom:1px solid black;
padding-right:50px;
}
You can use
h1 {
font-size: 18px;
color: #b62525;
border-bottom: 2px solid #c68181;
float: left;
padding-right: 50px
}
Simply add one more property in css like this :
h1 {
display:inline;
font-size: 18px;
color: #b62525;
border-bottom: 2px solid #c68181;
}
I'm trying to style a button with the css 'sliding doors' technique, but it isn't working properly. I've only got access to firefox 3 at the moment so this issue may not occur in other browsers but I would like to solve it for firefox as well.
Here's a picture of what the problem is:
http://img131.imageshack.us/img131/3559/buttons.png
As you can see the second side is lower than the first by a pixel and also is not over to the right enough. Here is the code I am using:
button
{
font-weight: bold;
border: none;
background: top left url(../images/blue_button_left.gif) no-repeat #24AADF;
color: #FFFFFF;
height: 25px;
}
button span
{
display: block;
height: 25px;
background: top right url(../images/blue_button_right.gif) no-repeat;
position: relative;
}
<button class="important" type="button"><span>Register</span></button>
<button type="submit"><span>Submit</span></button>
How do I fix this problem? I tried relatively positioning the span using top: -1px right: -3px but then the text is mis-aligned.
Thanks.
http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
I just did sliding doors on a div background, and the code from this site worked perfectly.
Try setting the padding for the button to zero, and then playing with the padding-left and width to put the text in the right place.
button { padding:0; padding-left:5px; width:90px; /* total width:95px */ }
button span { ... }
If you look at the HTML block display: padding gets added to the overall width of the object, and the background starts in the padding area, and the right half is padded
However please take note, that button elements are NOT suited for embeding any other nodes inside (like span). They may work OK in the browser, but IE can make your life really hard (not to mention that as far as I know, it's not valid)
Form elements like buttons are always hard to style, and riddled with minor bugs like these.
Instead of applying the class to the button element itself, perhaps try and apply the button's styling to an extra span element inside the actual button?
In short:
button {
background: white;
border: 0;
}
button div {
font-weight: bold;
border: none;
background: top left url(../images/blue_button_left.gif) no-repeat #24AADF;
color: #FFFFFF;
height: 25px;
}
button div div {
height: 25px;
background: top right url(../images/blue_button_right.gif) no-repeat;
position: relative;
}
And HTML:
<button type="submit"><div><div>Submit</div></div></button>
I use DIVs instead of buttons and have a function to build them in-place. It ends up looking like this:
alt text http://fb.staging.moveable.com/samplebutton.gif
inline script call:
<script type='text/javascript'>makeButton("Log in","login()")</script>
code:
function makeButton(text,action) {
document.writeln("<a class='titleGen' href='javascript:// "+action+"' onclick='"+action+";return false'><div class='btn'><div class='btnLeft'></div><div class='btnMiddle'><div class='btnText'>"+text+"</div></div><div class='btnRight'></div></div></a>")
}
css:
a.titleGen, .btnText, .btnGText {
text-decoration:none
}
a.titleGen:hover, .btnText:hover, .btnGText:hover {
text-decoration:none
}
.btn {
height:22px;
display:inline;
cursor:pointer;
margin-right:5px;
}
.btnLeft {
background-image:url(/images/bg_btnLeft.gif);
width:3px;
height:22px;
float:left;
}
.btnRight {
background-image:url(/images/bg_btnRight.gif);
width:5px;
height:22px;
float:left;
}
.btnMiddle {
background-image:url(/images/bg_btnMiddle.gif);
width:auto;
height:22px;
float:left;
}
.btnText {
color:#ffffff;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding-top:2px;
padding-left:10px;
padding-right:10px;
}