I am trying to get my webpage to expand/center in all browser windows. Basically I need it to center itself within any web browser. Can someone advise me on where I need to add code, the actual coding that I need to incorporate, before the body, after the body? I got my background to move by adding "background-position:top;" on my psd2css.css page with my background or (layout.css) but I can't seem to get my blocks to move with it. I can copy my existing code if that would help. I have been looking and trying everything, but nothing seems to work? Please help asap! I would really appreciate it. Thanks!!!!!
//here is where I added the background-position: top;//
body{
/* This is the background image to the entire page that you
* get because of the layer '_bodybg' that you created.
* If you would like this layer to stay static relative to the
* browser window (you don't want it to scroll with your content)
* just add the word 'fixed' to the line below (before the ;). */
background: url(Layer-1.png) ;
background-color: #201407;
background-repeat: no-repeat;
background-position: top;
}
Comments
!!!!!
see here then apply that rule to your outermost element with a fixed width.
.dan. is the New Zealand Drupal Developer working on Government Web Standards
Thank you that was a great link
Can I ask you one more basic question. What exactly do you mean "outermost element". And then do you mean "width: fixed;"??
See the CSS tutorials
all depends on your actual theme! Inside your body is probably a [div class=wrapper] or something. I can't guess if you don't post your question against the issue queue of the actual theme project.
Anyway, that div probably has a width=900px or something. That's the div that needs the other centering css things applied to it.
You are best to be asking the theme developer though, if you can't find the right spot to change.
.dan. is the New Zealand Drupal Developer working on Government Web Standards
Thank you for your help
Your solution was perfect. I got it contained and centered, but now everything is inverted. The footer is at the top and so on.... any ideas how I can fix that??? You are awesome by the way.
This is my code
body{
/* This is the background image to the entire page that you
* get because of the layer '_bodybg' that you created.
* If you would like this layer to stay static relative to the
* browser window (you don't want it to scroll with your content)
* just add the word 'fixed' to the line below (before the ;). */
background: url(Layer-1.png);
background-color: #FFFFFF;
background-repeat: no-repeat;
background-position:top;
text-align:center;
margin: 0;
padding: 0;
#container {
margin: 0 auto;
width:1024px;
background-position:top;
#container {
margin:0 auto;
width:1024px;
text-align:left;
}
/* You named this layer footer_drupal */
#Layer-2 {
position: absolute;
left: +178px;
top: +733px;
width: 587px;
height: 25px;
z-index: 2;
}
/* You named this layer regionright_drupal */
#Layer-3 {
position: absolute;
left: +583px;
top: +564px;
width: 182px;
height: 156px;
z-index: 3;
}
/* You named this layer regionmiddle_drupal */
#Layer-4 {
position: absolute;
left: +381px;
top: +564px;
width: 182px;
height: 156px;
z-index: 4;
}
/* You named this layer regionleft_drupal */
#Layer-5 {
position: absolute;
left: +177px;
top: +564px;
width: 182px;
height: 156px;
z-index: 5;
}
/* You named this layer content_drupal */
#Layer-6 {
position: absolute;
left: +170px;
top: +255px;
width: 590px;
height: 283px;
z-index: 6;
overflow: auto;
}
/* You named this layer left_drupal */
#Layer-7 {
position: absolute;
left: +15px;
top: +241px;
width: 129px;
height: 509px;
z-index: 7;
}
/* You named this layer slogan_drupal */
#Layer-8 {
position: absolute;
left: +16px;
top: +210px;
width: 767px;
height: 50px;
z-index: 8;
}
/* You named this layer secondarylinks_drupal */
#Layer-9 {
position: absolute;
left: +206px;
top: +181px;
width: 734px;
height: 25px;
z-index: 9;
}
/* You named this layer primarylinks_drupal */
#Layer-10 {
position: absolute;
left: +28px;
top: +6.5px;
width: 750px;
height: 25px;
z-index: 10;
}
/* Here are some examples of how you might want to change the
* look and behavior of the links on your page. Some examples for
* further customization are included in comments. */
a { cursor: pointer; }
a:link { color: #35210C; }
a:visited { color: #35210C; }
a:hover {
color: #666666;
text-decoration: none; /* font-weight: bold; */
}
/* Some extra stuff here to give you some ideas and examples
* about how else you can customize your Drupal theme.
*
* A great tool to use to figure out what else you want to
* put here is Firebug for Firefox. Use psd2css Online
* to generate your theme, install it, then while looking
* at your pages, use Firebug to 'inspect' the elements that
* you want to change. Add or modify the changes here and
* refresh to see your changes. */
/* Text color for most text rendered by Drupal */
body { color: #35210C; }
/* The login form is center aligned by default, this puts it to the left */
#user-login-form { text-align: left; }
/* Color of the text for the login form */
.form-item label { color: #35210C; }
/* Color of the active list element links */
li a.active { color: #35210C; }
:(
It's really hard to do this telepathically - without any idea of what your theme actuallly is, but if that's a real paste (Please use <code> tags) then there is a syntax error where you have
... and that sort of thing often can destroy your layout.
.dan. is the New Zealand Drupal Developer working on Government Web Standards
If you're still interested...
Here's the link http://www.lgclawoffice.com. We have it working, but setting up the container did something to the layout. Thanks for all your help. You pointed us in the right direction.
...
...
tools
You'll need to start using the tools: css validator.
Trying to debug layout problems on invalid code will drive you insane. Fix the easy mistakes first.
Some of those warnings can be ignored (undefined is OK) but you MUST fix those parse errors.
... and turn off css aggregation (under performance in admin) when debugging!
.dan. is the New Zealand Drupal Developer working on Government Web Standards