16 replies [Last post]
VisMech
VisMech's picture
Offline
Regular
NYC
Last seen: 12 years 10 weeks ago
NYC
Timezone: GMT-4
Joined: 2010-05-04
Posts: 13
Points: 16

Hi, I'm newbie with css and stuck on getting a div to center.

page in context:
<a href="http://www.thecountingroombk.com/menu_test2.html" rel="nofollow">http://www.thecountingroombk.com/menu_test2.html</a>

the scrolling frame of content is positioned left and I want it to float center. Cannot figure out why it will not budge.

thanks in advance!
-rob

VisMech
VisMech's picture
Offline
Regular
NYC
Last seen: 12 years 10 weeks ago
NYC
Timezone: GMT-4
Joined: 2010-05-04
Posts: 13
Points: 16

PS

ps i have tried this mark up already without resolve....

margin: 0px auto;

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 49 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

its because you designed your

its because you designed your layout with absolute positioning. One should avoid using css positioning until they fully grasp how they behave. try laying out the page using floats with margins. oh, and validate your code, you have errors

Panda
Panda's picture
Offline
Enthusiast
UK
Last seen: 12 years 7 weeks ago
UK
Timezone: GMT+1
Joined: 2010-04-25
Posts: 98
Points: 110

There are two ways I can

There are two ways I can think to do this, one is to go with this:

.divScroll-1 {
	position:relative;
	height:500px;
	width:1000px;
	top:127px;
	margin-left:auto;
	margin-right:auto;
	overflow:scroll;
	overflow-x:hidden;
	border: thin solid #BBB353;
	background-image:url('images/add_bg.png');
	background-repeat:repeat;
	padding-top: 10px;
	z-index: 11;
}

The other is:

.divScroll-1 {
	position:absolute;
	height:500px;
	width:1000px;
	top:127px;
        left:50%;
	margin-left: -500px;
	overflow:scroll;
	overflow-x:hidden;
	border: thin solid #BBB353;
	background-image:url('images/add_bg.png');
	background-repeat:repeat;
	padding-top: 10px;
	z-index: 11;
}

The first is probably the effect your after...

VisMech
VisMech's picture
Offline
Regular
NYC
Last seen: 12 years 10 weeks ago
NYC
Timezone: GMT-4
Joined: 2010-05-04
Posts: 13
Points: 16

Thanks for the reply! I got

Thanks for the reply! I got it to work using the position: relative; option.

now for some reason the background hiccups when you click on the menu links to browse the menu.

any thoughts?

VisMech
VisMech's picture
Offline
Regular
NYC
Last seen: 12 years 10 weeks ago
NYC
Timezone: GMT-4
Joined: 2010-05-04
Posts: 13
Points: 16

Thanks for the reply! I got

Thanks for the reply! I got it to work using the position: relative; option.

now for some reason the background hiccups when you click on the menu links to browse the menu.

any thoughts?

Panda
Panda's picture
Offline
Enthusiast
UK
Last seen: 12 years 7 weeks ago
UK
Timezone: GMT+1
Joined: 2010-04-25
Posts: 98
Points: 110

I have some thoughts on this

You have extra tags, deprecated code and I found sorting out what does what to what a bit difficult to track down. In the end I found it easier just to write out some new code for you. Also, your background image is a lot bigger than it needs to be. I would convert it to a .jpg and set the quality to around 80%. This will bring its size down by about 1/2 to 2/3's and give you no appreciable loss of quality.

I feel a bit bad pasting the code, as it will probably serve you a lot better to research this on your own. I would say, as you look through this code, if there is something you want clarity on, ask about it.

I didn't test it for full browser support etc, but it should get you in the right direction. I did put this together quickly so if there are any mistakes or areas to clean up anyone can comment.

If you want to see a working model I can post it to my web server and give you a link, just let me know...

This is a reconstruct of your menu page:

CSS:

/*CSS Reset*/
 
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
  padding: 0;
  margin: 0;
  font-size: 100%;
  font-weight: normal;
}
 
table { 
  border-collapse: collapse; 
  border-spacing: 0; 
}
 
td, th, caption { 
  font-weight: normal; 
  text-align: left; 
}
 
img, fieldset { 
  border: 0; 
}
 
ol { 
  padding-left: 1.4em; 
  list-style: decimal; 
}
 
ul { 
  padding-left: 1.4em; 
  list-style:square; 
}
 
q:before, q:after { 
  content:''; 
}
 
a {
  text-decoration: none;
}
 
/*End Reset*/
 
/*General Layout*/
 
body {
  margin: 0;
  padding: 0;
  font-family:Georgia, "Times New Roman", Times, serif;
  background-color: #B45;
}
 
#wrapper {
  position: relative;
  z-index: 10;
}
 
#header  {
  position: relative;
  top: 0px;
  left: 0px;
  height: 100px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0; 
 
}
 
#bgimg img {
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
 
}
 
@media screen and (max-width: 1024px){
  #bgimg img {
    left: 50%;
    margin-left: -512px; }
}
 
/*End General Layout*/
 
/*Logo*/
 
#header h1 a {
  position: absolute;
  margin-top: 10px;
  height: 100px;
  width: 233px;
  background: transparent url(images/logo.png) top left no-repeat;
}
 
#header h1 span{
  visibility: hidden;
}
 
/*Main Nav*/
 
#header #mainnav ul {
  float: right;
  margin: 0;
  padding: 0;
 
}
 
#header #mainnav ul li {
  float: left;
  margin-top: 3px;
  display: inline-block;
  text-transform: uppercase;
  font-size: .8em;
  list-style-type: none;
}
 
#header #mainnav li.mnline {
  border-right: #fff solid 2px;
}
 
#header #mainnav a {
  padding-left: 6px;
  padding-right: 6px;
  color: #BBB353;
}
 
#header #mainnav a:hover {
  color: #bbb;
}
 
/*Content*/
 
h2#label {
  position: relative;
  top: 18px;
  left: 50%;
  height: 27px;
  width: 82px;
  margin-left: -41px;
  background: transparent url(images/title_menu.png) top left no-repeat;
}
 
h2#label span {
  visibility: hidden;
}
 
#wrapper #content {
  position: fixed;
  top: 150px;
  left: 50%;
  margin-left: -500px;
  width: 1000px;
  height: 500px;
  overflow-x: hidden;
  overflow:  auto;
  border: 1px solid #BBB353;
  text-align: center;
  background: transparent url(images/nav_bg25.png) top left repeat;
}
 
 
 
/*Footer*/
 
#footer {
  position: fixed;
  bottom: 0;
  margin: 0 auto;
  padding-top: 15px;
  width: 100%;
  font-size: .8em;
  color: #fff;
  text-align: center;
  background: transparent url(images/footer_bg.png) top left repeat;
}
 
#footer #dbg {
  background: transparent url(images/footer_bg.png) top left repeat;
}
 
#footer p span {
  font-size: .8em;
}
 
#footer a {
  color: #BBB353;
}
 
#footer a:hover {
  color: #fff;
}

HTML:

<body id="menu">
 
<div id="wrapper">
 
<!--Change this href to the homepage-->
 
  <div id="header"><h1><a href="home.html"><span>The Counting Room</span></a></h1>
 
  <div id="mainnav">
    <ul>
      <li class="mnline"><a href="menu.html">Menu</a></li>
      <li class="mnline"><a href="#">About</a></li>
      <li class="mnline"><a href="#">Images</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
 
  </div>
    <h2 id="label"><span>Menu</span></h2>
  <div id="content">
 
 
<!--I would use a table to set out the menu items
 
 
 
   CONTENT
 
 
   -->
 
  </div>
 
  <div id="footer">
    <div id="dbg">
      <p>44 Berry Street Brooklyn, NY 11211 | p:(718) 599-1860</p>
      <p><span>&copy;The Counting Room. All Rights Reserved. Site:<a href="#">VM</a></span></p>
    </div>
  </div>
 
 
 
</div>
 
<div id="bgimg">
<img src="images/bg_2.jpg" alt="" />
</div>
 
</body>

VisMech
VisMech's picture
Offline
Regular
NYC
Last seen: 12 years 10 weeks ago
NYC
Timezone: GMT-4
Joined: 2010-05-04
Posts: 13
Points: 16

I'm not sure if I have it

I'm not sure if I have it working correctly.

Does this still keep the function of the background scaling to fit the browser intact?

Thanks so much for the advice.

Panda
Panda's picture
Offline
Enthusiast
UK
Last seen: 12 years 7 weeks ago
UK
Timezone: GMT+1
Joined: 2010-04-25
Posts: 98
Points: 110

Yes it does. This code sets

Yes it does.

This code sets the zoom action of the img when the browser window is at 1024px or wider, and says to the browser don't let the img width equal less than 1024px and let the height equal the browser height:

#bgimg img {
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}

And this code says, when the browser is less than 1024px wide, center the img and let the edges float off the left and right edge:

@media screen and (max-width: 1024px){
  #bgimg img {
    left: 50%;
    margin-left: -512px; }
}

You can change the dimensions by adjusting 3 numbers. If you want the zoom feel to start at a smaller browser width, adjust the min and max width to a smaller number and the margin left to a negative value half the width. the min and max width must be the same in order for the effect to work correctly. The smaller the width the more distorted the img will be as the aspect changes. The larger it is the higher the risk of views not seeing the full img. You can play with these number to find the happy medium you're after.

Here is a link to a working copy of what I did. Just makes it easier for you to see it working. I'll take this down in 5 days, or earlier if you ask.

http://www.pd-1.com/trialsite/pages/menu.html

O, and the bg img is converted to a .jpg at 80% quality.

VisMech
VisMech's picture
Offline
Regular
NYC
Last seen: 12 years 10 weeks ago
NYC
Timezone: GMT-4
Joined: 2010-05-04
Posts: 13
Points: 16

Interesting to compare. In

Interesting to compare. In the updated version via your code there is a margin on the left in the background. what controls that glitch?

http://thecountingroombk.com/menu_test3.html

also this tag is not supposed to be there the doubled up bg was a mistake.
so when you view in the updated version you will see it was removed.

#footer #dbg {
  background: transparent url(../images/footer_bg.png) top left repeat;
}

Panda
Panda's picture
Offline
Enthusiast
UK
Last seen: 12 years 7 weeks ago
UK
Timezone: GMT+1
Joined: 2010-04-25
Posts: 98
Points: 110

Hmm, if I understand, you are

Hmm, if I understand, you are asking what controls the glitch of having a -margin defined for the bg img? The -margin is conditional. It will only be applied when the browser width is less than 1024px. @media screen and... sets the condition for the css immediately following to apply. It doesn't create a conflict however, it overrides any preceding css when the condition is met. This is key, what comes last rules in css. I hope this makes sense...

@media screen and (max-width: 1024px)

The above code is essential to the functioning of the background image in this example, so if you use it, make sure you don't comment it out. The @media code is the same code you would use to designate other forms of media, i.e. print, mobile, etc... The cool thing about this is that it can be used to specify css to various browser widths, as it is doing here. To the extent you could actually define a completely different style sheet for your site based on the browser width. Quite cool imho...

VisMech
VisMech's picture
Offline
Regular
NYC
Last seen: 12 years 10 weeks ago
NYC
Timezone: GMT-4
Joined: 2010-05-04
Posts: 13
Points: 16

Ahh, I thought that snippet

Ahh,

I thought that snippet was a comment and nixed it. It is restored back into the css but now the page loses most the other assets?? is there a bracket or a div missing?

http://thecountingroombk.com/menu_test3.html

VisMech
VisMech's picture
Offline
Regular
NYC
Last seen: 12 years 10 weeks ago
NYC
Timezone: GMT-4
Joined: 2010-05-04
Posts: 13
Points: 16

Ahh, I thought that snippet

Ahh,

I thought that snippet was a comment and nixed it. It is restored back into the css but now the page loses most the other assets?? is there a bracket or a div missing?

http://thecountingroombk.com/menu_test3.html

Panda
Panda's picture
Offline
Enthusiast
UK
Last seen: 12 years 7 weeks ago
UK
Timezone: GMT+1
Joined: 2010-04-25
Posts: 98
Points: 110

Yeah, there needs to be a

Yeah, there needs to be a closing bracket on this bit of code:

@media screen and (max-width: 1024px){
  #bgimg img {
    left: 50%;
    margin-left: -512px; }

It has two openers and one closer...

I would say, you will probably want to serve a different style for people who want to print. This is one reason why I was suggesting that the menu items be tabled, lots of work to start but long term it will be easier to maintain and serve to your users. I often will print things like a menu... It's not going to be printable as it is, it would print the image behind the text, which is a huge waist of ink and doesn't look very good. If it's printed without the image it will be white text on white paper.

VisMech
VisMech's picture
Offline
Regular
NYC
Last seen: 12 years 10 weeks ago
NYC
Timezone: GMT-4
Joined: 2010-05-04
Posts: 13
Points: 16

yeah, i figured that was the

yeah, i figured that was the detail. unfortunately still no avail.

how else could i trouble shoot?

thanks

Panda
Panda's picture
Offline
Enthusiast
UK
Last seen: 12 years 7 weeks ago
UK
Timezone: GMT+1
Joined: 2010-04-25
Posts: 98
Points: 110

On your live link above it

On your live link above it still only has one closing bracket.

@media screen and (max-width: 1024px){
  #bgimg img {
    left: 50%;
    margin-left: -512px; }

It needs to look like this:

@media screen and (max-width: 1024px){
  #bgimg img {
    left: 50%;
    margin-left: -512px; } 
}

VisMech
VisMech's picture
Offline
Regular
NYC
Last seen: 12 years 10 weeks ago
NYC
Timezone: GMT-4
Joined: 2010-05-04
Posts: 13
Points: 16

ah-ha! that looked at first

ah-ha! that looked at first like a mistake and i edited it out because it was in bold red in the css file. it works now.

the print issue i understand. perhaps a print friendly pdf link on the site.

thank you for the help.