more dwmx css questions

thecatat · April 28th, 2004, 08:36 PM

rich,

some of it IS over my head, and some i'm vaguely remembering from the bits i've read this past two weeks.

but i'm going to spend today [it's am out here] going through a beginners walk through. then i'm going to go through your suggestions and implement them with a better understanding of what i'm doing.

thanks for taking the time to explain and show the css. hopefully by the end of my day i'll have some reasonable [instead of lame] questions for you.

cat

Catherine [cat] Morley
Creative Director - Katz
Project Manager - Creative Latitude

thecatat · April 28th, 2004, 08:48 PM

richard,

<<Ok, as far as your design, I just reviewed one of the URLS, http://www.katzidesigns.com/bms_site/index.htm.
i just realized the url you looked at was one i've stopped doing to. it was a trial before the trial so to speak.

the one i'll be working on today is here -->> http://www.katzidesigns.com//bms_site/index1.htm

cat

Catherine [cat] Morley
Creative Director - Katz
Project Manager - Creative Latitude

richard.york · April 28th, 2004, 09:07 PM

This one looks good! Very professional.
http://www.katzidesigns.com/bms_site/index1.htm

Though I would use this image as part of the background of the <div> instead of as an input button, as it is it doesn't follow accessibility guidelines. For instance:

background: url(header.jpg);

instead of:

<input name="imageField" type="image" src="header.jpg" width="800" height="155" border="0">

Have a look at my post here for a complete list of what is possible with the background property:
http://p2p.wrox.com/topic.asp?TOPIC_ID=9816

I can see you've already discovered the joys of margin-based positioning. Well done!

Regards,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::

thecatat · April 28th, 2004, 09:24 PM

richard,

thanks for the compliments, but i'm merely fumbling along without a clue. i know i still need to get everything into css, and not have it spread all over the place. at least when i did the first trial, i was more css clean [yes?] now i've mixed it with bluerobot, glish and the max container site.

<<Though I would use this image as part of the background of the <div> instead of as an input button

i tried putting in the suggested code, but messed up somewhere. all i'm getting is text, not the jpg. [i don't understand what i'm doing].

<<I can see you've already discovered the joys of margin-based positioning. Well done!

you know, one of the hardest things about learning [or fumbling] with css and web at the same time, is feeling so in the dark. 'margin-based positioning?' is that what i did from the max design container suggestions?

cat

Catherine [cat] Morley
Creative Director - Katz
Project Manager - Creative Latitude

richard.york · April 28th, 2004, 09:48 PM

Oops, I didn't notice you were doing this in the body:
position:absolute; left:652px; top:152px; width:148px; height:447px; z-index:7;

Actually your design looks fine. What I meant by margin based positioning is instead of:
left:652px; top:152px;

Put in:
margin: 652px 152px 0px 0px;

(if that's the right order, I think it goes, margin: left top right bottom;)

That isn't going to be the precise measurements, but they're more consistent than the former method. In your design this doesn't appear to make a huge difference anyway so you can probably get away with left and top.

<input name="imageField" type="image" src="logo.gif" align="middle" width="73" height="101" border="0";>

This tag also isn't XHTML compliant, you left off the <input /> closing forward slash. I'd stick with:
<img src='logo.gif' style='width:73px; height:101px; border-width: 0px;' />

It looks like you're trying to do some hacks for Navigator 4, I wouldn't worry about trying to get things working in that browser, currently statistics show that less than 1% of users are still using it -- but that's your perogative, OTOH, it's nice to have full support for old browsers. After trying to design sites to work in that browser for years I've given up on it completely. Personally, I go by the idea if programmers stop supporting browsers like NS 4, maybe people will stop using them. ;)

>i tried putting in the suggested code, but messed up somewhere. all
>i'm getting is text, not the jpg. [i don't understand what i'm doing].

lol, sorry I had a typo in my post, I left off the 'n' in background.

#header {
background:#fff;
height:150px;
}

Try:

background: #fff url('header.jpg') no-repeat scroll center center;

If the image is larger than the <div> its edges will get cliped.

>i know i still need to get everything into css, and not have it spread all over the place
For a beginner though you've got a good start. While in the development stages that's not such a bad thing, as long as you move everything to the style sheet by the time you're done.

Regards,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::

thecatat · April 28th, 2004, 10:05 PM

Rich,

<<It looks like you're trying to do some hacks for Navigator 4

i believe that's the junk dwmx2004 put in. i'll gladly take it out as i don't want to design for 4. iv'e got enough headaches just trying to do what i'm doing!

i'm going to try and implement what you've suggested. but in a copy of the file - index2.htm

and from what i'm doing while trying to move the code into css and out of the html [but in the file still], stuff is breaking all over the place. clearly i've got stuff out of position.

again, thanks. my head is spinning but i won't give up.

cat

cat

Catherine [cat] Morley
Creative Director - Katz
Project Manager - Creative Latitude

Imar · April 28th, 2004, 10:17 PM

Quick note: margins and padding etc go:

top - right - bottom - left

Imar

thecatat · April 28th, 2004, 10:33 PM

imar,

