943,697 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > Cannot align a DIV
Ad:
You are currently viewing page 1 of this multi-page discussion thread
Permalink
May 23rd, 2009
0

Cannot align a DIV

Expand Post »
Hello everyone....I've been working on the design for my forum on my website and while everything else has gone to plan...one thing hasn't. On my topic page, the DIV with class greybox and id navigationbox that displays the text Home, New Posts, Members, Stats, Rules, etc. just wont align to the center of my 800px wrapper. I realize that it is set to float to the left and this is because for some reason when I don't float it to the left or right, the DIV's border does not display right in any browser (Well, I know it doesn't work in FF or Chrome, and I think it didn't it IE..). When not floated the border doesn't surround the DIV and instead just stretches across the 800px wrapper. Can anyone help me figure out a way to fix this? (And preferably not a non-standard...I know I could use a table with three columns or add a div before it with width of 33.3%)
Thanks Everyone!

P.S. And while your at it..could you tell me how it looks? I'd love to hear some feedback before I actually start the server side of the forum.
Last edited by FlashCreations; May 23rd, 2009 at 1:28 pm. Reason: Added an ID so it's easier to find...and there's a big difference between wrapper and margin.. :)
Similar Threads
Reputation Points: 47
Solved Threads: 47
Posting Whiz
FlashCreations is offline Offline
393 posts
since Sep 2008
Permalink
May 24th, 2009
0

Re: Cannot align a DIV

Click to Expand / Collapse  Quote originally posted by FlashCreations ...
Hello everyone....I've been working on the design for my forum on my website and while everything else has gone to plan...one thing hasn't. On my topic page,

Why is it XHTML, and why is it transitional?
Quote ...
the DIV with class greybox and id navigationbox

Why do you have:

HTML and CSS Syntax (Toggle Plain Text)
  1. <div id="navigation">
  2.     <div id="nav-container">
  3.        ...
  4.     </div>
  5. </div>
You don't need both divs; the more complicated you make your mark-up, the harder it is to debug.

And within that (where I have put the ellipsis), you have:

HTML and CSS Syntax (Toggle Plain Text)
  1. <div id="userbox" class="greybox">
  2.     <ul class="navlist">
  3.       <li><a href="#"><span>Login</span></a></li>
  4.       <li><a href="#"><span>Register</span></a></li>
  5.     </ul>
  6. </div>

You don't need both <div> and <ul>; use <ul> by itself.

And the <span>s are unnecessary.
Quote ...
that displays the text Home, New Posts, Members, Stats, Rules, etc. just wont align to the center of my 800px wrapper.

Why do you have an 800px wrapper? If my window is smaller than 800px, I can't see the whole thing and I have to scroll horizontally. If my window is larger, there are gutters on each side of the page.

Make it:

HTML and CSS Syntax (Toggle Plain Text)
  1. width: 90%; margin: 0 auto;

and it will work for everyone.
Quote ...
I realize that it is set to float to the left and this is because for some reason when I don't float it to the left or right, the DIV's border does not display right in any browser (Well, I know it doesn't work in FF or Chrome, and I think it didn't it IE..).

If you float it left, of course it is not going to be centred!
Quote ...
When not floated the border doesn't surround the DIV and instead just stretches across the 800px wrapper. Can anyone help me figure out a way to fix this? (And preferably not a non-standard...I know I could use a table with three columns or add a div before it with width of 33.3%)
Thanks Everyone!

P.S. And while your at it..could you tell me how it looks? I'd love to hear some feedback before I actually start the server side of the forum.

It's very hard to read; there is not enough conrast between text and background.
Reputation Points: 25
Solved Threads: 23
Junior Poster
cfajohnson is offline Offline
193 posts
since Dec 2008
Permalink
May 24th, 2009
0

Re: Cannot align a DIV

You center something by applying the style:
margin: 0 auto;

or applying text-align: center to its containing element and text-align: left to the element.

Its fine for him to use an XHTML Transitional doctype, its just the "modern" version of HTML.
Reputation Points: 14
Solved Threads: 22
Junior Poster
JugglerDrummer is offline Offline
138 posts
since Apr 2009
Permalink
May 24th, 2009
0

Re: Cannot align a DIV

