14 replies [Last post]
jimhere
jimhere's picture
Offline
Enthusiast
Cambridge Mass
Last seen: 12 years 5 weeks ago
Cambridge Mass
Timezone: GMT-4
Joined: 2005-03-14
Posts: 57
Points: 0

I've been puuting together a web site without tables (finally). Like many, I've learned tricks from here and ALA, cssZenGarden, etc. So thanks.
Anyway, I'm close, but...

site
http://www.surfmerchants.net/jim/test/
css
http://www.surfmerchants.net/jim/test/styles.css

1. the vertical bars separating the row of main nav at the top (#menuBar ul#topnav li)... how do I add the extra one at the beginning? Right now I'm using:
border-right: 1px solid #524010;

2. how do I make a minimum height for the main white space (#mainText), so that if there is a small amount of copy the page won't shrink under the side panel (maybe keep it 500px high no matter how small the content?

2b. how do I make it so that if the side panel (#linkList) happens to have lots of stuff, it'll push the rest of the page down instead of dumping over it?

3. Why won't the bottom tannish bars (#footer and #bottomBar) appear in Firefox?

4. Why do rolling over links in the side panel (with the blue bullets) make the horizontal dividing line (li and/or #linkList li a) disappear?

born in the 20th century

Electric
Offline
Regular
Last seen: 16 years 19 weeks ago
Joined: 2005-07-15
Posts: 50
Points: 0

A few details...

regarding the vertical bars

the easiest way would be to add a class ( .first ) to the first <li> in your menu item and give that a border-left: property similar to border-right: property you have on your li's

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Re: A few details...

jimhere wrote:
1. the vertical bars separating the row of main nav at the top (#menuBar ul#topnav li)... how do I add the extra one at the beginning? Right now I'm using:
border-right: 1px solid #524010;

Give your first <li> a class of its own and add left-border to it.

jimhere wrote:
2. how do I make a minimum height for the main white space (#mainText), so that if there is a small amount of copy the page won't shrink under the side panel (maybe keep it 500px high no matter how small the content?

You can use min-height for standards-compliant browsers. IE doesn't understand min & max values so you have to use height & width. You can use the * html yourdiv { height: xx; } hack to hide from other browsers.

jimhere wrote:
3. Why won't the bottom tannish bars (#footer and #bottomBar) appear in Firefox?

You're missing the # from your hex value.

jimhere wrote:
4. Why do rolling over links in the side panel (with the blue bullets) make the horizontal dividing line (li and/or #linkList li a) disappear?

Which horizontal dividing line?

What is listPict and tipper? :?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

jimhere
jimhere's picture
Offline
Enthusiast
Cambridge Mass
Last seen: 12 years 5 weeks ago
Cambridge Mass
Timezone: GMT-4
Joined: 2005-03-14
Posts: 57
Points: 0

A few details...

OK, I made some progress (I updated the above links):

1. Maybe I typed the ".last" stuff wrong (I actually want the last main nav bar gone), but I can't make it work. Is there an example page in the world you know of?

2. and 2b. That min-height works great... except how can I get it to also be the side panel's max-height? I mean, if a page has alot of content in the side panel, it should push the whole page down, while if it doesn't, the white-page content should control the height (unless they're both small, which is where min-height works).

3. Heh. Oops on the "#" symbol...

4. I gave up and made a custom <hr /> for the dividing lines in the side panel.

list pict is me trying to control where the thumbnails sit in the side panel.
tipper is a kinda tool-tip -- a regular link is blue, but the tipper stays regular-text brown with a little underline. This is for the occasional technical term that may come up. The copy might read "js" but on roll-over, a tip would read "java script".

born in the 20th century

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

A few details...

jimhere wrote:
list pict is me trying to control where the thumbnails sit in the side panel.
tipper is a kinda tool-tip -- a regular link is blue, but the tipper stays regular-text brown with a little underline. This is for the occasional technical term that may come up. The copy might read "js" but on roll-over, a tip would read "java script".

You can't make up your own HTML tags though. Try running your page through the validator.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Anonymous
Anonymous's picture
Guru

A few details...

Tyssen wrote:
You can't make up your own HTML tags though.
I think you can with a custom doctype. Wink
Tyssen wrote:
Try running your page through the validator.
Nah, the doctype is incomplete and has no closing delimiter so the validator won't even try. Smile

jimhere
jimhere's picture
Offline
Enthusiast
Cambridge Mass
Last seen: 12 years 5 weeks ago
Cambridge Mass
Timezone: GMT-4
Joined: 2005-03-14
Posts: 57
Points: 0

A few details...

hmmm, the html validator says I shouldn't use a "<" in the first <html> tag... I thought that was basic. Therefore it could not continue.

The css validator says I defined a color wrong (shouldn't have used "transparent"), and that I missed a semi-colon. Not bad.

I guess I'll get a handle on this code stuff (I'm a designer) soon. My layout IS fairly table-less. I'll be perfect in a month! I swear!

born in the 20th century

Anonymous
Anonymous's picture
Guru

A few details...

jimhere wrote:
hmmm, the html validator says I shouldn't use a "<" in the first <html> tag...
Actually it doens't say that at all. It says that you didn't close your doctype...it's incomplete anyway. Let's get a proper doctype in there, ok?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

A few details...

Hi,

To get that last bar on the topnav to disappear your html & styles will look something like this:

#topnav li { border-right: 1px solid black;}
#topnav li.last {border-right: none;}

<ul>
  <li><a>item</a></li>
  <li><a>item</a></li>
  ...
  <li class='last'><a>item</a></li>
</ul>

To get the sidebar to push the footer down. You can't use position:absolute. Position:absolute removes the element from the flow and its not possible to determine its rendered dimensions (at least not without resorting to javascript). You need to float the sidebar and clear the footer. eg.

#linklist { float: left; width: 200px;}
#maintext { margin-left: 205px; margin-top: 45px;}
#footer { clear:both;}

<div id="wrap">
  <div id="linklist">  ... </div>
  <div id="maintext"> ... </div>
  <div id="footer"> ... </div>
</div>

the extra margin-top on #maintext is to keep it below your blue bar. there will be other methods of doing that.

jimhere
jimhere's picture
Offline
Enthusiast
Cambridge Mass
Last seen: 12 years 5 weeks ago
Cambridge Mass
Timezone: GMT-4
Joined: 2005-03-14
Posts: 57
Points: 0

A few details...

I guess things like the "#" before the color name and the missing ">" to close the doctype mean I should have posted in the "Beginners CSS Questions" forum. Anyway, to follow up:

Questions about my css validation:
I'm OK here except for several similar warnings (not errors):
"You have no background-color with your color"
and
"You have no color with your background-color"
Is it that I need to call it "background-color: #123456;" instead of "color: #123456;" ?
But it's text color, I don't want a background color...

Questions about my html validation:
What is the deal with putting a slash at the end of a meta line (or any line), like:
<meta name="author" content="jimHere" />
I see it all the time, but when I used it the Validator didn't approve.

And I got this a couple times in the Validator: required attribute "ALT" not specified." Do all images require an alt?

About my listPict and tipper. In my error page for html validation errors, it underlined the faulty character and the cursor changed to a question mark just like my tipper. But the error was more offended by my use of "title", not tipper in the code, whereas IT used it itself:

Line 42 column 91: there is no attribute "TITLE".
(validator.w3.org source:)
<pre><code class="input">... sanctus est sit amet. <tipper title=<strong title="Position where error was detected.">"</strong>Lorem ipsum dolor sit amet">Lorem ipsum</code></pre>

I noticed it's stylesheet (validator.w3.org/base.css) had:

abbr[title], acronym[title], span[title], strong[title] {
    border-bottom: thin dotted;
    cursor: help;
}

Does this mean I should be using "abbr" instead of title? Is that what is meant by "You can't make up your own HTML tags"?

Plus it doesn't like <hr />'s to be part of lists. How else can I make dividing lines?

Mostly, thanks Chris..S for the page layout tips. As you can see in my refreshed links (above), they worked!

born in the 20th century

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

A few details...

jimhere wrote:
Questions about my css validation:
I'm OK here except for several similar warnings (not errors):
"You have no background-color with your color"
and
"You have no color with your background-color"
Is it that I need to call it "background-color: #123456;" instead of "color: #123456;" ?
But it's text color, I don't want a background color...

This one's due to a recent change in the Jigsaw validator and has to do with accessibility issues more than anything else as people with disabilities often have their own personal stylesheets that they use when viewing sites and if you don't always specify a background colour, they may not see things as you intended. Seems to be a bit of debate about whether this one is being a bit too strict and if you check a lot of the major CSS/XHTML designed sites, you'll find they all have the same warnings too.

jimhere wrote:
Questions about my html validation:
What is the deal with putting a slash at the end of a meta line (or any line), like:
<meta name="author" content="jimHere" />
I see it all the time, but when I used it the Validator didn't approve.

That's cos you've got a HTML 4.0 doctype and the trailing slash is for XHTML documents.

jimhere wrote:
And I got this a couple times in the Validator: required attribute "ALT" not specified." Do all images require an alt?

Yes they do.

jimhere wrote:
About my listPict and tipper. In my error page for html validation errors, it underlined the faulty character and the cursor changed to a question mark just like my tipper. But the error was more offended by my use of "title", not tipper in the code, whereas IT used it itself:

Line 42 column 91: there is no attribute "TITLE".
(validator.w3.org source:)
<pre><code class="input">... sanctus est sit amet. <tipper title=<strong title="Position where error was detected.">"</strong>Lorem ipsum dolor sit amet">Lorem ipsum</code></pre>
It may look like it's picking up on the title, but I can guarantee you it'll be tipper that it's objecting to cos as I said above, using a standard doctype like the one you're using, you can't make up your own HTML tags - they have to come out.

jimhere wrote:
I noticed it's stylesheet (validator.w3.org/base.css) had:
abbr[title], acronym[title], span[title], strong[title] {
    border-bottom: thin dotted;
    cursor: help;
}

Does this mean I should be using "abbr" instead of title? Is that what is meant by "You can't make up your own HTML tags"?

No, abbr is a valid HTML tag. tipper and listPic aren't. Lorraine gives a good explanation about abbr, acronym and title tags here.

jimhere wrote:
Plus it doesn't like <hr />'s to be part of lists. How else can I make dividing lines?

Use border-bottom instead.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

A few details...

Tyssen wrote:

jimhere wrote:
Plus it doesn't like <hr />'s to be part of lists. How else can I make dividing lines?

Use border-bottom instead.

Or if you need true division, use separate lists.

jimhere
jimhere's picture
Offline
Enthusiast
Cambridge Mass
Last seen: 12 years 5 weeks ago
Cambridge Mass
Timezone: GMT-4
Joined: 2005-03-14
Posts: 57
Points: 0

A few details...

Well, it all validates now, css and html. But it was crazy (because I've never done it before).

When you said that I couldn't use "tipper", for example, I thought it was the word "tipper". It was ID vs. Class (again, I'll be posting in the Beginner Forum from now on). Also, Lorraine's article explained the tool tip stuff, as well as the "alt" thing.

Plus the HR's are gone, and I made a #linkList li a.t (t fot thumbnail) to control the thumbnails within the side-list (was this too much?).

So thanks everyone for helping me make my first (true) table-less layout.

I'll probably have another question any minute...

born in the 20th century

jimhere
jimhere's picture
Offline
Enthusiast
Cambridge Mass
Last seen: 12 years 5 weeks ago
Cambridge Mass
Timezone: GMT-4
Joined: 2005-03-14
Posts: 57
Points: 0

A few details...

Wolfcry, I just saw you post.

Quote:
Or if you need true division, use separate lists.

Would that be cleaner than the border method I used? Or would someone have to remember to add it as a list for future changes (someone else will probably do changes)?

born in the 20th century

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

A few details...

Not necessarily cleaner, but it would be divided if unstyled (in older browsers, or if user were to choose so).
Actually, I just looked at the site and see what you're trying to accomplish. The bottom border method is best here. I had thought you were trying to sub divide the menu :oops: