New Topic/Question
Reply
body {
text-align: center;
}
#wrapper {
margin: 0 auto;
position: absolute;
left: 0px;
top: 0px;
width: 1000px;
height: 800px;
}
#top_left {
position:absolute;
left:0px;
top:0px;
width:38px;
height:103px;
}
#logo {
position:absolute;
left:38px;
top:0px;
width:127px;
height:103px;
}
#merlin_banner {
position:absolute;
left:165px;
top:0px;
width:798px;
height:103px;
}
#top_right {
position:absolute;
left:963px;
top:0px;
width:37px;
height:103px;
}
#main_left {
position:absolute;
left:0px;
top:103px;
width:38px;
height:578px;
}
#home_button {
position:absolute;
left:38px;
top:103px;
width:95px;
height:38px;
}
#about_button {
position:absolute;
left:133px;
top:103px;
width:132px;
height:38px;
}
#past_button {
position:absolute;
left:265px;
top:103px;
width:158px;
height:38px;
}
#next_button {
position:absolute;
left:423px;
top:103px;
width:160px;
height:38px;
}
#contact_button {
position:absolute;
left:583px;
top:103px;
width:144px;
height:38px;
}
#news_button {
position:absolute;
left:727px;
top:103px;
width:105px;
height:38px;
}
#ites_button {
position:absolute;
left:832px;
top:103px;
width:131px;
height:38px;
}
#right_main{
position:absolute;
left:963px;
top:103px;
width:37px;
height:578px;
}
#main_con {
position:absolute;
left:38px;
top:141px;
width:925px;
height:540px;
}
#left_social {
position:absolute;
left:0px;
top:681px;
width:38px;
height:75px;
}
#social {
position:absolute;
left:38px;
top:681px;
width:962px;
height:75px;
}
#left_bottom {
position:absolute;
left:0px;
top:756px;
width:38px;
height:44px;
}
#main_bottom {
position:absolute;
left:38px;
top:756px;
width:925px;
height:44px;
}
#right_bottom {
position:absolute;
left:963px;
top:756px;
width:37px;
height:44px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html>
<head>
<title>websitenew_sliced</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="format.css">
</head>
<body style="background-color:#FFFFFF;" >
<div id="wrapper">
<div id="top_left">
<img src="images/websitenew_sliced_01.jpg" width="38" height="103" alt="">
</div>
<div id="logo">
<img src="images/websitenew_sliced_02.jpg" width="127" height="103" alt="">
</div>
<div id="merlin_banner">
<img src="images/websitenew_sliced_03.jpg" width="798" height="103" alt="">
</div>
<div id="top_right">
<img src="images/websitenew_sliced_04.gif" width="37" height="103" alt="">
</div>
<div id="main_left">
<img src="images/websitenew_sliced_05.jpg" width="38" height="578" alt="">
</div>
<div id="home_button">
<img src="images/websitenew_sliced_06.jpg" width="95" height="38" alt="">
</div>
<div id="about_button">
<img src="images/websitenew_sliced_07.jpg" width="132" height="38" alt="">
</div>
<div id="past_button">
<img src="images/websitenew_sliced_08.jpg" width="158" height="38" alt="">
</div>
<div id="next_button">
<img src="images/websitenew_sliced_09.jpg" width="160" height="38" alt="">
</div>
<div id="contact_button">
<img src="images/websitenew_sliced_10.gif" width="144" height="38" alt="">
</div>
<div id="news_button">
<img src="images/websitenew_sliced_11.gif" width="105" height="38" alt="">
</div>
<div id="ites_button">
<img src="images/websitenew_sliced_12.gif" width="131" height="38" alt="">
</div>
<div id="right_main">
<img src="images/websitenew_sliced_13.jpg" width="37" height="578" alt="">
</div>
<div id="main_con">
<img src="images/websitenew_sliced_14.jpg" width="925" height="540" alt="">
</div>
<div id="left_social">
<img src="images/websitenew_sliced_15.gif" width="38" height="75" alt="">
</div>
<div id="social">
<img src="images/websitenew_sliced_16.gif" width="962" height="75" alt="">
</div>
<div id="left_bottom">
<img src="images/websitenew_sliced_17.gif" width="38" height="44" alt="">
</div>
<div id="main_bottom">
<img src="images/websitenew_sliced_18.jpg" width="925" height="44" alt="">
</div>
<div id="right_bottom">
<img src="images/websitenew_sliced_19.gif" width="37" height="44" alt="">
</div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>
6 Replies - 426 Views - Last Post: 20 September 2012 - 11:43 AM
#1
3238liam
- New D.I.C Head
Reputation: 0
- Posts: 4
- Joined: 20-September 12
Can't get page to center
Posted 20 September 2012 - 10:30 AM
Hi guys, got a small problem so I designed my new site in Photoshop and exported with CSS opened up in dreamweaver and I cant get my page to center below is my HTML and CSS any help would be great
Is This A Good Question/Topic?
0
MultiQuoteReplies To: Can't get page to center
#3
Mina-no-Hime
- D.I.C Head
Reputation: 98
- Posts: 176
- Joined: 23-August 12
Re: Can't get page to center
Posted 20 September 2012 - 11:08 AM
The main cause of your problem is that you're using absolute positioning for all of your elements in your CSS file. However, simply removing the position: absolute; statements isn't going to clear up your problem.
The problem with using slicing from Photoshop is that the sliced HTML needs a lot of work to have any sort of decent appearance. I recommend that you read up on DIV layouts and CSS.
The problem with using slicing from Photoshop is that the sliced HTML needs a lot of work to have any sort of decent appearance. I recommend that you read up on DIV layouts and CSS.
Was This Post Helpful?
0
#4
3238liam
- New D.I.C Head
Reputation: 0
- Posts: 4
- Joined: 20-September 12
Re: Can't get page to center
Posted 20 September 2012 - 11:08 AM
modi123_1, on 20 September 2012 - 10:33 AM, said:
Do you need some main div to center? If that's the case set the left and right margins to auto and give it a width size.
Yes I want the warpper to center the whole page, I have tried using
#wrapper {
margin: auto 0;
position: absolute;
width: 1000px;
}
but that does nothing 
Was This Post Helpful?
0
#5
3238liam
- New D.I.C Head
Reputation: 0
- Posts: 4
- Joined: 20-September 12
Re: Can't get page to center
Posted 20 September 2012 - 11:13 AM
Mina-no-Hime, on 20 September 2012 - 11:08 AM, said:
The main cause of your problem is that you're using absolute positioning for all of your elements in your CSS file. However, simply removing the position: absolute; statements isn't going to clear up your problem.
The problem with using slicing from Photoshop is that the sliced HTML needs a lot of work to have any sort of decent appearance. I recommend that you read up on DIV layouts and CSS.
The problem with using slicing from Photoshop is that the sliced HTML needs a lot of work to have any sort of decent appearance. I recommend that you read up on DIV layouts and CSS.
I don't see how the problem is with photoshops slicing as the code that's there is exactly what I would have used of I had done it my self care to explain a little more as to why?
Was This Post Helpful?
0
#6
Mina-no-Hime
- D.I.C Head
Reputation: 98
- Posts: 176
- Joined: 23-August 12
Re: Can't get page to center
Posted 20 September 2012 - 11:20 AM
3238liam, on 20 September 2012 - 10:13 AM, said:
I don't see how the problem is with photoshops slicing as the code that's there is exactly what I would have used of I had done it my self care to explain a little more as to why?
Photoshop's slicing mechanism puts every "slice" of the image into an image tag, which in turn is contained within a div tag containing absolute positioning in the generated CSS. For starters, images used as decoration (such as rounded borders and the like) should not be done in img tags -- they should be handled as CSS.
If you want to center your page on screen, you aren't going to be able to use absolute positioning (unless you intend to constantly recalculate the appropriate positions based on the size of the browser window). Slicing itself is a great tool for layout prototyping, and for getting your images split and getting a general idea of how you should set things up with regard to where CSS images should be placed.
It is not a good tool for creating your pages or layouts for you. Scaffolding (to step out of Photoshop-centric language) is not intended for that purpose. Just to give you an example, try adding text over whatever image appears in your main_con div.
Was This Post Helpful?
0
#7
3238liam
- New D.I.C Head
Reputation: 0
- Posts: 4
- Joined: 20-September 12
Re: Can't get page to center
Posted 20 September 2012 - 11:43 AM
Mina-no-Hime, on 20 September 2012 - 11:20 AM, said:
3238liam, on 20 September 2012 - 10:13 AM, said:
I don't see how the problem is with photoshops slicing as the code that's there is exactly what I would have used of I had done it my self care to explain a little more as to why?
Photoshop's slicing mechanism puts every "slice" of the image into an image tag, which in turn is contained within a div tag containing absolute positioning in the generated CSS. For starters, images used as decoration (such as rounded borders and the like) should not be done in img tags -- they should be handled as CSS.
If you want to center your page on screen, you aren't going to be able to use absolute positioning (unless you intend to constantly recalculate the appropriate positions based on the size of the browser window). Slicing itself is a great tool for layout prototyping, and for getting your images split and getting a general idea of how you should set things up with regard to where CSS images should be placed.
It is not a good tool for creating your pages or layouts for you. Scaffolding (to step out of Photoshop-centric language) is not intended for that purpose. Just to give you an example, try adding text over whatever image appears in your main_con div.
Well to avoid the problem of the text going 'funny' as it were I just place another DIV on top of the one with the design on it, I changed the positioning from absolute to relative and everything is dandy
Was This Post Helpful?
0
Page 1 of 1
|
|
| 