  |
Results from the most recent live auction are here.
21 members in the live chat room. Join Chat!
| | 
04-16-2006, 08:31 AM
|
· #1 | | New Member | CSS - centering issue
I'm creating a new skin for a php script and I've encountered a problem. (I'm still fairly new to css so I apologise if I my explanation may not be too clear) I positioned a bg image in the center of the page and made it stretch vertically. I then created a div that will center itself - this will contain all the content of the page. Unfortunately, there is an issue with centering in some browsers which I managed to find at http://www.positioniseverything.net/bg-centering.html . This is exactly what I'm experiencing as at times there's a difference of 1 px between the bg and div. Here is a screenshot of what I'd like it to always be and of the issue that sometimes occurs:  
Now I read the solution posted at the url above but I'm not sure how I can incorporate it in my layout as I need the background image to stretch vertically to fit the size of the window.
Here's my code: Code: body {
background-color: #EEEEEE;
background-image: url('images/bg.gif');
background-repeat: repeat-y;
background-position: center;
color: #6F6F6F;
font-size: 11pt;
font-family: arial;
text-align: center;
min-width: 698px;
}
#wrapper {
margin: 0 auto;
width: 698px;
height: 900px;
text-align: center;
border-style: solid;
border-color: 6C6C6C;
border-top-width: 0px;
border-left-width: 1px;
border-right-width: 1px;
border-bottom-width: 0px;
}
#header {
margin: 0 auto;
width: 698px;
height: 78px;
text-align: center;
float: center;
border-width: 0px;
background-image: url('images/header_bg.gif');
background-repeat: repeat-x;
}
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{$list_name} - {$header}</title>
<link rel="stylesheet" type="text/css" media="screen" href="SmoothBlue.css" />
<script language="javascript">
function out(username)
{
image = new Image();
image.src= '{$list_url}/index.php?a=out&u=' + username;
}
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="images/logo.gif" border="0" alt="Topsite" />
</div>
</div>
</body>
</html>
I have no idea how I can fix this issue and I'd appreciate any help in solving it.
Thanks,
Daniel
| 
|  | |
04-16-2006, 08:37 AM
|
· #2 | | Steven Name: Steven Gibbons Location: United Kindom Join Date: Aug 2005
Posts: 1,506
NP$: 40.00 ( Donate)
| have you tried using the HTML Code: <center>blah</center>
tags round them and the HTML Code: <div align="center">
? | |
| | |
04-16-2006, 09:23 AM
|
· #3 | | New Member | Well, I'm trying to avoid using the <center> tag as it's an outdated element and I don't quite understand how I could use <div align="center"> to fix my centering issue. | |
| | |
04-16-2006, 12:25 PM
|
· #4 | | Steven Name: Steven Gibbons Location: United Kindom Join Date: Aug 2005
Posts: 1,506
NP$: 40.00 ( Donate)
| Well you could also i think, it might be gettin outdated but use: HTML Code: <body align="center">
| |
| | |
04-16-2006, 06:20 PM
|
· #5 | Name: Rhett Location: Coffs H, Australia Join Date: Jul 2005
Posts: 3,106
NP$: 47.00 ( Donate)
| What I'd suggest doing is simply making the wrapper use the background image rather than the body.
Try using this css instead of yours: Code: body {
background-color: #EEEEEE;
color: #6F6F6F;
font-size: 11pt;
font-family: arial;
text-align: center;
min-width: 698px;
}
#wrapper {
background-image: url('images/bg.gif');
background-repeat: repeat-y;
background-position: center;
margin: 0 auto;
width: 698px;
height: 900px;
text-align: center;
border-style: solid;
border-color: 6C6C6C;
border-top-width: 0px;
border-left-width: 1px;
border-right-width: 1px;
border-bottom-width: 0px;
}
#header {
margin: 0 auto;
width: 698px;
height: 78px;
text-align: center;
float: center;
border-width: 0px;
background-image: url('images/header_bg.gif');
background-repeat: repeat-x;
}
If that doesn't work, could you please upload your files to a webpage so that I can see exactly what you want.
Hope it helps.
Thanks,
Rhett.
__________________
<?php if(1===1){ $computer="fine."; }else{ $computer="broken."; } echo "Your computer is ".$computer; ?>
| |
| | |
04-16-2006, 09:36 PM
|
· #6 | | New Member | -Edit: Problem solved  -
Well, I managed to fix the centering issue earlier today but my attempt at a 100% height div that stretches based on it's content was a failure. According to the many articles that I read, it's impossible to achieve this except with the use of javascript but the code is still very buggy because of the way some browsers handle some of the code. Seeing as I've only started the style, I'm going to attempt to make some changes to the original design so that it will at least be achievable. However, I've encountered another problem. I'm attempting to absolute position a div within another div. For some reason, instead of beeing positioned in the top left corner of the containing div, it is located in the top left corner of the page.
Here is a screenshot of what's happening: 
Here's my code: Code: html, body {
height: 100%;
}
body {
background-color: #EEEEEE;
color: #6F6F6F;
font-size: 11pt;
font-family: arial;
text-align: center;
min-width: 698px;
margin: 0;
padding: 0;
text-align: center;
}
.container {
margin: 0 auto;
text-align: center;
width: 760px;
background: #EEEEEE;
background-image: url('images/bg.gif');
background-repeat: repeat-y;
background-position: center;
overflow: visible;
}
.wrapper {
margin: 0 auto;
width: 698px;
text-align: center;
border-style: solid;
border-color: 6C6C6C;
border-top-width: 0px;
border-left-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
overflow: visible;
}
.header {
margin: 0;
padding: 0;
width: 698px;
height: 78px;
text-align: center;
float: center;
border-width: 0px;
background-image: url('images/header_bg.gif');
background-repeat: repeat-x;
}
/* ------------------------ Navigation styles ------------------------ */
.nav {
margin: 0;
width: 476px;
height: 30px;
text-align: center;
border-width: 0px;
background-image: url('images/nav_bg.gif');
background-repeat: repeat-x;
position: absolute;
left: 0px;
top: 78px;
}
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{$list_name} - {$header}</title>
<link rel="stylesheet" type="text/css" media="screen" href="SmoothBlue.css" />
<script language="javascript">
function out(username)
{
image = new Image();
image.src= '{$list_url}/index.php?a=out&u=' + username;
}
</script>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="header">
<img src="images/logo.gif" border="0" alt="Topsite" />
</div>
<div class="nav">a</div>
a<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />a
</div>
</div>
</body>
</html>
I have no clue what could possibly be causing this as I've never encountered this problem before. Any help would be appreciated as always.
Thanks,
Daniel
Last edited by Daniel Exe : 04-17-2006 at 08:39 AM.
| |
| | 
Posting Rules
| You may not post new threads You may not post replies You may not post attachments You may not edit your posts
HTML code is Off | | | |
