...

View Full Version : Centering some elements



CaptainB
09-29-2007, 03:34 PM
Hi!

I have a problem with centering some of my objects.

If you look here: http://www.xflightx.port10.com/NEW/wallpapers.html you'll get a better understanding of my problem.

Try to take a look at the menu in both FF and IE6. You'll see that it isn't centered completely in FF. I guess that's because browsers renders padding and margins differently?

However I have used padding to center the menu (Home, Portfolio etc) but that was just because I couldn't make it work with margins set to auto. Can any of you shead some light on that? I can't figure out why it dosn't work.

The css is following:

This is for the menu (the entire "line" from one side of the page to the other):

#menu { width:700px;
height:20px;
background-image:url(../gfx/btn.gif);
}

And this is for each of the catagories (home etc):

.btn { height:20px;
background-image:url(../gfx/btn.gif);
float:left;
margin-left:25px;
padding-left:18px;
line-height:20px;
font-weight:bold;
}

As I said, I have tried to set margins to auto, but it still dosn't work.

vtjustinb
09-29-2007, 04:21 PM
The problem is that you're making #menu stretch the entire width of the header. When you do that, there's really no way you can center the individual elements without making them the same size and using margins. What I would suggest you do is to keep #menu at 700px, but mark the menu items up in an unordered list. This way, you can float the ul, which will make its width whatever the width of the buttons is, and then use margin: 0 auto to center the ul inside of #menu. That will make everything center up nicely.

Also hope you're gonna make thumbnails of those graphics. I feel sorry for dialup people that have to view that page. :P

CaptainB
09-29-2007, 04:57 PM
Thanks for your answear! I'll give it a try with the list and then return here.

Hehe, I guess you're right. That would be a pretty good idea :thumbsup:

CaptainB
09-29-2007, 05:32 PM
I tried it, however it dosn't work out as it should. I guess it's my fault, lol.
I have validated the page.

Now the menu items appear in a vertical row instead of a horizontal. How would I correct that??

New code and site can be seen here: http://www.xflightx.port10.com/NEW/Kopi%20af%20index.html

And here's my new CSS for the menu items list:


ul#menuitems { height:20px;
background-image:url(.../gfx/btn.gif);
line-height:20px;
font-weight:bold;
margin:0 auto;
float:left;
list-style:none;
text-align:center;
}

vtjustinb
09-29-2007, 05:41 PM
Well you still need to convert the list items into a horizontal menu. :P As of right now they're still block-level containers so they're stack vertically.

There are plenty of tutorials on the web about converting an unordered list into a horizontal navbar with CSS. Check those out and you should be gtg.

CaptainB
09-30-2007, 12:07 PM
Ok, I've finally made it go horizontal now :)

You can see it here: http://www.xflightx.port10.com/NEW/Kopi%20af%20index.html

However I still can't center the menu items. Here's my CSS:


ul#menuitems { height:20px;
background-image:url(.../gfx/btn.gif);
line-height:20px;
font-weight:bold;
margin:0 auto;
float:left;
list-style:none;
text-align:center;
}

ul#menuitems li {margin-left:20px;
display:inline;
}

_Aerospace_Eng_
09-30-2007, 03:19 PM
Try this

ul#menuitems {
background-image:url(../gfx/btn.gif);
font-weight:bold;
list-style:none;
text-align:center;
margin:0;
padding:5px 0;
}

ul#menuitems li {
display:inline;
margin:0 10px;
}
Also the correct way to go back one directory is ../ not .../

CaptainB
09-30-2007, 04:14 PM
Thanks Aero, that worked!

How come? I thought you had to set margins to auto to make it work?

I see you used padding to vertical-center the items. However as IE and FF handle padding in a different way, the items are not completely centered FF. I wondered if there is a way around that, or is that just something I have to live with?

BWiz
09-30-2007, 04:54 PM
You could always just create two boxes and place them in the center of one another. This would work with either a liquid or a solid layout.

_Aerospace_Eng_
09-30-2007, 10:33 PM
Thanks Aero, that worked!

How come? I thought you had to set margins to auto to make it work?

I see you used padding to vertical-center the items. However as IE and FF handle padding in a different way, the items are not completely centered FF. I wondered if there is a way around that, or is that just something I have to live with?

Your <li></li> were display:inline; so you only needed text-align:center; on the parent <ul></ul>. You had float:left on there as well and margin:auto; doesn't work unless you set a width to the element. I wasn't trying to vertically center anything. If you notice I actually removed the height from the list mainly because people can and will resize their text in the browser, setting a height will cause your layout to break.

CaptainB
10-01-2007, 03:22 PM
Okay, I got it!

However I still have a problem with the images on this site:
http://www.xflightx.port10.com/NEW/wallpapers.html (take care if you don't have broadband)

Here's my CSS:


ul.linjer { width:635px;
list-style:none;
padding-left:20px;
margin-bottom:30px;
text-align:center;
}

