I need a little help with some CSS

benparko · Sep 29, 2010

Hey

I am helping my girlfriend make a blog and doing some basic HTML and CSS to customise it. However, I cannot seem to center the banner. It's off to the right.

The blog is at BenAndIdaBlog

If someone could PLEASE edit this style sheet to fix the banner so it's centered that would help me out a lot!

Thanks!!

Once you're done with editing the code, just reply with the new code.

Here's the code:

Code:

body {
  font: 12px/16px Verdana, Arial, Sans-serif;
  background: url('bg.jpg');
}

a {
  color: #068991;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

h1,h3,h4,h5,h6, div.navheader, div.default {
  font-family: Verdana, Arial, Sans-Serif;
  color: #222;
}

div#side h3 div.navheader {
  color: #666;
}

div#wrapper {
  margin: 20px auto 20px auto;
  width: 800px;
  padding: 10px;
  background-color: #FFF;
}

div#header {
float: left;
clear: left;
display: inline;
width: 1000px;
height: 400px;
margin-top: 20px;
background-image: url(http://benandida.blogg.se/images/2010/banner_109823489.jpg)

}

div#content {
  float: left;
  padding: 0 20px 20px 20px;
  width: 550px;
}

div#side {
  width: 180px;
  padding: 0;
  float: right;
}

div#side div.navheader, div#side h4, div.default {
  padding: 20px 0 5px 0;
  font-size: 18px;
  font-weight: normal;
}

div#foot {
  background-color: #CCC;
  height: 40px;
  padding: 20px;
}

/* hide calender - doesn't work anyway */
div#side div#calendar {
  display: none;
}

div#header h1 {
  font-size: 45px;
  font-weight: normal;
}

div#header h1 a {
  text-decoration: none;
  color: #FFF;
}

div#header h2 {
  font-size: 12px;
  margin-top: 15px;
  color: #FFF;
}

div#content h3 {
  font-size: 24px;
  font-weight: normal;
  margin: 20px 0 20px 0;
}

div#content div.entrybody {
  margin: 10px 0 20px 0;
}

div#content div.entrybody ul {
  margin: 10px 0 10px 15px;
}

div#content div.entrybody li {
  font-size: 12px;
  color: #222;
  list-style-type: square;
}

div.default {
  margin: 0 0 15px 0;
}

div.nav input {
  margin-right: 5px;
}

div.nav ul {
  margin: 5px 0 5px 5px;
  padding: 0;
}
div.nav li {
  list-style: none;
  padding: 2px 0;
}

div.nav ul li strong {
  line-height: 37px;
  font-size: 11px;
}

div.entrymeta {
  font-size: 11px;
  margin: 0 0 20px 0;
  padding: 10px 0 10px 0;
  color: #666;
  line-height: 7px;
}

div.commentheader, p.commenttext {
  margin: 0 0 0 15px;
  font-weight: bold;
  color: #222;
}

p.commenttext {
  font-weight: normal;
}

div.commentmeta {
  color: #666;
  margin: 5px 0 20px 15px;
  font-size: 11px;
}

form.commentform {
  font-size: 11px;
}

form.commentform input, form.commentform textarea {
 margin: 0 5px 10px 0;
 vertical-align: middle;
}

input.formbutton {
 margin-top: 10px;
}

.separator {
  display:none;
}

.subside {}

.image {
  border: 0;
  margin: 0 6px 6px 0;
}

.thumbnail {
  margin: 0 6px 6px 0;
}

.video {
  padding: 0;
}

.xmlButton {
  border: 1px solid;
  border-color: #FC9 #630 #330 #F96;
  padding: 0 3px;
  font: bold 10px Verdana, Arial, Helvetica, Sans-serif;
  color: #FFF;
  background: #F60;
  text-decoration: none;
  margin:0;
}

.clear {
  clear: both;
}

McYukon · Sep 29, 2010

The problem is that your wrapper div is only 800 pixel wide, while the header div is 1000 wide. However, because the header div is contained by the wrapper div it first centres the wrapper div. It then tries to centre the header div, but it fails because it tries to centre 1000 pixels inside a 800 pixel wide div.

The header div inside a 800 pixel wide wrapper div.
800px.jpg

The header div inside a 1000 pixel wide wrapper div.
1000px.jpg

So for the banner to be centred the way you have built up your site you need to edit the wrapper div:

Code:

div#wrapper {
  margin: 20px auto 20px auto;
  width: 1000px;
  padding: 10px;
  background-color: #FFF;
}

BTW: I'm using CSSEdit in the pictures. I use the demo for one reason, it's X-ray mode (the blue borders that give you a visual picture on how your css code looks like).
In the demo mode you can edit the code and see the changes immediately although you can't save your changes directly in the application. You can copy/paste the changes to your text editor though.
MacRabbit - CSSEdit - Web 2.0 in Style

benparko · Sep 30, 2010

Thanks mate, can't believe I missed that! I think I tried it but forgot to delete cookies when I refreshed the page to see results.

Yeah I use a similar tool built into Firefox, it's called FireBug. It does HTML too. A neat little tool I've been using.

Thanks again mate.

-Ben

benparko · Sep 30, 2010

Hey McYukon,

By any chance, do you think you could help me with ONE more thing? I want to change the background colour to a grey (HTML colour code #666). But I want a stripe down the middle (like in most blogs where the text is written) to be white (#FFF).

Here's a link to another blog that has the white stripe down the middle of the page, but has a different colour background:

Would you be able to help me out with just this last thing?

If I change the following code:
from this:

Code:

body {
  font: 12px/16px Verdana, Arial, Sans-serif;
  background: url('bg.jpg');
}

to this:

Code:

body {
  font: 12px/16px Verdana, Arial, Sans-serif;
  background: #FFF;
}

The WHOLE page goes grey without having the white tripe down the middle.

CrimsonRequiem · Sep 30, 2010

benparko said:
Hey McYukon,

By any chance, do you think you could help me with ONE more thing? I want to change the background colour to a grey (HTML colour code #666). But I want a stripe down the middle (like in most blogs where the text is written) to be white (#FFF).

Here's a link to another blog that has the white stripe down the middle of the page, but has a different colour background:

Would you be able to help me out with just this last thing?

If I change the following code:
from this:

Code:

body { font: 12px/16px Verdana, Arial, Sans-serif; background: url('bg.jpg'); }

to this:

Code:

body { font: 12px/16px Verdana, Arial, Sans-serif; background: #FFF; }

The WHOLE page goes grey without having the white tripe down the middle.

The white "stripe" down the middle of the page is actually a div. It used a separation device from the rest of the content.
The white "stripe" is named wrapper in the website that you link to.

Code:

#wrapper {
clear:none;
margin: 30px auto;
padding: 10px 30px 0px;
width: 800px;
background-color: white;
background-image:  url() no-repeat center center;);background-repeat: no-repeat;
background-position: left top;
}

benparko · Sep 30, 2010

Hey mate,

Thanks for the reply. However, that doesn't seem to do the trick. Would you be able to edit the code as I pasted the whole code? And then past the full style sheet here so I can just copy the whole thing to my website?

Thanks so much for the help!

Greately appreciated!

Regards,

-Ben

CrimsonRequiem · Sep 30, 2010

benparko said:
Hey mate,

Thanks for the reply. However, that doesn't seem to do the trick. Would you be able to edit the code as I pasted the whole code? And then past the full style sheet here so I can just copy the whole thing to my website?

Thanks so much for the help!

Greately appreciated!

Regards,

-Ben

No you wouldn't be able to just use the code as is because you would need to declare "wrapper" as the name of one of your div tags.

You would do that with this code:

Code:

<div id="wrapper"></div>

All of your content would go inside that div tag.

benparko · Sep 30, 2010

Sorry, but I don't really understand. Could you please edit the following code and re-post it back to me so I can just copy/paste the new code into my site. I just want the white "stripe"

Here's the code:

Code:

body {
  font: 12px/16px Verdana, Arial, Sans-serif;
  background: url('bg.jpg');
}

a {
  color: #068991;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

h1,h3,h4,h5,h6, div.navheader, div.default {
  font-family: Verdana, Arial, Sans-Serif;
  color: #222;
}

div#side h3 div.navheader {
  color: #666;
}

div#wrapper {
  margin: 20px auto 20px auto;
  width: 1000px;
  padding: 10px;
  background-color: #FFF;
}

div#header {
float: left;
clear: left;
display: inline;
width: 1000px;
height: 400px;
margin-top: 20px;
background-image: url(http://benandida.blogg.se/images/2010/banner_109823489.jpg)

}

div#content {
  float: left;
  padding: 0 20px 20px 20px;
  width: 550px;
}

div#side {
  width: 180px;
  padding: 0;
  float: right;
}

div#side div.navheader, div#side h4, div.default {
  padding: 20px 0 5px 0;
  font-size: 18px;
  font-weight: normal;
}

div#foot {
  background-color: #CCC;
  height: 40px;
  padding: 20px;
}

/* hide calender - doesn't work anyway */
div#side div#calendar {
  display: none;
}

div#header h1 {
  font-size: 45px;
  font-weight: normal;
}

div#header h1 a {
  text-decoration: none;
  color: #FFF;
}

div#header h2 {
  font-size: 12px;
  margin-top: 15px;
  color: #FFF;
}

div#content h3 {
  font-size: 24px;
  font-weight: normal;
  margin: 20px 0 20px 0;
}

div#content div.entrybody {
  margin: 10px 0 20px 0;
}

div#content div.entrybody ul {
  margin: 10px 0 10px 15px;
}

div#content div.entrybody li {
  font-size: 12px;
  color: #222;
  list-style-type: square;
}

div.default {
  margin: 0 0 15px 0;
}

div.nav input {
  margin-right: 5px;
}

div.nav ul {
  margin: 5px 0 5px 5px;
  padding: 0;
}
div.nav li {
  list-style: none;
  padding: 2px 0;
}

div.nav ul li strong {
  line-height: 37px;
  font-size: 11px;
}


div.entrymeta {
  font-size: 11px;
  margin: 0 0 20px 0;
  padding: 10px 0 10px 0;
  color: #666;
  line-height: 7px;
}

div.commentheader, p.commenttext {
  margin: 0 0 0 15px;
  font-weight: bold;
  color: #222;
}

p.commenttext {
  font-weight: normal;
}

div.commentmeta {
  color: #666;
  margin: 5px 0 20px 15px;
  font-size: 11px;
}

form.commentform {
  font-size: 11px;
}

form.commentform input, form.commentform textarea {
 margin: 0 5px 10px 0;
 vertical-align: middle;
}

input.formbutton {
 margin-top: 10px;
}

.separator {
  display:none;
}

.subside {}

.image {
  border: 0;
  margin: 0 6px 6px 0;
}

.thumbnail {
  margin: 0 6px 6px 0;
}

.video {
  padding: 0;
}

.xmlButton {
  border: 1px solid;
  border-color: #FC9 #630 #330 #F96;
  padding: 0 3px;
  font: bold 10px Verdana, Arial, Helvetica, Sans-serif;
  color: #FFF;
  background: #F60;
  text-decoration: none;
  margin:0;
}

.clear {
  clear: both;
}

iframe {
visibility: hidden; !important
height: 0px; !important
}

#flashad {top:2000px;position: fixed;filter:alpha(opacity=0);opacity:0;}

If you could edit that code so I have the white "stripe" I would really appreciate it.

Thanks mate!!!

-Ben

McYukon · Sep 30, 2010

There is more than one way to make that center background stripe.
The first way is to use an image that has the center color, this allows you to use textured backgrounds.
Here is the image you need for this approach. http://f.cl.ly/items/2bff1a8e3df36199a67a/background.jpg

