Css Help Centering Div's

Css Help Centering Div's Help =]

#1 danbrownlow

Member

Group: Members
Posts: 99
Joined: 05-March 07
Gender:Male

Posted 18 October 2007 - 02:02 PM

I finally found some code that I needed and I'm going to edit it to suit my needs but I can't seem to get it to center =[ Can anyone tell me what I can do to enable the DIV's to center please? I've tried various things and just can't get it too work.

Here is the code:

<html>
<head>
<style type="text/css">
div.img
  {
  margin: 2px;
  border: 1px solid #0000ff;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
  }
div.img img
  {
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
  }
div.img a:hover img
  {
  border: 1px solid #0000ff;
  }
div.desc
  {
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 2px;
  }
</style>
</head>
<body>

<div class="img">
  <a target="_blank" href="klematis_big.htm">
  <img src="klematis_small.jpg" alt="Klematis" width="110"
  height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis2_big.htm">
  <img src="klematis2_small.jpg" alt="Klematis" width="110"
  height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis3_big.htm">
  <img src="klematis3_small.jpg" alt="Klematis" width="110"
  height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis4_big.htm">
  <img src="klematis4_small.jpg" alt="Klematis" width="110"
  height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

I know this is code from www.w3schools.com and I'm not going to steal it, I'm just using the basic ideas and it's easier to just copy and paste the code that is there. Hope someone can be of help =]

Taken from http://www.w3schools.com/css/css_image_gallery.asp on Thursday 18th October

#2 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,522
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 18 October 2007 - 04:17 PM

Have you maybe tried <DIV ALIGN=CENTER>?

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#3 Noot

Member

Group: Members
Posts: 98
Joined: 14-July 07
Gender:Female
Location:Central New York

Posted 18 October 2007 - 04:28 PM

Hey Danbrownlow!

There's something you can do to center your CSS and that's by putting it inside a container. This centers whichever div's you put inside it. For example, in your CSS page, it would look something like this:

#container {
        position:absolute;
	top: 3%;
	left:50%;
	width: 780px;
	margin-left: -400px;
	visibility: visible;

}

The width is however the size of your site is, or whatever the widest part of your site. The 'margin-left' is basically half of your width. This will also cause your site to be centered in any resolution of whatever computer is viewing it.

When you put it into your HTML:

<div id="container>
                           <div id="img"></div>
                           <div id="img2"></div>
              </div>

Whatever is within the container tag, everything will be centered. To help so you don't accidentally place a tag outside of that, either mark with a note tag (), by putting it before the </div> of the container tag, so that it'll remind you OR just put a lot of space from the inner tags with the end of the container tag.

To visualize what I mean:

<div id="container>
                           <div id="img"></div>
                           <div id="img2"></div>
              
<!--end of container tag-->
              </div>

<div id="container>
                           

                           <div id="img"></div>
                           <div id="img2"></div>
 




             </div>

If you need anymore help with this, let me know. Good luck! :thumbsup:

"I would feel more optimistic about a bright future for man if he spent less time proving
that he can outwit Nature and more time tasting her sweetness and respecting her seniority."
E. B. White (1899 - 1985)

#4 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,522
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 18 October 2007 - 05:02 PM

Doesn't your code there:left:50%; align your object along the center, not actually centered? I'm just asking because I have never done it that way (nor did I try your example). I know if I set my margin at 50%, or if I pad something out to 50%, it aligns it along the center.

Just curious. :thumbsup:

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#5 Noot

Member

Group: Members
Posts: 98
Joined: 14-July 07
Gender:Female
Location:Central New York

Posted 18 October 2007 - 05:28 PM

I'm not entirely sure how that part works to be entirely honest. I think it had something to do with the margin-left and with it being half of the width and the left % telling it half, but I'm not sure. My web professor in college told me about it. I think she briefly explained it to me when she told my class about it, but I can't entirely remember. It does work though. I can show you her site, if you'd like to look at it. I've copied and pasted that container code into my sites, just changing the width and margin-left numbers.

#6 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,522
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 18 October 2007 - 05:50 PM

I missed the margin left part. Ok, so now I see. The margin left part is a negative, so my suspicion that the left:50% does exactly what I thought. It aligns the object on the centerline. The margin-left backs it across the centerline. So the margin-left has to be adjusted each time, depending on the size of the object to be centered. That is one way to do it, but every time one changes the content of the container, then one has to change the parameter values. My method works no matter what the content is.

Just two ways of skinning a cat. :thumbsup:

One could simply use a <center> tag also, but that gets unpredictable with some objects.

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#7 Noot

Member

Group: Members
Posts: 98
Joined: 14-July 07
Gender:Female
Location:Central New York

Posted 18 October 2007 - 06:16 PM

Yes, there you go! I think that's pretty much about what she said explaining it. :thumbsup:

#8 danbrownlow

Member

Group: Members
Posts: 99
Joined: 05-March 07
Gender:Male

Posted 22 October 2007 - 10:19 AM

Hey no luck as of yet.

I already had put the code inside a DIV I had called Content, here is the code for it.

#Content{
Width: 100%;
height: 100%;
margin: 0 auto;
padding: 50;
position: relative;
align: center;
text-align: center;

}

I have tried using align and text align as you can see but they still won't budge!

I've also tried using DIV ALIGN, but that also didn't work.

THe way I have my site is a main container, within it there is a header DIV, and a content DIV (where I want the gallery to be) but I really can't figure out how to make it work.

Thanks for the help! :thumbsup:

#9 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,522
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 22 October 2007 - 12:42 PM

I'm not sure why that isn't working. The only other thing I can think of is that maybe there is an error somewhere in your HTML that is causing that instruction to be skipped. If you look at the source code in Firefox, and problem areas should be highlighted in red. If you simply forgot a closing '>' in the instruction prior to that (for example), then it would read the div instruction as being part of the previous instruction which may not take ALIGN as a parameter. Without seeing what else is going on with your code (as in, which changes or additions you have made), it is hard to say what the problem might be.

EDIT: Just looking at that code again, there is not a doctype declaration, and that can cause a problem. Does the problem exist in more than one type of browser?

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens