I have these link buttons with text underneath. Right now I am using a table to get everything into alignment. But my boss wants wants a mouseover to trigger both the image and the text state to change. So ideally I would wrap both image and text in <a> and use css:hover. But I can't figure out how to do it. I've tried lists so far with no success. I would like something like:
<li><img src="" /><br /><a>href</a></li>
Something like this ?
make the buttons floated so they can have widths
set their width
put both image and text inside the link
do text-align:center
example: http://jsfiddle.net/gaby/kGd8c/
Wouldn't wotk simply set text-align:center on the li ?
Related
I wish to embed an image in the middle of a line of text. I want to have the image sitting in the middle of the text like this:
However when I try this it ends up like this:
So I want the bottom of the image to be lower than the bottom of the text.
My code is as follows:
cticut <span><img src="images/CT.jpg" height="42" width="60"></span> ? Find
I've tried adding a margin-top and padding-top styling to the span but neither has any affect.
How can I place a image in the center of a Paragraph and let the text wrap/break of the image. Without taking help of JS.
Something like this, here we have two paragraphs, I need this with one paragraph with some text on top as well.
I want to display a text behind an image. I've tried with vertical-align:top applied to the image. The first text line is placed behind the top of the image, but the second one appears on the bottom of the image.
Like here: JSFIDDLE
How to place the text that fits behind the image, and the rest below, filling the whole width?
Is this what you mean?
http://jsfiddle.net/K39Cm/1/
float:left;
If you visit http://www.timkainu.com/journal/ you can see that there are some "featured images" floating to the left of the text. How can the text wrap around the image? I've used Firebug to try and find out what part of the CSS affects it, but I failed, obviously.
The site runs on WordPress and the theme being used is called "Striking", which is found on ThemeForest.
Thanks!
You are going to have to make some change to the theme to make that work. In order for text to wrap around an image, the text and image need to be in the same container. In this case, the image is in one DIV and the text is in the DIV next to it. You'd need to move div.image_styled.entry_image inside of div.entry_info to make it work. You would probably need to make some CSS adjustments as well since it was not design to wrap around the images like that.
Are you referring to, for example, the first item "Costco Photo Center Review" with the image of Costco on the left?
The image is wrapped inside <div class="image_styled entry_image"></div>
and the text is wrapped inside <div class="entry_info"></div>, both of which are wrapped inside <article id="xxx" class="entry entry_left">
In order for text to wrap around the image, they need to be in the same container, with the image set to float: left. I'm not sure how this relates to Wordpress, but in terms of HTML and CSS, that's the way to go.
In my HTML pages I have text with imgs. The top edge of the img is aligned with the top of the text, but I want the bottom of the img to be aligned with the text.
How can this be done?
UPDATE Now I see this is the default behaviour, but it doesn't happen in my page. What could possibly be wrong?
EDIT: I came back to add line breaks and decided to throw an example in, too.
You can do this with CSS's vertical-align property. Something like this:
<img src="wherever.png" style="vertical-align: text-top;" />
More information about the style is available at w3schools, where they have a neat sandbox.