Total noob question, but here.
CSS
.product__specfield_8_arrow {
/*background-image:url(../../upload/orng_bg_arrow.png);
background-repeat:no-repeat;*/
background-color:#fc0;
width:50px !important;
height:33px !important;
border: 1px solid #dddddd;
border-left:none;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-bottom-left-radius:0px;
border-top-left-radius:0px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-topleft:0px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-top-left-radius:0px;
margin:0;
padding:2px;
cursor:pointer;
}
HTML
<span class="product__specfield_8_arrow"> </span>
Fiddle
Basically I'm trying to emulate a button, make a span (or something) look like a button next to an input field that actually doesn't need to be one because of an auto fill generator that generates errors onEnter. Thought this'd be a quick fix for now but obviously not.
Thanks.
Span is an inline element. It has no width or height.
You could turn it into a block-level element, then it will accept your dimension directives.
span.product__specfield_8_arrow
{
display: inline-block; /* or block */
}
Try using a div instead of the span or using the CSS display: block; or display: inline-block;—span is by default an inline element which cannot take width and height properties.
Inspired from #Hamed, I added the following and it worked for me:
display: inline-block; overflow: hidden;
Span takes width and height only when we make it block element.
span {display:block;}
As per comment from #Paul, If display: block is specified, span stops to be an inline element and an element after it appears on next line.
I came here to find solution to my span height problem and I got a solution of my own
Adding overflow:hidden; and keeing it inline will solve the problem just tested in IE8 Quirks mode
spans are by default displayed inline, which means they don't have a height and width.
Try adding a display: block to your span.
Span starts out as an inline element. You can change its display attribute to block, for instance, and its height/width attributes will start to take effect.
Use this all problem solve way
Try it..
span.product__specfield_8_arrow
{
display: inline-block;
}
span {display:block;} also adds a line-break.
To avoid that, use span {display:inline-block;} and then you can add width and height to the inline element, and you can align it within the block as well:
span {
display:inline-block;
width: 5em;
font-weight: normal;
text-align: center
}
more here
There are now multiple ways to mimic this same effect but further tailor the properties based on the use case. As stated above, this works:
.product__specfield_8_arrow { display: inline-block }
but also
.product__specfield_8_arrow { display: inline-flex } // flex container will be inline
.product__specfield_8_arrow { display: inline-grid } // grid container will be inline
.product__specfield_8_arrow { display: inline-table } // table will be inline-level table
This JSFiddle shows how similar these display properties are in this case.
For a relevant discussion please see this SO post.
The way I deal with this is to use a borderless, read-only input tag and then you can set the attributes as desired:
<input type="text" readonly
style="border:none; background-color: transparent; width:200px; margin-top:10px; padding-left: 10px;"
[value]="statusMessage">
Related
I have two divs on my page and I want to display them side by side. I have tried using float:left and display:inline-block, but it doesn't work.
Can anyone help Please? This is a what my page looks like fiddle
use <p> or <h3> and set it inline-block too , reset white-space for #maincontent and its inner content:
http://jsfiddle.net/ATdkE/15/
div#login, div#register, #maincontent > h3 {
white-space:normal;/* reset to normal */
display:inline-block;
}
div#login, div#register {
background: linear-gradient(top, #fff, #f8f8f8);
border: 1px solid #d0d2d5;
border-bottom: 1px solid #bebfc2;
border-radius: 4px;
margin: 0px 0 10px 0;
padding: 30px;
width: 212px;
vertical-align:top;
}
#maincontent {
white-space:nowrap;/* keep all inline element on one single line */
text-align:center;/* no need of obsolete attribute in HTML markup :) */
}
you can add some margin and change vertical-align http://jsfiddle.net/ATdkE/17/
Try putting them within a parent div that has fixed margins. i.e. margins not set to "auto".
Get rid of the "OR" inside the header tag. Header tags are display block by default, so they are overwriting your float left. You can also change the header tag to float: left;
Its not good practice to write tags inside <p></p> you should get rid of <p> and directly write
<h3>OR</h3>
Give style to
h3{
display:inline-block;
}
See Demo
First the invalid HTML,
You cant have a block level element inside the p tag, so please remove the p tags that surround the h3 tags
Second, make the display of the h3 with text OR as inline-block
Demo : http://jsfiddle.net/ATdkE/14/
You may have to add some more styles
IE supports inline-block, but only for elements that are natively inline.
Use
float:left
http://jsfiddle.net/ATdkE/18/
My question is simple, how can I center these two elements using the css "button" class dynamically? -> http://jsfiddle.net/MyVN4/ (I don't want to specify the width of the elements)
.button {
background-color: black;
border-radius: 10px;
color: white;
display: inline-block;
padding: 10px;
}
I've been looking other similar questions but none of the solutions work for this problem.
Thanks in advance for your help!
put text-align: center; on its parent (whatever its parent will be).
Given that they are inline elements, just set text-align:center on a parent element, in this case, the body element:
UPDATED EXAMPLE HERE
#parent_element {
text-align:center;
}
You usually only have to set a width on the element when it is a block level element and will be unaffected by text-align:center, (it would need margin:0 auto). Using text-align:center is probably the best method for centering, even if you have to change the display of an element to inline-block. Just be aware of the fact that inline elements respect whitespace in the markup.
Im having problem vertically aligning a text with CSS. I have tried probably everything but it just doesnt want to work. You can see my demo jsfiddle demo here:
http://jsfiddle.net/zcU7M/7/
.section {
text-align: center;
vertical-align: middle;
display:table-cell;
}
With this code it should work but something is wrong.
How can I fix this? Thanks in advance.
EDIT: Updated demo: http://jsfiddle.net/zcU7M/7/
Write:
.section {
display: table-cell;
vertical-align:middle;
}
Updated Fiddle.
The .section needs the display: table-cell
.section {
height: 200px;
background:#ccc;
border-bottom: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
display:table-cell;
}
The display:table-cell is what allows an element to have children vertically aligned, so it has to be on the parent to be able to have the children aligned vertically.
Here's a Working Demo.
For a vertical paragraph align use that:
p {
height:200px;
line-height:200px;
text-align:center;
vertical-align: middle;
}
JSFiddle example: Exemple
The problem is, that the <p>-Tag just adds some margin at the bottom. You can see this, when inspecting with firebug. Simply add a margin: 0 to your .section p selector:
.section p {
font-size: 15px;
font-family: Arial;
font-style: italic;
margin: 0;
}
http://jsfiddle.net/zcU7M/22/
all credit goes to this link owner #Sebastian Ekström Link, please go through this.
see it in action codepen,
by reading above article I crated a demo fiddle also.
With just 3 lines of CSS (excluding vendor prefixes) we can with the help of transform: translateY vertically center whatever we want, even if we don’t know its height.
The CSS property transform is usally used for rotating and scaling elements, but with its translateY function we can now vertically align elements. Usually this must be done with absolute positioning or setting line-heights, but these require you to either know the height of the element or only works on single-line text etc.
So, to do this we write:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
That’s all you need. It is a similar technique to the absolute-position method, but with the upside that we don’t have to set any height on the element or position-property on the parent. It works straight out of the box, even in IE9!
To make it even more simple, we can write it as a mixin with its vendor prefixes:
I have an H3 heading that I'd like to style as having a particular background color, but without having the element's background take up the full width of the parent element. Seeing as H3 is by default a block element, my style would need to change the element to an inline-block element, or just an inline inline element like so:
h3 {
background-color: #333;
color: white;
display: inline-block;
}
This will work fine, but only if it is immediately followed by a block element. I do not want to change the markup just to cater for this style, so I was wondering if there is a way to cause any adjacent element, irrespective of how it displays, to start on the next line?
Assume I can use CSS3.
try this:
h3:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
display:block;
width:auto;
This will make the width as small as possible (not filling the whole parent element) and make other elements appear below.
How often does it happen that the element after the <h3> is an inline element? (Usually after a header there should be like a <p>, <ul> or other block elements, although this totally depends on your html. Is it predictable? Is it an option to just turn every element that directly follows a <h3> into a block element?
h3 ~ * { display: block }
The only other way I know to have a block-element not take up all the space is floating it, but this leaves another problem.
I come across this all the time in my code, usually for div's that are inline-block'ed. The best way I've seen is to force a new line is to wrap your code in an additional div. Your original html gets the formatting you expected and the div wrapper forces a new line.
Assuming this is your h3 styling,
h3 {
display: inline-block;
}
Then just wrap it in a div.
<div>
<h3>My heading</h3>
</div>
I've had to do something similar with inline nav items that need breaking at certain points. Does this work?
h3:after {
content: "\A ";
line-height: 0;
white-space: pre;
display:inline-block;
}
I seem to remember IE7 having an issue with it.
If you don't need to center h3, this may help:
h3 {
background-color: #333;
color: white;
display: inline-block;
float: left;
clear: left;
}
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