Solved

Need help with table with using html

Posted on 2014-03-28
5
227 Views
Last Modified: 2014-03-28
Hi,
    I have a table on my webpage which covers the header, it currently is set to 1000px, however I now want it so the colours etc spread across the page 100%.  I have attached an image to show what I want.  How can this be done?

The ee-before shows how the site is now, and the ee-after, with the sides stretched.

I tried creating a new table with 3 columns, dropping the existing table into the middle column with a fixed 1000px width, then the two new side columns had tables with rows to give the colours, but i couldn't get these to then stretch to 100%....

Thanks
ee-after.png
ee-before.png
0
Comment
Question by:damianb123
  • 2
  • 2
5 Comments
 
LVL 11

Expert Comment

by:Tej Pratap Shukla ~Dexter
ID: 39961107
Hey there

I have a simple solution for you, why don't you use div tag and there style the div container accordingly.
If you need help reply with a sample of the page code.

Feel free to revert back

Thanks
~Dex
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39961113
Forget the table and use div's and li's

  <div class="container">
      <div class="header">
          <div class="topheader">
             <!-- logo etc -->  
          </div>
          <div class="midheader">
             <!-- blue style ul as horizontal list -->
            <ul><li>stuff</li><li>stuff</li><li>stuff</li></ul>
          </div>
          <div class="bottomheader">
             <!-- yellow style ul as horizontal list -->
            <ul><li>stuff</li><li>stuff</li><li>stuff</li></ul>
          </div>
        
       </div>  
  </div>

Open in new window


Otherwise, will you please show us your code.  Make a test case (use fake data, only add what is necessary) http://css-tricks.com/reduced-test-cases/.  There are a number of ways to do what you are asking and we can't tell what you have done from an image.  

Just going on what you are showing, I would use the way I suggested.
0
 

Author Comment

by:damianb123
ID: 39961127
Hi,
    Please find attached the current code which is live and working, so the edges need to be extended to 100%, but the middle part (1000px) needs to stay central.

Thanks for all your help

Damian
header-revision.html
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39961219
You really should update all of this to not use tables for your layout and revert all of your inline styles to css.  

I simply removed using a table inside of a table.  For now, I created a header container and 4 divs each containing their own table.  You take it from here.  fyi, I took out some of the php to make it readable in jsbin.  http://jsbin.com/ruzacaqi/1/

<div><!-- container -->
    <div><!-- div for each table -->
        <table> <!-- keep orig inner table -->

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="header_container">  
<div align="center">
  
  <!-- top header -->
<table cellspacing=0 cellpadding=0 width=1000 border=0>
      
     <tr>
		<td width=426>
                <font face="Arial" size="2">
                <strong><span style="color: #000000;"><a style="color: #000000;" href="http://www.testdomain.co.uk">Home</a> |</span></strong>
 				<strong><span style="color: #000000;"><a style="color: #000000;" href="/contact_us/">Contact Us</a> |</span></strong>
                <strong><span style="color: #000000;"><a style="color: #000000;" href="/customer/account/">My Account</a> |</span></strong>
                <strong><span style="color: #000000;"><a style="color: #000000;" href="/customer/account/login/">Login</a> |</span></strong>
                <strong><span style="color: #000000;"><a style="color: #000000;" href="/customer/account/logout/">Logout</a> |</span></strong>
                <strong><span style="color: #000000;"><a style="color: #000000;" href="/questions/">FAQ's</a></span></strong></td>
 
		<td width=38 height=35 bgcolor="#CCCCCC" align="center" bordercolor="#000000" style="border-left-style:solid; border-left-width:1px; border-right-style:none; border-right-width:medium; border-top-style:solid; border-top-width:1px; border-bottom-style:solid; border-bottom-width:1px">
               
				<img src="<?php echo $this->getSkinUrl('images/trolley.gif') ?>" width="27" height="22"></td>

		<td width=150 bgcolor="#CCCCCC" valign="middle" bordercolor="#000000" style="border-left-style:none; border-left-width:medium; border-right-style:solid; border-right-width:1px; border-top-style:solid; border-top-width:1px; border-bottom-style:solid; border-bottom-width:1px">
                <font face="Arial" size="2"><b><div align="center"></div></td>
 
		<td width=352 height=35 bgcolor="#FFFFFF" alin="right" align="right">
                <a href="https://www.facebook.com/ct" style="text-decoration: none"><img src="<?php echo $this->getSkinUrl('images/facebook.gif') ?>" alt="Follow us on Facebook" title="Follow us on Facebook" border="0"></a>&nbsp;
                <a href="https://twitter.com/are"><img src="<?php echo $this->getSkinUrl('images/twitter.gif') ?>" alt="Follow us on Twitter" title="Follow us on Twitter" border="0"></a>&nbsp;
				<a href="https://plus.google.com/112304283907169205731/posts" style="text-decoration: none"><img src="<?php echo $this->getSkinUrl('images/google.gif') ?>" alt="Follow us on Google Plus" title="Find us on Google Plus" border="0"></a>&nbsp;
				<a href="https://www.testdomain.co.uk/ourblogs/" style="text-decoration: none"><img src="<?php echo $this->getSkinUrl('images/blog.gif') ?>" alt="Check out our blog!" title="Check out our blog!" border="0"></a></td>
