Solved

text and icons align to bottom over a footer

Posted on 2013-12-24
7
275 Views
Last Modified: 2013-12-25
Hello I have this code with auto adjust in width the footer:

http://jsbin.com/ayeQOROh/1/edit

   But if you see there are text and some icons down of the footer green what code needed to fix or add in that link I gave you to put that text and icons over the green footer?
You must take note that the green footer is auto adjusted in width in navigator and is important not destroy the code of other areas because they have important parts of other elements in page is just put the text and icons down the footer over the footer.


Thank you so much
0
Comment
Question by:coerrace
  • 4
  • 3
7 Comments
 
LVL 3

Expert Comment

by:teodor birca
ID: 39738698
You mean something like this?

http://jsbin.com/ayeQOROh/2
0
 

Author Comment

by:coerrace
ID: 39738709
If you see there are down in the left centered some icons/pictures that are not shown because I don't include the file but you can see the empty boxes and at the right is the text you put over, but if you see identical that alignment of both text and icons/pictures must be over the green footer for now is just the text and all is not aligned. In other words is like the icons/pictures and text just move the same ammount up until be over the footer.
I have hours trying and I'm lost but you have part could you put with the rest?
the code to move up over the footer is:
<img src="wpimages/wpd558206d_06.png" border="0" width="47" height="47" name="roll_2" alt="" onmouseover="PPImgAction('over','roll_2')" onmouseout="PPImgAction('out','roll_2')" style="position:absolute;left:76px;top:28px;">
			<img src="wpimages/wp2ce72923_06.png" border="0" width="47" height="47" name="roll_1" alt="" onmouseover="PPImgAction('over','roll_1')" onmouseout="PPImgAction('out','roll_1')" style="position:absolute;left:137px;top:28px;">
		  <img src="wpimages/wp2fccadb5_06.png" border="0" width="47" height="47" name="roll_3" alt="" onmouseover="PPImgAction('over','roll_3')" onmouseout="PPImgAction('out','roll_3')" style="position:absolute;left:199px;top:28px;">
      <img src="wpimages/wp2219c97b_06.png" border="0" width="47" height="47" name="roll_4" alt="" onmouseover="PPImgAction('over','roll_4')" onmouseout="PPImgAction('out','roll_4')" style="position:absolute;left:259px;top:28px;">
		
<p class="Body-P"><span class="Body-C">text text text</span></p>
<p class="Body-P"><span class="Body-C">text text text text text text text text text text text text text text text</span></p>
<p class="Body-P"><span class="Body-C">text text text text text text text text text </span></p>

Open in new window


Thank you
0
 
LVL 3

Expert Comment

by:teodor birca
ID: 39738722
if you just want that the images to be inside the footer you just need to remove the style attribute from the images .. position:absolute left, top attributes....
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:coerrace
ID: 39738741
I did that and are inside the icons but upper the text and the text must be at the right. Can't make it work. If you can put in jsbin the code would be great to check.
Thank you
0
 
LVL 3

Accepted Solution

by:
teodor birca earned 500 total points
ID: 39739091
0
 

Author Closing Comment

by:coerrace
ID: 39739274
Thank you
0
 
LVL 3

Expert Comment

by:teodor birca
ID: 39739292
Ur welcome .. happy i could help ...
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

744 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

10 Experts available now in Live!

Get 1:1 Help Now