Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Need help with table with using html

Posted on 2014-03-28
5
Medium Priority
?
233 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 12

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 2000 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
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…

722 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