HTML
<div class="leave-comment">
<span class="comment-bubble"></span>Leave a comment for Example Video 8!
</div>
CSS
.leave-comment {
background: #010101;
clear: both;
font-size: 1.4em;
padding: 20px 0;
}
.comment-bubble {
background: url(http://i.imgur.com/iqOtL.png) no-repeat left center;
display: inline-block;
height: 24px;
width: 26px;
float: left;
margin-right: 10px;
}
Here is the JS Fiddle: http://jsfiddle.net/CeZLy/
I am trying to center both the comment bubble and text inside the black box. The text will always be changing so I can't set a fixed width on the a element. Can someone help me out with this?
NOTE: Sorry if I wasn't clear. I want the comment bubble on the left of the text, and then I want both the comment bubble and the text centered inside the black box.
Remove the span. Set the image as the background of the a element. Use text-align:center; and add left-padding for the image:
.leave-comment {
background: #010101;
clear: both;
font-size: 1.4em;
padding: 20px 0;
text-align:center;
}
.leave-comment a {
background: url(http://i.imgur.com/iqOtL.png) no-repeat left center;
}
<div class="leave-comment">
Leave a comment for Example Video 8!
</div>
Check it:
http://jsfiddle.net/C9HKr/
From your comments, I would just leave out the float: left and add a text-align: center
JSFiddle
Vertically centering seems a bit difficult. If you want to center vertically and have fixed height, you can set the line-height of your link to the same height.
See JSFiddle
There's a nice tutorial about vertical centering at Vertical Centering With CSS, explaining several methods and emphasizing the pros and cons of each.
Update:
I just reread your comment. Maybe I misunderstood you. If you just want the link moved a bit up or down, you can also use a different padding at the top and bottom.
See this JSFiddle
.leave-comment {
background-color: #010101;
clear: both;
font-size: 1.4em;
padding: 20px 0;
text-align: center;
}
.comment-bubble {
background: url(http://i.imgur.com/iqOtL.png) no-repeat left center;
display: inline-block;
height: 24px;
width: 26px;
margin-right: 10px;
position: relative;
top: 7px;
}
Well you need the span now.
http://jsfiddle.net/CeZLy/7/ in action
Related
Please see below the code i have. I am trying to align the name with the image in a way that the name is centered on the right side of the image. I haven't been able to do it correctly. I tried adding position: absolute; but that still won't do the trick.
<div id="contain">
<div id="baseline">
<div id="title2">
<img src="http://www.marketingjava.com/wp-content/uploads/2012/01/
new-default-twitter-avatar.jpg" id="prof_image">Ariel Smith</div>
</div>
CSS:
#contain {
width: 770px;
min-height: 170px;
margin: 20px auto 60px auto;
color: #222222;
font-size: 15px;
position: relative;
}
#baseline {
color: #999;
}
#title2 {
color: #000;
font-size: 30px;
margin-left: 10px;
padding-bottom: 5px;
padding-top: 5px;
width: 750px;
}
Float both left and adjust the title with margin to center it.
http://jsfiddle.net/FBj3f/
If you know the height of the image you can set the line-height of the title resulting in a vertical centerd title http://jsfiddle.net/BtPwh/1/
If you're not against using a table then you can automatically ( Don't need image height. ) do it like this: http://jsfiddle.net/tLggp/1/
The easiest way is to set use a background-image instead of an image element. Then you can right-align text in that block, resulting in top-right positioning.
I have created a grid of thumbnail pictures, that when hovered over, the picture dissapears a block colour is shown with the title of the image on. but In internet explorer instead of the pictures and text appearing within their set thumbnail space they all cramp up in the left corner.
The image and title are stored within the box/ category-widescreen div, this is a dynamic code for wordpress.
Any ideas?
#page-wrap {width: 1060px; padding-bottom: 40px;}
.box { margin: 20px; float: left; }
.category-widescreen { width: 400px; height: 229px; background: #FF0000; }
.category-widescreen a{text-decoration: none;}
.category-widescreen h1{font-size: 30px; color: #FFF; line-height: 34px;}
.category-widescreen h2{font-size: 26px; color: #FFF; line-height: 30px;}
.title{position:absolute; top:14px; left:14px; z-index: 0; padding-right: 14px;}
.category-widescreen img { max-width: 400px; max-height: 229px; float: right; padding: 0 0 2px 10px; z-index:1; position:relative;}
Thankyou for any help!
Too vague! As the other guy suggests, give the basic html structure. However, some observations:
Aren't the font sizes used a bit too big (30px and 26px)?;
title{position:absolute; ...} .... make sure that the parent is styled with position:relative otherwise it will become a mess;
how about floating? Are you making sure things are floated in the right direction?
Hope have helped or at least opened your eyes wide-open! ha ha ha ...
You need to set position:relative to your posts so that the absolutely positioned elements know where to follow.
Try this:
.post {
position:relative;
}
Edit: fixed. Thanks everyone for the help ;)
Hello everyone,
I'm having a few problems with the blue bar elements being separated instead of being together.
Both elements "NotÃcias" and the blue bar are inside a div called "content". The blue bar is inside a span, and is created with 3 divs. One for the left image, the middle one is a repeating background and finally the third one with the last image.
Here's an image to ilustrate the problem: http://i52.tinypic.com/b3vhic.png
The code is the following:
.barra .barra-azul {
background: url(outros/barra_sidebar_e.png) no-repeat top left;
display: inline-block;
height: 14px;
width: 7px;
}
.barra .barra-azul-meio {
background: #56a3eb repeat-x;
display: inline-block;
height: 14px;
width: 50%;
}
.barra .barra-azul-fim {
background: url(outros/barra_sidebar_d.png) no-repeat top right;
display: inline-block;
height: 14px;
width: 7px;
}
And the html is:
<span class="barra">
<div class="barra-azul"></div>
<div class="barra-azul-meio"></div>
<div class="barra-azul-fim"></div>
</span>
What is the best way to accomplish this?
Thanks in advance ;)
It's hard to answer without being able to experiment with the actual code and graphics. But you can start with adding the following.
.barra div {
padding: 0;
margin: 0;
}
If it doesn't work it would be great if you could post a link to a demo of bar.
The problem is that they're inline-block elements per your CSS rules and you have whitespace between them in your markup. You should either float them, or position them absolutely.
HTML:
<div class="barra">
<div class="barra-azul"></div>
<div class="barra-azul-meio"></div>
<div class="barra-azul-fim"></div>
</div>
CSS:
.barra > div {
float: left;
height: 14px;
width: 7px;
}
.barra .barra-azul {
background: url(outros/barra_sidebar_e.png) no-repeat top left;
}
.barra .barra-azul-meio {
background: #56a3eb repeat-x;
width: 50%;
}
.barra .barra-azul-fim {
background: url(outros/barra_sidebar_d.png) no-repeat top right;
}
That also cuts out a bunch of duplication you had going on.
tab-ver.tab {
background: url(../images/16by16.png) no-repeat center center;
text-indent: -10000em;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
}
<div id="tab-ver" class="tab">English</div>
The problem of above script is that the a link doesn't work at all. If the user clicks the 16by16.png image, the user is not redirected to yahoo.com.
However to fix this problem?
Thank you
// update001//
I have tried the following suggestion:
#tab-ver.tab {
text-indent: -10000em;
}
#tab-ver.tab a{
background: url(../images/16by16.png) no-repeat center center;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
display: block;
}
It works for my original problem. However, the displayed image now is offset to bottom of the horizontal menu. It is caused by 'display: block'. However, if I remove 'display:block', then the image will be invisible.
thank you
// update 1 //
Based on the suggestion, the following script works best for me
#tab-en-ver.tab a {
background: url(../images//16by16.png) no-repeat center center;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
text-indent: -10000em;
}
However, this suggestion does have one problem. The text 'English' mixes with the image. I cannot figure out how to remove the text 'English' from a link.
by adding the following extra rule will cause the image disappear.
#tab-ver.tab {
text-indent: -10000em;
}
any idea?
Give that CSS to the <a> instead. Add a display: block so it'll display as a block-level element like the <div>. The <div> will expand to fit the <a>.
EDIT: try inline-block instead and see if it helps.
#tab-ver.tab a {
display: inline-block;
background: url(../images/16by16.png) no-repeat center center;
text-indent: -10000em;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
}
If you want the text ("English") to be hidden, than you have to use <img/> tag, with an alt attribute, something like:
<img src="english-flag.png" alt="English" />
You can also use some CSS hacks, but:
What for? It's so easy to do it with plain HTML!
Those are hacks, so they may work or not in different browsers.
One of such hacks can be to set a background to the <a/> element, to offset the text, to set the overflow to hidden, and to set fixed width:
a{
padding-left:16px;
overflow:hidden;
display:block;
width:16px;
height:16px;
url(../images/16by16.png) no-repeat left top;}
English
You can have the a tag fill up the div by using:
a {
display: block;
height: 16px;
}
You can then also remove the height from the div as it will grow automatically.
/* Normal Bubble */
.bubble {
width: auto;
font-size: 0.75em;
margin-bottom: 24px;
}
.bubble blockquote {
margin: 0px;
padding: 0px;
border: 1px solid #c9c2c1;
background-color: #000;
}
.bubble blockquote p {
margin: 10px;
padding: 0px;
font-size: 21px;
}
.bubble cite {
position: relative;
margin: 0px;
padding: 7px 0px 0px 15px;
top: 6px;
background: transparent url(b/tip.gif) no-repeat 20px 0;
font-style: normal;
}
I have this for my comments.. that looks like "speech bubbles" .
I dont want it big from the beginning, i want to have it custom after the text.. I mean if you wrote "hello" then it should be around it with maybe 1-2px margin from the bubble, so if you wrote "Hello my name is and i like to cook!" then it should be bigger..its like this right now:
<div class="bubble">
<blockquote>
<p>the comment text is here</p>
</blockquote>
<cite>Written by me</cite>
</div>
A div, by default, is block level and, therefore, will expand its width to the width of its parent container (rather than its contents).
Two options to consider would be to set the div to
display: inline-block
Or float it.
Do you mean to put it like that?
.bubble blockquote p {
display: inline;
/*(...)*/
}
See http://www.htmldog.com/reference/cssproperties/display/
I'm not sure quite what you are asking either.
Perhaps you are referring to creating a popup (using images) that scales according to the size of the content? To do that you need multiple overlapping images. It it only scales in one direction (vertically or horizontally) you need two images, if it scales in both directions you need to create four images. This technique is sometimes called "sliding doors".