Please take a look at THIS page.
Please feed in some random data and click on the edges of the button to submit.
PROBLEM: I am not able to click the button on the edges.
AIM: I want to extend the click-able portion to all over the button.
I think I have to introduce to it. But I am not sure where and how it has to be done.
The code I use for the button is
<?php echo $form->submit('Submit', array('class' => 'submit_input', 'div' => array('class' => 'stndrd_btn', 'style' => 'margin-top:20px;'))); ?>
Thanks and have a good day
What library/framework are you using to generate forms? The code you posted doesn't tell us much about the generated HTML.
Anyway. If you inspect the DOM with Firebug or something similar, you'll see that the button element doesn't cover all the visual space.
Looking at your CSS (global_style.css), I can see that the width for this button is hardcoded to 131 pixels:
.submit_input {
color:#FFF;
margin:0 auto;
text-align:center;
font-size:14px;
font-weight:bold;
background:none;
border:none;
width:131px;
height:22px;
padding-top:6px;
cursor:pointer;
}
The element that wraps the actual button (and shows the visual pointer cursor and background image) has a width of 140px and a height of 30px.
Now, you don't want to hardcode these values to the button again, you want to set this button to 100% width and height. This might not work if it's an inline element, so you need to set its display property to block. Replace the .submit_input selector to the following:
.submit_input {
color:#FFF;
margin:0 auto;
text-align:center;
font-size:14px;
font-weight:bold;
background:none;
border:none;
width: 100%;
height: 100%;
display: block;
padding-top:6px;
cursor:pointer;
}
That should do it. Cheers.
Set the width and height attributes in submit_input css class to 100%
Related
this css in my view should stretch the "x" over the whole input content.
input{
height:20px;
width:20px;
line-height:20px;
font-size:20px;
padding:0;
}
Instead, there appears to be some font inherited property going on that pushes the "x" down.
I have no idea what that is. Can you help?
I've made a jsfiddle should you want play about with it.
http://jsfiddle.net/uc4z20yb/
thank you
Well, I know it`s not the cleanest solution but you can do this.
<button><span>X</span></button>
Then in css:
button{
width:20px;
height:20px;
padding:0;
font-weight:20px;
line-height:20px;
position:relative;
}
button span{
position:relative;
top:-5px;
}
I do not know if you are trying to create a checkbox or the above is just a example, but if you are trying to create a checkbox, there are better ways to do it.
New answer:
Ah, I see what you are trying to do here.
In this example I used vertical-align set to baseline with line-height.
JS FIDDLE: http://jsfiddle.net/4fy9k6t9/1/
Also. If you are using the small 'x' it will always be a bit down off the center, because the size of the lette ris determined by it's capital letter height: 'X', so use X. I assume it's a close button.
If you MUST use small 'x' your best bet is padding-bottom: 2px or so.
I need some help.
I'm new with css, so I don't know why my input "textarea" is not vertical align with others inputs?
It's more 1 or 2px to right...
Here is my jsfiddle:
http://jsfiddle.net/uxpedro/tDxc5/14/
form{
width:255px;
height:266px;
margin: 0 auto;
margin-top:200px;
}
input[type=text]{
font-family:verdana;
width:250px;
height:40px;
padding-left:5px;
background-color:rgba(255,255,255,0.95);
border-style:none;
}
textarea{
font-family:verdana;
margin-top:30px;
max-width:250px;
min-width:250px;
min-height:100px;
max-height:200px;
background-color:rgba(255,255,255,0.95);
border-style:solid;
border-color:rgba(215, 40, 40, 0.9);
}
input[type=submit]{
margin-top:-3px;
width:250px;
height:40px;
color:white;
background-color:rgba(215, 40, 40, 0.9);
border-style:none;
}
Chrome's user-agent stylesheet (a.k.a. the "default CSS style" of your browser) specifies, for textarea, a margin of 2px. Since you only declare the margin-top property, the three remaining margins are still set at 2px, as you can see from the inspector (accessible by right-clicking on the text area and select Inspect element).
To have it aligned with the rest just replace margin-top:30px with margin:30px 0 0 and you're all set.
I found out the problem was the border on your textarea, it was not the submit button that wasn't wide enough, it was the extra width on the textarea.
Remember the box-model when styling your site.
Here's a updated fiddle, I am sorry if I messed too much with it I just wanted to make it simpler for you: http://jsfiddle.net/tDxc5/16/
Try setting the background of the form to red, that way you can see everything now is the width of the form (which I think was what you were trying to do.)
A couple of things:
I removed everything but the form so you could easily read it.
One rule to note is the box-sizing: border-box; - It generally calculates the padding you set on elements for you, so if you have something that's 200px in width and set padding 10px it will become 220px because you set padding on all sides to 10px. With that rule it will know to take 20px off the inital width to make it fit what you actually set it to.
I closed your inputs with /> because jsfiddle told me to, you don't have to do it.
Use placeholder="" instead of value="" - How to style placeholders: http://css-tricks.com/snippets/css/style-placeholder-text/
You should really not use height in these situations, for the textarea purpose as you did, I added a resize: vertical; to make sure it couldn't go out of the form element.
Hope this helps!
I'm coding a comment page on my website and it all works fine, but when you make it bigger part of my pages (notifications) move across the page. I've coded the text area to the position I wanted using position relative. Here is the css code I've use:....
#mainSection{
text-align:left;
margin-top:3px;
margin-bottom:50px;
margin-left:270px;
position:relative;
bottom:650px;
}
#mainSection .newPost{
width:500px;
height:125px;
}
You can prevent the user from resizing the textbox altogether:
textarea {
resize: none;
}
Fiddle: http://jsfiddle.net/jgallaway81/ax9wh/
<a href="lcars.jfx.php" class="leftbuttons buttonlinks antibutton">
LCARS Locomotive O.S.
</a>
My problem is the text label in the graphic. I'm using this button design all over my site, with only the text and its size varying. When I originally designed the system (on page: http://www.fccorp.us/development/index.php and then again on http://www.fccorp.us/development/index.fccorp.php), I used the margins & padding CSS controls to get the text centered vertically within the button. But that depended on a static font height. Now I want to use a taller font and can't get the thing to auto center height wise. I tried
.leftbuttons {
width:335px;
height:40px;
padding:**auto**
20px **auto**
45px; font-size:1em;
border-style:solid;
border-width:0px;
font-family:Arial;
font-weight:900;
margin-left:10px;
margin-right:20px;
margin-top:20px;
margin-bottom:20px;
text-align:center;
display:inline-block;
background-image: url(http://img580.imageshack.us/img580/1461/lcarssitebutton.png);
}
But all that ended up doing was chopping the image up.
I'm using the .antibutton to try to override a few details from the other classes in order to get what I'm trying to get. If I can solve the text vertical-align problem (or some nice coder here can figure out what the heck I screwed up), I also want to get the button's bottom aligned even with the text line.
Any thoughts?
Why don't you just add a line-height: to your unique cases?
for example, i added line-height: 40px; to a.buttonlinks and it centers vertically just fine.
Currently, I am modifying a css document to make a website compatible in IE 6 and including it using a conditional statement. Everything is slowly starting to look as it should EXCEPT....I can't seem to modify the height of the background image in the css below. I can make it bigger by increasing the height, but decreasing the height does not make it smaller. The original image is quite thin, so I don't see why this is a problem.
#title{
text-align:left;
margin-left:170px;
margin-top:0px;
background-image:url(images/gradient.jpg);
background-repeat:repeat-y;
padding: 0px 0px 0px 0px;
width:680px;
height:42px;
color:white;
font-family:Helvetica, Georgia, "Times New Roman", Times, serif;
position:relative;
top:0px;
}
You can see in the attached image that the red gradient background image underneath the cork header image is too big and the text inside is too large also. However, no matter what I change in the css, it doesn't seem to alter anything.
Image of webpage
The div tag is:
<div id="title">
<h1>
Historia </h1>
</div>
Any thoughts as to why I can't seem to change this?
I would try first by using firebug lite for IE, that way at least you aren't guessing whats going wrong and you can identify the padding/height/etc;
My thought is that the height is simply being stretched by the h1 element (perhaps something else sneaking in too), thats my best guess as I don't have IE6 to test, but since your height is defined for the #title it must be whats inside of it that stretches it. Try setting overflow: hidden; for the #title see if that helps, or at least shows your 42px height.
http://bodegacooperativacigales.com/historianew.html
Try firebuglite, and view the element, it will show you what to get rid of in IE.
EDIT
to define your h1 simply do this:
#title{
text-align:left;
margin-left:170px;
margin-top:0px;
...
}
#title h1 {
height: 20px;
margin: 0; // remove margin
padding: 0; // remove padding to check if this is the issue
}
in your IE6 CSS sheet. Don't set a background image into the h1. The above piece is separate from your #title css definition.
I think you might be having issues regarding the height due to the child element creating overflow. Try adding the following rule to prevent the parent element from displaying any overflow:
#title {
overflow: hidden;
}