Solved

css wordpress - change stunning text box to bottom and center across entire image

Posted on 2016-08-04
2
69 Views
Last Modified: 2016-08-05
I am trying to put a blue opaque bar on the very bottom of my section. Currently if you browse to the URL: http://www.pengele.com/test/pengele2/

There is a blue opaque text box in the center of an image. I would like it to look like the .pdf attached. I want to move the text box down to the very bottom of the image (see attachment).

I have tried using firebug for the last few hours and can't figure this out. Please help experts...
home-page-change.pdf
0
Comment
Question by:sqlagent007
2 Comments
 
LVL 42

Accepted Solution

by:
David S. earned 500 total points
ID: 41744719
Absolute positioning is probably the most commonly used approach to do that. It works because one of the ancestors has "position:relative" which creates a new positioning context for it. You'll also need to remove the style attribute from that element as it's giving the element a bottom margin.
#content-section-1 .gdlr-stunning-text-item {
	position: absolute;
	margin: 0;
	bottom: 0;
	left: 0;
	width: 100%;
}

Open in new window

0
 
LVL 1

Author Closing Comment

by:sqlagent007
ID: 41744907
Thanks!
0

Featured Post

Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

831 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