Turn on thread page Beta
    • Thread Starter
    Offline

    0
    ReputationRep:
    Hey all

    The title says it all really. I cant find a way to vertically center a div box in CSS. It needs to work for firefox and IE (with no difference in format).

    I'm very new to this and this is my first website. The files are attatched. Just change the "Style.txt" file to "Style.css" and the "index.txt" file to "index.html".

    I'm trying to vertically center the navigation bar (the horizontal one).

    If you could give me the code to learn from it would be helpful.

    Thanks.

    Mike
    Attached Files
  1. File Type: txt index.txt (4.7 KB, 105 views)
  2. File Type: txt style.txt (813 Bytes, 75 views)
    Offline

    2
    ReputationRep:
    Erm, it's not really smart to reveal your personal details on the Internet.

    Anyway, the way you marked up your navigation bar is a bit unconventional. I suggest the following:

    Replace:
    HTML Code:
    <div class = "horiznav">
      <div class = "horiznav"><a href="http://mjclark.co.cc/index.html "  title="Home Page">Home</a></div>
      <div id = "seperation"></div>
      <div class = "horiznav"><a href="http://mjclark.co.cc/personalinfo.html "  title="Personal Info">Personal Info</a></div>
      <div id = "seperation"></div>
      <div class = "horiznav"><a href="http://mjclark.co.cc/skillsandqualifications.html "  title="Skills and Qualifications">Skills & Qualifications</a></div>
      <div id = "seperation"></div>
      <div class = "horiznav"><a href = "http://mjclark.co.cc/university.html" title = "University">University</a></div>
      <div id = "seperation"></div>
      <div class = "horiznav"><a href="http://mjclark.co.cc/employmenthistory.html "  title="Employment History">Employment History</a></div>
      <div id = "seperation"></div>
      <a href="http://mjclark.co.cc/contact.html "  title="Contact">Contact</a></div>
    With:
    HTML Code:
    <div class="horiznav">
    <ul>
      <li><a href="http://mjclark.co.cc/index.html" title="Home Page">Home</a></li>
      <li><a href="http://mjclark.co.cc/personalinfo.html" title="Personal Info">Personal Info</a></li>
      <li><a href="http://mjclark.co.cc/skillsandqualifications.html" title="Skills and Qualifications">Skills & Qualifications</a></li>
      <li><a href="http://mjclark.co.cc/university.html" title="University">University</a></li>
      <li><a href="http://mjclark.co.cc/employmenthistory.html" title="Employment History">Employment History</a></li>
      <li><a href="http://mjclark.co.cc/contact.html" title="Contact">Contact</a></li>
    </ul>
    </div>
    In your CSS, delete the selectors 'div.horiznav' and 'div.horiznav div' and add these in:

    Code:
    div.horiznav {
    	margin: 0 auto;
    	line-height: 2em;
    }
    
    div.horiznav ul {
    	list-style-type: none;
    }
    
    div.horiznav ul li {
    	display: inline;
    	margin-right: 3em;
    }
    • Thread Starter
    Offline

    0
    ReputationRep:
    (Original post by darkraver)
    Erm, it's not really smart to reveal your personal details on the Internet.

    Anyway, the way you marked up your navigation bar is a bit unconventional. I suggest the following:

    Replace:
    HTML Code:
    <div class = "horiznav">
      <div class = "horiznav"><a href="http://mjclark.co.cc/index.html "  title="Home Page">Home</a></div>
      <div id = "seperation"></div>
      <div class = "horiznav"><a href="http://mjclark.co.cc/personalinfo.html "  title="Personal Info">Personal Info</a></div>
      <div id = "seperation"></div>
      <div class = "horiznav"><a href="http://mjclark.co.cc/skillsandqualifications.html "  title="Skills and Qualifications">Skills & Qualifications</a></div>
      <div id = "seperation"></div>
      <div class = "horiznav"><a href = "http://mjclark.co.cc/university.html" title = "University">University</a></div>
      <div id = "seperation"></div>
      <div class = "horiznav"><a href="http://mjclark.co.cc/employmenthistory.html "  title="Employment History">Employment History</a></div>
      <div id = "seperation"></div>
      <a href="http://mjclark.co.cc/contact.html "  title="Contact">Contact</a></div>
    With:
    HTML Code:
    <div class="horiznav">
    <ul>
      <li><a href="http://mjclark.co.cc/index.html" title="Home Page">Home</a></li>
      <li><a href="http://mjclark.co.cc/personalinfo.html" title="Personal Info">Personal Info</a></li>
      <li><a href="http://mjclark.co.cc/skillsandqualifications.html" title="Skills and Qualifications">Skills & Qualifications</a></li>
      <li><a href="http://mjclark.co.cc/university.html" title="University">University</a></li>
      <li><a href="http://mjclark.co.cc/employmenthistory.html" title="Employment History">Employment History</a></li>
      <li><a href="http://mjclark.co.cc/contact.html" title="Contact">Contact</a></li>
    </ul>
    </div>
    In your CSS, delete the selectors 'div.horiznav' and 'div.horiznav div' and add these in:

    Code:
    div.horiznav {
    	margin: 0 auto;
    	line-height: 2em;
    }
    
    div.horiznav ul {
    	list-style-type: none;
    }
    
    div.horiznav ul li {
    	display: inline;
    	margin-right: 3em;
    }

    That's interesting, I didn't know you could do that.

    Thanks for the help.

    Mike
    Offline

    0
    ReputationRep:
    I'm fairly sure spaces around the equals isn't valid HTML. It's certainly not standard.
 
 
 
Reply
Submit reply
Turn on thread page Beta
TSR Support Team

We have a brilliant team of more than 60 Support Team members looking after discussions on The Student Room, helping to make it a fun, safe and useful place to hang out.

This forum is supported by:
Updated: February 1, 2010
Poll
Brexit: Given the chance now, would you vote leave or remain?
Useful resources

The Student Room, Get Revising and Marked by Teachers are trading names of The Student Room Group Ltd.

Register Number: 04666380 (England and Wales), VAT No. 806 8067 22 Registered Office: International House, Queens Road, Brighton, BN1 3XE

Write a reply...
Reply
Hide
Reputation gems: You get these gems as you gain rep from other members for making good contributions and giving helpful advice.