Ok so I've fixed some of the problems with the nav lists and such, but there still are a few problems.
  1. The ul list with id navigationbox is still not aligning to the center. I have checked several times and it is not floated to the left or right. I have also tried margin: 0 auto; and text-align: center;
  2. The divs that contain the post content with class post do not fill the area given to them. They won't stretch to fill the whole space between the side of the wrapper and the edge of the user details.
  3. Text Color/Contrast: cfajohnson suggested that the contrast of the white text on the gray background. I need some help deciding what color I should use for text. Here are my options (Or if you have a better idea please post it!! ):
    • The gray post boxes become a dark orange (#F60) with white text
    • The gray post boxes become a dark orange (#F60) with black text
    • The gray post boxes become a dark orange (#F60) with dark gray (#333) text
    • Make all post text black
    • Make all post text dark gray (#333)
Thanks for your help!!
Last edited by FlashCreations; May 24th, 2009 at 7:05 pm.
Reputation Points: 47
Solved Threads: 47
Posting Whiz
FlashCreations is offline Offline
393 posts
since Sep 2008
Permalink
May 24th, 2009
0

Re: Cannot align a DIV

Have you tried using something like margin-left:25%;?

As for your post boxes how about black text on a light grey background? -maybe have a border slightly lighter or darker than the background.
Reputation Points: 32
Solved Threads: 116
Veteran Poster
Xlphos is offline Offline
1,073 posts
since Apr 2008
Permalink
May 24th, 2009
0

Re: Cannot align a DIV

I just tried the margin-left: 25% and sadly it didn't work. Maybe it's because I have my list set to display: inline-table so that the navlist displays right...no wait I tried it without any other properties and it still won't align center...this is wierd!!! Also I like your idea for the text. I was planning on using a black or really dark gray (just for some variety) text color, but do you think all the post text needs to be black or just the text inside the light gray boxes?
Also if anyone can figure out why this av box won't align center, I'd be grateful!!!
Last edited by FlashCreations; May 24th, 2009 at 11:40 pm.
Reputation Points: 47
Solved Threads: 47
Posting Whiz
FlashCreations is offline Offline
393 posts
since Sep 2008
Permalink
May 25th, 2009
0

Re: Cannot align a DIV

Ok so I did fix the center align nav menu (It's still not perfect...640x480 people aren't going to like the look of it to much so if there is any other fix, please post!! ). Aside from that...any ideas on the post width problem not filling the whole given area?
Reputation Points: 47
Solved Threads: 47
Posting Whiz
FlashCreations is offline Offline
393 posts
since Sep 2008
Permalink
May 25th, 2009
0

Re: Cannot align a DIV

Click to Expand / Collapse  Quote originally posted by FlashCreations ...
Ok so I did fix the center align nav menu (It's still not perfect...640x480 people aren't going to like the look of it to much so if there is any other fix, please post!! ). Aside from that...any ideas on the post width problem not filling the whole given area?
What is the CSS for that object. Dimensions, margins etc...

I would prefer the Nav to be longer and the text bigger. It would be much better if the navigation fit on one line.
Reputation Points: 32
Solved Threads: 116
Veteran Poster
Xlphos is offline Offline
1,073 posts
since Apr 2008
Permalink
May 25th, 2009
0

Re: Cannot align a DIV

Here is my CSS for the navlist...
HTML Syntax (Toggle Plain Text)
  1. <ul class="greybox navlist" id="navigationbox">
  2.             <li><a href="#"><span>Home</span></a></li>
  3.             <li><a href="#"><span>New Posts</span></a></li>
  4.             <li><a href="#"><span>Members</span></a></li>
  5.             <li><a href="#"><span>Stats</span></a></li>
  6.             <li><a href="#"><span>Rules</span></a></li>
  7.             <li><a href="#"><span>FAQ</span></a></li>
  8. 	    <li><a href="#"><span>Search</span></a></li>           
  9. </ul>

And the CSS looks like:
CSS Syntax (Toggle Plain Text)
  1. #navigation #navigationbox { margin: 0 33% 7px; } /* Note that the id navigation belongs to a div that this navlist is in */
  2. /* 33% margin is experimental.....and breaks down with screen size 640x480 */
  3.  
  4. .greybox { background: #CCCCCC; border-bottom: 1px solid #999999; border-right: 1px solid #999999; color: #FFFFFF; margin-bottom: 5px; }
  5.  
  6. ul.navlist { display: inline-table; height: 20px; margin-left: 25%; width: auto; }
  7. ul.navlist li { display: inline-table; height: 20px; list-style: none; margin: 0; padding: 0; }
  8. ul.navlist li a, ul.navlist li a:visited { background: #CCC; color: #FFF !important; height: 20px; padding: 0px 7px 5px 7px; text-decoration: none !important; }
  9. ul.navlist a:hover { background: #999999 !important; color: #FFF !important; text-decoration: none !important; }
  10. ul.navlist li a span { vertical-align: middle; }
  11. /* Note: The !important's are due to another part of the CSS document that define the color and background properties to be different (For another part of the site) */
Reputation Points: 47
Solved Threads: 47
Posting Whiz
FlashCreations is offline Offline
393 posts
since Sep 2008
Permalink
May 25th, 2009
1

Re: Cannot align a DIV

You could try reducing the margin and set width to 100%.

If you are after a bit more space before Home and after Search try putting.

<li>&nbsp</li>
// Your links
<li>%nbsp</li>
Reputation Points: 32
Solved Threads: 116
Veteran Poster
Xlphos is offline Offline
1,073 posts
since Apr 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: How CSS Containers are control
Next Thread in HTML and CSS Forum Timeline: Need advice





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC