Skip navigation
alexisonsmith3
Currently Being Moderated

Location of header/container and boxes

May 13, 2012 10:28 AM

Tags: #cs5 #help #adobe #dreamweaver #css

Hi,

 

I am trying to centre my overall website leaving a gap either side. Then I am trying to seperate my website into different sections. I would like to have a box around my navigation buttons and the a box around my main content. Also I am having problems when I hover over each of my figures/links. Each time it grows out as if there is extra padding in there for the hover command. my website is www.newcityexplorer.com

 
Replies
  • Currently Being Moderated
    May 13, 2012 11:34 AM   in reply to alexisonsmith3
    #container {
        background: none repeat scroll 0 0 #FFFFFF;

       border: 1px double #333333;

        font-size: 16px;

        margin: 5px auto;

        overflow: hidden;

        padding: 12px;

        width: 925px;

    }

     

    margin: 5px auto;

     

    puts 5px top and bottom and distributes left and right margins equally which is what centers the page.

     

    Martin

     
    |
    Mark as:
  • Currently Being Moderated
    May 13, 2012 11:34 AM   in reply to alexisonsmith3

    The page is not centering because you are writing the margin twice in the css

     

    #container {

    width: 925px; /*

    adjust width as needed

    */

    margin:0 auto; /*

    with width, this is centered on screen

    */

    padding: 12px;

    font-size: 16px;

    background:#FFF;

    overflow:hidden; /*

    to contain floats

    */

    border: 1px double #333;

    margin: 5px 0px;

    }

     

    see where you have margin:0 auto; at the top... that is used to center #container.... but then you are overwriting that with margin: 5px 0px; down at the bottom.... remove that line and just set the margin once.

    If you want a border around an element, using a border is one way to accomplish that:

    http://www.w3schools.com/css/css_border.asp

    Best wishes,

    Adninjastrator

     
    |
    Mark as:
  • Currently Being Moderated
    May 13, 2012 11:40 AM   in reply to alexisonsmith3

    You have a <section> element #vision

     

    add:

     

    border: solid 1px silver;

     

    or whatever, to the rule for that and put the h1 "Where will you fly to?" inside the section element.

     

    Martin

     
    |
    Mark as:
  • Currently Being Moderated
    May 13, 2012 11:43 AM   in reply to martcol
    figcaption a:hover {
        background-color: #000000;

        border-radius: 12px 12px 12px 12px;

        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);

        color: #FFFFFF;

        font-family: Verdana,Geneva,sans-serif;

        margin: 5px 0;

    }

     

    It's the 5px top bottom margin that is making the hover expand.

     

    Martin

     
    |
    Mark as:
  • Currently Being Moderated
    May 13, 2012 11:47 AM   in reply to alexisonsmith3
    nav {
        border: 1px solid grey;

        overflow: hidden;   

        margin: 0 auto;

        overflow: hidden;

        padding: 0;

        width: 100%;

    }

     

    Adding the border and overflow: hidden there will put a border around the navigation.

     

    Martin

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points