Solved

HTML: position text on top of image

Posted on 2015-01-24
7
181 Views
Last Modified: 2015-02-01
I'm working on an epub eBook in calibre. It is intended to be responsive. I can make full use of CSS 3.

In one part of the book I'd like to put text on top of an image.
The image must be horizontally centered on the page.
The text must be horizontally centered on top of the image, 15% down from the top.
The image has a blank section 15% from the where the text is to go. In a responsive environment, as the size of the viewport changes, the image and consequently the blank section will also change in size. I want the text to be positioned in that blank section.

I'm having trouble getting the image horizontally centered and in getting the text to both center and be the right proportional distance down.

Here's what I have so far. There's a corresponding JSFiddle at I created a JSFiddle for what I have now: http://jsfiddle.net/blearyeye/d888kv7w/.
CSS
.block_17 {
    display: block;
    color: #773A77;
    font-family: "Filosofia", sans-serif;
    font-size: 2em;
    font-weight: bold;
    line-height: 1.5;
    page-break-after: avoid;
    text-align: center;
    text-indent: 0;
    margin: 0;
    padding: 0
    }

Open in new window

HTML
<div style="display:inline;position:relative">
<img src="TheImage.png" style="position:absolute;"/>
  
<p class="block_17" id="calibre_pb_20" style="inline;top:70;width:100%;position:absolute;">The Desired Text</p>
</div>

Open in new window


There are a number of problems I'm having.  The image isn't being centered in the viewport. The text isn't being centered at all. The text isn't being moved down at all, even with an absolute top attribute.
0
Comment
Question by:BlearyEye
  • 3
  • 3
7 Comments
 
LVL 13

Expert Comment

by:Edwin Hoffer
ID: 40568296
Hello BlearyEye,

Don't use the <p> tag in <div> code

Here as an example:

<div style="display:inline;position:relative">
<img src="http://bdluv.com/xmisc/misc/Cover%20Image%20Flowers%20House.png" style="position:absolute;"/>
</div>  
<p class="block_17" id="calibre_pb_20" style="top:70;width:100%;position:absolute;">Text To Display</p>

Open in new window


Hope this helps you
Thanks
Edwin
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40568379
Part of you CSS is not valid because you are not specify a unit of measure... what does top:70 mean? 70px; 70%? 70vh?

If you want it responsive you probably should be using vh and vw for most units of measure; but I am not going to waste my time guessing at what the page looks like.  Post a link to the page, which I suspect probably has a lot of problem when I see inline styles being used.

Cd&
0
 
LVL 1

Author Comment

by:BlearyEye
ID: 40571805
Being an ebook, it's kind of hard to post a link to the page. But you're asking for more context, which is reasonable. I'll add in the rest of the CSS.
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 1

Author Comment

by:BlearyEye
ID: 40576608
Well, this has been a learning experience. It seems that epub generally assumes that the program that renders it to the viewer will choose the base font size and line spacing.  (This lets the reader specify a preferred size and spacing.) So unless I fix it, the font size can be inconsistent with the size of the graphic as it's scaled according to viewport.

So ... I made the change that Edwin Hoffer suggested and things started looking better. As COBOLdinosaur noted the 70 by itself is meaningless. I changed it to 40% and it seems about right. So ... the current problem is that the text is centered in the viewport but the graphic is not. I think if I can get that sorted I'll be well on my way.

I updated the fiddle, http://jsfiddle.net/d888kv7w/10/.
0
 
LVL 13

Accepted Solution

by:
Edwin Hoffer earned 500 total points
ID: 40576726
Hello BlearyEye,

The image you are using is not a full width image, but if you still want to use this as background then use the below code in your "body" tag:

body{	
	background-image: url(http://bdluv.com/xmisc/misc/Cover%20Image%20Flowers%20House.png);
	background-position: center;
	background-repeat: no-repeat;
}

Open in new window


In above code you can change background-position to: top left, center, right left, etc. and you want to repeat the background then change "no-repeat" to "repeat"

Thanks
Edwin
0
 
LVL 1

Author Closing Comment

by:BlearyEye
ID: 40582959
Just what I needed, thanks.
0
 
LVL 13

Expert Comment

by:Edwin Hoffer
ID: 40583205
You are welcome :)
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now