ventu
Joined: 30 Jul 2009
Posts: 2
|
 Posted: Thu Jul 30, 2009 12:24 am Post subject: Photoshop Slicing issue? |
 |
|
Hello PhotoshopForms,
I have an interesting issue for you all. I'm creating a website for my PC business and I'm using Photoshop to design the site. I have two images that will give you a good idea of whats going on:
Since there is a gradient background i have to do some png files for the transparency and the logo is the big one that is confusing me. I hid the gradient background and made my slice, saving the logo as a png-24 with transparent and interlaced enabled.
As you can see from the first image, Firefox is showing my website locally, while Google Chrome is showing the website from online. The coding is the same, but i'm stuck on whats wrong.
This is my HTML:
This is my CSS:
| Code: | body {
background-color: #282425;
background:url(images/background.gif) repeat-x;
margin:0
}
p, h1, h2, h3 {
margin:0;
}
div#wrapper{
margin-left:auto;
margin-right:auto;
width:1027px;
height:auto;
position:relative
}
div#logo{
background:url(images/logo.png);
width:1025px;
height:91px;
}
div#yellow {
width:1026px;
height:340px;
background:url(images/yellow_fullbody.png)
}
div#yellowcontent {
}
div#body {
margin:0;
padding:0;
}
div#bodycontent{
width:1027px;
min-height:570px;
background:url(images/white_body.gif);
}
/*body:before {
content:url("images/white_top.png");
}
#body:after {
content:url("images/white_bottom.png");
}*/
div#footer {
background:url(images/footer.png);
width:1027px;
height:33px;
}
/*Menu*/
#menu {
list-style: none;
padding: 0;
margin: 0;
width: auto;
height: 64px;
}
#menu a {
display: block;
text-indent: -900%;
float:left;
}
#menu a:hover {
background-position: left bottom;
}
#menu .home {
width: 131px;
height: 64px;
background: url(images/home.png) no-repeat;
}
#menu .about {
width:171px;
height:64px;
background: url(images/about.gif) no-repeat;
}
#menu .service {
width: 182px;
height: 64px;
background: url(images/services.gif) no-repeat;
}
#menu .contact {
width: 215px;
height: 64px;
background: url(images/contact.gif) no-repeat;
}
#menu .date {
width: 327px;
height: 64px;
background: url(images/date.png) no-repeat;
position:relative
}
#date {
position:absolute;
left:810px;
top:107px;
width:154px;
height:45px;
z-index:1;
font:Arial;
color:#585d00;
font-size:24px;
font-weight:bold;
} |
| Code: | <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ventronic PC Systems</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="highslide/highslide-with-gallery.js"></script>
<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
</head>
<body>
<div id="wrapper">
<div id="date"><script type="text/javascript" src="date.js"></script></div>
<div id="logo"></div>
<ul id="menu">
<li><a href="#" class="home"></a></li>
<li><a href="#" class="about"></a></li>
<li><a href="#" class="service"></a></li>
<li><a href="#" class="contact"></a></li>
<li><a href="#" class="date"></a></li>
</ul>
<div id="yellow">
<div id="yellowcontent">
<img src="images/gallery.png" alt="" width="150" height="79" />
<div class="highslide-gallery">
<ul style="margin-left:13px">
<li>
<a href="highslide/images/large/nebula.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/nebula.jpg" alt=""/>
</a>
</li>
<li>
<a href="highslide/images/large/layout.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/layout.jpg" alt=""/>
</a>
</li>
<li>
<a href="highslide/images/large/clipboardrgb.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/clipboardrgb.jpg" alt=""/>
</a>
</li>
</ul>
<div style="clear:both"></div></div>
</div>
</div>
<div style="margin-bottom:25px"></div>
<div id="body">
<img src="images/white_top.png" alt="" width="1027" height="11" />
<div id="bodycontent">hi</div>
<img src="images/white_bottom.png" alt="" width="1027" height="11" />
</div>
<div id="footer"></div><br />
</div>
</body>
</html>
|
Thank you so much. |
|
