I need to place help text below labels and finding it tricky getting the CSS correct for it.
I have created the jsfiddle below as an example.
The requirements are:
The label is left aligned
The help text is shown directly below it
The input and select controls appear on the same line
http://jsfiddle.net/brendan_rice/paSR2/2/
Can anyone help please?
Please check,
http://jsfiddle.net/paSR2/4/
Changes
label {
display: block;
font-size: .9em;
float: left;
clear: left;
width: 52px; <----- /*changed*/
margin: 0px;
padding: 0px
}
Without hard coded width
label {
display: block;
font-size: .9em;
float: left;
clear: left;
margin: 0px;
padding-right: 5px;
}
Slightly rejigged your code and css, see here:
http://jsfiddle.net/paSR2/9/
I Made some modifications to your design:
http://jsfiddle.net/paSR2/13/
Is this what you are after?
Related
I've been doing a coding project for school, and on one of the pages, my textarea boxes have been giving me some trouble. They need to have 5% left and right margins, but I can tell that the left and right margins are slightly different, so I just wanted to try and figure out what that was about. Also I need to be able to set the height of the textarea boxes to a percentage so that it's relative to the screen size, but the only way I was able to alter the height of them was by setting it to a pixel measurement.
The css for the two textarea boxes looks like this:
#input {
width: 90%;
margin-top: 5%;
margin-bottom: 3%;
margin-left: 5%;
margin-right: 5%;
border-radius: 12px;
outline: none;
border: none;
}
#output {
width: 90%;
margin-top: 3%;
margin-bottom: 5%;
margin-left: 5%;
margin-right: 5%;
border-radius: 12px;
outline: none;
border: none;
}
...and you can access the final result of that page here.
Thank you!
I don't see anything wrong with the code in itself. Just to see if this works...try adding the following to your css
html { margin: 0; padding: 0; }
body { margin: 0; padding: 0; }
The other thing you could try is adding a float or display property to your textareas. Something like float: left; or display: block;
See if that does what you are wanting.
I've been learning HTML and CSS for around 2 months, but apparently I'm still a neophyte. I'm trying to create somewhat of a header nav bar here, but when ever I set the property display:inline, poof ! They disappear. I'm pretty sure this problem is rudimentary but any input you have helps.
div {
border-radius: 5px 55px 5px 55px;
}
#Header {
height: 50px;
width: 200px;
background-color: #f38630;
margin-bottom: 10px;
margin-top: 10px;
display: inline;
}
.Left {
height: 300px;
width: 150px;
background-color: #A7DBD8;
float: left;
margin-bottom: 10px;
}
.Right {
height: 300px;
width: 450px;
background-color: #E0E4CC;
float: right;
margin-bottom: 10px;
}
#Footer {
height: 50px;
background-color: #69D2E7;
clear: both;
}
In nutshell, you should not be using display: inline for anything that is not intended to be a displayed inside a block of text.
This is a good site for learning layout basics: http://learnlayout.com
If you really want to learn this stuff though, this is the best place I know: https://dash.generalassemb.ly :)
Hope that helps. Let me know if you don’t feel I’ve answered your question.
I would not use display : inline -block for divs but apply it to the list items or a tags.
It has to do with the generation of containing blocks, whether or not your element is inline or block, also the type of positioning. An inline element without content will not show.
Here is the de facto resource for your problem:
de facto web standards
visual rendering
In my article header section, I'm having a few alignment issues. I did a screen shot, but here is the live page:
http://www.picturemeclubbing.com/newyear/index.php/2014-01-21-01-37-46/item/19-phil-cashout-interview
Pic here:
I chose to inspect the area I wished to move and found:
span.itemAuthorDetailss
position: relative;
text-indent: 4px;
bottom: 20px;
Changing bottom: 20px to a lower number brought the text down. At least in the code inspector window. But when I made the changes in the css file, the page when haywire. On top of that, the image next to the text would not move down independently. I'm new to this coding stuff. Any help would be greatly appreciated.
span.itemAuthorDetailss {
position: relative;
text-indent: 4px;
float: right;
}
Does that work? Maybe add some margin to:
.authorDetails {
float: left;
margin-right: 12px;
margin-top: 5px;
}
Another alternative is your PMD image seems a little high - so try this:
.authorDetails img {
margin-top: 5px;
float: left;
}
.authorDetails span.itemAuthorDetailss {
position: relative;
text-indent: 4px;
float: right;
}
Put that in your custom.css style sheet:
http://www.picturemeclubbing.com/newyear/templates/yoo_moreno/css/custom.css
I have some issues with the text inside two of my buttons located inside a block_head class div.
In Chrome, they show exactly as I want :
In IE9, there is no text :
Here's my CSS code :
.block .block_head button {
margin: 13px;
padding: 5px 15px;
float: right;
height: 30px;
text-align: center;
}
I tried playing with the CSS attributes (vertical-align, remove margin, etc.), and the best I could come up with is by removing the padding line :
I sense a stupid mistake or compatibility problem, as I am kind of new to web programming.
Any help would be much appreciated!
Without seeing your code, all I can imagine is that there is a style being applied that is setting the line height. Can you try adding this to your ".block .block_head button" style?
line-height: 1em;
padding: 0px;
Try this:
.block {
float: right;
}
.block .block_head button {
margin-right: 13px;
padding: 2px 15px;
// float: right; (button is an inline element)
// height: 30px; (auto height)
// text-align: center; (no fixed width, the text will always be in the center)
}
I have a template which has 3 equally spaced boxes, the problem is that i am unable to get the last box to align correctly the first two elements.
how do i add a 3 block equally spaced box in css without tables?
my attempt http://khine.3b1.org/activities/activities.html
any advise much appreciated.
thanks
Make all three boxes float left:
.box ul.supports-list li.last {
width: 200px;
position: relative;
float: left;
}
And provide more width overall:
.box .holder .frame {
background: url(./box-b.gif) no-repeat 0 100%;
width: 620px;
padding: 18px 4px 42px 16px;
}
try to change the next CSS rules to:
.box ul.supports-list {
font-size: 11px;
list-style: none outside none;
margin: 7px 0 0;
overflow: hidden;
padding: 0;
}
.box ul.supports-list li.supports-list-item {
display: list-item;
float: left;
outline-style: none;
width: 200px;
}
.box ul.supports-list li.last {
float: left;
width: 200px;
}
My guess would be to put each box into a div, and then adjust each div's margin-left and margin-top properties to get them to all line up. You'd also want to set the float property of all of the boxes to left. It might not be the most-widely-accepted way of doing things, but that's how I usually solve problems like this.
You can take a look at this example jsFiddle I did for you here: http://jsfiddle.net/Cwca22/g8x5E/ - Hope this helps!