PDA

View Full Version : Newbie struggling


SteHowson
06-03-2010, 09:20 AM
Ive designed a site in photoshop, and imported into DW, I have added a product carosel also, and this is the problem.

Its in the wrong place, I have created a slice, where I wanted it to sit, but I just goes top left, I have no idea how to align it in the right place.

http://img413.imageshack.us/img413/146/screenks.jpg

As you can see!!

Any ideas?

edbr
06-03-2010, 09:32 AM
need code an image doent help see where you have gone wrong

SteHowson
06-03-2010, 10:02 AM
I got it in the right place now, but the carosel has bumped all the other stuff down, out of place. If I could place the carosel over the top, or set the slice Ive chosen as the background to the image I'd have cracked it!

If you wanna look at the code, how'd I send it ya?

Corrosive
06-03-2010, 10:13 AM
Just post it here between code tags.

SteHowson
06-03-2010, 11:30 AM
Theres a ton of it, not sure which bit

SteHowson
06-03-2010, 11:52 AM
<html>
<head>
<title>new website</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
body {



}
</style>
</head>
<body bgcolor="black" >


that gives me this - without the carosel part in the centre its just the blank grey background.

When I add the script for the carosel it goes in the right place. But it pushes the image down, I want it to lay over the top. How can I do that?




<!-- Save for Web Slices (new website.psd) -->
<table width="1025" height="769" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">







<tr>
<td colspan="18"><a href="http://www.bellatorgero.com"><img src="images/home_01.gif" width="1024" height="92" alt=""></a></td>
<td>
<img src="images/spacer.gif" width="1" height="92" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/home_02.gif" width="524" height="1" alt=""></td>
<td colspan="2">
<img src="images/home_03.gif" width="191" height="1" alt=""></td>
<td colspan="4">
<img src="images/home_04.gif" width="135" height="1" alt=""></td>
<td colspan="4" rowspan="4"><a href="http://www.bellatorgero.com/contact"><img src="images/home_05.gif" width="173" height="59" alt=""></a></td>
<td>
<img src="images/home_06.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/home_07.gif" width="210" height="2" alt=""></td>
<td rowspan="2"><a href="http://www.bellatorgero.com/news"><img src="images/home_08.gif" width="118" height="57" alt=""></a></td>
<td colspan="3" rowspan="2"><a href="http://www.bellatorgero.com/white"><img src="images/home_09.gif" width="196" height="57" alt=""></a></td>
<td rowspan="2"><a href="http://www.bellatorgero.com/black"><img src="images/home_10.gif" width="190" height="57" alt=""></a></td>
<td colspan="5" rowspan="2"><a href="http://www.bellatorgero.com/media"><img src="images/home_11.gif" width="136" height="57" alt=""></a></td>
<td rowspan="13">
<img src="images/home_12.gif" width="1" height="675" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td rowspan="12">
<img src="images/home_13.gif" width="76" height="673" alt=""></td>
<td colspan="2" rowspan="2"><a href="http://www.bellatorgero.com"><img src="images/home_14.gif" width="134" height="56" alt=""></a></td>
<td>
<img src="images/spacer.gif" width="1" height="55" alt=""></td>
</tr>
<tr>
<td colspan="10" rowspan="2">
<img src="images/home_15.gif" width="640" height="16" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="5">
<img src="images/home_16.gif" width="134" height="341" alt=""></td>
<td colspan="4">
<img src="images/home_17.gif" width="173" height="15" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="15" alt=""></td>
</tr><div id="carosel"></div>
<tr>
<td colspan="8" rowspan="3"><div> <div id="featureCarousel">

<img src="images/home_18.gif" alt="" width="549" height="325" border="0"></div></td>
<td colspan="3">
<img src="images/home_19.jpg" width="229" height="212" alt=""></td>
<td colspan="3" rowspan="2">
<img src="images/home_20.gif" width="35" height="213" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="212" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/home_21.gif" width="229" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td colspan="5" rowspan="3">
<img src="images/home_22.jpg" width="232" height="168" alt=""></td>
<td rowspan="7">
<img src="images/home_23.gif" width="32" height="389" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="112" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/home_24.gif" width="220" height="1" alt=""></td>
<td colspan="4" rowspan="4">
<img src="images/home_25.gif" width="293" height="152" alt=""></td>
<td rowspan="6">
<img src="images/home_26.gif" width="36" height="277" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/home_27.gif" width="29" height="276" alt=""></td>
<td colspan="3" rowspan="3">
<img src="images/home_28.gif" width="297" height="151" alt=""></td>
<td rowspan="5">
<img src="images/home_29.gif" width="28" height="276" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="55" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/home_30.gif" width="232" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/home_31.gif" width="2" height="220" alt=""></td>
<td colspan="3" rowspan="2">
<img src="images/home_32.gif" width="229" height="142" alt=""></td>
<td rowspan="3">
<img src="images/home_33.gif" width="1" height="220" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="95" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img src="images/home_34.gif" width="297" height="125" alt=""></td>
<td colspan="4" rowspan="2">
<img src="images/home_35.gif" width="293" height="125" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="47" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/home_36.gif" width="229" height="78" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="78" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="76" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="29" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="105" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="118" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="74" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="28" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="94" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="190" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="8" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="36" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="2" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="89" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="138" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="2" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="32" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

SteHowson
06-03-2010, 11:53 AM
that gives me the layout as per photoshop

but when I add in the script for the carosel, it pushed the images down. Is there anyway I can lay the carosel over the top?

Corrosive
06-03-2010, 12:10 PM
You could try wrapping the whole thing in a div tag and positioning it relatively using CSS and then use an absolutley positioned div (taking position reference from top left of the wrapping div) to 'place' your slideshow.

The main problem being that you are on a path to loads of problems like this when you export from Photoshop in this way. You've got tables (old technology) and superfluous images all over the place. You need to learn to hand-slice your designs and rebuild them using CSS and divs.

SteHowson
06-03-2010, 12:18 PM
Errr, how would I position relatively?

Corrosive
06-03-2010, 12:27 PM
Like this;


#wrapper {position: relative; width: ???px;}
Then wrap your page in HTML


<div id="wrapper">Rest of the site code here</div>
Then 'place' your layer/apdiv wherever you want to call it.

Please listen to me about exporting from Photoshop. You don't even have any HTML text for search engines to read!

SteHowson
06-03-2010, 01:57 PM
Im just learning as I go, we had a (real bad) designer do the original site, but it looks awful.

If I was to start again, how should I do it, Ive spent a couple of days getting this one wrong, so I can spend a couple more getting it right.

Any tutorials would be massively appreciated

Corrosive
06-03-2010, 02:08 PM
W3 Schools is as good a place as any to start; http://www.w3schools.com/css/css_intro.asp. There are some tutorials on this site and some on my site if you would like to take a look (see sig).

The other thing to do is to Google CSS tutorials and you'll get loads back.

Corrosive
06-03-2010, 02:09 PM
By the way, the design work is fantastic. I really like it so get the background build right and you'll have an awesome site IMO.

SteHowson
06-03-2010, 02:38 PM
cheers bud, designing is what I do, I am screwed when it comes to technical stuff. I kinda know a bit about HTML and have a basic knowledge of what I need to do.

Luckily having Adobe master suite, I have Dreamwever etc to work with already installed.