SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot eLePHANT's Avatar
    Join Date
    Feb 2010
    Location
    RI, USA
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image border probem + Avoiding 2 CSS files

    Could someone please take a look at my site http://nkdogwalking.com/about.html and tell me why the image border on the right isn't working? I recently changed things around a bit. When it floated on left, it was fine. I think floating to the right started this. Unless I made some error when recoding.

    Also, I added a second CSS page because I didn't want the Rates and Contact page to have the new psuedo element I added (first letter colored). Was there a way around that without adding a second CSS page? I would greatly appreciate some help.

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

    The image is 196px wide with a border making it 198px wide. It sits in #sidebar which is only 190px wide so 8 pixels of to stick outside the container and are hidden.

    Increase the sidebar to match the width of the image or reduce the width of the image.

    Regarding the first-letter styling (I assume that's what you meant) then why didn't you just an extra class to #main and style it from there.

    Code:
    <div id="main" class="intro">.........
    Code:
    .intro p:first-letter{etc.....}
    Then only add the class to the pages where you want this to occur. You don't want to add another whole stylesheet for a different page!

    Or if you are using the first letter everywhere except for one page only then reverse the process. You could add a class to the body element on that page only and re-style the first letter back to normal.

    <body class="ratespage">

    .ratespage #main p:first-letter{.......reset the styles back to what they should be}

  3. #3
    SitePoint Zealot eLePHANT's Avatar
    Join Date
    Feb 2010
    Location
    RI, USA
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    The image is 196px wide with a border making it 198px wide. It sits in #sidebar which is only 190px wide so 8 pixels of to stick outside the container and are hidden.

    Regarding the first-letter styling (I assume that's what you meant) then why didn't you just an extra class to #main and style it from there.
    Thank you for your helpful advice, Paul. I just updated my site using your fixes. Here I am thinking I'm at Intermediate Level CSS, but that's really a Beginner mistake! Especially the image border problem. Perhaps I overlooked that because it didn't make any sense that it worked fine before before I swapped floats. I'm still scratching my head over that. Why is it that I didn't have a problem with left border before?

    If there's anything you'd like to recommend about my site, please feel free to say so. I'm currently in the process of revamping my website. If you were a potential client, is there anything you are looking for that isn't there? I'm going to try and rework the header. I wish there was a really tutorial on creating a really effective website header, but I can't find it even afte searching google and youtube.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by eLePHANT View Post

    If there's anything you'd like to recommend about my site, please feel free to say so. I'm currently in the process of revamping my website. If you were a potential client, is there anything you are looking for that isn't there? I'm going to try and rework the header. I wish there was a really tutorial on creating a really effective website header, but I can't find it even afte searching google and youtube.
    Hi,

    I'm afraid that design isn't my strong-point (as you can tell by my site) and I'm more interested in the code underneath. The html code on your site looks fine and well structured so I can't really suggest anything else there.

    Perhaps the design could do with a bit of flexibility and use min and max width instead of a fixed width (ie6 would need the fixed width though as it doesn't understand min/max). Having an elastic width could let your content grow and shrink with the viewport a bit more. I;d keep the sidebar a fixed width but let the content fill the available space.

    I notice in your code you have this:

    Code:
    #wrapper {
      width: 850px;
      min-width: 600px;
      margin: 30px auto;
    }
    If you set a width then you get width so the min-width is redundant if it is the same unit as it will never come into play. If the min-width was larger than the width you set then you would get a fixed width still but at the larger size. Just remove the min-width as it is redundant.

    If you had said:
    Code:
    #wrapper {
      width: 80%;
      min-width: 600px;
      margin: 30px auto;
    }
    Then that would be valid because the width is fluid and at some point the min-width would be triggered (assuming it wasn't viewed on a small mobile of course).

    For a review or suggestions on your site design then visit the review sections of the forums where you can get comments on the design (you have to review 3 other sites first before you are eligible to place your site for review).

  5. #5
    SitePoint Zealot eLePHANT's Avatar
    Join Date
    Feb 2010
    Location
    RI, USA
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    Code:
    #wrapper {
      width: 850px;
      min-width: 600px;
      margin: 30px auto;
    }
    If you set a width then you get width so the min-width is redundant if it is the same unit as it will never come into play. If the min-width was larger than the width you set then you would get a fixed width still but at the larger size. Just remove the min-width as it is redundant.

    If you had said:
    Code:
    #wrapper {
      width: 80%;
      min-width: 600px;
      margin: 30px auto;
    }
    Thanks, Paul. I'll see to it. ralph.m actually did tell me in my official review back in March to change that to:

    Code:
      width: 850px;
      margin: 30px auto;
    I just failed to update it to his recommendation. So I have your changes now or his. It might not matter pretty soon. I might be changing up the layout a bit. I will post another review request sooner or later once I make the final revamp changes. Thank you for your help.


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
  •