Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages »

Need help creating boxes created as images


  #1  
Old Jun 24, 2012, 09:22 PM
Kiwi's Avatar
Kiwi
 
32 posts · Jun 2012
======================
Note: moved from another thread
======================

I've hit a wall, wonder if anyone can advise.

I've got the boxes created as images, and have created a div layer to go on top of them as text (not sure if all that is the right terminology, but hopefully you know what I mean).

http://realevaluation.com/test-page/

I am using absolute positioning to get things in the right place, but somehow my bottom two boxes are NOT quite in the right place, and I can't work out why. I thought I'd put the pics in as the same size and lined them up in the right spots ... ???

TIA

Code follows:

<div style="position: absolute; left: 232px; top: 229px; width: 400px; height: 261px;">
<img class=" wp-image-426 alignleft" title="acquire" src="http://realevaluation.com/wp-content/uploads/2012/06/FernBox.png" alt="" width="400" height="261" />
<div style="position: absolute; left: 17px; top: 29px; width: 184px; height: 222px;">
<h1><span style="font-family: verdana,geneva; font-size: 36px;">acquire</span></h1>
<span style="font-family: verdana,geneva; font-size: 18px;">in-house capability</span>
<span style="font-family: verdana,geneva; font-size: 18px;">custom tools</span>
<span style="font-family: verdana,geneva; font-size: 18px;">insight &amp; ideas</span>
<span style="font-family: verdana,geneva; font-size: 18px;">actionable answers</span>
</div>
</div>
<div style="position: absolute; left: 645px; top: 229px; width: 400px; height: 261px;">
<img class="alignright wp-image-428" title="read" src="http://realevaluation.com/wp-content/uploads/2012/06/HarakekeBox.png" alt="" width="400" height="261" />
<div style="position: absolute; left: 26px; top: 29px; width: 184px; height: 227px;">
<h1><span style="font-family: verdana,geneva; font-size: 36px;">read</span></h1>
<span style="font-family: verdana,geneva; font-size: 18px;">nuts &amp; bolts</span>
<span style="font-family: verdana,geneva; font-size: 18px;">commissioning</span>
<span style="font-family: verdana,geneva; font-size: 18px;">think pieces</span>
<span style="font-family: verdana,geneva; font-size: 18px;">genuine blog</span>
</div>
</div>
<div style="position: absolute; left: 232px; top: 533px; width: 400px; height: 261px;">
<img class="alignleft size-full wp-image-452" style="top: 1px; left: 1px; width: 400px; height: 263px;" title="learn how" src="http://realevaluation.com/wp-content/uploads/2012/06/ToitoiBox.png" alt="" />
<div style="position: absolute; left: 17px; top: 29px; width: 186px; height: 222px;">
<h1><span style="font-family: verdana,geneva; font-size: 36px;">learn how</span></h1>
<span style="font-family: verdana,geneva; font-size: 18px;">tips &amp; guides</span>
<span style="font-family: verdana,geneva; font-size: 18px;">workshops</span>
<span style="font-family: verdana,geneva; font-size: 18px;">seminars</span>
<span style="font-family: verdana,geneva; font-size: 18px;">e-learning</span>
</div>
</div>
<div style="position: absolute; left: 645px; top: 533px; width: 400px; height: 261px;">
<img class="wp-image-454 alignright" style="top: -5px; left: 1px; width: 400px;" title="about" src="http://realevaluation.com/wp-content/uploads/2012/06/JaneBox.png" alt="" width="405" height="267" />
<div style="position: absolute; left: 26px; top: 29px; width: 184px; height: 227px;">
<h1><span style="font-family: verdana,geneva; font-size: 36px;">about</span></h1>
<span style="font-family: verdana,geneva; font-size: 18px;">real evaluation</span>
<span style="font-family: verdana,geneva; font-size: 18px;">jane</span>
<span style="font-family: verdana,geneva; font-size: 18px;">contact</span>
</div>
</div>

Last edited by juggledad; Jun 25, 2012 at 05:24 AM.
  #2  
Old Jun 25, 2012, 05:34 AM
juggledad's Avatar
juggledad
 
23,632 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
where to begin....

first off, move your styling out of the HTML and into CSS it will simplify things. For example, you have
HTML Code:
<span style="font-family: verdana,geneva; font-size: 18px;">in-house capability</span>
so if you want to change the font-size, you will have to edit 16 lines of code. If you changed it to
HTML Code:
<span>in-house capability</span>
you could add a CSS Insert of
HTML Code:
span         {font-family: verdana, geneva; font-size: 18px;}
however that would apply to ALL the spans on the page. better to give each div a class like my_boxes' so you could code the CSS Insert as
HTML Code:
.my_boxes         {font-family: verdana, geneva; font-size: 18px;}
now you could change one line and effect 16 locations in the HTML

looking at your code, I would do that with the images, all the div's. I'd move everything into CSS I could.

You also have multiple H1's which is bad for seo and then you style them - why use the H1 if you are going to set the font size anyway?

I could go thru the code and set it up so it would work the way you want, but it would take more time than I have to give for free.

Reduce the clutter and it may become simpler to accomplish what you want to do.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Blue boxes around images with links? twb716 Header configuration & styling 1 Mar 9, 2012 03:01 PM
Creating a menu with the built-in WP menu that looks just like the one created in ATA lhanft Page & Category Menu Bars 2 Aug 7, 2010 11:57 AM
Creating widget for page menu with images in header paintersinn Sidebars & Widgets 2 Jul 22, 2010 06:46 AM
4 Problems (Mainly about overlaying images/creating widgets) ajay182 Header configuration & styling 11 May 1, 2010 11:16 PM
creating 2 separate boxes in header, for logo and nextgen slideshow gallery rinoa3108 Header configuration & styling 8 Mar 8, 2010 05:19 PM


All times are GMT -6. The time now is 03:18 AM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.