Hello All!

I recently completed a course in HTML 5 and CSS 3 and am now attempting to change my clients Table based website to HTML 5 tags.

So far I've managed to get it pretty much working fine.

But annoyingly when there is something irregular about a certain page (say an odd number of pics or a landscape and portrait pic next to each other). Then the information at the foot of the page displays incorrectly.

This information is the social media buttons and any 'related products' that should be listed.

 

This is one example of the foot displaying incorrectly:

http://www.mason-uk.co.uk/project.asp?pid=71

 

and another:

http://www.mason-uk.co.uk/basket.asp?pid=401

 

This is how it should display:

http://www.mason-uk.co.uk/basket.asp?pid=428

 

I get simalar problems to this on another website I'm building. What is good code for listing content like this? It needs to be robust as my clients are constantly updating via a CMS that I've built them.

 

The HTML goes like this:

 

<section class="mainbody">
   <p><h6>Air Springs provide very low natural frequency and are essentially resonance free. Typically used for 
installations requiring a extremely high level of vibration control - such as science labs and medical facilities.
</h6></p><br />
   <p>Frequencies of about 2Hz are typically achieved but lower acoustic frequencies are possible by bolting the air spring to a sealed hollow stanchon to increase the effective volume as the natural frequency is related to the air volume.</p>        

      <span class="pic1"> 

                       <a class="textlink" style="cursor: pointer"
                       onclick="TINY.box.show({image:'images/airspring-small.jpg',boxid:'frameless',animate:true})">
                         <img border="0" width="210"  align="top"  src="images/airspring-small.jpg"
                         title="A Small AirSpring - Click to enlarge" 
                         alt="A Small AirSpring"/>
                           <br />
                           A Small AirSpring</a>

          </span>
      	   <span class="pic2">

                       <a class="textlink" style="cursor: pointer"
                       onclick="TINY.box.show({image:'images/air-spring-large.jpg',boxid:'frameless',animate:true})">
                       <img border="0" width="210"  align="top"  src="images/air-spring-large.jpg"
                       title="A Large Air Spring - Click to enlarge" 
                       alt="A Large Air Spring"/>
                       <br />
                        A Large Air Spring</a>

          </span>        



      <span class="textspan">
     	<br /><p><h3></h3></P><br />
       <p>Typical applications include medical scanners (MRI) or high precision imaging equipment/apparatus such as SEM and TEM.<br> 
Some types of electrical transformer require isolation via air springs due to their inherently complex vibration spectrum especially when located on an upper floor.

</p><br />
       <p>If you would like to order or learn more about this product. Please contact Mason UK's acoustic engineers by using the details in the blue bar to the left or by clicking the 'Contact Us' tab, also located in the blue bar to your left.</p><br />
           </span>


       <span class="pic1"> 

                   <a class="textlink" style="cursor: pointer"
                   onclick="TINY.box.show({image:'images/airspring22.jpg',boxid:'frameless',animate:true})">
                   <img border="0" width="210"  align="top"  src="images/airspring22.jpg"
                   title="Housing, stanchion, air springs - Click to enlarge" 
                   alt="Housing, stanchion, air springs"/>
                   <br />
                    Housing, stanchion, air springs</a>

             </span>
  			 <span class="pic2">

                   <a class="textlink" style="cursor: pointer"
                    onclick="TINY.box.show({image:'images/airspring33.jpg',boxid:'frameless',animate:true})">
                   <img border="0" width="210"  align="top"  src="images/airspring33.jpg"
                   title="Close-up of Air Spring - Click to enlarge" 
                   alt="Close-up of Air Spring"/>
               <br />
                   Close-up of Air Spring</a>

	</span>



       <span class="textspan">
     	<br /><p><h3></h3></p><br />
     <p>Air Spring housing in place and start of reinforcing steel placement. Note styrofoam lining the pit. This will be removed after the concrete pour to form a 25mm void. The air springs will lift the inertia block by 25mm to form a void underneath. The void space is also vented. This helps to ensure that the inertia block remains free from external vibration & noise.</p><br />
              <p> This picture shows completed reinforcing steel and conduits in place. After the concrete pour pneumatic air lines will be drawn through the conduits and connected to the Mason Industries air springs via levelling valves.</p><br />
           </span>

       <span class="pic1">  	

                       <a class="textlink" style="cursor: pointer"
                       onclick="TINY.box.show({image:'images/airspring44.jpg',boxid:'frameless',animate:true})">
                       <img border="0" width="210"  align="top"  src="images/airspring44.jpg"
                       title="Air spring  & reinforcing steel - Click to enlarge" 
                       alt="Air spring  & reinforcing steel"/>
                       <br />
                       Air spring  & reinforcing steel</a>

       </span>
   	<span class="pic2">

                       <a class="textlink" style="cursor: pointer"
                       onclick="TINY.box.show({image:'images/airspring55.jpg',boxid:'frameless',animate:true})">
                       <img border="0" width="210"  align="top"  src="images/airspring55.jpg"
                       title="Reinforcing steel & conduits - Click to enlarge" 
                       alt="Reinforcing steel & conduits"/>
                       <br />
                       Reinforcing steel & conduits</a>

            </span>     



