SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    format text in center column

    Hi
    I am having a problem getting my text and header to sit at the top of my center column..

    The link.... http://beeonline.net/astro-css/

    The css....
    /* Put a 1px border around the page --------------*/
    #pagesizediv{
    float : right;
    margin-top : 20px;
    margin-left : 20px;
    margin-right : 20px;
    border : 1px solid #5C6F90;
    voice-family: "\"}\"";
    voice-family:inherit;
    right: 0;
    }
    /* Body -----------------------------------------------------*/
    body {
    margin: 0;
    padding: 0;
    background : #D3D3D3;
    background-image : url(images/back-chart.gif) ;
    background-attachment : scroll;
    background-position : center;
    background-repeat : no-repeat;
    }
    h2{
    font : 14px Verdana, Geneva, Arial, Helvetica, sans-serif;
    color : Black;
    font : bold;
    }
    /* Small Chart on front Page --------------------------*/
    .smallchart {
    display: inline;
    float: left;
    margin: 0.3em 0.5em 0.5em 0.3em;
    }
    p.box{
    font : 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
    color : Black;
    letter-spacing : 1px;
    border : 1px solid #5C6F90 ;
    height : auto;
    padding : 5px;
    }
    /* top Header ----------------------------------------------*/
    #topheader{
    background-color : #6898FF;
    background-image : url( images/header-bkg.gif);
    background-repeat : repeat-x;
    height : 20px;
    }
    /* header-----------------------------------------------------*/
    #top {
    background-color : #B8ACC8;
    background-image : url( images/header.jpg);
    background-repeat : no-repeat;
    height: 85px;
    border-bottom : 2px solid #5C6F90;
    }
    /* Left Holds left Main Menu ETC ----------------------*/
    #left {
    float: left;
    width: 160px;
    background-color : #B8ACC8;
    border-right : 1px solid #5C6F90;
    border-bottom : 1px solid #5C6F90;
    }
    /* positions colage on left ----------------------------------*/
    #collage {
    text-align : center;
    }
    /* Right Column --- have'nt decided to use -----------*/
    #right {
    float : right;
    right : 20px;
    top : 125px;
    width: 100px;
    border-left : 1px solid #5C6F90;
    }
    /* Holds Content in center of page --------------------*/
    #center {
    font : 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
    padding: 10px;
    margin-left: 160px;
    margin-right: 100px;
    }
    /* Footer --------------------------------------------------------*/
    #footer {
    font : 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
    color : #000;
    clear : both;
    height : 40px;
    background-color : #B8ACC8;
    background-image : url( images/footer.jpg) ;
    background-repeat : no-repeat;
    background-position : right;
    border-top : 2px solid #5C6F90;
    }
    /* Removes default top margin from left/right column paragraphs in Mozilla */
    div > p {
    margin-top: 0;
    }
    #topmenu {
    position: absolute;
    top : 24px;
    right : 22px;
    font : 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
    color : #000000;
    }
    /* Link Colors ----------------------------------------------------*/
    a {
    color: #34339B;
    }
    a:hover {
    color: #9C191E;
    }
    /* Dropdown Left Menu ------------------------------------------- */
    ul.menu {
    padding :0px;
    margin : 0px;
    width : 160px;
    }
    .inactive {
    font :12px verdana, arial, georgia, sans-serif ;
    color : Navy;
    background-color : #D8BFD8;
    display : list-item;
    list-style-position : inside;
    list-style-image : url(images/bullet.gif);
    padding : 1px 0px 1px 5px;
    text-decoration :none;
    border-bottom : 1px solid #306898;
    text-align : left;
    font-weight : normal;
    }
    .active {
    font:11px verdana, arial, georgia, sans-serif;
    display : list-item;
    list-style-position : inside;
    list-style-image : url(images/bullet1.gif);
    color: #003366;
    text-decoration:none;
    background-color : #DCDCDC;
    border-bottom: 1px solid #306898;
    text-align : left;
    font-weight : normal;
    }
    .inactive ul {
    display: none;
    }
    .active ul {
    display: block;
    }
    /* End Dropdown Menu ---------------------------------------------*/

    Can any of out there help with this one???
    Cheers Malc

    www.beeonline.net

  2. #2
    Rabble Rouser bronze trophy
    Join Date
    Jan 2003
    Location
    Mountain View, CA
    Posts
    427
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A glance in Opera 7, IE 6, and Mozilla 1.4 and I've no clue what the problem is. Could you be more descriptive or maybe draw a diagram for dense folk like me?

    The only thing I really noticed was in Opera your list items have some unwanted verticle space. Fix this by adding li { margin: 0px; } to your css.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Did you mean that you want the h2 heading "Welcome to Astrology Online" to hav no margin above it?

    If so just set the h2 top margin to 0px e.g.

    h2 {margin-top: 0px;}

    Sorry if I've misunderstood.

    Paul

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi
    Thanks for the help... both suggestions worked... my problem is with text below the H2 header I ahve attached a image showing the problem...

    I am also having a problem with background-color and background-image showing in the body using IE5... this works on all the other browsers using a pc..


    Cheers Malc
    Attached Images Attached Images

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you're looking to loose the space below the header you can also set margin-bottom: 0px; on the h2 tag.

    Also adding something like :

    #center p {margin-top:0px;}

    This should move the following text up if that's what you're looking for.

    As for your background image problem I don't have IE5 to check it out so perhaps someone else can help.

    Paul

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi
    Thanks....that sorted the problem out.... The problem now is how do I get the background-color and image to show in IE5

    Any one know this one

    Cheers Malc
    www.beeonline.net


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
  •