Wrox Programmer Forums

Need to download code?

View our list of code downloads.

| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Dreamweaver (all versions) section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #11 (permalink)  
Old April 28th, 2004, 08:36 PM
Authorized User
 
Join Date: Apr 2004
Location: , , Brunei.
Posts: 40
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
Reply With Quote
  #12 (permalink)  
Old April 28th, 2004, 08:48 PM
Authorized User
 
Join Date: Apr 2004
Location: , , Brunei.
Posts: 40
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
Reply With Quote
  #13 (permalink)  
Old April 28th, 2004, 09:07 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

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
::::::::::::::::::::::::::::::::::::::::::
Reply With Quote
  #14 (permalink)  
Old April 28th, 2004, 09:24 PM
Authorized User
 
Join Date: Apr 2004
Location: , , Brunei.
Posts: 40
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
Reply With Quote
  #15 (permalink)  
Old April 28th, 2004, 09:48 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

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
::::::::::::::::::::::::::::::::::::::::::
Reply With Quote
  #16 (permalink)  
Old April 28th, 2004, 10:05 PM
Authorized User
 
Join Date: Apr 2004
Location: , , Brunei.
Posts: 40
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
Reply With Quote
  #17 (permalink)  
Old April 28th, 2004, 10:17 PM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

Quick note: margins and padding etc go:

top - right - bottom - left


Imar
Reply With Quote
  #18 (permalink)  
Old April 28th, 2004, 10:33 PM
Authorized User
 
Join Date: Apr 2004
Location: , , Brunei.
Posts: 40
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
Reply With Quote
  #19 (permalink)  
Old April 29th, 2004, 01:01 AM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

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
::::::::::::::::::::::::::::::::::::::::::
Reply With Quote
  #20 (permalink)  
Old April 29th, 2004, 01:20 AM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

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

Regards,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
List of questions from 100% CSS Beginner horseatingweeds BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 8 December 12th, 2005 04:32 PM
Access, ASP, DWMX & Search engine help. malhyp Dreamweaver (all versions) 2 August 30th, 2005 05:26 AM
Styles.CSS and ASP.NET Newbie Questions sstory ASP.NET 1.0 and 1.1 Basics 4 September 29th, 2004 06:30 AM
differences between dwmx and dwmx2004 thecatat Dreamweaver (all versions) 7 July 4th, 2004 05:06 PM
synchronize files in dwmx 2004 thecatat Dreamweaver (all versions) 9 April 19th, 2004 09:03 PM



All times are GMT -4. The time now is 03:43 AM.


Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.