web design layouts with photoshop PROBLEMS

liunx · Jan 10, 2008

ok i know how to make a layout that i liek in photoshop, then i knwo to slice it up n save for the web, now my big problem is when i go to the html index i made n go to edit it i have a problem of hwo to get the text ontop of the content box, when ever i do it it always goes to the top or bottom or side? but not onto? is there a trick or am i doing sumthing wrong in photoshop? i knwo hwo to do layer in photoshop, but is it necesary? cus i use just 1 layer n add everything on that? is that right? if there ius a tutorial otu there that would be awsome cus i am stumppedPut the image as the background to the div the text is in, or you can play with the z-index.now what i m new to this so i am not clear on what u r saying, 
 
Main problem: 
i knwo hwo to do layer in photoshop, but is it necesary? cus i use just 1 layer n add everything on that? is that right? if there ius a tutorial otu there that would be awsome cus i am stumpped 
 
Second Problem: 
is when i go to the html index i made n go to edit it i have a problem of hwo to get the text ontop of the content box, when ever i do it it always goes to the top or bottom or side? but not onto?Using multiple layers in Photoshop isn't usually necessary, but can make your life much easier. 
 
If you are using tables, place the image as the background of your table cell, and then your text shall be placed nicely over top the image. 
 
If you are using <div>'s, the same thing applies: place the image as the <div>'s background, and the text will sit nicely over the image.http://www.w3schools.com/css/css_background.asp 
just instead of putting that into a body tag put it into a div, and you will get everything you ever wanted to know and more about how to set a background. another way is <img src=http://www.webdeveloper.com/forum/archive/index.php/"url" alt="alt" style="z-index:-1;"> the other crap will come up over it such as text, but it is better to use the background because the latter method could cause complications for the rest of your layout (possibly but maybe not likely) 
<a class="postlink" href="http://www.w3schools.com/css/tryit.asp?filename=trycss_zindex2">http://www.w3schools.com/css/tryit.asp? ... ss_zindex2</a>ok so how do i make the image a background 
 
also would i help if i made a cheassy layout then posted teh HTMl, cus i think i need to edit the html so it has a body section?<HTML> 
<HEAD> 
<TITLE>Untitled-1</TITLE> 
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> 
</HEAD> 
<BODY BGCOLOR=#FFFFFF> 
 
<TABLE WIDTH=800 BORDER=0 CELLPADDING=0 CELLSPACING=0> 
<TR> 
<TD ROWSPAN=6> 
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"images/Untitled-1_01.gif" WIDTH=23 HEIGHT=600></TD> 
<TD COLSPAN=4> 
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"images/Untitled-1_02.gif" WIDTH=754 HEIGHT=102></TD> 
<TD ROWSPAN=6> 
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"images/Untitled-1_03.gif" WIDTH=23 HEIGHT=600></TD> 
<TD> 
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"images/spacer.gif" WIDTH=1 HEIGHT=102></TD> 
</TR> 
<TR> 
<TD COLSPAN=4> 
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"images/Untitled-1_04.gif" WIDTH=754 HEIGHT=16></TD> 
<TD> 
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"images/spacer.gif" WIDTH=1 HEIGHT=16></TD> 
</TR> 
<TR> 
<TD COLSPAN=3> 
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"images/Untitled-1_05.gif" WIDTH=120 HEIGHT=1></TD> 
<TD ROWSPAN=2> 
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"images/Untitled-1_06.gif" WIDTH=634 HEIGHT=468></TD> 
<TD> 
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"images/spacer.gif" WIDTH=1 HEIGHT=1></TD> 
</TR> 
<TR> 
<TD ROWSPAN=3> 
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"images/Untitled-1_07.gif" WIDTH=3 HEIGHT=481></TD> 
<TD ROWSPAN=2> 
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"images/Untitled-1_08.gif" WIDTH=98 HEIGHT=469></TD> 
<TD ROWSPAN=3> 
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"images/Untitled-1_09.gif" WIDTH=19 HEIGHT=481></TD> 
<TD> 
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"images/spacer.gif" WIDTH=1 HEIGHT=467></TD> 
</TR> 
<TR> 
<TD ROWSPAN=2> 
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"images/Untitled-1_10.gif" WIDTH=634 HEIGHT=14></TD> 
<TD> 
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"images/spacer.gif" WIDTH=1 HEIGHT=2></TD> 
</TR> 
<TR> 
<TD> 
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"images/Untitled-1_11.gif" WIDTH=98 HEIGHT=12></TD> 
<TD> 
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"images/spacer.gif" WIDTH=1 HEIGHT=12></TD> 
</TR> 
</TABLE> 
 
</BODY> 
</HTML> 
 
 
 
ok i made a cheap exaple layout, thats what it loosk like using 1 layer, now i know that it is very bad code, n needs cleaning up, but sya i make a site like that i dont knwo how to clean it up or hpw to add text or ne thing.Could you post a link? There seems to be a plethora of images, and it'd be easier if we had a page to look at.ok i will try cus i just made it in photoshop n saved the html file for n example lemme make a new exampleI post links to w3 schools up above that tell you how to set the background w/ css. 
<container style="background-image: 
url("/images/yourimage.jpg");">text</contrainer> 
now if you go to 
<a class="postlink" href="http://www.w3schools.com/css/css_background.asp">http://www.w3schools.com/css/css_background.asp</a> 
you can see the other stuff you can do with this like positioning it or setting how it repeats.yea i will check that out sounds great

web design layouts with photoshop PROBLEMS

liunx

Guest