As you can see the text on the images are not aligning correctly I have tried everything changing margin top of the css and I cannot get the text to float properly on the images can someone have a look at the css to see what may be the problem. It's the foot conditions menu that is the issue.
http://indigo.websitewelcome.com/~birchpodiatry/our-doctors
How to change the tag below as suggested by alex k in joomla 3.3?
Your using a block element within an inline element, simply change
<div class="image-title">Bunions</div>
</span>
to
<span class="image-title">Bunions</span>
</span>
Related
Here's the jsfiddle.
And for you guys understand, the split of the jsfiddle must be in a certain position. So, here's a printscreen.
The code in the jsfiddle works perfectly for mobile or bigger dimensions but I need it to that certain width. As you can see in the image, it's explained what I want. I want the badges to be always at right of the text no matter the propotions of the text.
I thought about the possibility of the <div> inside the <li>, but for what I've tried I got no success.
I have a link wrapped around two divs which are animated on :hover. In Firefox the link works fine and jumps to the right anchor. But in Safari and Chrome the links only work if the first of the two divs inside the < a>-element is clicked.
<li>
<a href="#work" class="inaktiv">
<div class="work1">a</div>
<div class="work2">b</div>
</a>
</li>
Here is a working jsFiddle: http://jsfiddle.net/26HgM/6/
Could anyone tell me why it is not working properly? Thank you!
The problem is you're rotating the <a> so it's facing backwards which webkit is interpreting as no longer being a link that can be interacted with.
One thing you could do is instead of rotating the link itself, add a container div inside the link and rotate that.
http://jsfiddle.net/26HgM/6/
The problem is that <a> is an inline element, while <div> is a block-level element. Inline elements cannot contain block-level elements according to the HTML standard, but browsers try to do it anyway--so we get buggy implementations. You will have to:
put the links inside the divs, and have two links, or
make the container a div and make it clickable with Javascript
Here's more on block-level vs inline: http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm
I'm working on a html only webpage, and I am having some issues correctly formatting my social-media links. I have a fixed position div that is 48 x 190, and within it I'd like to put 4 different social media icons which link to their respective pages. I was able to set up the div correctly in css styling, and I was able to insert the images into the correct position just fine. However, as soon as I added the link tag to the image, it all broke. The formatting of the image seemed to change just by adding the link to it, and they now took up all this extra space around themselves, went outside the borders of the div, and refused to be properly centered. Why is adding a link to the image breaking the formatting in such a strange way, and how can I fix it so it remains formatted how I want even after the link is added?
Thanks!
have you set the border of your images to 0 ? When inside a link, browsers put a 1px border to images if this value is not set in the CSS.
If that is not the problem, posting your code (see jsFiddle for example) could help
I guess, the issue is related to the different size (in pixels) of icons, that cause to increase div and distrub the UI. I have also used Image-Links as following and it works fine. First ensure your icon size.
<a href="javascript: showPopup();" id="groupEdit" class="link">
<img src="/images/redPencil.png" title="Update">
</a>
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.