Log in

View Full Version : 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


<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/recordatio/afbeeldingen/Recordatio_13.png The navigation text also appears to be images.



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.



<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.)



<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



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:



@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;
}