Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts

    Centering some elements

    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):
    Code:
    #menu {		width:700px;
    			height:20px;
    			background-image:url(../gfx/btn.gif);
    			}
    And this is for each of the catagories (home etc):
    Code:
    .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.

  • #2
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    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

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    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

  • #4
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    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/K...f%20index.html

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

    Code:
    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;
    			}

  • #5
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    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.

  • #6
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Ok, I've finally made it go horizontal now

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

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

    Code:
    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;
    				}

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this
    Code:
    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 .../
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    CaptainB (09-30-2007)

  • #8
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    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?

  • #9
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    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.
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by CaptainB View Post
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    effpeetee (10-01-2007)

  • #11
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    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:

    Code:
    			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:

    Code:
    <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.

  • #12
    New Coder
    Join Date
    Sep 2007
    Posts
    16
    Thanks
    0
    Thanked 1 Time in 1 Post
    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.

  • #13
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Now because each image has the same width you can do something like
    Code:
    ul.linjer {	width:628px; /* 157px times 4 */
    			list-style:none;
                            margin:0 auto 30px;
                            padding:0;
    			}
    And I agree with the previous post.
    Last edited by _Aerospace_Eng_; 10-01-2007 at 06:05 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #14
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    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?

  • #15
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by CaptainB View Post
    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>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    CaptainB (10-01-2007)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •