SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Problem with text not being at the top of content area.

    I am finally continuing my jewelry site that I started in 2007. I received a lot of help just getting the home page done from this forum and I want to thank everything that gave me help. Now as I start on the other pages, I am at a loss as to why my text is not showing at the top of the content area. The page can be seen here - http://foxdenwebsolutions.com/foxden...ons/about.html
    and the CSS page is here - http://foxdenwebsolutions.com/foxden...xden_about.css

    The index page CSS is http://foxdenwebsolutions.com/foxden...oxden_home.css so you can see the changes I made for each page. I would also like the text moved to the right a bit so that it is not so close to the buttons. Any help would be appreciated.

  2. #2
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I am thinking it has something to do with taking out the #sidebar from the home page that holds the pics on the right.

    #content {
    margin: 0 150px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    font-weight: bold;
    }
    #sidebar {
    float: right;
    width: 250px;
    margin-right: 30px;
    display: inline;
    }

    I took out the sidebar bacause I didn't need it for the about page. Could this be the problem? I put it back in and the text is at the top where it belongs but the sidebar is not needed so how would I fix this?

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The index page CSS is foxden_home.css so you can see the changes I made for each page.
    I think you should use one style sheet, the same for all pages. That will prevent overseeing conflicting rules and will make it easier to make changes to the site. A good advice could be to organize the style-sheet according to the html. E.g. starting with styling the generic elements and then the class or id rules in the same order the elements are appearing in the html code.

    I took out the sidebar bacause I didn't need it for the about page. Could this be the problem? I put it back in and the text is at the top where it belongs but the sidebar is not needed so how would I fix this?
    Yes, when the rule for the sidebar is missing in the about style-sheet, as default the sidebar div stretch to fit the width of the page and holding the empty list it is pushing content down. The unused sidebar would rather be removed from the html.

    To handle different needs in different pages using the same style-sheet you can use a common method:

    Give all pages an id on the body tag:
    HTML Code:
    <body id="page-home">
    HTML Code:
    <body id="page-about">
    Then you can use the page id when you need to target a common element only for that page.

    E.g.: if you in the future need to indicate current page when navigating the site, you can target the link that is the current page:
    Code:
    ul#nav li a:hover{ margin:0 -10px 0 10px;}
    #page-home #nav-home a{ margin:0 -10px 0 10px; cursor:default;}
    #page-about #nav-home a{ margin:0 -10px 0 10px; cursor:default;}
    Happy ADD/ADHD with Asperger's


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
  •