Ventu
30 Jul 2009, 02:35 AM
Hello,
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:
http://vpcsys.com/stuff/problem.jpg
http://vpcsys.com/stuff/problem1.jpg
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:
<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>
This is the CSS:
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;
}
Thanks a lot guys.
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:
http://vpcsys.com/stuff/problem.jpg
http://vpcsys.com/stuff/problem1.jpg
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:
<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>
This is the CSS:
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;
}
Thanks a lot guys.