<div class="socialmedia">
<a class="addthis_button_google_plusone"></a><br /><Br />
   	<!-- AddThis Button BEGIN -->
       <div class="addthis_toolbox addthis_default_style " align="right">
       <a class="addthis_button_preferred_1"></a>
       <a class="addthis_button_preferred_2"></a>
       <a class="addthis_button_preferred_3"></a>
       <a class="addthis_button_preferred_4"></a>
       <a class="addthis_button_compact"></a>
       <a class="addthis_counter addthis_bubble_style"></a>
       </div>
   	<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4ec524f5130249c5"></script>
   	<!-- AddThis Button END -->
</div>


<div class="centertable">
   <h3>       Related Products</h3>


			<p>No related products found</p>

</div>
</section>

 

 

 

CSS

 

.centrecolumn {
position:absolute;
top:1px;
left:145px;
float:none;
width:480px;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
text-align:left;
vertical-align:top;
z-index:0;
}


.mainbody {
position:absolute;
top:190px;
left:145px;
float:none;
width:480px;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
text-align:left;
vertical-align:top;
z-index:0;
}

.pic1 {
position:relative;
float:left;
left:0px;
width:235px;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding:10px 0px 10px 0px;
margin:0px 0px 0px 0px;
text-align:center;
vertical-align:top;
z-index:0;
}

.pic2 {
position:relative;
float:right;
left:0px;
width:235px;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding:10px 0px 10px 0px;
margin:0px 0px 0px 0px;
text-align:center;
vertical-align:top;
z-index:0;
}

.textspan  {
position:relative;
float:left;
left:0px;
width:480px;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
text-align:center;
vertical-align:top;
z-index:0;
}


.centertable  {
position:relative;
float:left;
left:0px;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
text-align:center;
vertical-align:top;
z-index:0;
}


.socialmedia  {
position:relative;
float:right;
left:100px;
width:240px;
margin:0px 0px 0px 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding:0px 0px 20px 0px;
margin:0px 0px 0px 0px;
text-align:center;
vertical-align:top;
z-index:0;
}

 

 

Thanks, so much for considering this guys!

Rich

 

www.mason-uk.co.uk

Edited May 29, 201214 yr by Renaissance-Design
Please use the code button or tags to format your code.

Wrap a div around your related products and social media, and clear it.

Thanks Renaissance,

I'm not sure what you mean by 'clear it'. I would like to know though!

 

But what I did was increase the padding and widths of the DIVs that contain those items (social media and centertable).

Not sure if this was the best way or not?

 

Also, does anyone have experience of the max-width / max-height attributes in HTML 5 / CSS 3?

 

Cos when my clients try and put a picture in a portrait position it runs behind the text beneath it. I can't make it a block, because it needs a background image to go behind it of the container div.

Can these Max Height/Width attributes be used for controlling unknown dimensions of a image?

Has anyone any experience of these?

 

Maybe I should start a new topic regarding these...

Clearing.