Code:

body {
  font: 12px/16px Verdana, Arial, Sans-serif;
  background: url('http://f.cl.ly/items/2bff1a8e3df36199a67a/background.jpg');
  background-color: #666;
  background-repeat: repeat-y;
  background-position: center;
}

a {
  color: #068991;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

h1,h3,h4,h5,h6, div.navheader, div.default {
  font-family: Verdana, Arial, Sans-Serif;
  color: #222;
}

div#side h3 div.navheader {
  color: #666;
}

div#wrapper {
  margin: 20px auto 20px auto;
  width: 1000px;
  padding: 10px;
}

div#header {
float: left;
clear: left;
display: inline;
width: 1000px;
height: 400px;
margin-top: 20px;
background-image: url(http://benandida.blogg.se/images/2010/banner_109823489.jpg)

}

div#content {
  float: left;
  padding: 0 20px 20px 20px;
  width: 550px;
}

div#side {
  width: 180px;
  padding: 0;
  float: right;
  padding-right: 60px;
}

div#side div.navheader, div#side h4, div.default {
  padding: 20px 0 5px 0;
  font-size: 18px;
  font-weight: normal;
}

div#foot {
  background-color: #CCC;
  height: 40px;
  padding: 20px;
}

/* hide calender - doesn't work anyway */
div#side div#calendar {
  display: none;
}

div#header h1 {
  font-size: 45px;
  font-weight: normal;
}

div#header h1 a {
  text-decoration: none;
  color: #FFF;
}

div#header h2 {
  font-size: 12px;
  margin-top: 15px;
  color: #FFF;
}

div#content h3 {
  font-size: 24px;
  font-weight: normal;
  margin: 20px 0 20px 0;
}

div#content div.entrybody {
  margin: 10px 0 20px 0;
}

div#content div.entrybody ul {
  margin: 10px 0 10px 15px;
}

div#content div.entrybody li {
  font-size: 12px;
  color: #222;
  list-style-type: square;
}

div.default {
  margin: 0 0 15px 0;
}

div.nav input {
  margin-right: 5px;
}

div.nav ul {
  margin: 5px 0 5px 5px;
  padding: 0;
}
div.nav li {
  list-style: none;
  padding: 2px 0;
}

div.nav ul li strong {
  line-height: 37px;
  font-size: 11px;
}


div.entrymeta {
  font-size: 11px;
  margin: 0 0 20px 0;
  padding: 10px 0 10px 0;
  color: #666;
  line-height: 7px;
}

div.commentheader, p.commenttext {
  margin: 0 0 0 15px;
  font-weight: bold;
  color: #222;
}

p.commenttext {
  font-weight: normal;
}

div.commentmeta {
  color: #666;
  margin: 5px 0 20px 15px;
  font-size: 11px;
}

form.commentform {
  font-size: 11px;
}

form.commentform input, form.commentform textarea {
 margin: 0 5px 10px 0;
 vertical-align: middle;
}

input.formbutton {
 margin-top: 10px;
}

.separator {
  display:none;
}

.subside {}

.image {
  border: 0;
  margin: 0 6px 6px 0;
}

.thumbnail {
  margin: 0 6px 6px 0;
}

.video {
  padding: 0;
}

.xmlButton {
  border: 1px solid;
  border-color: #FC9 #630 #330 #F96;
  padding: 0 3px;
  font: bold 10px Verdana, Arial, Helvetica, Sans-serif;
  color: #FFF;
  background: #F60;
  text-decoration: none;
  margin:0;
}

.clear {
  clear: both;
}

iframe {
visibility: hidden; !important
height: 0px; !important
}

#flashad {top:2000px;position: fixed;filter:alpha(opacity=0);opacity:0;}

The other way is to do this without an image.
I've attached an example on how to do this as you will need to add another div which contains the background color.

View attachment Example.zip