what i need to do before getting to the suggestions is take out the gunk from the html and put it into the css. that way i can see better what all are suggesting. [right now it's a royal mess to me]

so i've got:

heading
navigation
left content [should the logo be included in the css?]
centre content
right content
footer

in the css, should it be in that order? and after that- h1, h2, h3, paragraph, etc?

and then the html?

cat

Catherine [cat] Morley
Creative Director - Katz
Project Manager - Creative Latitude

richard.york · April 29th, 2004, 01:01 AM

Hi Catherine,

The following is a complete re-write of your mark-up. I thought it would be better to illustrate what I was trying to say by example ;). I trashed any styles that didn't do anything, relocated your inline styles to the embedded style sheet and optimized the rest of it so you weren't repeating styles. Getting rid of all the clutter should better help you understand what's going on. Let me know if you have any questions!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Brunei Music Society: sitebuild</title>

        <style type="text/css" media="screen">

            /**
             * This thingy is the universal selector, it applies the properties
             * contained in it to *all* rendered elements, links, divs, headers,
             * the works.
             **
            */

            * {
                font-family: verdana, arial, helvetica, sans-serif;
            }

            /**
             * The div this style refers to wraps all of your content.
             *
             * This style will cause all div elements inside of it
             * with absolute positioning to be positioned relative
             * to it.
             **
            */

            body div {
                position: relative;
            }

            /**
             * Here is your header moved over to the style sheet, I've
             * positioned it using the margin property instead of with
             * top and left, as it was in your original mark-up.
             *
             * I've also rearranged your style sheet so that the style
             * rules appear in the same order as the content itself.
             **
            */

            #header {
                position: absolute;
                margin: -3px 0px 0px 0px;
                width: 800px;
                height: 157px;
                z-index:2;
                background: #999999 url('http://www.katzidesigns.com/bms_site/header.jpg') no-repeat scroll center center;
            }
            #nav {
                font-size: 11px;
                position: absolute;
                margin: 100px 0px 0px 350px;
                width:429px;
                height:40px;
                z-index:3;
            }

            /**
             * Here your margins were interferring with the left and top positioning,
             * I just moved the positioning over to the margins
             **
            */

            #bmstitle {
                font-size: 38px;
                margin: 50px 0px 0px 350px;
                position: absolute;
                width: 429px;
                height: 40px;
                z-index: 4;
            }
            #leftcontent {
                position: absolute;
                margin: 154px 0px 0px 0px;
                width: 147px;
                height: 447px;
                z-index: 5;
                background: #CCCCCC;
                text-align: center;
            }
            #leftcontent img {
                margin: 20px;
            }
            #centercontent {
                color: #333;
                padding: 20px;
                position: absolute;
                margin: 154px 0px 0px 130px;
                width: 501px;
                height: 420px;
                z-index: 6;
            }

            /**
             * Here I use the bottom property to glue the footer content to
             * the bottom of the centercontent.
             **
            */

            #footer {
                color: #333;
                margin: 20px;
                font-size: 10px;
                position: absolute;
                bottom: 0px;
                margin: 0px 0px 10px 0px;
                width: 473px;
                height: 25px;
                z-index: 9;
                text-align: center;
            }
            #rightcontent {
                position: absolute;
                margin: 154px 0px 0px 652px;
                width: 148px;
                height: 447px;
                z-index: 7;
                background: #CCCCCC;
            }
            h2 {
                font-size: 14px;
                margin: 14px;
            }
            p {
                font-size: 11px;
                margin: 14px;
            }
            a {
                color: #09c;
                font-size: 11px;
                font-weight: 600;
                text-decoration: none;
            }
            a:link {
                color:#FFCC66;
            }
            a:visited {
                color:#CC9966;
            }
            a:hover {
                background-color:#eee;
                color: #CCCC00
            }
        </style>
    </head>
    <body>
        <div>
            <div id="header">

                <!--
                    I moved these inside of the header, since that's where
                    they reside, they'll be positioned relative to the header instead
                    of relative to the whole document.
                -->

                <div id="bmstitle">
                    Brunei Music Society
                </div>
                <div id="nav">
                    Home | Concerts | Schools | Sponsors | Information | BMS | Contact
                </div>
            </div>
            <div id="leftcontent">
                <img src="http://www.katzidesigns.com/bms_site/logo.gif" style="width: 73px; height: 101px border-width: 0px;" />
            </div>
            <div id="centercontent">
                <p>
                    The Brunei Music Society is a voluntary, non-profit group that has been
                    organising concerts of classical music in Brunei since 1972.
                </p>
                <p>
                    BMS stages about 8 concerts per year with an average audience of about 120.
                </p>
                <p>
                    New members are welcome to join. Please check our members page and contact
                    the membership secretary to join.
                </p>
                <p>
                    We host musicians from all over the world and are pleased to receive expressions
                    of interest to play. Interested musicians please check the information page.
                </p>

                <!--
                     I moved the footer inside of the center content so that
                     it'll be positioned relative to the center content.
                -->

                <div id="footer">
                    Contents &copy; Copyright 2004: Brunei Music Society | Sitemap
                </div>
            </div>
            <div id="rightcontent">
                <h2>Whats New?</h2>
                <p>
                    For the month of April, the BMS is proud to present &lsquo;Pretty Lady&rsquo;.
                </p>
                <p>
                    PL is a bleep and lorem ipsum ame sit amet, lorem ipsum ame sit sit amet, lorem
                </p>
                <p>
                    Be sure to watch this space every month as we clue you to classical Brunei.
                </p>
                <p></p>
            </div>
        </div>
    </body>
</html>

Regards,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::

richard.york · April 29th, 2004, 01:20 AM

Sorry, posted that prematurely -- I edited my reply with better code.

Regards,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::