Stretch to fit

**yannickjeh** · 12-06-2010, 01:46 PM

Hello,

I'm currently working on a website for a friend of me, but I don't know how to actually 'stretch' the layout horizontally.

Here is my website: http://tinyurl.com/25d3hap

I hope somone can help me because I'm clueless, been looking for a solution on the web for hours but no luck so far.

Thanks,
Yannick

**auntnini** · 12-06-2010, 11:09 PM

Would relative percentage measurements (with min-width and max-width) help you achieve the effect you want? Here's what I did at http://www.gerigeans.com

Code:

 <style type="text/css" media="all">
<!--
#navbarContainer img { 
width: 95%; max-width: 633px; min-width: 50px; height: auto; }
-->
</style>

**yannickjeh** · 12-07-2010, 09:32 AM

Can't get the hang of it. All I want is that the grey box stretches to the side of my webbrowser.

**auntnini** · 12-08-2010, 12:17 AM

Sorry I was negligent and did not view the source code so I did not realize you had sliced a PSD file to create a <TABLE> with spacer PNG's. The 2 CSS styles referenced and most of the images in the <TABLE> seem to just be color swatches -- with the exception of http://members.home.nl/janicejolie/r...ordatio_13.png The navigation text also appears to be images.

Code:

 
CSS styles: 
  #Tabel_01 {
	background-image: url(afbeeldingen/achtergrond.png);
}
#site_layout_content { 	background-image: url(afbeeldingen/Recordatio_10.png); 	height: 288; 	width: 468; }

I think the slice format pretty much has you locked in. I'm not sure what you mean by "stretch," but
<TABLE width="1000" ...> could be stated as 95%-100% instead of 1000 pixels.

Code:

<html> <head> <title>Recordatio</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<style type="text/css"> 
body { background-image: url(afbeeldingen/achtergrond.png); background-repeat: repeat; } 
</style> 
<link href="site_layout.css" rel="stylesheet" type="text/css"> 
<link href="site_layout_content.css" rel="stylesheet" type="text/css"> </head> 
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 
<!-- Save for Web Slices (Recordatio.psd) --> 
<div id="site_layout">   
<table width="1000" height="1201" border="0" align="center" cellpadding="0" cellspacing="0" id="Tabel_01">     
<tr> <td colspan="10"> <img src="afbeeldingen/Recordatio_01.png" width="1000" height="154" alt=""></td></tr>   
<tr><td colspan="2"> <img src="afbeeldingen/Recordatio_02.png" width="201" height="29" alt=""></td>       
<td><img src="afbeeldingen/Recordatio_03.png" width="150" height="29" alt=""></td>       
<td colspan="2"> <img src="afbeeldingen/Recordatio_04.png" width="150" height="29" alt=""></td>       
<td colspan="2"> <img src="afbeeldingen/Recordatio_05.png" width="150" height="29" alt=""></td>       
<td><img src="afbeeldingen/Recordatio_06.png" width="150" height="29" alt=""></td>       
<td colspan="2"><img src="afbeeldingen/Recordatio_07.png" width="199" height="29" alt=""></td>       
</tr>     
<tr> <td colspan="10">  <img src="afbeeldingen/Recordatio_08.png" width="1000" height="56" alt=""></td></tr>     
<tr> <td rowspan="4"><img src="afbeeldingen/Recordatio_09.png" width="30" height="373" alt=""></td> 
<td colspan="3" rowspan="3"><div id="site_layout_content">         <p>&nbsp;</p> 
</div></td> 
<td colspan="6">  <img src="afbeeldingen/Recordatio_11.png" width="502" height="15" alt=""></td>       </tr>     
<tr>       <td colspan="2" rowspan="2">         <img src="afbeeldingen/Recordatio_12.png" width="41" height="273" alt=""></td>       <td colspan="3">         <img src="afbeeldingen/Recordatio_13.png" width="424" height="258" alt=""></td>       
<td rowspan="2">  <img src="afbeeldingen/Recordatio_14.png" width="37" height="273" alt=""></td>       </tr>     
<tr>       <td colspan="3"> <img src="afbeeldingen/Recordatio_15.png" width="424" height="15" alt=""></td>       </tr>     
<tr>       <td colspan="9"> <img src="afbeeldingen/Recordatio_16.png" width="970" height="85" alt=""></td> </tr>     
<tr>       <td colspan="10"><img src="afbeeldingen/Recordatio_17.png" width="1000" height="588" alt=""></td>       </tr>     <tr>       <td>         <img src="afbeeldingen/spacer.gif" width="30" height="1" alt=""></td>       
<td><img src="afbeeldingen/spacer.gif" width="171" height="1" alt=""></td>       
<td><img src="afbeeldingen/spacer.gif" width="150" height="1" alt=""></td>       
<td> <img src="afbeeldingen/spacer.gif" width="147" height="1" alt=""></td>       
<td> <img src="afbeeldingen/spacer.gif" width="3" height="1" alt=""></td>       
<td> <img src="afbeeldingen/spacer.gif" width="38" height="1" alt=""></td> 
<td> <img src="afbeeldingen/spacer.gif" width="112" height="1" alt=""></td>       
<td> <img src="afbeeldingen/spacer.gif" width="150" height="1" alt=""></td>       
<td>  <img src="afbeeldingen/spacer.gif" width="162" height="1" alt=""></td>       
<td> <img src="afbeeldingen/spacer.gif" width="37" height="1" alt=""></td>       
</tr> 
  </table> 
</div> <!-- End Save for Web Slices --> 
</body> </html>

**yannickjeh** · 12-08-2010, 11:24 AM

Well when you are on a monitor with a resolution wider the 1024 px the layout doesn't "stretch".. the grey content box doesnt stretch to the browsers width but it cut's off at a certain point..

**auntnini** · 12-08-2010, 09:54 PM

Hi. I think you really have to clean up what you have and get rid of any unnecessary "junk." Why, for instance, do you have all those table <TD> cells? And are you using images for background color?

Color for the Web is most commonly designated by hexadecimal notation -- 6 digits starting with hash mark #000000 = black #FFFFFF = white. Values range from 0-9 and A-F. The first 2=Red, second 2=Green, the last 2=Blue.

You can designate a style for the html and body elements (the whole page) to be the gray color you want. (Equal values for Red, Green, Blue produce a gray, the lower the values, the darker the gray.)

Code:

<STYLE type="text/css">
     html, body { background-color: #333333; }
     #layout  { background:transparent: }
</STYLE>

Using <TABLE> for layouts is frowned upon. Get some books on basic HTML/CSS. Check out Jeffrey Zeldman's "Designing with Web Standards" in which he showed how to format a <TABLE> with CSS as a starting point to move on to CSS layouts.

See the screen shot below of Photoshop Color Picker panel, Notice under the R G B fields there is a field #CCCCCC that gives you the hexadecimal values corresponding the the R 255 G 355 B 255 fields.

**auntnini** · 12-09-2010, 10:35 PM

It just occurred to me that your problem might have to do with variations in browser-window margins and padding. It is usually advised to "zero-out" the HTML and BODY margins and padding to overcome this, like so

Code:

html { color: cyan; background: #999 url(../siteImages/denimPatch.gif) repeat;  margin: 0; padding: 0; }
body { color: cyan; font-size:medium; background: transparent; 
margin: 0;	padding: 0; text-align: center; }
#wrap { color: cyan; margin: 20px auto; padding: 20px; width: 85%; max-width:900px; min-width: 200px; position: relative; background-color: rgba(255, 255,255, 0.25); z-index:300; }

For your reference, in case you want to clean up your "sliced table format" and get rid of navigation-button images, here is a CSS file based on J. Zeldman's book. Notice Zeldman used a display:block and also a line-height property so links would affect the entire <TD> cell background:

Code:

@charset "UTF-8";
/* CSS Document */
/* J.Zeldman XHML sample i3forum.com */
html, body	{
color: #000; background: #f5f2e9;
margin: 0; padding: 0;
}
.hide	{
display: none;
}
a { color: blue; }
a:link {
font-weight : bold; text-decoration: none; color: #c30;
background: transparent; 
}
a:visited {
font-weight : bold; text-decoration : none; color: #c30;
background: transparent; 
}
a:hover {
font-weight : bold; text-decoration: underline; color: #f60;
background: transparent; 
}
a:active {
font-weight : bold; text-decoration: none; color: #f90;
background: transparent; 
}
p, td, li, ul, ol, dl, dt, dd, h1, h2, h3, h4, h5, h6	{
font-family: Georgia, "New Century Schoolbook", "Times New Roman", Times, serif;
}
h1	{
color: #000000; background: transparent;
font-size: 1.15em; font-weight: bold; font-style: italic;
}
h2	{
font-size: 1em; font-weight: normal; margin-bottom: 0.25em; margin-top: 0.5em;
}
h3	{
color: #FFCC00; background: transparent; font-size: 1.15em;
font-weight: bold; font-style: italic; line-height: 1.3em;
}
html p	{
margin-top: 0; margin-bottom: 1em; text-align: left;
font-size: 0.85em; line-height: 1.5;
}

#footer p	{
font-size: 11px; margin-top: 10px;
margin-right: 50px; margin-left: 50px; line-height: normal;
}

/* Basic page divisions */
#primarycontent	{
padding-left: 25px; padding-top: 25px; background-color: #FFFFFF; 
}
#primarycontent	p {
font-family: Georgia, "New Century Schoolbook", "Times New Roman", Times, serif;
text-align: left; text-indent: 2em; margin-top: 0px;
margin-right: .5em; margin-bottom: .5em; margin-left: .5em;
}
#content {
background: #FFFFFF;  border: thick outset #dcd9d2;
}
/* Sidebar display attributes */
#sidebar p	{ font-style: italic; text-align: right; margin-top: 0.5em;
}
#sidebar img	{ margin: 30px 0 15px 0;
}
#sidebar h2	{
font-size: 1em; font-weight: normal; font-style: italic;
margin: 0; line-height: 1.5; text-align: right;
}
/* Navigation bar components SEPARATE table for navigation*/
table#nav	{
border-bottom: 1px solid #000; /*bordercolor="#dcd9d2"*/
border-left: 1px solid #000;
background: transparent url(../MSNpics/Panorama.jpg) center repeat;
}
table#nav td	{
font: 11px verdana, arial, sans-serif;
text-align: center; border-right: 1px solid #000; border-top: 1px solid #000;
}
table#nav td a	{
font-weight: normal; text-decoration: none; display: block;
margin: 0; padding: 0;
}
#nav td a:link, #nav td a:visited {
background: transparent; /* transparent url(/images/bgpat.gif) repeat; */
/* color: #fc0; */
display: block; margin: 0; width: 100px;
line-height: 25px;
} 
#nav td a:hover {
color: #f60; background: white;
} 
td#home { background: transparent /*url(../MSNpics/Panorama.jpg) center no-repeat;*/ 
}
td#home a:link img, td#home a:visited img {
color: #c30;
background: none; /* transparent url(/MSNpics/Panorama.jpg) center no-repeat; */
height: 75px;
} 
td#home a:hover img {
color: #f60;
background: none; /* transparent url(/MSNpics/Panorama.jpg) center no-repeat; */
width: 400px; height: 75px;
} 
#sidebar {
background-color: #FFFFFF;
}

Thread: Stretch to fit

Thread Tools

Search Thread

Stretch to fit

Relative %

Table width=100%

hexidecimal COLOR notation

Bong!

Bookmarks

Bookmarks

Posting Permissions