ul.linjer li{ width:150px;
margin-bottom:10px;
margin-left:7px;
float:left;
list-style:none;
text-align:center;
color:#000;
display:inline;
}

and my HTML:


<ul class="linjer">

<li><img src="gfx/wallpapers/abstract/bg1.jpg" width="150" height="95" border="0" alt="" /><br /><a href="gfx/wallpapers/abstract/bg1.jpg" target="_blank">1280 x 800</a><br/>1024 x 768<br/>800 x 600</li>

<li><img src="gfx/wallpapers/abstract/bg2.jpg" width="150" height="95" border="0" alt="" /><br /><a href="gfx/wallpapers/abstract/bg2.jpg" target="_blank">1280 x 800</a><br/>1024 x 768<br/>800 x 600</li>

<li><img src="gfx/wallpapers/abstract/bg3.jpg" width="150" height="95" border="0" alt="" /><br /><a href="gfx/wallpapers/abstract/bg3.jpg" target="_blank">1280 x 800</a><br/>1024 x 768<br/>800 x 600</li>

<li><img src="gfx/wallpapers/abstract/bg4.jpg" width="150" height="95" border="0" alt="" /><br /><a href="gfx/wallpapers/abstract/bg4.jpg" target="_blank">1280 x 800</a><br/>1024 x 768<br/>800 x 600</li>

<li><img src="gfx/wallpapers/abstract/bg5.jpg" width="150" height="95" border="0" alt="" /><br /><a href="gfx/wallpapers/abstract/bg5.jpg" target="_blank">1280 x 800</a><br/>1024 x 768<br/>800 x 600</li>

<li><img src="gfx/wallpapers/abstract/bg6.jpg" width="150" height="95" border="0" alt="" /><br /><a href="gfx/wallpapers/abstract/bg6.jpg" target="_blank">1280 x 800</a><br/>1024 x 768<br/>800 x 600</li>

<li><img src="gfx/wallpapers/abstract/bg7.jpg" width="150" height="95" border="0" alt="" /><br /><a href="gfx/wallpapers/abstract/bg7.jpg" target="_blank">1280 x 800</a><br/>1024 x 768<br/>800 x 600</li>

<li><img src="gfx/wallpapers/abstract/bg8.jpg" width="150" height="95" border="0" alt="" /><br /><a href="gfx/wallpapers/abstract/bg8.jpg" target="_blank">1280 x 800</a><br/>1024 x 768<br/>800 x 600</li>

<li class="field"><img src="gfx/wallpapers/abstract/bg9.jpg" width="150" height="95" border="0" alt="" /><br /><a href="gfx/wallpapers/abstract/bg9.jpg" target="_blank">1280 x 800</a><br/>1024 x 768<br/>800 x 600</li>

<li><img src="gfx/wallpapers/abstract/bg10.jpg" width="150" height="95" border="0" alt="" /><br /><a href="gfx/wallpapers/abstract/bg10.jpg" target="_blank">1280 x 800</a><br/>1024 x 768<br/>800 x 600</li>

<li><img src="gfx/wallpapers/abstract/bg11.jpg" width="150" height="95" border="0" alt="" /><br /><a href="gfx/wallpapers/abstract/bg11.jpg" target="_blank">1280 x 800</a><br/>1024 x 768<br/>800 x 600</li>
</ul>

I just can't figure out to center the items. If I remove the float:left tag from the li css, the images will just lign up in a row in the middle of the page. However if I still have it on, they won't center.

Tact
10-01-2007, 03:35 PM
on a side note. you should really make actual thumbnails rather than resizing the full image for thumbnails. i have roadrunner (one of the best) and that page still takes like a minute to finish loading all the walls. almost felt like they were bmp or something. or not optimized correctly.

_Aerospace_Eng_
10-01-2007, 05:03 PM
Now because each image has the same width you can do something like

ul.linjer { width:628px; /* 157px times 4 */
list-style:none;
margin:0 auto 30px;
padding:0;
}
And I agree with the previous post.

CaptainB
10-01-2007, 05:17 PM
I know about the thumbnails, I've just not had the time to do it yet.

Aero, your method will center the images however they will just stack in one vertical row, one on each line. I want to arrange them with 4 on each line. I tried to fiddle a little with the things, however I still couldn't make it work?

_Aerospace_Eng_
10-01-2007, 05:19 PM
I know about the thumbnails, I've just not had the time to do it yet.

Aero, your method will center the images however they will just stack in one vertical row, one on each line. I want to arrange them with 4 on each line. I tried to fiddle a little with the things, however I still couldn't make it work?

Don't remove float:left from the <li></li> ;)

CaptainB
10-01-2007, 06:01 PM
Once again you saved ma' butt! Appriciated! :thumbsup:

madhan
10-02-2007, 03:38 PM
xxxxx



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum