Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jan 2003
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Vertical sizing of content using CSS

    I currently have several web pages which contain a vertical image bar along the left edge. The width of the bar is the same on each page. The height of the bar on each page corresponds to the content height for that page. I have been getting this to work by setting the height of the vertical image bar on each individual page. As you can imagine, this could becomea very cumbersome task.

    What I would l like to be able to do is use CSS style elements to get the height of the vertical bar to adjust automatically to the screen height that is required for the content on each page. I know that this can be done using tables, but I would like not to have to do it that way. Is there any way that I can actually get rid of the image bar and accomplish my goal using CSS?

    Also, how do I accomplish the aforementioned task when there is no vertical scrolling involved? In other words, the content does no fill up the page, but I would still like to have the vertical bar run the height of the page with no scrolling.

    Your input would be greatly appreciated.

    Thanks,
    petela

  • #2
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So you just want a verticle left or right bar so to speak? The best way is to do trickery -- it was easy with tables, but once you understand the CSS way, it makes sense -- no need for an extra html part, just make a background image that repeats from top to bottom -- left side the solid color part of the menu (your pixel width) the right side being the other color or just white. This is called the faux columns method:
    http://www.alistapart.com/articles/fauxcolumns/
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #3
    New Coder
    Join Date
    Jan 2003
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply. It works great except for one aspect - I want the vertical bar along the left edge but not starting at the top of the page. I have two horizontal bars and I want the left vertical bar to start below those bars - 157 pixels from the top. I tried playing around with the numbers and percentages and coulld not get the bar to position properly. It seems to be stuck at the top. Any ideas?

    Thanks,
    petela

  • #4
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Are you applying it to the body background or a div? If it's another div -- set the top margin to 157px, and everything else 0, that will shift it and allow you to repeat without doing another background element. If not, you might have to stack something on top to get it to work... do you have a link I can see it in action?
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #5
    New Coder
    Join Date
    Jan 2003
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks again. After I posted my message, and before I received your reply, I came to the conclusion that I would have to drop in a "filler" image to cover up the portion of the vertical bar that I didn't want to be visible. Here is the link:

    http://www.greatnwdoors.com

    The filler image is under the logo and it loads onto the page right after the body tag, where the background image is defined. Within the definition of the body style elements, I see no way to control the vertical positioning of the embedded image. In any event, you provided an outstanding solution to my design issue, and I thank you again for your input.

    Appreciatively,
    petela

  • #6
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You got it -- I used the margin trick to repeat the gray and red dual column in igotyourhouse.com, similar method.

    A side note that would be helpful, you should make your code more 'semantic'. This would also make it easier to CSS style. An example:
    Code:
    <span id="PageTitle">
     Welcome 
    </span>
    
    <span id="pagecontent">
      Great Northwest Door Company has a long-standing tradition of crafting fine doors of all types 
      and styles.  Whether your architecture lends itself to Craftsman, rustic, French, colonial, timber 
      frame, Arts & Crafts or just beautiful functional classic doors, you can be sure that Great Northwest 
      Door Company will craft each door with individual attention to detail.  We offer a wide array of 
      matched doors; Screen & Storm, interior doors, exterior doors, entry doors, shoji and custom doors.  
      If you’d like to see some of the doors we’ve created with our customers, click on “Door Gallery” above.
    </span>
    Could easily be:
    Code:
    <h2>
     Welcome 
    </h2>
    
    <p>
      Great Northwest Door Company has a long-standing tradition of crafting fine doors of all types 
      and styles.  Whether your architecture lends itself to Craftsman, rustic, French, colonial, timber 
      frame, Arts & Crafts or just beautiful functional classic doors, you can be sure that Great Northwest 
      Door Company will craft each door with individual attention to detail.  We offer a wide array of 
      matched doors; Screen & Storm, interior doors, exterior doors, entry doors, shoji and custom doors.  
      If you’d like to see some of the doors we’ve created with our customers, click on “Door Gallery” above.
    </p>
    that way instead of an id that's needed, you just CSS the h2 or, do a child CSS. Meaning, since it is in the class of ContentPosition, just make the CSS:
    Code:
    .ContentPosition h2 {
     font:...
    }
    You should do headers for all the important information like an outline. H1 being the logo or page title, h2 next section title, and so forth. Your links should be in lists, etc. this will:
    1) Help improve search engine ranking (google looks for heiarchial code)
    2) Make it easier to style and therefore smaller in size
    3) Make your site more handicap accessible (which, if you don't, could be a lose of a 10-20% market of consumers, bad for business)
    4) Make your site more accessible by handhelds and palm pilots
    5) Make it easier to update in the future
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #7
    New Coder
    Join Date
    Jan 2003
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the input. I thought we doing away with the "standard" or "classic" HTML tags, such as <h1>, <h2>, etc, and the <p>. Aren't those being phased out in favor of styles?

    petela

  • #8
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nope -- you should be using stylesheets to do all things presentational -- color imagery, layout, everything pretty. Using standard, proper coding methods is apart of making the content of your html accessible, semantic, and technically understandable. That's the method that's trying to be taught at the moment -- using html that makes sense -- and doing all your 'look and feel' with the CSS, as you're doing so far. Presentation + Content is the best way Take a look at some of the CSS sites like csszengarden.com, cssbeauty.com, stylegala.com -- some of the work I've done is under dotfive.com and a well coded CSS site with complexity and great imagery is leftjustified.net -- 99% of these sites will use standard, classic tags for the HTML -- and all the imagery in CSS with the exception of a few companies still a little behind.
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #9
    New Coder
    Join Date
    Jan 2003
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    I was taking a closer look at your website http://www.igotyourhouse.com/.
    I understand the concept of creating a background image and having it repeat vertically to the bottom of the page. Thanks to your help, I was able to get that to work on my website.

    I do have one question, however. How do you get the content of the individual pages to remain in the same horizontal position relative to the repeating image? In other words, how is the content linked to the vertical image, or is it? It seems like the content would shift horizontally relative to the vertical tiling image as the size of the browser window changes?

    Thanks,
    petela


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •