Jump to content

Stretching A Design In Html


webgyrl

Recommended Posts

Ok... working on a new design and I had planned to go with iFrames. But have had a lot of people give their opinion on the use of scrollers and iFrames... all of it saying not to go there...

 

This is the test URL of the design in question:

http://www.natfunkmusic.com/mbstia/test_scroll.htm

There may be some glitches when using Firefox (the design breaks up some and for some reason the scroll action is not working when I test it- I am still tweaking things)

 

Someone said to me on another forum:

ok, i'll say right now that you don't need to have those scrollers at all on that site. Just let the page stretch - there's nothing wrong with that, especially considering that it already does at lower resolutions (800 x 600, 1024 x 768). There's no real reason to utilise those scrollers, and as I've said before, they are a real turn off for many web users. The site is there for information dissemination. With these things you are interfering with that concept.

 

Quick question: Why iframes at all? Sites like this get bookmarked at specific locations in a site all the time. Iframes do not allow this to happen. It is better to do an include into a template and let the page stretch with these sites (or use overflow: auto; on 'portal' style sites) than to use iframes.

What I don't understand is how to accomplish this. Someone said to do the following:
I don't have time to explain it in length now, but essentially, you'll have the cell on either side of the content cell filled in with a background image. That way, when you type more text than the cell allows, it expands, and the cells next to it "expand", because the background image fills up the space.

 

I'm sure there are better ways of doing this with CSS, but this is how I usually do it.

 

I guess what I am not grasping is how to keep the graphic design element as it is and have that much text fit in without breaking up the design. I have no idea how to add in a cell on either side of the content cell. I have the layout in Fireworks right now and it is sliced up in there and exported to Dreamweaver.

 

The reason I went with the iFrame in the first place was to maintain the graphic design element but allow for a lot of text via the scrolling iFrame if needed.

 

Can someone help me with this concept of stretching and point me to some tutorials or resources so I can learn about it?

 

Thanks

 

PS

If you want me to email you the PNG file, just PM me your email address and I'll send it along.

Edited by webgyrl
Link to comment
Share on other sites

I've been battling this issue for a bit now.

 

Can you guys read this post and give some input?

http://www.totalchoicehosting.com/forums/i...showtopic=19148

 

How do you keep the graphic design element in tact but still make a way to insert a lot of text content if needed?

 

The reason I went with iFrames for my latest design is because there is about a 3000 character limit to how much text I can put into my page. I wanted the option of using an iFrame if there was more text, but I am just getting a lot of people saying not to do this. I have no idea how to make the graphic element so that it can stretch out when more text is added without the design being broken up.

 

I don't mind if some of the content can't be bookmarked, so I thought an iFrame would be OK.

 

Any suggestions?

Link to comment
Share on other sites

I've been battling this issue for a bit now.

 

I have no idea how to make the graphic element so that it can stretch out when more text is added without the design being broken up.

 

The effect you seem to be working toward has a fairly standard solution. Create your header as a stand alone unit. Create your footer as a stand alone unit. Then create a table to hold the content in between. The table will expand to any size you need and can easily be made to show exactly what you have there.

 

Take a look at the columns on this page. They are simply tables and they will expand forever to hold any content I put in them.

 

http://www.verchi.com/prose/wind.htm

 

That is a pretty extreme example but I basically create all my pages the same way with header, footer and content in a cell between with any graphic elements created with table cells that expand with the content.

 

Lee

Link to comment
Share on other sites

Check out this link: h*tp://alistapart.com/articles/fauxcolumns/

 

I think this is the basic thing you need done--an image that will tile down as far as your text needs to stretch; you'll just have one column, not two. You won't need to add any extra table cells; it should fit in nicely with your current design. If it looks like something that could work for you but you aren't quite sure how to add it in, PM me and I can walk you through it.

Link to comment
Share on other sites

Check out this link: h*tp://alistapart.com/articles/fauxcolumns/

 

I think this is the basic thing you need done--an image that will tile down as far as your text needs to stretch; you'll just have one column, not two. You won't need to add any extra table cells; it should fit in nicely with your current design. If it looks like something that could work for you but you aren't quite sure how to add it in, PM me and I can walk you through it.

 

 

owatagal:

Check your PM's. Thanks for the link.

Link to comment
Share on other sites

I've been battling this issue for a bit now.

 

I have no idea how to make the graphic element so that it can stretch out when more text is added without the design being broken up.

 

The effect you seem to be working toward has a fairly standard solution. Create your header as a stand alone unit. Create your footer as a stand alone unit. Then create a table to hold the content in between. The table will expand to any size you need and can easily be made to show exactly what you have there.

 

 

Hi Lee,

 

I am not sure that scenario would work for the design in question:

 

I've laid out the whole thing in Photoshop > brought it in to Fireworks and added in rollovers etc. Then it is all sliced up there an exported to Dreamweaver.

 

I am pretty new to this kind of design strategy tho and if there is a way I can do what you suggest, I am all ears.

 

What I have done in the design is to make that big center white part a chunk of gif that I can remove to leave me the table to fill with a white background color. There are slices on either side and top and bottom that need to stay there so that the drop shadows and other design elements show. Hope that makes sense.

 

Attached is the PNG file of the page in question.

The attachment seems to have errors: here is a proper link to it:

1. Index Page

h**p://www.natfunkmusic.com/mbstia/Layout/png_files/mbstia_index.png

2. Sub-Page

h**p://www.natfunkmusic.com/mbstia/Layout/png_files/mbstia_main.png

 

Hope this helps you see what I am trying to achieve.

Edited by webgyrl
Link to comment
Share on other sites

Just FYI, below are links to the PNG files for the layout in question, so you can see what I am dealing with:

 

 

1. Index Page

h**p://www.natfunkmusic.com/mbstia/Layout/png_files/mbstia_index.png

 

2. Sub-Page

h**p://www.natfunkmusic.com/mbstia/Layout/png_files/mbstia_main.png

Link to comment
Share on other sites

Webgyrl,

 

Had a few minutes on my hands, so I decided to show you what they're referring to. I sliced your image up into three slices and create a very basic css-p layout.

 

h**p://www.jackintheweb.com/TCHgoofoff/index1.php

 

(I will take this page down eventually)

 

It will expand to any size you want. And to take it a step further, if you want to use php includes you would do so like this.

 

header.php

><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
background: #01557C;
margin: 0;
padding: 0;
}
#main {
margin: 0 auto;
width: 780px;
background:  url(i/Bg.jpg) 50% top repeat-y;

}
#left {
width: 230px;
float: left;
}
#content {
margin: 0 10px 0 30px;
}
#spacer {
width: 1px;
height: 250px;

}
#right {
width: 490px;
float: right;
}
#clearIt{
clear: both;
width: 99%;
}
#header {

background: #01557C url(i/Header.jpg) top left no-repeat;
height: 332px;
}
#footer {
background: #01557C url(i/Footer.jpg) top left no-repeat;
height: 209px;
}
div{
/*border: solid 1px #000;*/
}
-->
</style>
</head>

<body>
<div id="main">
<div id="header"></div>
<div id="content">
<div id="left">
     <p>Left Content</p>
     <p> </p>
   </div>
   <div id="right">

 

footer.php

></div>
<div id="spacer"></div>
<div id="clearIt"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>

 

and so on an example page...

 

example.php

><?php
include $_SERVER['DOCUMENT_ROOT'].'/dir/path/to/header.php';
?>
Hello World<br />
Here is my content
<?php
include $_SERVER['DOCUMENT_ROOT'].'/dir/path/to/footer.php';
?>

Link to comment
Share on other sites

Jack,

 

Thanks for doing that. I grabbed the page and the codes here, so if you want to take it down it's cool.

 

One one thing- do you see a 1 pixel shift of the RIGHT Text box? I am seeing a one pixel shift using Firefox (latest version) and it makes the box off just slightly.

 

I haven't checked it in IE yet tho.

 

Any way for me to fix that?

 

Thanks a zillion.

Link to comment
Share on other sites

I know... I played with it quite a bit and I have come to the conclusion, from testing, that it's your image. It could also be the way I sliced it, but I don't think so, based on the fact that most of the lines line up. If my css were off or if I sliced it incorrectly then all the lines would be off.

 

I also just tested in Photoshop by cutting out the middle and squeezing the top and bottom together... same result.

 

So, that's how I've concluded it's your image.

 

I'm taking the page down now.

Link to comment
Share on other sites

I know... I played with it quite a bit and I have come to the conclusion, from testing, that it's your image.  It could also be the way I sliced it, but I don't think so, based on the fact that most of the lines line up.  If my css were off or if I sliced it incorrectly then all the lines would be off.

 

I also just tested in Photoshop by cutting out the middle and squeezing the top and bottom together... same result.

 

So, that's how I've concluded it's your image.

 

I'm taking the page down now.

 

 

If it's my image, then what could be wrong with it? I'm not understanding. The box isn't crooked when I look at it in Fireworks.

 

Strange, i will keep looking to see what it is.

 

Thanks again for showing me the concept.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...