Rosalie
04-06-2011, 08:40 PM
Dear All,
I have the following problem. I made a menu following this (http://layersmagazine.com/taking-image-slicing-from-photoshop-to-dreamweaver.html#comments)tutorial. What I did is I sliced an image in photoshop, saved it as html/css and imported it in dreamweaver.
Everything looked very need. However, I wanted to put it in my own div to be able to align it on my page. I did this (according to the tutorial, but none of the "slices" ended up in the actual div (called Thediv). So I could align my div but no slices are positioned right.
I very much appreciate help,
Rosalie
the code (put also all css in html).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#theDiv {
position:absolute;
left:0px;
top:0px;
width:188px;
height:480px;
}
#barpagina2-01 {
position:absolute;
left:0px;
top:0px;
width:188px;
height:126px;
}
#barpagina2-02 {
position:absolute;
left:0px;
top:126px;
width:26px;
height:349px;
}
#barpagina2-03 {
position:absolute;
left:26px;
top:126px;
width:138px;
height:23px;
}
#barpagina2-04 {
position:absolute;
left:164px;
top:126px;
width:24px;
height:349px;
}
#barpagina2-05 {
position:absolute;
left:26px;
top:149px;
width:138px;
height:7px;
}
#barpagina2-06 {
position:absolute;
left:26px;
top:156px;
width:138px;
height:23px;
}
#barpagina2-07 {
position:absolute;
left:26px;
top:179px;
width:138px;
height:7px;
}
#barpagina2-08 {
position:absolute;
left:26px;
top:186px;
width:138px;
height:23px;
}
#barpagina2-09 {
position:absolute;
left:26px;
top:209px;
width:138px;
height:8px;
}
#barpagina2-10 {
position:absolute;
left:26px;
top:217px;
width:138px;
height:23px;
}
#barpagina2-11 {
position:absolute;
left:26px;
top:240px;
width:138px;
height:9px;
}
#barpagina2-12 {
position:absolute;
left:26px;
top:249px;
width:138px;
height:24px;
}
#barpagina2-13 {
position:absolute;
left:26px;
top:273px;
width:138px;
height:202px;
}
-->
</style>
</head>
<body>
<div id="Thediv"><div id="barpagina2-01">
<img src="images/barpagina2_01.png" width="188" height="126" alt="">
</div>
<div id="barpagina2-02">
<img src="images/barpagina2_02.png" width="26" height="349" alt="">
</div>
<div id="barpagina2-03">
<img src="images/barpagina2_03.png" width="138" height="23" alt="">
</div>
<div id="barpagina2-04">
<img src="images/barpagina2_04.png" width="24" height="349" alt="">
</div>
<div id="barpagina2-05">
<img src="images/barpagina2_05.png" width="138" height="7" alt="">
</div>
<div id="barpagina2-06">
<img src="images/barpagina2_06.png" width="138" height="23" alt="">
</div>
<div id="barpagina2-07">
<img src="images/barpagina2_07.png" width="138" height="7" alt="">
</div>
<div id="barpagina2-08">
<img src="images/barpagina2_08.png" width="138" height="23" alt="">
</div>
<div id="barpagina2-09">
<img src="images/barpagina2_09.png" width="138" height="8" alt="">
</div>
<div id="barpagina2-10">
<img src="images/barpagina2_10.png" width="138" height="23" alt="">
</div>
<div id="barpagina2-11">
<img src="images/barpagina2_11.png" width="138" height="9" alt="">
</div>
<div id="barpagina2-12">
<img src="images/barpagina2_12.png" width="138" height="24" alt="">
</div>
<div id="barpagina2-13">
<img src="images/barpagina2_13.png" width="138" height="202" alt="">
</div>
</div>
</body>
</html>
I have the following problem. I made a menu following this (http://layersmagazine.com/taking-image-slicing-from-photoshop-to-dreamweaver.html#comments)tutorial. What I did is I sliced an image in photoshop, saved it as html/css and imported it in dreamweaver.
Everything looked very need. However, I wanted to put it in my own div to be able to align it on my page. I did this (according to the tutorial, but none of the "slices" ended up in the actual div (called Thediv). So I could align my div but no slices are positioned right.
I very much appreciate help,
Rosalie
the code (put also all css in html).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#theDiv {
position:absolute;
left:0px;
top:0px;
width:188px;
height:480px;
}
#barpagina2-01 {
position:absolute;
left:0px;
top:0px;
width:188px;
height:126px;
}
#barpagina2-02 {
position:absolute;
left:0px;
top:126px;
width:26px;
height:349px;
}
#barpagina2-03 {
position:absolute;
left:26px;
top:126px;
width:138px;
height:23px;
}
#barpagina2-04 {
position:absolute;
left:164px;
top:126px;
width:24px;
height:349px;
}
#barpagina2-05 {
position:absolute;
left:26px;
top:149px;
width:138px;
height:7px;
}
#barpagina2-06 {
position:absolute;
left:26px;
top:156px;
width:138px;
height:23px;
}
#barpagina2-07 {
position:absolute;
left:26px;
top:179px;
width:138px;
height:7px;
}
#barpagina2-08 {
position:absolute;
left:26px;
top:186px;
width:138px;
height:23px;
}
#barpagina2-09 {
position:absolute;
left:26px;
top:209px;
width:138px;
height:8px;
}
#barpagina2-10 {
position:absolute;
left:26px;
top:217px;
width:138px;
height:23px;
}
#barpagina2-11 {
position:absolute;
left:26px;
top:240px;
width:138px;
height:9px;
}
#barpagina2-12 {
position:absolute;
left:26px;
top:249px;
width:138px;
height:24px;
}
#barpagina2-13 {
position:absolute;
left:26px;
top:273px;
width:138px;
height:202px;
}
-->
</style>
</head>
<body>
<div id="Thediv"><div id="barpagina2-01">
<img src="images/barpagina2_01.png" width="188" height="126" alt="">
</div>
<div id="barpagina2-02">
<img src="images/barpagina2_02.png" width="26" height="349" alt="">
</div>
<div id="barpagina2-03">
<img src="images/barpagina2_03.png" width="138" height="23" alt="">
</div>
<div id="barpagina2-04">
<img src="images/barpagina2_04.png" width="24" height="349" alt="">
</div>
<div id="barpagina2-05">
<img src="images/barpagina2_05.png" width="138" height="7" alt="">
</div>
<div id="barpagina2-06">
<img src="images/barpagina2_06.png" width="138" height="23" alt="">
</div>
<div id="barpagina2-07">
<img src="images/barpagina2_07.png" width="138" height="7" alt="">
</div>
<div id="barpagina2-08">
<img src="images/barpagina2_08.png" width="138" height="23" alt="">
</div>
<div id="barpagina2-09">
<img src="images/barpagina2_09.png" width="138" height="8" alt="">
</div>
<div id="barpagina2-10">
<img src="images/barpagina2_10.png" width="138" height="23" alt="">
</div>
<div id="barpagina2-11">
<img src="images/barpagina2_11.png" width="138" height="9" alt="">
</div>
<div id="barpagina2-12">
<img src="images/barpagina2_12.png" width="138" height="24" alt="">
</div>
<div id="barpagina2-13">
<img src="images/barpagina2_13.png" width="138" height="202" alt="">
</div>
</div>
</body>
</html>