SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    html, body <div id="outer> <div id="maincontent>

    I'm having small alignment problems.

    CSS
    html, body

    here is where I should set . . .

    color
    background image
    font-family
    font-size
    font-color
    line height

    correct?

    <div id="outer">

    Here is where I set the screen width, (not view port), correct?
    In my case . . .

    max-width:1200px;
    min-width:400px; (Do I need to have min-width ?)
    width:100%;
    margin-right:20px;
    margin-left:20px;
    position:relative;
    margin-top:30px;

    Then there is . . .

    <div id="maincontent">
    In my case . . .

    float:right;
    width:73.33%; /* 880px as a percent of 1200 */
    margin-top:30px;


    <div id="header">
    float:right;
    display:block;
    position: relative; /*presently used to set header images.*/

    Basically maincontent is the right 2 thirds of the screen and a <nav id> for the left 1 third.

    There are two header type images 880px wide, and a smaller pic (float left).

    There is <p> text throughout the main content

    There is the footer.

    QUESTION.

    Does everything in the body inherit downward into maincontent unless otherwise changed with divs, etc?

    So does a <p> in the css page need to define font-family and all of the other font elements here, or is it already inherited from the body{}?

    What I'm looking for is a default alignment of all items within the maincontent div.

    Of course there is a simple answer - correct?

    Thanks . . . Rick

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    html, body
    here is where I should set . . .

    color
    background image
    font-family
    font-size
    font-color
    line height
    yes, generally people set the default font properties on the body so that everything in the page inherits them.
    <div id="outer">

    Here is where I set the screen width, (not view port), correct?
    In my case . . .

    max-width:1200px;
    min-width:400px; (Do I need to have min-width ?)
    width:100%;
    margin-right:20px;
    margin-left:20px;
    position:relative;
    margin-top:30px;
    It's impossible to say without looking at your design. Not all designs require a wrapper.
    But the margin looks wrong because they will add to width: 100% and force scrollbars to appear.
    You don't have to have a min or max width.
    Then there is . . .
    <div id="maincontent">
    In my case . . .

    float:right;
    width:73.33%; /* 880px as a percent of 1200 */
    margin-top:30px;

    <div id="header">
    float:right;
    display:block;
    position: relative; /*presently used to set header images.*/

    Basically maincontent is the right 2 thirds of the screen and a <nav id> for the left 1 third.

    There are two header type images 880px wide, and a smaller pic (float left).

    There is <p> text throughout the main content

    There is the footer.
    Not sure of the questions here..
    Does everything in the body inherit downward into maincontent unless otherwise changed with divs, etc?

    So does a <p> in the css page need to define font-family and all of the other font elements here, or is it already inherited from the body{}?
    Yes, Font properties will be inherited by default.
    What I'm looking for is a default alignment of all items within the maincontent div.
    You can set default properties on any element type. Most people have a block of 'reset' styles first which overrides the margin / padding / font properties on all these elements in the page.
    Code css:
    body {
      margin: 0;
      padding: 0;
      font-family: Arial;
      font-size: 100%;
    }
    h1,h2,h3 { font-size: 140% }
    h2 { font-size: 120% }
    h2 { font-size: 130% }
    p { margin: 1em 0 }
    a { color: blue }
    All the best,

  3. #3
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What is the difference between width and margin?

    What is the difference between these two?

    They both do the same thing! ! !
    Code:
    margin-left:26.67%; /*320px in a 1200 width px page*/
    
    Float-left;
    width:26.67%; /*320px in a 1200 width px page */
    This is my <div id="nav"> width on the left 1/3rd of my page under my <div id="maincontent">. (880px)

    I think I should reduce my nav width by about 10 or 12 pixels to add a few margins around my nav, correct?

    What is the difference of the two?

    As always, thanks much . . . Rick

  4. #4
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,182
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    It's really difficult to answer without seeing a live page, or at least the full HTML/CSS. Without those, we're really just guessing what's going on.
    Code:
    margin-left:26.67%;
    is setting a left margin of that size on some (here unspecified) item.
    Code:
    width:26.67%;
    Is setting that width on another unspecified item, which may be designed to sit in that margin, or may have no connection - I can't tell from what you've posted.
    Code:
    Float-left;
    is not a proper declaration. Do you mean
    Code:
    {float:left;}
    or is Float-left a class or id?


Bookmarks

Posting Permissions

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