Photoshop Gurus

Go Back   Photoshop Gurus - Tutorials, Resources and Latest on Photoshop Forum > Photoshop Boards > Photoshop for the Web
Centering css from photoshop in dreamweaver Centering css from photoshop in dreamweaver
Register FAQ Members List Social Groups Calendar Search Today's Posts Mark Forums Read


Reply
 
LinkBack Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old 09-27-2009, 06:08 PM
Junior Member
  
Join Date: Sep 2009
Posts: 2
Centering css from photoshop in dreamweaver
I am very new to css and dreamweaver. just started yesterday. I have this code below. the site comes up fine but it is aligned all the way to the left. I want it to be centered to every browser. Is this possible? I thought since i was adding the css from photoshop to a div in would take the div attributes, but it does not. I am probably doing this all wrong. Please do not comment unless you have an informed answer. I know I need to learn css , that is why I am posting

here is my css rules

#wrapper {
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
width: 0px;
}
#site {
height: 0px;
width: 0px;
background-color: #00FF66;
background-position: 0px 0px;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#wrapper #site {
margin-right: auto;
margin-left: auto;
}







<!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>Lacyidos</title>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
background-image: url(images/bg.jpg);
text-align: center;

}

div.newsite-01_ {
position:absolute;
left:0px;
top:0px;
width:824px;
height:125px;
}

div.newsite-02_ {
position:absolute;
left:0px;
top:125px;
width:26px;
height:550px;
}

div.newsite-03_ {
position:absolute;
left:26px;
top:125px;
width:154px;
height:20px;
}

div.newsite-04_ {
position:absolute;
left:180px;
top:125px;
width:154px;
height:20px;
}

div.newsite-05_ {
position:absolute;
left:334px;
top:125px;
width:154px;
height:20px;
}

div.newsite-06_ {
position:absolute;
left:488px;
top:125px;
width:154px;
height:20px;
}

div.newsite-07_ {
position:absolute;
left:642px;
top:125px;
width:154px;
height:20px;
}

div.newsite-08_ {
position:absolute;
left:796px;
top:125px;
width:28px;
height:459px;
}

div.newsite-09_ {
position:absolute;
left:26px;
top:145px;
width:770px;
height:439px;
}

div.newsite-10_ {
position:absolute;
left:26px;
top:584px;
width:772px;
height:38px;
}

div.newsite-11_ {
position:absolute;
left:798px;
top:584px;
width:26px;
height:91px;
}

div.newsite-12_ {
position:absolute;
left:26px;
top:622px;
width:772px;
height:53px;
}
-->
</style>
<link href="css/layout.cc" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="site">
<div class="newsite-01_">
<img id="newsite_01" src="images/newsite_01.gif" width="824" height="125" alt="" />
</div>
<div class="newsite-02_">
<img id="newsite_02" src="images/newsite_02.gif" width="26" height="550" alt="" />
</div>
<div class="newsite-03_">
<img id="newsite_03" src="images/newsite_03.gif" width="154" height="20" alt="" />
</div>
<div class="newsite-04_">
<img id="newsite_04" src="images/newsite_04.gif" width="154" height="20" alt="" />
</div>
<div class="newsite-05_">
<img id="newsite_05" src="images/newsite_05.gif" width="154" height="20" alt="" />
</div>
<div class="newsite-06_">
<img id="newsite_06" src="images/newsite_06.gif" width="154" height="20" alt="" />
</div>
<div class="newsite-07_">
<img id="newsite_07" src="images/newsite_07.gif" width="154" height="20" alt="" />
</div>
<div class="newsite-08_">
<img id="newsite_08" src="images/newsite_08.gif" width="28" height="459" alt="" />
</div>
<div class="newsite-09_">
<img id="newsite_09" src="images/newsite_09.gif" width="770" height="439" alt="" />
</div>
<div class="newsite-10_"><object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,22,0" id="footer" width="772" height="38"> <param name="movie" value="footer.swf"> <param name="bgcolor" value="#FFFFFF"> <param name="quality"
value="high"> <param name="loop" value="false"> <param name="wmode" value="transparent"> <param name="allowscriptaccess" value="samedomain"> <embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" name="footer" width="772" height="38" src="footer.swf" bgcolor="#FFFFFF"
quality="high" loop="false" wmode="transparent" swliveconnect="true" allowscriptaccess="samedomain" > <noembed> </noembed> </embed></object>
</div>
<div class="newsite-11_">
<img id="newsite_11" src="images/newsite_11.gif" width="26" height="91" alt="" />
</div>
<div class="newsite-12_">
<img id="newsite_12" src="images/newsite_12.gif" width="772" height="53" alt="" />
</div>
</div>
</div>
</body>
</html>
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #2 (permalink)  
Old 11-27-2009, 04:02 AM
Senior Member
  
Join Date: Nov 2009
Posts: 178
Put in the CSS of your main DIV:

margin-right: auto;
margin-left: auto;

or enter it here:

Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #3 (permalink)  
Old 12-02-2009, 11:04 PM
Junior Member
  
Join Date: Nov 2009
Location: Telford, England
Posts: 25
I have a suggestion that will save you a lot of headache in the future. copy everything that's inbetween the style tags (so from "body {" to "height:53px;}") and paste it into notepad. then go File > Save As. Where it says "Save as type:" select "All files", and then where it asks for a name, type in something like "style.css" and save it in the same folder as the webpages that use that code.

Then, on all the pages that you want to have this CSS coding on, instead of having a massive long list of CSS, have this single line:
Code:
<link rel="stylesheet" type="text/css" href="style.css">
This way you not only cut down on file size, but you can also edit the CSS parameters for all pages in one place

EDIT

The <link> tag must go inbetween the <head></head> tags by the way.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

Reply

« Previous Thread | Next Thread »
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On



All times are GMT. The time now is 05:45 AM.

Contact Us - Photoshop Gurus - Archive - Top

Powered by vBulletin® Version 3.8.2
Copyright ©2000 - 2010, Jelsoft Enterprises Ltd.
SEO by vBSEO 3.1.0