SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text oustide Div Problem + Code Critique

    Hello,

    Having another go at CSS design, this time 100% tabeless. I was very proud of myself until I tried to add some sample text to the design. :'(

    The text "Wrong text do'h" should appear in the area next to the photo, not below it.

    Example CSS Page

    Would much appreciate if someone could help me with this problem, and also if you could take a look through my (no doubt error-riddled) CSS.

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Code:
    #introbox {
    margin-left: 202px;
    background-color: white;
    }
    Try that.

    Your CSS looks surprisingly good.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply but that didn't seem to make any difference. Even though it didn't work, could you tell me why you would use margin?

  4. #4
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Hmm, that's strange, I'll take a proper look.

    The reason I use margin instead of two floats is because I'm lazy to calculate both widths of the columns.

    Edit:


    Stupid me, can't believe I missed it! You're giving the the class="introbox" in the html, yet you're selecting it as an ID in the css.

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found the problem - I was using class="introbox" instead of id=

    no wonder all the changes I was trying weren't having effect


    Thanks for taking the time to have a look... I'm glad my code looks ok, feel free to point out anything that could be improved.

  6. #6
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Chasser
    Thanks for taking the time to have a look... I'm glad my code looks ok, feel free to point out anything that could be improved.
    Sure,

    First of all, you're using an un-necessary amount of <div>'s.

    Let's start from the top:

    Code:
    <div id="navbar">link | link | link </div>
    Would be semantically correct as a list. And also look good to text-based browsers, and those with CSS swithed off:
    Code:
    <ul id="navbar">
    <li><a href="/">Link Here</a></li>
    <li><a href="/">Link Here</a></li>
    <li><a href="/">Link Here</a></li>
    </ul>
    For the logo, there's no need for a <div> wrapper as you can apply the styles directly to the image:
    Code:
    <img id="logobox" src="images/logo.gif" height="92" width="300" alt="" />
    The same applies to this:

    Code:
    <div id="navbox">
    <img src="images/nav_skincare.gif" height="78" width="185" alt="" /><br />
    <img src="images/nav_cosmetics.gif" height="80" width="185" alt="" /><br />
    <img src="images/nav_haircare.gif" height="78" width="185" alt="" /><br />
    <img src="images/nav_acs.gif" height="79" width="185" alt="" />
    </div>
    I'd also get rid of <br />'s, as you can get the same effect like this:
    Code:
    #navbox img {
    display: block;
    }
    Now in here:
    Code:
    <div class="clearer"></div>
    
    <div id="footer">link | link | link</div>
    
    </div>
    
    </body>
    
    </html>
    The footer itself can be used as a clearer by giving it clear: both;. That gets rid of another un-necessary element.

    If you have any questions about the above - ask.

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that, I wouldn't have thought of doing some of those things.


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
  •