I've a text as below is not aligning as vertical in the middle of icon.
How do I solve this, please?
align top http://www.kerrydeaf.com/ali.png
CSS:
#text{ color:#48c4d2; font-size:15px; font-family:opensansitalic;}
HTML:
<div class="blurb"><button class="blue_small" id="blue_small"></button> Available in video.</div>
UPDATE:
This should explain it.
align top http://www.kerrydeaf.com/ali2.png
You should be using a CSS background image and use padding-left: to move the text over, and use background-position: to adjust the position of the image. And if it's a link, use an A-tag, not a button.
Available in video.
No need to nest tags as you're doing.
Something like:
.videoBlurb {
display:block;
background-image:url(....);
background-repeat:no-repeat;
background-position:0px 0px;
padding-left:40px;
padding-top:20px;
color:#48c4d2;
font-size:15px;
font-family:opensansitalic;
}
Diodeus makes a good point and definitely has the most useful answer, but for the sake of curiosity without changing your markup - it should actually be this simple:
​button {
vertical-align:middle;
}
Of course, be more specific with the selector. Demo: http://jsfiddle.net/beV7j/2
Related
I am creating a web page that needs to be responsive.
Here is an image of it:
Here is the HTML:
<div class="smallBoxes">
<div class="leftHomeBox">
<a class="Description" id="Desc_1">WHEN?</a>
</div>
</div>
and the CSS:
.smallBoxes{
display:block;
margin-left:25%;
margin-right:20%;
width:auto;
}
.leftHomeBox{
width:100%;
float:left;
margin-bottom:10px;
padding:10px;
padding-bottom:0;
height:65px;
}
.Description{
border:5px solid #ffffff;
padding:5px;
}
I am trying to keep the "when" box in the centre of the div, for all screen sizes. AS things are now, both margins will change, but at different rates eg they do not stay consistent relative to each other and so the "when" box doe s not stay central.
I have looked at other websites and have not been able to find a working example.
I have tried using
margin-left:20%;
margin-right:20%;
width:auto;
but this does not work. I have been working on this all day and I have read all I can find but I cannot seem to get this to work. I have tried every possible thing I can think of.
Surely this is something that is required often and cannot be very difficult to achieve, but I am not able to find a clear answer to how to achieve this, or what I am doing wrong.
If someone could provide a fiddle of a working solution I would be very grateful.
use
CSS
.leftHomeBox{
text-align:center
}
DEMO
.Description
{
display:block;
margin-left:auto;
margin-right:auto;
}
This should be work.
You can apply a text-align: center on an <a> tag.
.leftHomeBox{
text-align:center
}
It will center the link without using margins
I have a tile on my website that flips over when i hover over it. On the back of the first i attempted putting a button. The button hangs off of the bottom and im not quite sure how i can get it below the paragraph i have on the back of the tile. Also, i can't get the header of the tile centered. I tried using
text-align:center;
but that doesn't seem to work.
Here's the code i'm writing up. So if you run it and hover over the first black tile you'll see the text 'eternally rustled'. That's the problematic tile. Any help would be appreciated. Thanks.
I think I have your fix! Using what you gave us I just added two things to the "btile" portion of the CSS so it looks like the one below:
#btile {
width:350px;
text-align:center;
}
and to fix your header problem, I simply added width to the code below:
.webname {
width: 350px;//I added this
font:800 17px/17px"open sans";
color:#333;
text-transform:uppercase;
text-align:center;
border-top:1px dashed #888;
z-index:50;
position:absolute;
text-align:center;
}
Where does the width come from? It's the size of your picture! Just make sure the div width is the same size of the picture and you're set. Here is a JsFiddle that can show you exactly what I did! Let me know if it doesn't work! :)
I am looking or a way to include two images left and right to a title span. The problem I am facing is, that this title will in some cases be stretched across two lines, however not always. I do not want to include two extra elements before/after or after the title but am instead looking for a way to achieve what I am trying without adding new elements to the code. I was therefreo hoping to use :before and :after. This is what I came up with:
.block-title:before { position:absolute; content:""; display:inline-block; width:28px; height:14px; margin:2px 0 0 -36px; background:url(../images/sidebar_ornament_l.png) no-repeat 0 0; }
.block-title:after { position:absolute; content:""; display:inline-block; width:28px; height:14px; margin:2px 0 0 9px; background:url(../images/sidebar_ornament_r.png) no-repeat 0 0; }
While this will work great, if the title is only one line, titles that will take up two lines, will not behave the way, I would want them to, but instead will look like this:
I have tried everything I could think of, to make the :before and :after pseudoelements behave as I want them to, changing position and display, chaing the actual text span position, etc but just couldn't achieve what I want to.
Since I want the two images to align next to the actual text span, a single background image won't work. The spacing between the text and the image would be too big in some cases, which will look odd. Is there a way to make this work, so I will end up with something like this for two line titles:
Thank you!
Well, this is a general concept, i need your full code to provide a specific answer.
Anyway, check this demo
HTML:
<span class="block-title">Some text is here</span>
<hr>
<span class="block-title">Some more text<br>is here</span>
<hr>
<span class="block-title">Even<br>more text<br>is here</span>
CSS:
.block-title {
position:relative;
display:inline-block;
text-align:center;
padding:0 34px; /* width of your ornament + 6px per each side,
adjust to your actual layout */
}
.block-title:before, .block-title:after {
content:" ";
width:28px;
height:14px;
position:absolute;
top:50%;
margin-top:-7px; /* half of ornament's height */
}
.block-title:before {
background:url(../images/sidebar_ornament_l.png) no-repeat 0 0;
left:0;
}
.block-title:after {
background:url(../images/sidebar_ornament_r.png) no-repeat 0 0;
right:0;
}
If you apply it to a span, rules ok. I made this code (i have changed de image) http://jsfiddle.net/sSEDz/
I have a simple button (as shown below) on which I need to display two pictures, one on either side of the button text. Im battling to create the CSS that will work in both Firefox and Internet Explorer! (the button images are coming from a JQuery UI skin file)
CSS
button div{
width:16px;
height:16px;
background-image: url(images/ui-icons_d19405_256x240.png);
}
button div.leftImage{
background-position: -96px -112px;
float: left;
}
button div.rightImage{
background-position: -64px -16px;
float: right;
}
HTML
<button><div class="leftImage"></div><span>Button Text</span><div class="rightImage"></div></button>
Preview
Firefox
Internet Explorer 8
Here is how to do it
The Theory
Block elements (like DIV) although displayed in order of creation, will position themselves adjacent to the previous element or when short of space, on the next line. Because we dont want to give the button a width (we want the button to be automatically sized based on the content of the button) the block elements continued to appear on the next line (see IE8 image in the question above). Using white-space:nowrap forces inline elements (like SPAN and EM) to be displayed on the same line, but is ignored by block elements, hence the solution below.
CSS
button{
margin: 0px;
padding: 0px;
font-family:Lucida Sans MS, Tahoma;
font-size: 12px;
color: #000;
white-space:nowrap;
width:auto;
overflow:visible;
height:28px;
}
button em{
vertical-align:middle;
margin:0 2px;
display:inline-block;
width:16px;
height:16px;
background-image: url(images/ui-icons_3d3d3d_256x240.png);
}
button em.leftImage{
background-position: -96px -112px;
}
button em.rightImage{
background-position: -64px -16px;
}
HTML
<button><em class="leftImage"></em>Button<em class='rightImage'></em></button>
The Result
Internet Explorer 6, 7, 8 and Firefox 1.5, 2, 3
I would use spans not divs for the image containers, since you seem to want the images to appear inline. Using floated divs is just too complex.
In fact, you could probably simplify things further by applying one background image to the button itself, and one to the button-text span, and removing the other two containers altogether.
Another alternative is to simply add the images in as img tags.
try resetting the button css.
button{
border:none;
background:none;
padding:0;
margin:0;
}
And add a space inside an empty DIV see if it works.
<button><div class="leftPic"> </div><span>Button Text</span><div class="rightPic"> </div></button>
I think you can strip off the button tag and use a div tag instead.For other button action use javascript onlick() function and use css to change curser on hover(to make it look like button).For my project I used a similar approach.This may help you :)
I know this is already solved, but just wanted to add that an easy way to put more than 1 image in a button is creating 1 .png with the dimensions of the button you want to create and the to elements together in one file.
I have the following that I would like wrapped as units.
<div class='tag-box'>
<a href=#>Axe Committee</a>
<div class='circle'><a href=#>x</a></div>
</div>
The CSS for these classes are:
.tag-box {
display:inline;
}
.circle {
display:inline;
padding-left:4px;
padding-right:4px;
background:rgb(196,15,24); /*dark red*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.circle a {
font-size:10px;
text-decoration:none;
color:#fff;
position:relative; top:-2px;
}
I can have upwards of 20 or 30 of these tag-boxes displayed inline. The problem is that the wrapping will break the words from each other or even break the red circle from the link. This makes it hard to differentiate which circle belongs to which link. (In the future, each circle corresponds to a different action with respect to the link.) See below.
alt text http://www.freeimagehosting.net/uploads/f0c5a72ac9.png
How do I prevent this kind of wrapping from occurring?
You want each of your .tag-box to be inline (not taking all the width available) but still being considered as a block (its content shouldn't be cut in half). Here enters ... inline-block!
Here is a complete HTML code: http://pastebin.com/24tG7tCz
I used a list of links to better represent the lists of couple of links tag+action (bad news: you've a divitis syndrome ;))
I also added titles: your 'x' links aren't accessible at all and can be confusing for everybody, with or without any handicap, because one is never sure if the x will suppress the tag on the left or on the right: there are dozens of links, each with the text 'x'! A title attribute on the a element tells blind users and everybody else via a tooltip what'll really do that x.
With a span inside a.x, you can change the background-color on hover and focus, it wouldn't be possible with a inside a span or div.
0: Use white-space: nowrap;.
1: You could have the circle as background of your .tag-box (or your .circle a). eg:
.tag-box {
display: inline;
background-image: url('circe.png');
background-position: 100%; /* Display to the right */
background-repeat: no-repeat;
padding-right: 10px /* To leave space for the image */
}
2: You could use fixed-size floating .tag-box-es ( :/ )
3: You could have a (ready made) script put a circle on the right of every ".circle a"
You could try:
.tag-box {
display: inline-block;
}
Although you may experience some issues with firefox 2 and older versions of IE