Forum: web design and graphics community

Celestial Star Forum > Web Development > Coding > HELP W/DIV LAYOUT II, EXPAND TEXT AREA

Pages: [1]

« previous next »

Author

Topic: HELP W/DIV LAYOUT II, EXPAND TEXT AREA (Read 510 times)

xspill_it_sister

Angeling

Posts: 3

HELP W/DIV LAYOUT II, EXPAND TEXT AREA

« on: July 13, 2007, 07:24:45 AM »

So, this is my first layout ever. go me! keke.. i'm using adobe photoshop CS3, which is really cool. i went through almost the whole tut without any problems, then it happened. i made the layout according the tut, which helped sooo much just until step 5.

the main problem is the expanding of the boxes as i want to add more text. it just wont work. my content and navi boxes have a border around them, which i thought looked nice but if it at all effects it expanding, i could always lose them.

5. We need the boxes to expand with the text and content of your page, so we need to put a background image. With Photoshop, right click on the Rectangular marquee tool and select single row marquee tool. Click on the bottom of the layout psd. Go to Image > Crop and File > Save for web. Save it as a 60 quality JPG and name it background.jpg (save it on the images folder of the layout). Do not save the PSD now eh?
6. To put that image as the page background, put this inside <body>, where the background color is: background="images/background.jpg". For the moment it also repeats horizontally, and it looks horrible X.x We'll fix that with the CSS.

i did as it said, but not really sure how to put it as the page background, and i'm competely lost when it comes to the bg color stuff.

also, i was going to upload my layout onto virtue.nu, which is free, but its being so difficult. the layout isn't showing up at all, and its hard to edit from the site. i have to keep uploading in order to make changes. maybe i saved it wrong? do i have to make it a zip file on my comp then upload it? how would i do that? or? HAHA I'M SO LOST. not really clear on uploading. does anyone know a better host that makes it easier to upload? i'd even be willing to pay a few bucks a month just so it would be easier.

MY LAYOUT:
heres what my layout looks like:

i just need more space for text, does that get fixed with css? if so, how?

MY CODING:
i've messed with the coding so much, but here is what i have:

<html>
<head>
<title>PAPER ROSES</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body { font-family: Verdana, Arial, Times new roman;
font-size: 11px; color: #color;
background-repeat: repeat-y; }
a { color: #color; }
</style>

</head>
<body bgcolor="#b8b9b4" background="images/background.jpg" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Table_01" width="780" height="600" border="0" cellpadding="0" cellspacing="0">
   <tr>
      <td>
         <img src="images/index_01.jpg" width="780" height="86" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="images/index_02.gif" width="780" height="85" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="images/index_03.gif" width="780" height="86" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="images/index_04.gif" width="780" height="86" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="images/index_05.gif" width="780" height="86" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="images/index_06.gif" width="780" height="85" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="images/index_07.gif" width="780" height="86" alt=""></td>
   </tr>
</table>

<div style="position: absolute; left: 11px; top: 542px; width: 517px; height: 999PX; overflow="auto"></div>

<div style="position: absolute; left: 557px; top: 68px; width: 161px; height: 999PX; overflow="auto""><p class="head">Site</p>
<a href="URL here">Link here</a><br>
<a href="URL here">Link here</a><br>
<a href="URL here">Link here</a><br>
<a href="URL here">Link here</a><br>
<a href="URL here">Link here</a><br>
<p class="head">Site</p>
<a href="URL here">Link here</a><br>
<a href="URL here">Link here</a><br>

<a href="URL here">Link here</a><br>
<a href="URL here">Link here</a><br>
<a href="URL here">Link here</a><br>
<p class="head">Site</p>
<a href="URL here">Link here</a><br>
<a href="URL here">Link here</a><br>
<a href="URL here">Link here</a><br>
<a href="URL here">Link here</a><br>
<a href="URL here">Link here</a><br>

<p class="head">Site</p>
<a href="URL here">Link here</a><br>
<a href="URL here">Link here</a><br>
<a href="URL here">Link here</a><br>
<a href="URL here">Link here</a><br>
<a href="URL here">Link here</a><br>
<p class="head">Credits</p>
<center>
</div>
</center>
</body>
</html>

it would be great if anyone could help! hope to hear from you~ thanks for listening!


	Logged

tall0ne

Angeling

Posts: 18

Re: HELP W/DIV LAYOUT II, EXPAND TEXT AREA

« Reply #1 on: July 13, 2007, 02:39:41 PM »

I usually find it easier to save the photoshop file as jpg,then I use that step were you just copy the bottom of the layout then save it as background.jpg. IF that is the actual size of you image, then maybe I can do the coding for you. *Your coding seems to be off a little*


	Logged

xspill_it_sister

Angeling

Posts: 3

Re: HELP W/DIV LAYOUT II, EXPAND TEXT AREA

« Reply #2 on: July 13, 2007, 07:54:00 PM »

that would be sooo great if you could! i'd really appreciate it! plus, i would love to give you the proper credit, i would def put you under my resource section once it's up and running! let me know~ thanks!!


	Logged

Pages: [1]

« previous next »

Jump to:

Forum: web design and graphics community

General

Art boards

Web development

Off-topic