Website Scripting

09-30-2004, 02:14 PM

Website Scripting

I have a very general question relating to how you would make a website with the windows and expandable background.

Situation: I have a background that I would like to use for a website, and I'll just use a white background to go over it where my text will go. But say I put so much text into the white box that it goes beyond my background? I want to know what I have to do to make the background stretch to the position needed.

Perhaps numbers would make it a bit more clear for what I want. If my background for a website is 500x600 pixels. If I were to make a text box on top of that that I wanted to stay 5 pixels inside of each of the ends of the background, but the length of the text box were to excede that, make it, for instance, 490x800, then it would surpass the background. How do I make it NOT do that?

Because I'm asking a general question, I hope that no one would mind doing this without pay. If a moderater or admin decides that without pay, this job is no good, then feel free to close this thread. Otherwise, help would be greatly appreciated.

CONTACT INFO

AIM - Mister Ivanovich
EMAIL - MisterIvanovich@netscape.net
Otherwise just PM me.

[ reply ]

MisterIvanovich

MisterIvanovich is offline Geetar Man

Join Date: Sep 2004

Location: Ohio

Posts: 5

Send a message via AIM to MisterIvanovich

#2 (permalink)

09-30-2004, 03:49 PM

You dont need to pay for this... its just a simple html layout.

HTML Code:

<div style="background-image:url(image.jpg); background-repeat:repeat-y; padding:5px; width:500px; min-width:600px;"> {text goes here omg wtf k thnx } </div>

that code right there will make a box with the specified dimensions, place image.jpg in the background and make it repeat in the y axis (vertical) direction. If the text goes over 600px the box will expand and the background will repeat.

I hope thats what you wanted, if not, tell me if there is anything else.

Btw i moved this to general questions cuz its not a services request.

__________________
Audi Videos | MySpace Layouts | About Me | Kid Sniffles

[ reply ]

missionsix

missionsix is offline patandrew.com

Join Date: Feb 2004

Location: under you.

Posts: 4,860

#3 (permalink)

09-30-2004, 06:07 PM

It IS what I asked for... Just not what I wanted.

An even better example than I had given was somewhat of a message board. It fits how much text you have by only stretching one part of it. I've throw together a simple image of what I want my text to go inside of, and want to know how to 1 - Get it inside of ONLY where I want, and not fill the whole thing and 2 - Stretch only the middle of the image to make it fit.

Now, this much I know. I have to set slice things... Then, after I slice them, I have to save it as an HTML file. After that, I'm lost. I know I have to change some stuff so that the height adjust accordingly... But that's ALL I know.

PS - That's not the only part of the coding that I need... I'll make a VERY general overview of what I want it to look like.

BAHA here it is.

Now, of course, that's not ALL of it... Just roughly what it should be. I want a banner up top and if need be, the background would repeat and go down some more.

Last edited by MisterIvanovich; 09-30-2004 at 06:40 PM.

[ reply ]

MisterIvanovich

MisterIvanovich is offline Geetar Man

Join Date: Sep 2004

Location: Ohio

Posts: 5

#4 (permalink)

09-30-2004, 07:10 PM

This is easy.. you mean like what I've done on http://www.artificialwings.info

You need tables. First, select the bottom and top portions of the "box" thyat you want to expand ( by top and bottom I mean, the top ----- broken boundaries and the bottom one ), and then save them as say top.jpg and bottom.jpg, then with marquee tool select a rectangle portion of your picture that you want ot keep expanding asy ou fill with text.. save it as "middle.jpg" heres how you put it together:

<table width=whatever width heigh=100%.
<tr>
<td background="top.jpg">
</tr>
</td>
<tr height=100% width=the width of your middle piece>
<td background="middle.jpg">
text goes here.. the middlesection that you cut out of your contentbox thing will keep expanding as long as th text.
</tr>
</td>
<tr>
<td background="bottom.jpg">
</tr>
</td>
</table>

There you go

[ reply ]

ArtificialWings

ArtificialWings is offline ┼Angelwings┼

Join Date: Sep 2004

Posts: 645

Send a message via MSN to ArtificialWings

#5 (permalink)

09-30-2004, 07:31 PM

HTML Code:

<div style="background-image:url(image.jpg); background-repeat:repeat-y; padding:15px; width:500px; min-width:600px;">

<div style="overflow:auto; background-color:#ffffff;">

 {text goes here omg wtf k thnx }

</div>
 </div>

Thats ONLY for the main textbox area. So do what ArtificialWings said and take your image into photoshop. Once in photoshop SLICE Your images. Then go to FILE > SAVE FOR WEB

make sure you save ALL slices AND html!!!!!!!!!

Okay so that will give you some really shitty html code based on your slices. once you do that, move all the images to the background of the tables. For the TD for the main part:

HTML Code:

<td style="background-image:url(image.jpg); background-repeat:no-repeat; padding:15px; width:500px; min-width:600px;">

<div style="overflow:auto; background-color:#ffffff;">

 {text goes here omg wtf k thnx }

</div>
 </td>

Change the padding to the width of the borders of the image. Then when the text overflows the middle div there, it will have a scroll bar, and not mess up your tables. I am telling you to make tables becuase sometimes as your learning it is easier to see how things fiit together in tables than it is in <div>'s

__________________
Audi Videos | MySpace Layouts | About Me | Kid Sniffles

[ reply ]

missionsix

missionsix is offline patandrew.com

Join Date: Feb 2004

Location: under you.

Posts: 4,860

#6 (permalink)

10-01-2004, 01:07 PM

Thanks for all the help thusfar, but now I need to know how to get the sides to expand along with the text part. I sliced the 2 dark grey sides on my text box, and don't know what I should put for the repeat:repeat-y thing if there's nothing in it to make it expand... Is there just something that I need to make like height="textboxthingy height"? Again, thanks for the help so far.

---EDIT---
I've decided that I'm just too much of an idiot to grasp this concept, and so you should just try to forget I asked... If you'd like to IM me (AIM Handle = Mister Ivanovich) then feel free to help me over that, but I feel like I can't do any of this on my own without having to come back here every 5 minutes and check what the coding was you said to use, or just not understand what you said whatsoever in the first place...

Last edited by MisterIvanovich; 10-01-2004 at 01:21 PM. Reason: I'm just an idiot...

[ reply ]

MisterIvanovich

MisterIvanovich is offline Geetar Man

Join Date: Sep 2004

Location: Ohio

Posts: 5

#7 (permalink)

10-01-2004, 03:35 PM

I am very sorry that you have decided not to enter into the world of web coding... it can be alot of fun!!!

If you need more guided practice: www.w3schools.com www.good-tutorials.com

At g-t go to website layouts and you can usualy find how to make a complete website with photoshop / notepad

__________________
Audi Videos | MySpace Layouts | About Me | Kid Sniffles

[ reply ]

missionsix

missionsix is offline patandrew.com

Join Date: Feb 2004

Location: under you.

Posts: 4,860

#8 (permalink)

10-02-2004, 07:10 AM

I actually went to w3schools, and that's what confused me so much that I decided just to give up. I knew most of the basic HTML < > things, but then even going there to review just screwed all that up, and I got very confused... Maybe I'll just wait until next year to take a web design class.

---EDIT---
Man... The way I change my opinions all the time, I could be considered a John Kerry impersonator... Heh, bad joke, sorry.

I've decided to go and have another stab at it, and so far, I'm doing well. I have a content box that expands any time I write in it and everything, and it's just going well. Although, I don't know how to get padding for my text, so it's hitting the side of it, making it look all sloppy... Where do I put the padding coding so I don't screw up the rest of it?

Last edited by MisterIvanovich; 10-02-2004 at 09:16 AM.

[ reply ]

MisterIvanovich

MisterIvanovich is offline Geetar Man

Join Date: Sep 2004

Location: Ohio

Posts: 5

#9 (permalink)

10-02-2004, 01:21 PM

Did you use my code? if so.. add the padding to the div that has the overflow:auto on it. But take note, Internet explorer's box model does not render padding and margin very well, they did NOT do standards when coding thier browser (over 4 years ago) and it does not look how it should so it might screw up. Thats why i ALWAYS code my html pages for firefox and attempt to "hack" them to be viewable by IE if it looks messed up.

www.alistapart.com has some good css hacks / tricks to add cool stuff to your site.

__________________
Audi Videos | MySpace Layouts | About Me | Kid Sniffles

[ reply ]

missionsix

missionsix is offline patandrew.com

Join Date: Feb 2004

Location: under you.

Posts: 4,860

#10 (permalink)

10-02-2004, 09:12 PM

I'm not at all ready for cool tricks for my site yet when I'm still learning to put it all together without screwing up too much. What I'm doing right now is looking off of ArtificialWings' website and trying to code mine off of his.

[ reply ]

MisterIvanovich

MisterIvanovich is offline Geetar Man

Join Date: Sep 2004

Location: Ohio

Posts: 5

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
looking to do a traditional website....	Jay	Website Design	10	06-11-2005 12:12 AM
scripting	notuern	The VOID!	0	02-20-2005 04:28 PM
Personal Website (My first)	Cras	Digital Art Showcase	13	02-20-2005 06:54 AM
Website Design	benny	Digital Art Showcase	28	02-14-2005 08:34 PM

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Art, Design & Discussion