Image and text lineup - html

I have a very simple question that I am sure will be very easy for someone to help me out with. I have a website that isn't lining up my image to text the way I want it to. If you scroll down the webpage about a little more than half way down you will see a logo image of a money back guarantee and text about the guarantee. My issue is right now the image does not line up right next to the text instead is currently just above the text. I have tried to recreate the table and pop in the image and text again however it continues to come up wonky. Any HELP would be much appreciated. Also if you have time please help me with the section "What experts are featured in the film?" the images look good however the names and info about the people directly below do not match up or look good. I can not fix spacing to make it all fit and look well together. PLEASE HELP!!! Thank you !!!
*Below is the url link
http://thetappingsolution.com/eft-tapping-film-Jesse.php

You image and text located in different tags
<td></td>
You should cut you image from it's tag and paste it into tag with text

The css of your second cell is set as
vertical-align: baseline;
, when it needs to be
vertical-align: top;

Related

How can I put text over a fixed image in html and make the text scrollable?

This may be a stupid question, but I am making a website and I want to have a page that has a fixed image that stays where it is when you scroll to see more text. One problem that I have encountered is that I can get the image to be fixed, but then I cannot make other text scrollable. The other problem is that I can get the text to be scrollable but the text goes under the fixed image. Is there any way that I can fix this. I have been using very simple html divs with classes from a style.css file.
As Geeky Quentin said, z-index is the solution to your problems. You mentioned that you are using classes in css, so in the class you should put z-index: index. The higher the index, the more things it goes over. If you want an image to stay where it is and not get anything put over or under it, you can just use different z-index indexes. If you separate the s then you should be able to make the text scrollable. I hope this answers your question.

Shape/element behind a.link in different text types?

I'm trying to create a shape that would appear behind text links on a website. I have searched online and via the forums here and it may be my ignorance but I can't seem to find any matching responses that demonstrate how this is achieved in a similar way to what I am trying to do. Ideally the shape does not interfere with text alignment and could sit behind some text or extend beyond the edges of the text container for different sized text eg. h1 or p etc.
I have attached an example of what I am trying to achieve with different sized text.
Any help would be greatly appreciated. If it is not obvious I am new to building with html and css so please forgive any ignorance.
Examples of shape behind various text types
Edit 1: I have tried this jsfiddle[dot]net/broahhhh/2pstw693/15/ but the image repeats itself to fit the text size and it cuts off at the edges of the text.
Cheers

How do I make an overlay be "erased" with text

It's kind of hard to explain, but I want to make a website with a picture as the background, and over the picture a grey overlay. I then want to have some text above the overlay, and where the text is, the grey overlay is removed, so the text is written in the absence of the grey overlay.
I made an example a year ago, with images, but I want to make it in CSS, if it's possible.
Here's the example (sorry for the mess, didn't really know what I was doing back then)
Example Page
Specifically, the text furthest down (most visible) on the page.
I really hope something like this is possible without using images as the text.
Thanks in advance!
This is not possible with CSS. You can do it with SVG though:
Text with image background in svg or css

FlexSlider: Way to change from displaying images to displaying text?

Regarding flexslider
Is there any way to modify it from displaying images to displaying only text? Or is flexslider only for animating images? If so, can you give me a hint what would have to be changed?
Thank You
For each slide in the slideshow I would like to display varying amounts of text only. And I would like to reliably keep the slider controls responsive and in a standard position on the screen as each slide changes. I am not really concerned with displaying the images.
In some of the li examples which can be found in the zippy-share link below, I associate an image file with the "flex-caption" CSS Selector found in flexslider.css file. Using an associated image file for each text paragraph seemed like my best bet to force the slider controls to stay in that standard position as each slide changed. Am I on the right track?
I am not really concerned with displaying image files.
An html version of this problem can be found at the zippy-share link below:
http://www51.zippyshare.com/v/46072947/file.html
take a look at the li examples in the main index.html
You can replace the image with the text you want to put. Please remember to modify the minItem and maxItem to fit your need.

css for icon on the right of the text with correct fallback on overflow

please see this example http://jsfiddle.net/7trcV/
what I'm trying to achieve is ability to put an arbitrary icon to the right of the text in a way that text width is limited. In the example I posted the problem with the second (short text) is - the icon is displayed detached from the text.
Any help is appreciated!
How's this? http://jsfiddle.net/7trcV/5/
I gave the .content a right padding and set the icon as it's background.
Ok, try this http://jsfiddle.net/7trcV/6/ it should have sorted out your underline issues. I'm not addressing the clickable icon because that's a completely different requirement from your original question.
Ok sorry i did not look at your code properly for the first time... problem here is absolutely positioned icon which need to be floated next to your spans like this: jsfiddle link
after you do this you must set max-width of that span to be width of container-width of icon... hope this will help
You could use javascript to find the width of the span, and have the icon positions right next to it.
Exmaple here: http://jsfiddle.net/peduarte/KCttp/