18 replies [Last post]
dewdrop_world
Offline
newbie
Last seen: 16 years 39 weeks ago
Timezone: GMT-5
Joined: 2005-03-02
Posts: 10
Points: 0

So I'm trying to lay out a new section of my web site using CSS instead of tables, and so far I got something that looks decent... in Safari. In any version of IE, total crap. I've looked at a bunch of online tutorials and everybody says to do something different.

The layout I want is very simple and standard: a menu column running down the left (150px), with a repeating graphic background going down to the bottom of the page. The rest of the browser width should be occupied with the page content: a very small block at the top containing links to other parts of the site, and then the page text.

First I tried using floats, which worked OK in Safari but in IE 5 (Mac) I got the three blocks going from left to right (instead of block 3 under block 2). So I tried absolute positioning, and now it's even worse. Block 2 and 3 are very narrow in IE6.

Page (view source to see the tags):
http://www.dewdrop-world.net/sc3/tutorials/layout-test.php?id=2 -- this is the full layout
http://www.dewdrop-world.net/sc3/tutorials/layout-test.php?id=3 -- use this one to drop the main page body (easier to see the tags in the source)

Style sheets:
http://www.dewdrop-world.net/sc3/tutorials/layout2.css
http://www.dewdrop-world.net/sc3/tutorials/tutorials.css

Layout2 is:

<!--
body {
		margin: 0px;
		padding: 0px;
		background-image: url(graf/dk-gray-bkgd.gif);
		background-repeat: repeat-y;
	}
	#main {
		float: left;
		min-height: 500px;
	}
	#menu {
		position: absolute;
		color: #FFFFFF;
		top: 0px;
		left: 0px;
		width: 150px;
	}		
	#sitelinks {
		position: absolute;
		top: 0px;
		left: 150px;
		right: 0px;
		height: 50px;
		background-color: #DDDDDD;
	}
	#content {
		position: absolute;
		top: 35px;
		left: 150px;
		right: 0px;
		padding-left: 10px;
		background-color: #FFFFFF;
	}
	#last {
		clear: both;
		background-color: #CCFFCC;
	}
	
	.tutoriallisttitle {
		text-align: center;
		padding-left: 20px;
	}
	
	.tutoriallist {
		padding-left: 20px;
	}
	
	.sitelinks {
		padding: 0px;
		text-align: center;
	}
	
UL	.tutoriallist {
		padding-left: 20px;
		font-weight: normal;
	}
	.tutorialcategory {
		padding-left: 20px;
		font-weight: bold;
	}
A	.tutoriallink {
		color: #FFFFFF;
	}

-->

Thanks for any advice.
hjh

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 38 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

CSS layout first try, not good

I didn't get into what's going on, but do see some things that need help.

In your .css file, do not have any html markup. That includes the html comment tags.

CSS is case sensitive and all properties and values are lower case. HTML is case insensitive now but future versions (xhtml) are not. All element tags are lower case. It's a good idea to start doing things with forward compatabillity in mind.

What is the purpose of #main? It seems to have no reason to live. If it's a wrapper (I didn't attempt to find the closing tag due to there being no indention of nested elements), it doesn't do anything worthwhile.

Look at my 2 Column demo. Simply omit the banner and put your navbar at the top of the content section. After that, just let the content flow.

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.

dewdrop_world
Offline
newbie
Last seen: 16 years 39 weeks ago
Timezone: GMT-5
Joined: 2005-03-02
Posts: 10
Points: 0

CSS layout first try, not good

kk5st wrote:
Look at my 2 Column demo.

A demo! A concrete example! Joy! It's been driving me nuts, all these on-line tutorials that don't differentiate between good CSS design practices and hacks the authors have learned to tolerate.

I'll try your recommendations and let you know how it works out.

Thanks--
hjh

dewdrop_world
Offline
newbie
Last seen: 16 years 39 weeks ago
Timezone: GMT-5
Joined: 2005-03-02
Posts: 10
Points: 0

CSS layout first try, not good

OK, I tried it. Now it looks decent in IE5/mac (although I can't get it to respect all the css rules, more about that later)...

but...

Now it's broken in Safari. Evil

Links to screenshots:

IE5/mac:
http://www.dewdrop-world.net/sc3/tutorials/graf/ie5.gif

Questions:

  • The class for "Tutorials" at the top left says text-align: center; but clearly it isn't.
  • How do I change the color of an active link?
  • Even though I have left padding in the li's in the main body, why are they sticking out on the left?

Safari:
http://www.dewdrop-world.net/sc3/tutorials/graf/safari.gif

Questions:

  • Background image gone... why?
  • Why does the margin in the "content" div not apply all the way down?

CSS files and page url are still at the same locations:

http://www.dewdrop-world.net/sc3/tutorials/layout-test.php?id=2 -- this is the full layout
http://www.dewdrop-world.net/sc3/tutorials/layout-test.php?id=3 -- use this one to drop the main page body (easier to see the tags in the source)

Thanks!!!
hjh

[/][/]
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 38 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

CSS layout first try, not good

Here's how I would put your page into my demo. It stands up to Moz, IE6, and Opera7.54. I don't have Mac to test Safari and since MS has orphaned IE/Mac, I see no reason to worry about it either.

<!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 1st August 2004), 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=us-ascii" />
  <link rel="shortcut icon" href="/favicon.ico" />

  <title>Dewdrop - local</title>

<style type="text/css">
/*<![CDATA[*/

html, body {
    padding: 0;
    margin: 0;
    }

body {
    font: 100% Tahoma, sans-serif;
    color: black;
    background-color: white;
    background: white url(navcolbg.jpg) top left repeat-y;
    }

p {
    font-size: 1em;
    margin: 1em 0 0;
    }

h1, h2 {
    line-height: 1.2;
    font-family: Tahoma, Helvitica, sans-serif;
    text-align: center;
    margin: 0;
    }


/*The background image should be the width of
  the sidebar.  Its purpose is to simulate a
  column of full height.*/
#wrapper {
    position: relative;

    }

#sidebar {
    float: left;
    width: 160px;
    padding: 1em 5px 0;
    color: white;
    }

#sidebar a {
    display: block;
    color: white;
    }

#sidebar a:hover {
    background-color: #eee;
    color: #333;
    }

#navbar {
    text-align: center;
    background-color: silver;
    margin-left: 170px;
    }

#navbar ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }

#navbar li {
    display: inline;
    }

#navbar li a {}

#navbar li a:hover {
    background-color: white;
    }

#main {
    margin-left: 170px;
    padding: 0 1em;
    line-height: 1.3em;
    }

/*** see http://www.positioniseverything.net/easyclearing.html
   for explanation of Tony Aslett's elegant hack ***/

.clearing:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

.clearing {
    display: inline-block;
    }

/* hides from IE/Mac \*/
* html .clearing { 
    height: 1%;
    }

.clearing {
    display: block;
    }
/* end hide from IE-Mac */
/*** end clearing hack ***/

.def {
    border-bottom: 1px dotted #666;
    cursor: help;
    }

/*]]>*/
</style>
</head>

<body>
  <div id="wrapper" class="clearing">
    <div id="sidebar">
      <h2>Tutorials</h2>

      <ul>
        <li>

          <h3>dewdrop_lib</h3>

          <ul>
            <li>Mixer routing</li>

            <li><a href="#">Test Link</a></li>
          </ul>
        </li>

      </ul>
    </div><!-- end sidebar -->

    <div id="navbar">
      <ul>
        <li><a href="#">bio/about :</a></li>

        <li><a href="#">sounds :</a></li>

        <li><a href="#">words :</a></li>

        <li><a href="#">supercollider :</a></li>

        <li><a href="#">contact</a></li>
      </ul>
    </div><!-- end navbar -->

    <div id="main">

      <h1>Signal routing with the mixing board suite</h1>

      <p>Signal routing in SuperCollider has a couple of complicating
      factors:</p>

      <ul>
        <li>Order of execution: generally, if one synth node is
        processing the output of another, the processing node (the
        effect) has to come later in the execution chain than the
        source. The exception is feedback loops, which can be
        implemented with InFeedback.</li>

        <li>Object-style coding (using synth and group objects) makes
        it easy to create and maintain nodes, but it allows for sloppy
        programming habits that can leave node order pretty much up to
        chance.</li>

        <li>Managing audio buses, while not difficult, can be
        confusing.</li>
      </ul>

      <p>MixerChannel and its supporting classes provide a structure to
      manage these issues transparently, allowing you to spend more
      time on what you want to happen sonically, instead of reinventing
      the nuts and bolts for every effect.</p>

      <h2>Structure</h2>

      <p>Each MixerChannel divides its functions into three groups on
      the server:</p>

      <ul>
        <li>The <span class="vocab">fader group</span> is the outer
        layer. It contains the other two groups, as well as the
        supporting synths (the fader/panner, aux sends, scope,
        recording, etc.). There is usually no need to put any of your
        own synths manually into this group. It's reserved for the
        MixerChannel's internal use.</li>

        <li>The <span class="vocab">synth group</span> sits at the head
        of the fader group. All of your sound-producing synths go
        here.</li>

        <li>The <span class="vocab">effect group</span> immediately
        follows the synth group. All of your sound-processing synths go
        here.</li>
      </ul>

      <p>Convenience methods help you place synths in the appropriate
      group.</p>
      <pre>
myChannel.play(something, args)  <span class="
comment">// play the synth in the synth group</span>

myChannel.playfx(something, args)  <span class="
comment">// play the synth in the effect group </span>
</pre>

      <p>"Something" can be a string or symbol, a crucial-library Instr
      or Patch, or a function.</p>

      <p>Here is an example, using one channel to play a synth through
      a simple multitap delay effect. (The synthdefs use some favorite
      coding techniques of mine, which will be described in another
      tutorial on this site.)</p>
    </div><!-- end main -->
  </div><!-- end wrapper -->
</body>

</html>

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.

dewdrop_world
Offline
newbie
Last seen: 16 years 39 weeks ago
Timezone: GMT-5
Joined: 2005-03-02
Posts: 10
Points: 0

CSS layout first try, not good

I didn't have any luck integrating that into my code... Works on IE, horrible in Safari.

I did find this just now:

http://webhost.bridgew.edu/etribou/layouts/2col_footer/

This guy says he's testing on Safari. I'll try it tonight or over the weekend.

If that doesn't work, I give up, I'm going back to tables for now. I shouldn't have to hire a web design professional just for a simple two column layout. Tongue

hjh

Helen
Offline
Enthusiast
NYC
Last seen: 16 years 45 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

CSS layout first try, not good

The link you gave (Ruthsarian 2-col layout) works splendidly in my Safari (1.2). It shoudn't give you any troubles.

dewdrop_world
Offline
newbie
Last seen: 16 years 39 weeks ago
Timezone: GMT-5
Joined: 2005-03-02
Posts: 10
Points: 0

CSS layout first try, not good

That's a relief... the problem I was having with tables is that the main content cell was respecting text formatting classes, while the menu bar at the left was not. I even tried an extreme case in that cell:

<p class="tutoriallink"><span style="color: 0xFFFFFF;">some text</span></p> ... and the text still displayed as black! What the... how can it just ignore a style that I wrote in explicitly as a span? Shock

Anyway, if this does it, I'll be in good shape. Thanks.
hjh

Helen
Offline
Enthusiast
NYC
Last seen: 16 years 45 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

CSS layout first try, not good

Unless there's some kind of shorthand ("0x"?) I'm not familiar with, the correct code is actually:

<span style="color: #ffffff;">

I'm happy to test-drive in Safari if you need it checked after you make your layouts changes.

dewdrop_world
Offline
newbie
Last seen: 16 years 39 weeks ago
Timezone: GMT-5
Joined: 2005-03-02
Posts: 10
Points: 0

CSS layout first try, not good

Oh, crikey, I'm confusing computer languages. "0x" is standard in C-like languages to indicate a hexadecimal value (like 24-bit color values).

That probably explains it. :oops:

Safari is my main browser, but I'll post here WHEN it works Wink

hjh

Helen
Offline
Enthusiast
NYC
Last seen: 16 years 45 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

CSS layout first try, not good

LOL. That's the spirit! It will work - just factor in lots of Java (the liquid, not the language.) Wink

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 38 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

CSS layout first try, not good

dewdrop_world wrote:
I didn't have any luck integrating that into my code... Works on IE, horrible in Safari.
What is broken in Safari to cause a problem. I tested my example in Firefox1.0, Mozilla1.7.1, IE6, and Opera7.54 in Windows, and Firefox an Moz in Gnu/Linux. There were zero problems.

It is my understanding that the khtml engine (Konqueror and Safari) is pretty good, if lacking some implementations. Are there bugs that would wreck such a basic layout as I posted?

gary

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

dewdrop_world
Offline
newbie
Last seen: 16 years 39 weeks ago
Timezone: GMT-5
Joined: 2005-03-02
Posts: 10
Points: 0

CSS layout first try, not good

kk5st wrote:
What is broken in Safari to cause a problem.

Apparently I made some mistakes integrating it into my stuff. I tried your example direct with no changes, and it indeed works pretty well.

One way or the other, I think I can get it to work. Thanks for all the help.

hjh

dewdrop_world
Offline
newbie
Last seen: 16 years 39 weeks ago
Timezone: GMT-5
Joined: 2005-03-02
Posts: 10
Points: 0

CSS layout first try, not good

I see now what the mistake was. I didn't close the wrapper div. Looks fine now.

Now it's just the finer points of color selection etc.

One problem remaining is that I can't get the lists in the main body to move over to the right. I've tried tweaking the left padding in the classes but nothing has any effect. ???

Otherwise, I am DELIGHTED to have it working! Thanks again for all the help!!! Laughing out loud Laughing out loud Laughing out loud

http://www.dewdrop-world.net/sc3/tutorials/layout-test.php?id=2

hjh

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 38 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

CSS layout first try, not good

You may use padding- or margin-left on ul to affect the indention.

#main ul {
    margin-left: 50px;
    }
Use a number you like.

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.

Helen
Offline
Enthusiast
NYC
Last seen: 16 years 45 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

CSS layout first try, not good

Lookin' good in my Safari. Smile

dewdrop_world
Offline
newbie
Last seen: 16 years 39 weeks ago
Timezone: GMT-5
Joined: 2005-03-02
Posts: 10
Points: 0

CSS layout first try, not good

Just to close out the topic on a good note--I went live last night with the new area on my site. Not much content yet but the infrastructure is there!

http://www.dewdrop-world.net/sc3/tutorials/index.php

I'm quite pleased with the results. Thanks again for all the help!

hjh

Helen
Offline
Enthusiast
NYC
Last seen: 16 years 45 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

CSS layout first try, not good

Very nice! The text is Greek to me, but I really like your graphic. Smile

bigredX
Offline
Regular
Delaware Valley, PA
Last seen: 16 years 38 weeks ago
Delaware Valley, PA
Joined: 2005-03-06
Posts: 15
Points: 0

styling lists

Each browser has a different default way to style a list, so it helps if you "zero" everything out first, for instance assigning body ul and body li a padding and margin of 0. Then whatever div or class you put the list in you style it from there. It makes it a lot simpler and more uniform across the different browsers.