SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2003
    Location
    USA
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Having a problem with tabless CSS design...

    Hi,

    I have just begun to learn designing a tableless website with CSS and am having a problem with my center column. I cannot get it to look the way I want it and if you take a look at it you will probably see what I mean. Anyone know how I can fix this? I am stumped, and keep in mind that this is my first attempt at a tableless CSS design so any help to steer me in the right direction would be appreciated.

    Also, if anyone knowledgable would take a look at my CSS and <div> layout and let me know if I'm getting the idea please do so and let me know.

    The URL is http://www.greatlakesgaming.net and the CSS is at http://www.greatlakesgaming.net/style.css

    Thanks for any help!
    -RogueFoxx
    Last edited by RogueFoxx; Dec 17, 2003 at 15:19.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Anyone know how I can fix this?
    Fix what ?

    Tell me what it's supposed to do and then I might be able to help. I haven't got time to guess

    There are so many variations that people expect that I could be guessing all day.

    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2003
    Location
    USA
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    heh, sorry... in the middle column the right border is not working. It's supposed to look the same as the rest, but for some reason I can't get it right. The rest I have specified the width and height, but since I want the center column to span the unused space and adjust for browser size I made the right and left margins 240px a piece and set the width to auto. But I don't know how to get the border, which is actually a background div, to contain the one above it... that's why you can't see the right border. How do I fix this?

    Sorry if my explanation isn't the greatest, but like I said I am very new to designing with tabless CSS and don't quite know how to word it.

    Thanks again...
    -RogueFoxx

  4. #4
    SitePoint Member
    Join Date
    Dec 2003
    Location
    Leeds, UK
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'd positioned the div absolutely and shifted it to the left by 1px, meaning that the 1px right border got lost.

    I've had a play with the CSS: changes some things in .centerbg3 and .centerbg1 at
    http://www.leedsdesign.com/test/glg.html
    http://www.leedsdesign.com/test/style.css

    The problem with my version is the loss of the 1px top border on .centerbg3 imo the border protuded a bit too far to the left and didnt have the look you'd achieved in the other boxes.

    I expect this can be remiedied if you apply a background image of a white 1px gif with repeat-y set just to bring back it back to the style you were after.

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2001
    Location
    Norway
    Posts
    187
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In the .centerbg3, add a right position(1px) and set the width to auto. That works in MozillaFirebird 0.7. The complete, modified class :
    Code:
     .centerbg3 {
     	background-color: #DBDFE8;
     	position: absolute;
     	z-index: 1;
     	top: 26px;
     	left: 1px;
     	right: 1px;
     	width: auto;
     	height: 172px;
     	border-top-width: 1px;
     	border-left-width: 0px;
     	border-bottom-width: 0px;
     	border-right-width: 0px;
     	border-style: solid;
     	border-color: #fff #3A4F6C #3A4F6C #3A4F6C;
     }
    Good web hosting info All you need to know about web hosting
    xhbml(web dev blog)
    CSS Viking CSS blog

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

    I see you've already been given answers above but I'll post this anyway now that I've done it

    You have used a lot of redundant code e.g. (visibility:visible). You do not need to specify that as it is the default.

    Also you have nested each element unnecessarily deep and produced a lot of un-needed styles.

    I have shortened your code form 259 lines (including the css) down to 114 lines in total.

    The layout is much easier to follow and much cleaner.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Great Lakes Gaming</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="reply-to" content="roguefoxx@greatlakesgaming.net" />
    <meta name="author" content="Chris Everitt" />
    <meta name="copyright" content="2003 GreatLakesGaming" />
    <meta name="description" content="Great Lakes Gaming is a Gaming Community dedicated to providing a mature and enjoyable environment for gamers to come and play together. Stop by and visit us!" />
    <meta name="keywords" content="great, lakes, gaming, games, clan, guild, community, cs, counter-strike, counter, strike" />
    <meta name="robots" content="index,follow,noarchive" />
    <style type="text/css" media="all">
    <!--
    /* basic elements */
    body {
     background-color: #fff;
     font-family: georgia, verdana, serif;
     font-size: 12px;
     color: #3A4F6C;
     margin: 0px;padding:0;
     cursor: default;
    }
    a:link {color: #728EB3; text-decoration: underline}
    a:visited {color: #728EB3; text-decoration: underline}
    a:active {color: #728EB3; text-decoration: none}
    a:hover {color: #FFFFFF; text-decoration: none}
    .nav a:link {color: #728EB3; text-decoration: none}
    .nav a:visited {color: #728EB3; text-decoration: none}
    .nav a:active {color: #728EB3; text-decoration: none}
    .nav a:hover {color: #FFFFFF; text-decoration: none}
    .memberbar a:link {color: #fff; text-decoration: none}
    .memberbar a:visited {color: #fff; text-decoration: none}
    .memberbar a:active {color: #fff; text-decoration: none}
    .memberbar a:hover {color: #728EB3; text-decoration: none}
    p {
     margin: 0px;
    }
    /* ID's */
    #headerfill {
     background-image: url(http://www.greatlakesgaming.net/images/top_logofill.jpg);
     height: 115px;
    }
    #memberbar {
     background-image: url(http://www.greatlakesgaming.net/images/top_fill.jpg);
     height: 34px;
    }
    #left_top, #left_middle, #right_top {
     position: absolute;
     border:solid 1px #000;
     background-color: #DBDFE8;
     background-image: url(http://www.greatlakesgaming.net/images/table_head.jpg);
     background-repeat: repeat-x;
     background-position: left top;
     height: 203px; 
     width:175px;
    }
    #left_top {top:160px;left:20px;}
    #left_middle{top:385px;left:20px;}
    #right_top{top:160px;right:20px;}
    .bg1{height:17px;}
    .bg2 { border-top: 1px solid #fff;}
    .bg1, .bg2 {
     padding-left:5px;
     margin-top:4px;
    }
    #content {
     margin-top:11px;
     border:solid 1px #000;
     margin-left: 240px;
     margin-right: 240px;
     background-color: #DBDFE8;
     background-image: url(http://www.greatlakesgaming.net/images/table_head.jpg);
     height: 203px;
     background-repeat: repeat-x;
     background-position: left top;
     }
    #headerfill p, #memberbar p{
     padding-top:4px;
     padding-left:5px;
    }
    -->
    </style>
    </head>
    <body>
    <div id="headerfill"><p>headerfil</p></div>
    <div id="memberbar"><p>memberbar</p></div>
    <div id="content"> 
      <div class="bg1"><p>Hello</p></div>
      <div class="bg2"><p>helloHello</p></div>
    </div>
    <div id="left_top"> 
    	<div class="bg1">asdf</div>
    	<div class="bg2">asdfgh</div>
    </div>
      
    <div id="left_middle"> 
    	<div class="bg1">asdf</div>
    	<div class="bg2">asdfgh</div>
    </div>
    <div id="right_top"> 
    	<div class="bg1">asdf</div> 
    	<div class="bg2">rasdf</div>
    </div>
    </body>
    </html>
    I hope that's of some use.

    Paul

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2003
    Location
    USA
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey guys, thanks for all the great suggestions! Since I posted this I kept plugging away at different ways to achieve the same look and it's really amazing how many ways you can do the same thing with CSS!

    Thanks alot for all your help!
    -RogueFoxx


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
  •