PDA

View Full Version : can't use margin on my site


pedram
08-23-2009, 10:01 PM
Hi everyone,
i'm new to dreamweaver and coding in general. i am making my first web page using photoshop and dreamweaver and it seems that so far i have made good progress on this but the problem is that i can't position the text where i want. see the picture below.
http://i2.photobucket.com/albums/y40/pedped/pic1.jpghttp://i2.photobucket.com/albums/y40/pedped/pic1.jpg

this is the photoshop version and as you can see there are three different types of text in each box.

now what i have done so far is that i have created a DIV for second box and a new style sheet called box2 and in this box2 i have add 3 different rules for each text format ( i don't know what i have done is right or now) and i can't use margin or anything else to move my text to right or down to position my text correctly. i would appreciate your help.



<html>
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="../../My Documents/test site/test CSS.css" rel="stylesheet" type="text/css">
<link href="box2.css" rel="stylesheet" type="text/css">

<style type="text/css">
<!--
body,td,th {
color: #36C;
}
-->
</style></head>

<!-- ImageReady Slices (Untitled-1.psd) -->
<div id="test">
<table width="851" height="791" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="13">
<img src="images/test_01.jpg" width="839" height="27" alt=""></td>
<td rowspan="15">
<img src="images/test_02.jpg" width="11" height="790" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="27" alt=""></td>
</tr>
<tr>
<td rowspan="14">
<img src="images/test_03.jpg" width="10" height="763" alt=""></td>
<td colspan="11">
<img src="images/test_04.jpg" width="828" height="130" alt=""></td>
<td rowspan="6">
<img src="images/test_05.jpg" width="1" height="194" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="130" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="5">
<img src="images/test_06.jpg" width="124" height="64" alt=""></td>
<td colspan="7">
<img src="images/test_07.jpg" width="580" height="17" alt=""></td>
<td colspan="2" rowspan="5">
<img src="images/test_08.jpg" width="124" height="64" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="17" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/test_09.jpg" width="580" height="2" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/test_10.jpg" width="265" height="1" alt=""></td>
<td rowspan="2">
<img src="images/test_11.jpg" width="107" height="27" alt=""></td>
<td rowspan="2">
<img src="images/test_12.jpg" width="112" height="27" alt=""></td>
<td>
<img src="images/test_13.jpg" width="96" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="images/test_14.jpg" width="67" height="26" alt=""></td>
<td>
<img src="images/test_15.jpg" width="90" height="26" alt=""></td>
<td colspan="2">
<img src="images/test_16.jpg" width="108" height="26" alt=""></td>
<td>
<img src="images/test_17.jpg" width="96" height="26" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="26" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/test_18.jpg" width="580" height="18" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="18" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/test_19.jpg" width="281" height="203" alt=""></td>
<td rowspan="7">
<img src="images/test_20.jpg" width="25" height="538" alt=""></td>
<td colspan="7" rowspan="3">
<img src="images/test_21.jpg" width="523" height="267" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="203" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/test_22.jpg" width="281" height="19" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="19" alt=""></td>
</tr>
<tr>
<td colspan="4" rowspan="2"><div id="box2">
<p> Connection </p>
<p>erwr </p>
<p> werwre ewr rr rer e </p>
</div></td>
<td>
<img src="images/spacer.gif" width="1" height="45" alt=""></td>
</tr>
<tr>
<td colspan="5" rowspan="4">
<img src="images/test_24.jpg" width="521" height="271" alt=""></td>
<td rowspan="4">
<img src="images/test_25.jpg" width="1" height="271" alt=""></td>
<td rowspan="5">
<img src="images/test_26.jpg" width="1" height="302" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="66" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/test_27.jpg" width="281" height="19" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="19" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/test_28.jpg" width="281" height="124" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="124" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/test_29.jpg" width="281" height="62" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="62" alt=""></td>
</tr>
<tr>
<td>
<img src="images/test_30.jpg" width="1" height="31" alt=""></td>
<td colspan="10">
<img src="images/test_31.jpg" width="827" height="31" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="31" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="10" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="123" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="67" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="90" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="25" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="83" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="107" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="112" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="96" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="123" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td></td>
</tr>
</table>
</div>
<!-- End ImageReady Slices -->
</body>
</html>Box2.CSS
#box2 {
background-image: url(images/test_23.jpg);
height: 111px;
width: 281px;
}
#box2 {
font-family: "Lucida Console", Monaco, monospace;
font-size: 16px;
color: #36C;
font-weight: bold;
top: 0px;
}
p {
color: #FFF;
font-size: 14px;
}
#box2 p {
}

Corrosive
08-24-2009, 06:05 AM
Please do not use imageready to 'build' your website. You have run into just one of the many issues you'll have doing it that way. Photoshop is a graphics package, don't let it create code for you.

You can create your design in Photoshop (which looks good btw) but you'll need to manually slice up the bits you need and then put it back together in Dreamweaver.

For instance, the box images on the left you'll only need to create once and then use them three times for the boxes. Photoshop imageready will have created the image three times!

Go and do some more learning and THEN attempt your website ;)

pedram
08-24-2009, 06:43 AM
thx for the tip Corrosive and i'll do that in the future but its essential to finish this webpage as soon as possible.

1- now is it possible that i can position and organize my text on this ?
2- if i provide my psd file (no cut), would you or some one else is willing to help me cut and do the CSS part so i know how its done please ?

Corrosive
08-24-2009, 07:43 AM
thx for the tip Corrosive and i'll do that in the future but its essential to finish this webpage as soon as possible.

You're not going to finish it at all if you keep down this path

1- now is it possible that i can position and organize my text on this ?
2- if i provide my psd file (no cut), would you or some one else is willing to help me cut and do the CSS part so i know how its done please ?

Do you mean hire a web designer?

domedia
08-24-2009, 03:59 PM
Knowing how to cut out graphics for a website is tied together with your HTML/CSS skills. Once you understand how a website is built correctly, it's more evident how images needs to be cut.