</tr>  
</table>
  
  
 <!-- top2 --> 
  
<div align="center" style="background-color:#FED001;width:100%;">
	<table border="0" width="1000" cellspacing="0" cellpadding="0" bgcolor="#FED001">
		<tr>
			<td width="311" bgcolor="#FBD300" rowspan="2">
        <h1 class="logo"><a href="https://www.testdomain.co.uk"><img src="<?php echo $this->getSkinUrl('images/appliance1.jpg') ?>" alt="Any" title=" #1 Apes Company" border="0"></a></td>
			<td bgcolor="#FBD300" colspan="2" align="center">
			<img src="<?php echo $this->getSkinUrl('images/Welcome2.gif') ?>"></td>
			<td width="242" bgcolor="#FBD300" colspan="2" height="32" align="center">       
			<img src="<?php echo $this->getSkinUrl('images/euronics-top-logo.gif') ?>" alt="We are a er" title="We are aaler" border="0">       </td>
		</tr>
		<tr>
			 <td style="background:url('https://www.testdomain.co.uk/media/images/app-search.gif') no-repeat;" height="20" width="286" valign="top">
<div align="right">
	<table border="0" width="97%" cellspacing="0" cellpadding="0" height="36">
		<tr>
			<td align="right">
			<form action="<?php echo $this->helper('catalogSearch')->getResultUrl() ?>" method="get">
			<input name="<?php echo $this->helper('catalogSearch')->getQueryParamName() ?>" style="border:1px solid #ffffff; size="60" class="1" value="Search here..." onclick="this.value='';" size="47"></td>
		    
		</tr>
	</table>
</div>
				</td>
			<td bgcolor="#FED001" width="160" valign="top" align=left>
			<INPUT TYPE="image" SRC="https://www.testdomain.co.uk/media/images/search-field.gif" border="0" Alt="Searcyour favourite part" title="Search t website for your favourite part.         ***Please enter make, model number, description or part number.***">
</td></form>
			<td width="57" bgcolor="#FBD300">       
			<p align="right"><img src="<?php echo $this->getSkinUrl('images/phone-new.gif') ?>"></td>
			<td width="186" bgcolor="#FBD300">       
			<p align="right"><b><font face="Arial" size="5">01253 699009 </font><font style="font-size: 15pt" face="Arial">&nbsp;&nbsp;&nbsp; </font></b></td>
		</tr>
	</table>
</div>
               
               
               
               
<!-- blue -->

	
          
          
          
		<div style="background-color:#173A70;width:100%;">
			<table width="1000" bgcolor="#173A70" height="37" cellspacing="0" cellpadding="0">
				<tr>
					<td width="132" style="cursor: pointer; color:#FFFFFF; border-left:1px solid #FFFFFF; border-right:1px solid #FFFFFF; border-top:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF; border-left-color:#FFFFFF" align="center" onmouseover="this.style.backgroundColor='#ffffff'; style.color='black'" onmouseout="this.style.backgroundColor='#173A70'; this.style.color='white'" onclick="window.document.location='http://www.testdomain.co.uk/appliance-sales-c-1855.html';">
<b>
					<font face="Arial" style="font-size: 11pt" align="center" >

Appliances</font></b></td>
					<td width="61" align="center" style="cursor: pointer; color:#FFFFFF; border-right:1px solid #FFFFFF; border-top:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF; border-left-color:#FFFFFF"" onmouseover="this.style.backgroundColor='#ffffff'; style.color='black'" onmouseout="this.style.backgroundColor='#173A70'; this.style.color='white'" onclick="window.document.location='http://www.testdomain.co.uk/cooker-spare-parts-c-24.html';">
					<b>
					<font face="Arial" style="font-size: 10pt">
					Cooker<br>Parts</font></b></td>
					<td width="121" align="center" style="cursor: pointer; color:#FFFFFF; border-right:1px solid #FFFFFF; border-top:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF; border-left-color:#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'; style.color='black'" onmouseout="this.style.backgroundColor='#173A70'; this.style.color='white'" onclick="window.document.location='http://www.testdomain.co.uk/tumble-dryer-spares-c-21.html';">
					<b>
					<font face="Arial" style="font-size: 10pt">
					Tumble Dryer<br>Spares</font></b></b></td>
					<td width="120" align="center" style="cursor: pointer; color:#FFFFFF; border-right:1px solid #FFFFFF; border-top:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF; border-left-color:#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'; style.color='black'" onmouseout="this.style.backgroundColor='#173A70'; this.style.color='white'" onclick="window.document.location='http://www.testdomain.co.uk/washing-machine-spares-c-22.html';">					<b>
					<font face="Arial" style="font-size: 10pt">
					Washing Machine<br>Spares</font></b></td>
					<td width="126" align="center" style="cursor: pointer; color:#FFFFFF; border-right:1px solid #FFFFFF; border-top:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF; border-left-color:#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'; style.color='black'" onmouseout="this.style.backgroundColor='#173A70'; this.style.color='white'" onclick="window.document.location='http://www.testdomain.co.uk/vacuum-cleaner-spares-c-26.html';">					
					<b>					<font face="Arial" style="font-size: 10pt">
					Vacuum Cleaner<br>Spares</b></font></td>
					<td width="106" align="center" style="cursor: pointer; color:#FFFFFF; border-right:1px solid #FFFFFF; border-top:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF; border-left-color:#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'; style.color='black'" onmouseout="this.style.backgroundColor='#173A70'; this.style.color='white'" onclick="window.document.location='http://www.testdomain.co.uk/dishwasher-spares-c-25.html';">					<b>
					<font face="Arial" style="font-size: 10pt">
					Dishwasher<br>Spares</font></b></td>
					<td width="107" align="center" style="cursor: pointer; color:#FFFFFF; border-right:1px solid #FFFFFF; border-top:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF; border-left-color:#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'; style.color='black'" onmouseout="this.style.backgroundColor='#173A70'; this.style.color='white'" onclick="window.document.location='http://www.testdomain.co.uk/fridge-freezer-spares-c-23.html';">					<b>
					<font face="Arial" style="font-size: 10pt">
					Fridge Freezer<br>Spares</font></b></td>
					<td align="center" style="cursor: pointer; color:#FFFFFF; border-right:1px solid #FFFFFF; border-top:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF; border-left-color:#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'; style.color='black'" onmouseout="this.style.backgroundColor='#173A70'; this.style.color='white'" onclick="window.document.location='http://www.testdomain.co.uk/cooker-hood-spares-c-1314.html';">					<b>
					<font face="Arial" style="font-size: 10pt">
					Cooker Hood<br>Spares</font></b></td>
					<td width="117" align="center" style="cursor: pointer; color:#FFFFFF; border-right:1px solid #FFFFFF; border-top:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF; border-left-color:#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'; style.color='black'" onmouseout="this.style.backgroundColor='#173A70'; this.style.color='white'" onclick="window.document.location='http://www.testdomain.co.uk/spare-parts-manufacturer-c-190.html';">					<b>
					<font face="Arial" style="font-size: 10pt">
					Spare Parts<br>By Manufacture</font></b></td>
				</tr>
			</table>
		</div>

                                                        
      <!-- bottom -->                                                  
      <div class="bottom_nav" style="background-color:#FED001;width:100%;">                                                  
		<table border="0" width="1000" cellspacing="0" cellpadding="0" height="35" bordercolor="#FFFFFF">
			<tr>
				<td width="69" align="center" style="cursor: pointer; border-right-style: solid; border-right-width: 1px; border-left-style:none; border-left-width:medium; border-top-style:none; border-top-width:medium; border-bottom-style:none; border-bottom-width:medium" bordercolor="#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'" onmouseout="this.style.backgroundColor='#FED001'">
				<font face=" Arial" style="font-size: 9pt">
				<a href="http://www.testdomain.co.uk/kettle-spares-c-1733.html" style="text-decoration: none">
				<font color="#000000">Kettle<br>Spares</font></a></font></td>
				<td width="103" align="center" style="cursor: pointer; border-right-style: solid; border-right-width: 1px; border-top-style:none; border-top-width:medium; border-bottom-style:none; border-bottom-width:medium" bordercolor="#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'" onmouseout="this.style.backgroundColor='#FED001'">
				<font face="Arial" style="font-size: 9pt">
				<a href="http://www.testdomain.co.uk/plumbing-appliances-c-28.html" style="text-decoration: none">
				<font color="#000000">Plumbing For<br>Appliances</font></a></font></td>
				<td width="113" align="center" style="cursor: pointer; border-right-style: solid; border-right-width: 1px; border-top-style:none; border-top-width:medium; border-bottom-style:none; border-bottom-width:medium" bordercolor="#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'" onmouseout="this.style.backgroundColor='#FED001'">
				<font face="Arial" style="font-size: 9pt">
				<a href="http://www.testdomain.co.uk/storage-heater-spares-c-1739.html" style="text-decoration: none">
				<font color="#000000">Storage Heater<br>Spares</font></a></font></td>
				<td align="center" width="99" style="cursor: pointer; border-right-style: solid; border-right-width: 1px; border-top-style:none; border-top-width:medium; border-bottom-style:none; border-bottom-width:medium" bordercolor="#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'" onmouseout="this.style.backgroundColor='#FED001'">
				<font face="Arial" style="font-size: 9pt">
				<a href="http://www.testdomain.co.uk/deep-fryer-spares-c-1313.html" style="text-decoration: none">
				<font color="#000000">Deep Fat<br>Fryer Spares</font></a></font></td>
				<td width="87" align="center" style="cursor: pointer; border-right-style: solid; border-right-width: 1px; border-top-style:none; border-top-width:medium; border-bottom-style:none; border-bottom-width:medium" bordercolor="#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'" onmouseout="this.style.backgroundColor='#FED001'">
				<font face="Arial" style="font-size: 9pt">
				<a href="http://www.testdomain.co.uk/microwave-spares-c-1720.html" style="text-decoration: none">
				<font color="#000000">Microwave<br>Spares</font></a></font></td>
				<td width="94" align="center" style="cursor: pointer; border-right-style: solid; border-right-width: 1px; border-top-style:none; border-top-width:medium; border-bottom-style:none; border-bottom-width:medium" bordercolor="#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'" onmouseout="this.style.backgroundColor='#FED001'">
				<font face="Arial" style="font-size: 9pt">
				<a href="http://www.testdomain.co.uk/miscellaneous-c-1927.html" style="text-decoration: none">
				<font color="#000000">Miscellaneous</font></a></font></td>
				<td align="center" width="105" style="cursor: pointer; border-right-style: solid; border-right-width: 1px; border-top-style:none; border-top-width:medium; border-bottom-style:none; border-bottom-width:medium" bordercolor="#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'" onmouseout="this.style.backgroundColor='#FED001'">
				<font face="Arial" style="font-size: 9pt">
				<a href="http://www.testdomain.co.uk/spare-parts-manufacturer-c-190/spare-parts-manufacturer-dyson-c-190-211.html" style="text-decoration: none">
				<font color="#000000">Dyson Spares</font></a></font></td>
				<td width="54" align="center" style="cursor: pointer; border-right-style: solid; border-right-width: 1px; border-top-style:none; border-top-width:medium; border-bottom-style:none; border-bottom-width:medium" bordercolor="#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'" onmouseout="this.style.backgroundColor='#FED001'">
				<font face="Arial" style="font-size: 9pt">
				<a href="http://www.testdomain.co.uk/tools-c-1926.html" style="text-decoration: none">
				<font color="#000000">Tools</font></a></font></td>
				<td width="93" align="center" style="cursor: pointer; border-right-style: solid; border-right-width: 1px; border-top-style:none; border-top-width:medium; border-bottom-style:none; border-bottom-width:medium" bordercolor="#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'" onmouseout="this.style.backgroundColor='#FED001'">
				<font face="Arial" style="font-size: 9pt">
				<a href="http://www.testdomain.co.uk/specials" style="text-decoration: none">
				<font color="#000000">Special Offers</font></a></font></td>
				<td align="center" style="cursor: pointer; border-right-style:none; border-right-width:medium; border-top-style:none; border-top-width:medium; border-bottom-style:none; border-bottom-width:medium" bordercolor="#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'" onmouseout="this.style.backgroundColor='#FED001'">
				&nbsp;
				<img border="0" src="<?php echo $this->getSkinUrl('images/delivery-info.gif') ?>" width="43" height="19"></td>
				<td align="center" style="cursor: pointer; border-style:none; border-width:medium; " width="122" bordercolor="#FFFFFF"  onmouseover="this.style.backgroundColor='#ffffff'" onmouseout="this.style.backgroundColor='#FED001'">
				<font face="Arial" style="font-size: 9pt">
				<a href="http://www.testdomain.co.uk/delivery" style="text-decoration: none">
				<font color="#000000">Delivery Information</font></a></font></td>
			</tr>
		</table>
  
    
  
  </div>
</div>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:damianb123
ID: 39961329
Perfect solution, just what I needed - thank you
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
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…
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).

815 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

11 Experts available now in Live!

Get 1:1 Help Now