20 replies [Last post]
crimsone
Offline
Regular
Last seen: 12 years 8 weeks ago
Joined: 2005-07-24
Posts: 29
Points: 0

I've been using HTML tables for my web building for quite some time now, and while not always conforming to w3c, I've managed to get my pages working and looking the same in all browsers (Windows, mac and linux alike)

The thing it, I know full well that it's time to start laying out my pages with CSS. I should have started on my last build (www.minervapendragon.com), but it's the tables that keep putting me off. For some reason, I can't get to grips with them.

What I'm trying to do on this latest build is create the following...

..which in HTML is no trouble at all. However, I'm finding that in CSS I just cant get that cell in the corner to work.

Ignoring the main content of the page (if I have something to "backwards-engineer" so to speak, and see how it's done properly it shouldn't be a problem to structure the real content), can anybody give me any pointers on how I go about creating such a structure. I've been through a few different tutorials and I'm still stuck (so if you know one that can make tabling easy for me please let me know!)

Now might also be a good time to mention that the column on the left will have navigation buttons on it, so I need to actually be able to place stuff in that column.

any help would be most appreciative, as it's stress I seem to be bringing on myself by overcomplicating things in my own mind - and given that I'm building this site for a small charity type thing (ie, for free and not for my own benefit), I could probably do without it. Any help would stop my hair falling out so quickly, in short. Smile

It's hard to be religious when certain people are never struck by bolts of lightning

Anonymous
Anonymous's picture
Guru

Extremely new - need layout/background help

What have you tried so far? A working link would be peachy.

Floats are keen.

crimsone
Offline
Regular
Last seen: 12 years 8 weeks ago
Joined: 2005-07-24
Posts: 29
Points: 0

Extremely new - need layout/background help

It's on my local machine right now, being the very first stage of trying. I can upload something tomorrow to demonstrate what I've tried.

In the mean time, instead of having a corner piece, a left column, and a top row, each containing a separate image, would it be possible to have a row straight across the top where the corner is placed in the corner, and the tileable section goes right next to it in the same row? That would probably solve the problem altogether. Just a thought.

It's hard to be religious when certain people are never struck by bolts of lightning

Anonymous
Anonymous's picture
Guru

Extremely new - need layout/background help

crimsone wrote:
...would it be possible...
Sure, anything is possible. Smile

crimsone
Offline
Regular
Last seen: 12 years 8 weeks ago
Joined: 2005-07-24
Posts: 29
Points: 0

Extremely new - need layout/background help

In which case, I'll rephrase...

...would it be easier for a stylesheet novice such as myself, and if it would be easier, is there an article anyone might know of that would teach me to do this one single thing (ie, place two images horizontally nect to each other, tiling the one on the right)?

It's hard to be religious when certain people are never struck by bolts of lightning

Anonymous
Anonymous's picture
Guru

Extremely new - need layout/background help

Maybe the float tutorial will give you some ideas.

crimsone
Offline
Regular
Last seen: 12 years 8 weeks ago
Joined: 2005-07-24
Posts: 29
Points: 0

Extremely new - need layout/background help

OK, I've read that and it was very informative, but I have to say I really don't understand what's going on here. I think perhaps the corner and header are on different lines altogether but I don't know why.

My attempt so far (having used the layout creator and tried to change it to put the corner in) can be found here

for which the stylesheet is here

Please, please, please, could somebody take a look and tell me what's wrong? (knowing my luck it's something obvious and I'm too flummoxed to see it).

It's hard to be religious when certain people are never struck by bolts of lightning

Anonymous
Anonymous's picture
Guru

Extremely new - need layout/background help

The float goes on the corner and not on the header.

#corner{ 
 height:50px; 
 width:50px; 
  float:left;
 background-color:#766FFF;
 } 

#header{
 height:50px; 
 background-color:#cccccc;
 }

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 hours 53 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Extremely new - need layout/background help

As Triumph has said, there are any number of approaches to the problem. The first step is to determine a structure for the page.

I see two simple approaches.

  1. The page consists of two columns.
    1. a column consisting of a top image, followed by the menu, etc. against a tiled background, and
    2. a column of the top banner with tiled background and the main content.
  2. or,

  • a banner with an image against a tiled background, followed by two columns,
    1. the menu and
    2. the main content.
  • How you treat the footer could make for minor changes and is not a factor initially.

    Either approach is workable and depends on your idea of the structure. Decide, and write up the html markup without concern for how it will display. At that point, you can can start writing your positioning rules.

    Determine the structure of the page, mark it up with a structural markup language (html), how much easier could it be compared to table layouts? Of course learning to think in terms of structural groups may fluster you for a while if you're steeped in the table/grid layout paradigm. Smile

    cheers,

    gary

    [/][/][/]

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    crimsone
    Offline
    Regular
    Last seen: 12 years 8 weeks ago
    Joined: 2005-07-24
    Posts: 29
    Points: 0

    Extremely new - need layout/background help

    Ah. Now that seems to make much more sense! Less code too Smile

    I have to say though, I wasn't expecting to see the 1-2 px gap between the corner and the header. Any idea where that came from? It looks absolutely terrible in ie 6 (well, it will look awful once the images are there), but it's perfectly fine in firefox - no gap at all.

    I really, really appreciate the help. That was really starting to get at me.

    As for your suggestions Gary, I have a feeling that either I misunderstand what your saying, or perhaps you aren't seeing my intent (which would be my fault for not explaining well enough). essentially, I'm going to be putting a stretch image in the top column and another in the left column. Both of these will be gradient images, and will meet in the corner where I will place an image to link the two like a big inverted "L" shape. Perhaps I am mistaken and you already know this, in which case I'll double check and ask if this will still work.

    As for the table/box paradigm, although my language doesn't always show it, I'm trying to consistantly look at CSS layouts as a series of boxes placed next to each other on a page, as opposed to HTMLs tables divided into columns, and divided again into cells. Is the 'box placement' concept the correct way to look at it? Suddenly I'm not so sure.

    It's hard to be religious when certain people are never struck by bolts of lightning

    Anonymous
    Anonymous's picture
    Guru

    Extremely new - need layout/background help

    crimsone wrote:
    I have to say though, I wasn't expecting to see the 1-2 px gap between the corner and the header. Any idea where that came from? It looks absolutely terrible in ie 6 (well, it will look awful once the images are there), but it's perfectly fine in firefox - no gap at all.
    Show your code. Do you have a proper doctype?

    crimsone
    Offline
    Regular
    Last seen: 12 years 8 weeks ago
    Joined: 2005-07-24
    Posts: 29
    Points: 0

    Extremely new - need layout/background help

    Code is as on the links above. It *should be* proper doctype, as the html and the css are as the layout generator gave me, with the exception of the additions/changes mentioned here.

    It's hard to be religious when certain people are never struck by bolts of lightning

    Anonymous
    Anonymous's picture
    Guru

    Extremely new - need layout/background help

    crimsone wrote:
    Code is as on the links above. It *should be* proper doctype, as the html and the css are as the layout generator gave me, with the exception of the additions/changes mentioned here.
    Oops. For some reason I was thinking changes were made since that post. #-o

    crimsone
    Offline
    Regular
    Last seen: 12 years 8 weeks ago
    Joined: 2005-07-24
    Posts: 29
    Points: 0

    Extremely new - need layout/background help

    OK - I've looked at the css again, and I can see nothing obvious to cause it (perhaps being the novice I am). The one thing I have changed and then changed back is the #leftcol margin-right:1px, which I tried with a 0 to no effect. There's nothing in the HTML defining a border.

    I did try adding a negative margin-left value to the header box, but apart from it not working, I then realised that even if it did work, it would mess up the display in firefox where it already displays correctly.

    I've tried adding a float:left to the header, and this seems to get rid of the gap, but In IE the "left Column" text appears at the side of the left column and then goes where it should when the page is refreshed, and in firefox the left column seems to move up and under the corner, and the "left column" text appears underneath the left columns background colour.

    I've tried a few combinations of adding position:relative to the leftco, corner and header classes, but each one seems to provide a new and interesting mess.

    I've also tried floading the header to the right, but as soon as I try to define a width, it messes the page up again, in particular, width:100% puts the header back below the corner (full page width eaving no room I guess) after each attempt, I've brought the code back to where it was to make sure it doesn't get messed up.

    To me, it looks as though there's something different about the way that IE (a patchy browser) handles the code compared to Firefox (a nice and compliant browser that tries to stick to the rules). I may be wrong with that, but it's how it looks to me.

    The sum of this suggests, to my untrained eye, that there's nothing wrong with the code in theory but in practice it's not all it should be. This would probably suggest that this isn't the sort of problem I could solve unless I knew what I was looking for... ...and I don't. As far as I am aware, and as far as anything's told me, the header box should be floating right next to the corner box as it does in firefox. IE isn't having any of it though.

    It's entirely possible that I'm completely or partially wrong here, so could somebody tell me either way?

    So at the moment, the code is still as above.

    It's hard to be religious when certain people are never struck by bolts of lightning

    gary.turner
    gary.turner's picture
    Offline
    Moderator
    Dallas
    Last seen: 10 hours 53 min ago
    Dallas
    Timezone: GMT-5
    Joined: 2004-06-25
    Posts: 9743
    Points: 3822

    Extremely new - need layout/background help

    The box concept is close. What you're really looking at is flow environments, a small, but important distinction. Each group represents an independent flow reference.

    I think I get your idea. This is the banner plus two column version;

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xml:lang="en"
          xmlns="http://www.w3.org/1999/xhtml"
          lang="en">
    <head>
      <meta name="generator"
            content="
            HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org" />
            
      <meta name="editor"
            content="Emacs 21" />
      <meta name="author"
            content="Gary Turner" />
      <meta http-equiv="content-type"
            content="text/html; charset=iso-8859-1" />
    
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    html, body {
        margin: 0;
        padding: 0;
        }
    
    body {
        background: white url(sidebargr.jpg) repeat-y;
        color: black;
        }
    
    p {
        font-size: 1em;
        }
    
    p#footer {
        position: absolute;
        bottom: 0;
        margin-left: 160px;
    
        }
    
    h1 {
        margin: 0;
        line-height: 100px;
        text-align: center;
        }
    
    #banner {
        overflow: hidden;
        background: white url(topbargr.jpg) repeat-x;
        color: #808080;
        }
    
    #banner img {
        width: 100px;
        height: 100px;
        float: left;
        }
    
    #content-wrapper {
        position:  relative;
        display: table;
        }
    
    IE/Win hack for 'hasLayout'*/
    /* \*/
    * html #content-wrapper {
        height: 1px;
        }
    /* */
    
    #nav {
        width: 150px;
        float: left;
        margin-bottom: 3em;
        }
    
    #nav ul {
        margin-left: 15px;
        padding: 0;
        list-style: none;
        }
    
    #main {
        margin-left: 160px;
        margin-bottom: 3em;
        }
    
    /*]]>*/
    </style>
    
    </head>
    
    <body>
      <div id="banner">
        <img src="cornergr.jpg"
             alt="" />
    
        <h1>generic banner</h1>
      </div><!-- end banner -->
    
      <div id="content-wrapper">
        <div id="nav">
    
          <ul>
            <li>menu item</li>
    
            <li>menu item</li>
    
            <li>menu item</li>
    
            <li>menu item</li>
    
          </ul>
        </div><!-- end nav -->
    
        <div id="main">
          <h2>Main content</h2>
    
          <p>Blah, blah, blah.</p>
        </div>
    
        <p id="footer">footer stuff © 2005</p>
      </div><!-- end content-wrapper -->
    </body>
    </html>

    I hope your gradients match up better than my quickies. Smile

    cheers,

    gary

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    crimsone
    Offline
    Regular
    Last seen: 12 years 8 weeks ago
    Joined: 2005-07-24
    Posts: 29
    Points: 0

    Extremely new - need layout/background help

    Wow! Thankyou! I wasn't expecting the full page code for it! Yes, thats almost exactly what I wanted to do. I'm sitting here trying playing with it now to try to understand how it all flows and how the code works.

    I think it should be obvious by now how utterly useless I seem to be with CSS layouts, and so I wonder if somebody could re-visit two of my questions...

    1, Is there an idiot proof tutorial for CSS layouts that anybody knows of?

    2, I would really like to understand where that space only displayed in Internet Explorer came from in the example on the above links I posted. It still makes no sense at all to me, even after looking at it for a while. All it's done is made me more and more confused. I *could* simply say "thanks for the code" and forget about it, but I'm not like that. If I don't at least try to understand it, I'll never learn. Could anybody point out what's wrong with it for me and explain why so that I know in future?

    It's hard to be religious when certain people are never struck by bolts of lightning

    gary.turner
    gary.turner's picture
    Offline
    Moderator
    Dallas
    Last seen: 10 hours 53 min ago
    Dallas
    Timezone: GMT-5
    Joined: 2004-06-25
    Posts: 9743
    Points: 3822

    Extremely new - need layout/background help

    Second question first. I don't know. I suspect the three px jog, but that's not tested.

    First question: There is nothing that is proof against some fool somewhere. w3schools is respected. Also, roytheboy mentioned a site that I had forgot, but is very good, http://academ.hvcc.edu/~kantopet/index.php

    cheers,

    gary

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    crimsone
    Offline
    Regular
    Last seen: 12 years 8 weeks ago
    Joined: 2005-07-24
    Posts: 29
    Points: 0

    Extremely new - need layout/background help

    Thanyou very much again!!! I'd never have thought that something so simple would keep me occupied for days. lol I do appreciate it though.

    Anyways, I've looked and played with the code, and I think I perhaps understand about 50% of the flow of the page, and intend to keep looking.

    Also, if it wouldn't be too much trouble, I've annotated the code to try to mark up what each part of it relates to. There is one part (a content wrapper) that I don't understand. Could somebody please look at it and tell me whether I have given each section the correct description?

    page is here
    Stylesheet is here

    Right now, I'm going to hop over the web a bit to find out the proper usage of "min-width" to try to give the page a minimum width so that it keeps the same structure and doesn't get broken when the window is made smaller than the width of the left column plus the title.

    It's hard to be religious when certain people are never struck by bolts of lightning

    gary.turner
    gary.turner's picture
    Offline
    Moderator
    Dallas
    Last seen: 10 hours 53 min ago
    Dallas
    Timezone: GMT-5
    Joined: 2004-06-25
    Posts: 9743
    Points: 3822

    Extremely new - need layout/background help

    I used the content wrapper to hold the nav and main columns and provide a reference for the AP footer. It's probably redundant, since you could make the footer a static positioned (default) element and add {clear: both;} to its rules. The wrapper is {display: table;} to auto clear the float. It could have been {overflow: hidden | auto;}, but Opera handles that poorly in this case. Else, I could have applied Tony's clearing hack ( http://www.csscreator.com/attributes/containedfloat.php ), but was too lazy to type it all. Smile

    The bottom margins on nav and main keep their contents from overrunning the footer.

    On a side note, make things easy on the folks trying to help you (and yourself when debugging); leave the styles embedded in the doc's head. Also, any images should be ref'd with the full URI, so if we work on it locally, we use your images without needing to download them.

    cheers,

    gary

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    gary.turner
    gary.turner's picture
    Offline
    Moderator
    Dallas
    Last seen: 10 hours 53 min ago
    Dallas
    Timezone: GMT-5
    Joined: 2004-06-25
    Posts: 9743
    Points: 3822

    Extremely new - need layout/background help

    in re min-width, use 760px rather than 800, to allow for the actual usable width.

    cheers,

    gary

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    crimsone
    Offline
    Regular
    Last seen: 12 years 8 weeks ago
    Joined: 2005-07-24
    Posts: 29
    Points: 0

    Extremely new - need layout/background help

    OK. I'll get that code changed now to put the css back in the html. I'll change the min-width too - thanks Smile The content wrapper thing is going to take me a little longer to get my head around though.

    After a little bit of a google, I've found that min-width really was as easy to use as I thought it should be, the problem being only that IE doesn't support it (3px jogs... doesn't support the proper standard... does MS actually have a quality control department? This is my first project and I've already found two bugs in what they'd like to say is the best browser out there!!!)

    I've found an IE workaround for this, so it appears, ([url]http://www.stunicholls.myby.co.uk/boxes/width2.html)[/url], but it apparently requires a second outer container. I've experimented with it, but I keep breaking the page - I'm either getting the container wrong, or I'm getting the workaround itself wrong.

    Do I place the second container on the outside of the existing container, or on the inside? Also, given that the container is attached to the body tag, what do I attach it to/where do I call it in the html?

    It's hard to be religious when certain people are never struck by bolts of lightning