How can I define a width for the label Quantity (see below)? I would like a CSS solution without defining a style on the span but directly on the label.
Something like:
span label[for=Quantity]
{
width: 200px;
}
But the above css doesn't work.
Your adding width to an inline element they wont accept that.
span label[for=Quantity]
{
width: 200px;
display: block;
}
using the inline-block is better because it doesn't force the remaining elements and/or controls to be drawn in a new line
.label {
width:200px;
display: inline-block;
}
you can make label a block element and set float to left so you can put other controls next to it
label {
display: block;
float: left;
width: 180px;
}
Related
I need help aligning gravity forms on my website https://www.shiftins.com.
On my homepage, the field aligns left and the button is directly below it. How do I put them inline?
I tried looking for the css class "simple-quote" but could not find it anywhere. Any ideas?
give the list items display:inline; and the label and input div display:inline-block
#field_1_1, #field_1_2 { display: inline; }
#field_1_1 .gfield_label, #field_1_2 .gfield_label { display: inline-block; width: 20%; }
#field_1_1 .ginput_container, #field_1_2 .ginput_container { display: inline-block; width: 80%; }
Then play with widths for label and inputs for desired output.
.long {
width: 100%;
}
.short {
width: 49.2%;
}
I have defined the above classes but for some reason when I reference 2 x short divs they are on separate lines (not side by side as expected).
This is the most basic of basic - I think the sun has got to me.
Div elements are, by default, display: block, position: static and float: none - so they cause line breaks, are in normal flow and don't let following content bubble up next to them.
You'll need to change one of those if you want them side-by-side.
display: inline-block is probably your best bet.
It's because <div>s are block elements, not inline elements.
Try this:
.long {
width: 100%;
}
.short {
width: 49.2%;
display: inline-block;
}
Divs are
display: block;
by default. If you change them to be
display: inline-block;
they should appear side-by-side.
Divs are block elements so they won't show up next to each other unless you add a float to one or both. (Also, the .long class will make the div span the entirety of its container which would preclude any other elements showing up next to it.)
.long {
float: left;
width: 100%;
}
.short {
float: left;
width: 49.2%;
}
You have to define the attribute float:
.short {
float: left;
width: 49.2%;
}
EXAMPLE
http://jsfiddle.net/7eS22/
You can use display: inline-block; or float on your divs, like float:left;.
I hope this can help you.
You need to modify the "display" property as well. The default for a div element is block, which accepts no elements next to it unless otherwise specified.
display: block means that the element is displayed as a block, as
paragraphs and headers have always been. A block has some whitespace
above and below it and tolerates no HTML elements next to it, except
when ordered otherwise (by adding a float declaration to another
element, for instance).
http://quirksmode.org/css/css2/display.html
You can add:
.short { width: 49.2%; display: inline-block; }
Or you can float the first one:
.short:first-child { float: left; }
Either should essentially get you what you want. There are additional things to note for either technique, such as overflows when floating or IE7 hacks for inline-block, but that gets you started at least.
I am trying to center the footer on a website but for some reason, the way I use that normally works won't work this time. Can anyone tell me why?
Site is here
It's set up using two classes, one inside the other
First one is called mainFoot:
.mainFoot {
background-color: #184879;
width: 100%;
height: 60px; /*had to include this because it would not appear otherwise. browser read it as a 0 height container*/
display: block;
clear: both;
}
Second is page-footer:
#page-footer {
width: 990px;
display: block;
clear: both;
margin:0 auto;}
I was using the same structure right above it for the bottom widgets and it worked as is, but for some reason, while i was setting this one up, I had to set a height property for the outer div to appear as it wouldn't read the inner div's height and adjust.
For reference, he similar set up I mentioned that DOES work is right above the mainFoot class and is controlled by the classes b4Foot and half-widgets:
.b4Foot {
background-color: #277bc1;
width: 100%;
display: block;
clear: both;
}
.half-widgets {
width: 990px;
min-height: 200px;
margin: 0 auto;
color: #fff;
}
To center the contents of a block, you need to set the style "text-align:center". However, note that you cannot center a block-type element within another block-type element. The inner element needs to have the display style of inline or inline-block.
To fix your problem, you need to: a) remove the fixed width, and b) change page-footer to display:inline-block. Currently it is display:table because of the class clearfix - you need to remove that class fromt he div.
you need to change just this line please see below and put on your CSS and see result
.mainFoot
{
background-color:#184879 !important;
height:60px;
width:auto;
}
footer.span12 { color:#DEDEDE; width:100%;}
#page-footer { display:block; margin:0 auto; width:990px;}
only change on .mainFoot , footer.span12 and #page-footer
Thanks,
I have the following view code and it dynamically adjusts its size for mobile phone as well as the desktop. However the map doesn't change size. Is there a way to make it so that the map changes size dynamically to fit on the phone/tablet/desktop using bootstrap? (see below)
.row
.span6.offset3
.well
= gmaps4rails(#maps_json)
Found the answer. Changed the width and height to 100% in the gmaps4rails.css file
didn't work for me,
to fix it i changed in gmaps4rails.css:
.map_container {
width: 100%;
}
.gmaps4rails_map {
width: 100%;
height: 400px;
}
And this for fix the toolbar
#map label { width: auto; display:inline; }
#map img { max-width: none; }
Had the same problem. This fixed it for me:
.gmaps4rails_map img {
max-width: none;
}
.gmaps4rails_map label {
width: auto; display:inline;
}
It it doesn't fix the problem, try replacing the selector .gmaps4rails_map img by just img to make sure you need this particular css fix. Then try another map selector before img.
This should be incredibly trivial, but it's not. I have a predefined height for an anchor, and I would like to place the text at the bottom.
<li><a class="my-text">My Text</a></li>
I used the following CSS, which does not work. The text still appears at the top.
a.my-text {
background-color:#cccc;
height:50px;
vertical-align:bottom;
width:100px;
}
The idea is: I want to align text to the bottom, but if there is text that is longer than one line, I want the over flow to go to the top, not push everything else down... any ideas of how this could be achieved?
This can't be done using css and the html you provide. If you put an extra span in the anchor, it can be done:
a.my-text {
height: 50px;
display: block;
}
a.my-text span {
position: absolute;
bottom: 0;
}
You can use bottom:0px with position:absolute in anchor.
HTML
<li><a class="my-text">My Text</a></li>
CSS
li {
position: relative;
height:200px;
border: 1px solid red;
}
a.my-text {
bottom: 0px;
border: 1px solid blue;
position: absolute;
background-color:#cccc;
width:100px;
height:50px;
}
See in jsfiddle.
It definitely would not work, because <a> anchors are inline tags, therefore assigning them heights and widths is useless. The vertical-align property determines the positioning of inline elements with respect to the line they're in, not the vertical position of the text. (See http://reference.sitepoint.com/css/vertical-align) As far as I understand what you are requesting cannot be done. However, there are alternatives, as suggested above, to achieve similar effects.
The issue with your code is that the anchor won't respond to height/width because it is an inline element. If you you add a {display: block} to the anchor it's now a block element, but, as I recall, vertical-align doesn't work on the contents of block elements. This was the easiest way I could think of using display: table-cell.
a.my-text {
background-color: #ccc;
height: 200px; width: 100px;
vertical-align: bottom;
display: table-cell;
}
It sounds like you just need to get rid of the height rule on the anchor tag and use something like padding-top: 45px on the li