Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Khalila Fooks
Khalila Fooks
2,234 Points
Posted by Khalila Fooks
Khalila Fooks
2,234 Points

Div positioning and Wordpress theme across all screens

I am a beginner and this is my first time applying what I have learned so far. I have a group of images together on a client's WP site. On my computer screen they are toward the right side of the page. On his screen they are more toward the center. I do not remember which course I took that discussed this topic but I need the images to stay in their place, no matter what browser or screen they are on.. How can I do this? The template is responsive and when I scale down my window, the image moves around as well..

The three images are the "sponsored by" and two logos underneath. The website: www.AlllRisksConsidered.com

This is the CSS I added to the template. I did not add it to the style.css file. There is a section to add your own CSS to this template, separate from the template files.

Can someone help me please?

<div id="outer"> <div id="inner" style="position:absolute; left:974px; top:18px;"> <img src="http://alllrisksconsidered.com/wp-content/uploads/2013/08/arc-blog-sponsored-by-e1385370539249.png" alt="Sponsored by"> </div> <br>

<div id="outer"> <div id="inner" style="position:absolute; left:804px; top:38px;"> <a href="http://www.syncuc.com"> <img src="http://alllrisksconsidered.com/wp-content/uploads/2013/08/Synergy-Credit-Union-Logo-e1385371649952.gif" alt="Synergy Credit Union"> </a> </div>

<div id="outer"> <div id="inner" style="position:absolute; left:834px; top:73px;"> <a href="http://www.synbc.com"> <img src="http://alllrisksconsidered.com/wp-content/uploads/2013/08/Synergy-Banking-Logo-e1385354308822.png" alt="Synergy Banking"></a> </div>

1 Answer

Matti Mänty
Matti Mänty
5,885 Points
Matti Mänty
Matti Mänty
5,885 Points

For me the images are overlapping a bit, so seems like you need to do a bit of fixing, but it shouldn't be too hard.

I would suggest you download the normalize.css (you can just google it) and load it up as the first css file and the rest of your css files after that. Seems like you're defining the position for the divs in HTML using the absolute positioning. I'm no expert, but I'd suggest you try positioning the divs in css and maybe use a grid style of doing things. You have three outer divs and a inner div in each of them that holds the images, how about you just use one outer div and put the images in there and set some padding and margins for them. Now you will just have to set the position for the outer div and the inner divs should be easier to position inside it.

Not sure if I made sense or any of this will help, since I'm a newb, but good luck!