Solved

Need help with table with using html

Posted on 2014-03-28
5
231 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 53

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 53

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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

627 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