Layout help [Archive] - CodingForums.com

View Full Version : Layout help

Feerick

11-07-2005, 12:21 AM

I have had a photoshop layout made, but he hasnt coded teh bit for wher ethe text should go. I only know php and I am really bad at html, would somebody please help me here.

<HTML>
<HEAD>
<TITLE>mentalparents</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

<TABLE WIDTH=1024 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=19>
<IMG SRC="http://img397.imageshack.us/img397/1945/mentalparents013op.png" WIDTH=1024 HEIGHT=137 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=2 ROWSPAN=2>
<IMG SRC="http://img397.imageshack.us/img397/7141/mentalparents020fn.png" WIDTH=93 HEIGHT=20 ALT=""></TD>
<TD>
<IMG SRC="http://img45.imageshack.us/img45/2896/mentalparents036iv.png" WIDTH=54 HEIGHT=16 ALT=""></TD>
<TD ROWSPAN=2>
<IMG SRC="http://img397.imageshack.us/img397/152/mentalparents048gt.png" WIDTH=18 HEIGHT=20 ALT=""></TD>
<TD>
<IMG SRC="http://img219.imageshack.us/img219/4707/mentalparents057gc.png" WIDTH=75 HEIGHT=16 ALT=""></TD>
<TD ROWSPAN=2>
<IMG SRC="http://img219.imageshack.us/img219/378/mentalparents064xb.png" WIDTH=19 HEIGHT=20 ALT=""></TD>
<TD>
<IMG SRC="http://img219.imageshack.us/img219/9923/mentalparents072zu.png" WIDTH=72 HEIGHT=16 ALT=""></TD>
<TD ROWSPAN=2>
<IMG SRC="http://img219.imageshack.us/img219/3715/mentalparents085op.png" WIDTH=22 HEIGHT=20 ALT=""></TD>
<TD>
<IMG SRC="http://img219.imageshack.us/img219/2128/mentalparents098gk.png" WIDTH=89 HEIGHT=16 ALT=""></TD>
<TD ROWSPAN=2>
<IMG SRC="http://img218.imageshack.us/img218/9597/mentalparents104un.png" WIDTH=20 HEIGHT=20 ALT=""></TD>
<TD>
<IMG SRC="http://img218.imageshack.us/img218/6582/mentalparents110lx.png" WIDTH=151 HEIGHT=16 ALT=""></TD>
<TD ROWSPAN=2>
<IMG SRC="http://img218.imageshack.us/img218/9817/mentalparents122vj.png" WIDTH=10 HEIGHT=20 ALT=""></TD>
<TD>
<IMG SRC="http://img218.imageshack.us/img218/6220/mentalparents136ax.png" WIDTH=60 HEIGHT=16 ALT=""></TD>
<TD ROWSPAN=2>
<IMG SRC="http://img218.imageshack.us/img218/6793/mentalparents142xf.png" WIDTH=14 HEIGHT=20 ALT=""></TD>
<TD>
<IMG SRC="http://img45.imageshack.us/img45/8631/mentalparents154yp.png" WIDTH=63 HEIGHT=16 ALT=""></TD>
<TD ROWSPAN=2>
<IMG SRC="http://img45.imageshack.us/img45/7918/mentalparents167dv.png" WIDTH=14 HEIGHT=20 ALT=""></TD>
<TD COLSPAN=2>
<IMG SRC="http://img45.imageshack.us/img45/860/mentalparents178sy.png" WIDTH=56 HEIGHT=16 ALT=""></TD>
<TD ROWSPAN=4>
<IMG SRC="http://img45.imageshack.us/img45/7818/mentalparents188lu.png" WIDTH=194 HEIGHT=631 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="http://img45.imageshack.us/img45/789/mentalparents190es.png" WIDTH=54 HEIGHT=4 ALT=""></TD>
<TD>
<IMG SRC="http://img45.imageshack.us/img45/8277/mentalparents204om.png" WIDTH=75 HEIGHT=4 ALT=""></TD>
<TD>
<IMG SRC="http://img45.imageshack.us/img45/9697/mentalparents211nh.png" WIDTH=72 HEIGHT=4 ALT=""></TD>
<TD>
<IMG SRC="http://img45.imageshack.us/img45/9281/mentalparents221hs.png" WIDTH=89 HEIGHT=4 ALT=""></TD>
<TD>
<IMG SRC="http://img45.imageshack.us/img45/7029/mentalparents230sa.png" WIDTH=151 HEIGHT=4 ALT=""></TD>
<TD>
<IMG SRC="http://img45.imageshack.us/img45/5183/mentalparents241qq.png" WIDTH=60 HEIGHT=4 ALT=""></TD>
<TD>
<IMG SRC="http://img200.imageshack.us/img200/829/mentalparents257qi.png" WIDTH=63 HEIGHT=4 ALT=""></TD>
<TD COLSPAN=2>
<IMG SRC="http://img200.imageshack.us/img200/2283/mentalparents268lg.png" WIDTH=56 HEIGHT=4 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=2>
<IMG SRC="http://img200.imageshack.us/img200/148/mentalparents277wc.png" WIDTH=58 HEIGHT=611 ALT=""></TD>
<TD COLSPAN=16>
<IMG SRC="http://img200.imageshack.us/img200/1043/mentalparents284re.png" WIDTH=751 HEIGHT=484 ALT=""></TD>
<TD ROWSPAN=2>
<IMG SRC="http://img200.imageshack.us/img200/5526/mentalparents290pp.png" WIDTH=21 HEIGHT=611 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=16>
<IMG SRC="http://img200.imageshack.us/img200/5959/mentalparents300la.png" WIDTH=751 HEIGHT=127 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="http://img200.imageshack.us/img200/325/spacer9xm.gif" WIDTH=58 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="http://img200.imageshack.us/img200/325/spacer9xm.gif" WIDTH=35 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="http://img200.imageshack.us/img200/325/spacer9xm.gif" WIDTH=54 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="http://img200.imageshack.us/img200/325/spacer9xm.gif" WIDTH=18 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="http://img200.imageshack.us/img200/325/spacer9xm.gif" WIDTH=75 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="http://img200.imageshack.us/img200/325/spacer9xm.gif" WIDTH=19 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="http://img200.imageshack.us/img200/325/spacer9xm.gif" WIDTH=72 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="http://img200.imageshack.us/img200/325/spacer9xm.gif" WIDTH=22 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="http://img200.imageshack.us/img200/325/spacer9xm.gif" WIDTH=89 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="http://img200.imageshack.us/img200/325/spacer9xm.gif" WIDTH=20 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="http://img200.imageshack.us/img200/325/spacer9xm.gif" WIDTH=151 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="http://img200.imageshack.us/img200/325/spacer9xm.gif" WIDTH=10 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="http://img200.imageshack.us/img200/325/spacer9xm.gif" WIDTH=60 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="http://img200.imageshack.us/img200/325/spacer9xm.gif" WIDTH=14 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="http://img200.imageshack.us/img200/325/spacer9xm.gif" WIDTH=63 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="http://img200.imageshack.us/img200/325/spacer9xm.gif" WIDTH=14 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="http://img200.imageshack.us/img200/325/spacer9xm.gif" WIDTH=35 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="http://img200.imageshack.us/img200/325/spacer9xm.gif" WIDTH=21 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="http://img200.imageshack.us/img200/325/spacer9xm.gif" WIDTH=194 HEIGHT=1 ALT=""></TD>
</TR>
</TABLE>

</BODY>
</HTML>

Alex Vincent

11-07-2005, 03:32 AM

This is really a HTML / CSS question, not XHTML or XML. I'm moving the thread to our HTML/CSS forum. :)

PhotoJoe47

11-07-2005, 07:53 AM

"Feerick",

What in the world are you trying to do. I pasted you code into a file and then look at it with a browser.

I looks someone took a jigsaw puzzle and tried to fit all the pieces into a table 5 rows and 20 cells per row, but some have span rows and columns in several different ways. They used 31 different images some more than once to create a webpage layout.

I guess your website is going to be about "Mental Parents"

I think the page could be layed out a little less compliacated.

BTW with IE 6.0 does not display the page as well as Firefox. In IE some of the images do not fill the cells completly and you are getting a white back ground. In both if the user has their browser window open wider and taller than your table they will see the white background on the right and the bottom.

Are you wanting to put the articles in the white/with a shadow at the top image area in the center?

How are you going to use the menu bar?

PhotoJoe

PhotoJoe47

11-07-2005, 09:18 AM

"Feerick",

Here what I have done to simplfied your page. Take a look at this:

http://www.photojoe.ws/test/mp2.htm

Here is the code for that page.

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 2</title>

<style type="text/css">

body {
margin:0px;
background-color:#002860;
}
</style>
</head>

<body>

<p><img border="0" src="M_P.png" width="1024" height="768"></p>

</body>

</html>

I took those 31 image pieces and with PaintShop Pro I created a single image.

Now to display any text over the center white area you will need to create a div with an id and give it an absolute position and the height and width of the text area. Do this with CSS.

For the menus I guess you will need to do some image mapping to create a hot spot for each of the menu items.

washawasha

11-08-2005, 05:34 PM

photo joe47,i need your help on this layout,but i want the right side to look the same with left side,this one right side is big than right side, your help will appriciate.

PhotoJoe47

11-08-2005, 10:37 PM

photo joe47,i need your help on this layout,but i want the right side to look the same with left side,this one right side is big than right side, your help will appriciate.

Are you "Feerick" also or both of you working on the same layout?

But to answer your question, in this line of code:

<p><img border="0" src="M_P.png" width="1024" height="768"></p>

add to the opening <p> tag add align="center" like this:

<p align="center"><img border="0" src="M_P.png" width="1024" height="768"></p>

Hope this helps.

PhotoJoe

I just looked at the page again. I now see what you mean. I don't have time at the moment of fix the image, but I will do it tomorrow.

PhotoJoe

PhotoJoe47

11-09-2005, 04:58 PM

OK Guys,

I increased the size of the white box area to make it look more even. I can even do the same with the menu bar, But the title banner will have to be redone by the original designer. The text "Mental Parents" is off center to begin with and it has that curved shadow line going through it. I could move the text over to the center, but the shadow line would not match. If you want the menu bar center and forget about the title bar let me know and I can take care of that for you. That will be the best that I can do for you. Otherwise I would go back to the original designer and have him/her redo the whole layout.

http://www.photojoe.ws/test/mp2.htm

PhotoJoe