PDA

View Full Version : getting rid of scrolling bar


kearnsy
07-02-2009, 11:35 AM
Hi all

When designing a site are you supposed to take into consideration any toolbars the viewer may have installed on their pc?

By that i mean if the total screen resolution is 1024 x 768 will for instance the google toolbar eat into your available screen resolution?

I've designed a site in photoshop with dimensions of 955 x 600 px and somehow have managed to have a scroll bar down the right hand side of the page, which i didn't want.

if i post the code would anyone be so kind as to have a look and tell me where i'm going wrong?

thanks

<!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>
<title>main page andy july 09</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Styles (main page andy july 09.psd) -->
<style type="text/css">
<!--
#container {
height: 600px;
width: 955px;
padding: 0px;
position: relative;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#header_ {
position:absolute;
left:0px;
top:0px;
width:957px;
height:232px;
background-image: url(images/header.jpg);
}
#topleft-box_ {
position:absolute;
left:0px;
top:232px;
width:224px;
height:48px;
background-image: url(images/topleft_box.jpg);
}
#topmiddle-box_ {
position:absolute;
left:224px;
top:232px;
width:509px;
height:48px;
background-image: url(images/topmiddle_box.jpg);
}
#topright-box_ {
position:absolute;
left:733px;
top:232px;
width:224px;
height:48px;
background-image: url(images/topright_box.jpg);
}
#index-05_ {
position:absolute;
left:0px;
top:280px;
width:224px;
height:30px;
background-image: url(images/index_05.jpg);
}
#mc2_ {
position:absolute;
left:224px;
top:280px;
width:509px;
height:297px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-image: url(images/mc2.jpg);
}
#txtbox2 {
height: 85%;
width: 85%;
text-align: center;
margin-right: auto;
margin-left: auto;
padding-top: 25px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
float: none;
}
#textarea {
height: 85%;
width: 475px;
margin-right: 17px;
margin-left: auto;
float: none;
text-align: center;
padding-top: 25px;
}
#mc3_ {
position:absolute;
left:733px;
top:280px;
width:224px;
height:297px;
background-image: url(images/mc3.jpg);
}
#index-08_ {
position:absolute;
left:0px;
top:310px;
width:59px;
height:267px;
background-image: url(images/index_08.jpg);
}
#home_ {
position:absolute;
left:59px;
top:310px;
width:116px;
height:26px;
background-image: url(images/home.jpg);
}
#index-10_ {
position:absolute;
left:175px;
top:310px;
width:49px;
height:267px;
background-image: url(images/index_10.jpg);
}
#index-11_ {
position:absolute;
left:59px;
top:336px;
width:116px;
height:27px;
background-image: url(images/index_11.jpg);
}
#gallery_ {
position:absolute;
left:59px;
top:363px;
width:116px;
height:23px;
background-image: url(images/gallery.jpg);
}
#index-13_ {
position:absolute;
left:59px;
top:386px;
width:116px;
height:29px;
background-image: url(images/index_13.jpg);
}
#about-us_ {
position:absolute;
left:59px;
top:415px;
width:116px;
height:23px;
background-image: url(images/about-us.jpg);
}
#index-15_ {
position:absolute;
left:59px;
top:438px;
width:116px;
height:29px;
background-image: url(images/index_15.jpg);
}
#future_ {
position:absolute;
left:59px;
top:467px;
width:116px;
height:22px;
background-image: url(images/future.jpg);
}
#index-17_ {
position:absolute;
left:59px;
top:489px;
width:116px;
height:29px;
background-image: url(images/index_17.jpg);
}
#contact_ {
position:absolute;
left:59px;
top:518px;
width:116px;
height:23px;
background-image: url(images/contact.jpg);
}
#index-19_ {
position:absolute;
left:59px;
top:541px;
width:116px;
height:36px;
background-image: url(images/index_19.jpg);
}
#footer_ {
position:absolute;
left:0px;
top:577px;
width:957px;
height:25px;
background-image: url(images/footer.jpg);
}
body {
background-image: url();
background-repeat: no-repeat;
background-color: #000000;
}
-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF; margin: 0px 0px 0px 0px;">
<!-- ImageReady Slices (main page andy july 09.psd) -->
<div id="container">
<div id="container"></div>
<div id="header_"></div>
<div id="topleft-box_"></div>
<div id="topmiddle-box_"></div>
<div id="topright-box_"></div>
<div id="index-05_"></div>
<div id="mc2_">
<div id="textarea">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. </p>
<p>Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. </p>
<p>Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut,</p>
<p> ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
</div>
</div>
<div id="mc3_">
<div id="txtbox2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem,</p>
<p> consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. </p>
<p>Aenean viverra malesuada libero. Fusce ac quam. Donec neque. </p>
<p>Nunc venenatis enim nec quam. Cras </p>
</div>
</div>
<div id="index-08_"></div>
<div id="home_"></div>
<div id="index-10_"><img src="images/index_10.jpg" width="49" height="267" /></div>
<div id="index-11_"></div>
<div id="gallery_"></div>
<div id="index-13_"></div>
<div id="about-us_"></div>
<div id="index-15_"></div>
<div id="future_"></div>
<div id="index-17_"></div>
<div id="contact_"></div>
<div id="index-19_"></div>
<div id="footer_"></div>
</div>
<!-- End ImageReady Slices -->
</html>

kearnsy
07-02-2009, 11:37 AM
p.s. i've noticed that by default when you export into dreamweaver from photoshop, it gives the div tags a position of absolute

should i change these or are they ok to leave as they are?

thanks

Corrosive
07-02-2009, 11:54 AM
p.s. i've noticed that by default when you export into dreamweaver from photoshop, it gives the div tags a position of absolute

should i change these or are they ok to leave as they are?

thanks

I wouldn't ever recommend exporting a design from Photoshop. PS isn't a web design tool! You are right, it gives you absolute positioning. I tend to create the images I need in PS and then reconstruct the page from scratch in Dreamweaver.