Long Cloud Blogs

Adventures in CSS

( or how I learned to stop worrying and love the WC3 )

CSS has driven me crazy in the past, and it was well on its way again today. I freely tell my clients I’m NOT a graphic layout designer / web UI designer, I’m a developer. I can make you a web application that will roll over for you and let you pet its tummy, but it won’t be pretty. That is just not a skill that I have cultivated, I always recommend they hire a web / graphic designer, and I’ll be glad to use the designer’s layout (and I really like Microsoft’s new Expression Studio for coordinating dev work with UI design work, but that’s another blog entry for another day).

Just because I don’t currently have a skill doesn’t mean I shouldn’t learn a new one, and web design is one skill I need to learn. So the problem is, I started programming when layout on the web meant <table>… and nowadays that is verboten and BAD!!! Makes you look like a real noob! So every once in a while in order to better myself and my education I decide to make a new web site in the correct way using CSS. Three or four days later… I scream at my screen, curse the WC3 bureaucracy that set the CSS standard, damn the lack of a coherent centralized f1 help system (Google gives WAY too many hits for useful searching on esoteric issues), and rip out the <div> and put in <table>.

Now I have been working on my new corporate website and I decided that this was the perfect time to once again try to do it the “correct” way according to the Kewl Kids. I decided to start with my Blog. And after 3 days of struggling with trying to get CSS to do the layout correctly in IE7, IE8, Firefox, Chrome and Opera I threw up my hands and went to a table. What had taken me 3 days to try to get running using CSS without success, I had up and running correctly within 1.5 minutes using the table.

Now I needed this blog to display correctly so if the Subtitle up above is still ~~crossed out~~ then I haven’t solved the problem. I’m planning this blog entry to detail exactly how I went from something that is easy to do in tables to doing it “correctly” in CSS, and then compare and contrast. I don’t want to get into a holy war, but as I start this blog, I have to tell you, unless you are using CSS in order to format your page after you have physically put your content first in the html (in order to support our the web readers used by Blind User), I’m leaning towards thinking there is no logical reason to prefer CSS for layout of items on a page over table if you can achieve all that you desire with a table.

And let’s not even get into the “not all browsers handle tables well” because “not all browsers handle CSS well”.

Here is what I want with the page maximised (provided of course you have a monitor wide enough to see this

now when you resize it I want the graphic and text at the top to move over (basically the graphic should remain the same size and centred within the white space)

and then finally as you continue the compression, it starts cutting off the graphic

As I said in a table, easy peasy, not so much in CSS.

Let us begin the fun.

So here is my base “hello world” page

   1:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   2:  <html xmlns="http://www.w3.org/1999/xhtml">

   3:  <head>

   4:  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

   5:  <link href="MyLayout.css" rel="stylesheet" type="text/css" />

   6:  <title>Starting Page</title>

   7:  </head>

   8:  <body>

   9:     <ul>

  10:        <li>Home</li>

  11:        <li>Contact</li>

  12:        <li>Sign In</li>

  13:     </ul>

  14:     <img alt="Logo" src="LongCloudLogo.jpg" />

  15:     <img alt="HeaderGraphic" src="mainpic_new.jpg" />

  16:     &quot;... A Yankee in the Land of The Long White Cloud, Aotearoa ...&quot;

  17:     <div>

  18:        Archives

  19:     </div>

  20:     <div>

  21:        Links</div>

  22:     <div>

  23:        tag cloud</div>

  24:     <div>

  25:        M</div>

  26:  </body>

  27:  </html>

View the results here. So what’s next, let’s start by making that list of links at the beginning, layout horizontally and justify to the right. So first things first, let’s surround that UL with a <div>, give that div an id and use that id to format it. We’ll give it an ID of “menutop”

I want the text to be to the right so we will text-align the div to the right, and that sorta gets us there

now I just need to get rid of the dots and get them to go in a line… So let’s make a style that applies only to a <li> in something with an ID of “menutop” and first up to get rid of the dots, I’ll try the list-style:none and finally to get them to line up in a row, I set their display to in-line

   1:  <body>

   2:     <div id="menutop">

   3:        <ul>

   4:           <li>Home</li>

   5:           <li>Contact</li>

   6:           <li>Sign In</li>

   7:        </ul>

   8:     </div>

with

   1:  #menutop {

   2:     text-align: right;

   3:  }

   4:  #menutop LI {

   5:     list-style-type: none;

   6:     display: inline;

   7:  }

gives us

And you can view the results here. So we move on to the next thing my header images: I have two images I want them to be besides each other in the same way as the menus, but I don’t want them to move in the same way

I want the left most graphic to stay where it is, and I want the right most graphic to stay centred in the remaining white space. My first thought was I’ll just do the same thing to start with as I did for the menu items, I’ll set the graphics to be display: inline; but as one of my programming compadres, who know more about CSS then I do, gently pointed out to me that won’t work, when I said “it should, that’s logical” his response was “Not all ASPX controls have the same properties, just because one property works on an image box (like picture source) it won’t work on a label (which has not picture). CSS just doesn’t tell you it’s nonsensical, it just ignores you”. And after thinking about it a bit, I had to agree, he was right.

first thing I notice is the left graphic is ALREADY doing what I want it to do. So let’s start with there, first up I put all the graphics in one div, then because I wanted the behavior of the different graphics to be different, it made sense to me to put them each in their own seperate div like this:

   1:     <div class="header">

   2:        <div class="headerleft">

   3:           <img alt="Logo" src="LongCloudLogo.jpg" />

   4:        </div>

   5:        <div class="headerright">

   6:           <div>

   7:              <img alt="HeaderGraphic" src="mainpic_new.jpg" />

   8:           </div>

   9:        </div>

  10:     </div>

Now to put some styling to those classes, I don’t need to do anything to the header div, but I need to do something to the headerleft style so it “stops” forcing the next div down a line when the windows gets too thin. So my first thought is “no-wrap” from tables, but Google’s suggestions don’t get me there. My CSS friend says, try float : left, I say “why what does that do” and he says, “it makes it work for me” :-| LOL. So I try it, and it works, my right graphic now stays on the same line even if the window get’s too thin (and I have a new item on my ToDo list, look up and understand CSS float and how it works).

Now to get my right graphic to centre up? no problem text-align : center (but really it shouldn’t be text, because I’m not centring text). Almost there, but NOT QUITE. When making the window thinner, the right graphic stays on the same line, but it begins to overlap, so we need to make it stop once it would start encroaching on the left graphic; the left graphic is 365px in width, so we need to put in a margin-left : 365px on the right graphic and it should stop, and it does.