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
  #1 (permalink)  
Old April 27th, 2004, 05:42 AM
Authorized User
 
Join Date: Apr 2004
Location: , , Brunei.
Posts: 40
Thanks: 0
Thanked 0 Times in 0 Posts
Default more dwmx css questions

all,

i need some help. i need help from someone very patient. i introduced myself a week or so ago, but will repeat and add bits.

i’m starting from next to nothing when it comes to web. yes, i can create pretty pictures for others to dw up. yes, i can edit existing websites. and i can mess around with dreamweaver. but i’ve got holes a mac truck could drive through.

i enjoy print design, but css has excited me like no other technology has for years. it’s also frustrating the heck out of me. (keeping it clean here)

to learn, i’ve taken on a probono project

my layout is simple. you can see them here:
http://www.katzidesigns.com/bms_site/1bms_site.jpg
http://www.katzidesigns.com/bms_site/2bms_site.jpg

as you can partly see from the above, my idea is for each new concert, the top graphic changes to match, as well as the link colours, background colour of the left and right columns, and the logo. and when there is a month between approved concerts, past concerts can rotate through. easy, right? :-)

after playing around with css from bluerobot, i goofed around with an online glish css (http://www.glish.com/css/7.asp), and got to here: http://www.katzidesigns.com/bms_site/index.htm

but of course that won’t work. it’s not hitting the top or left side, etc. and i don’t really understand what i’m doing so backed off and went to this site: http://www.maxdesign.com.au/presenta...dex_step03.cfm

i got bored with the max's containers, and mixed it with a bit of bluerobot and glish, to get this - http://www.katzidesigns.com/bms_site/html1.htm

1) my nav is underneath the header and it won’t come out
2) i’d like to be able to have the lines in the left and right column like in the jpg
3) no matter what i play with, i can’t get the logo to come down
4) i’d like to have a dark background like the black and grey band at the bottom of the header, but how?
5) anything else you see, please let me know

cat



Catherine [cat] Morley
Creative Director - Katz
Project Manager - Creative Latitude
Reply With Quote
  #2 (permalink)  
Old April 27th, 2004, 06:24 AM
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

Hi Catherine,

Welcome to the world of CSS ;) You are indeed trying to accomplish something that isn't easy and obvious at first. I use trial and error a lot to come up with a final working page. It's hard to explain these concepts over a medium like the Internet, but I'll do my best to help you. I don't have a fully working example and/or answer for you (I am no CSS guru myself), but I'll see what I can do.

First of all, you should fix the DTD you're using. Look at this article for working alternatives. You probably need this one:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
instead of the one you're using now.

The Glish example looks good to me, although it has a strange (rounding??) issue in the right border in Internet Explorer 6.
Anyway, I would use that example as your starting point.

Then some other things:

1. I would implement the Logo as a background image for the header div. This way, you're not really bothered with the image, while you can still use text in the div to create your navigation

2. The lines in the left and right nav can also be implemented with a background. Simply set the background-image to a small image with a dark and a light line, and the rest of the div will be automagically filled.

Now, I know I probably shouldn't say this, but are you trying to create a CSS only solution? Often (although it's getting less and less common), you'll see a hybrid solution for these type of layouts. Use a <table> (oh oh) for the general structure, and use CSS for all other styling stuff. This makes sure your page will also run in older browsers. I have been struggling with the exact same issue on my own site. Since I wanted to make the site work in older browsers as well, I opted for the table design. I have exactly one table for the three columns, while all the other stuff is done with CSS.

For more info about CSS and these kind of issues, be sure to check out www.alistapart.com You may also want to take a look at the book Designing With Web Standards (http://www.amazon.com/exec/obidos/AS...453908-6929552).

I know this may not be the answer you were hoping for, but I hope it's a start. I'll be more than happy to help you fix this, but again, I am not CSS guru (maybe Richard York is listing in and can offer some help).....

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
While typing this post, I was listening to: 4 by Tool (Track 8 from the album: Undertow) What's This?

Reply With Quote
  #3 (permalink)  
Old April 27th, 2004, 08:27 AM
Authorized User
 
Join Date: Apr 2004
Location: , , Brunei.
Posts: 40
Thanks: 0
Thanked 0 Times in 0 Posts
Default

imar,

1. I would implement the Logo as a background image for the header div. This way, you're not really bothered with the image, while you can still use text in the div to create your navigation

are you saying change the design?

<<are you trying to create a CSS only solution?

yes, i want this one to be a css only. thats the reason for taking this project on. tables i already know. older browsers are not much of an issue at this point, as no one uses aol out here, so have upgraded.

btw - i have designing with webstandards, eric meyer on css, html utopia. what i don't have is a lot of time at this end of my learning curve. i'm due to leave for holiday on the 11th and wanted to get far enough to take this job to a quiet hotel with me to finish. there i'll lock myself in with a couple of books and my computer and order room service. here i have too much to handle.

thanks for getting back to me,

cat


it's sort of 'i wanna know everything now' type of deal. then i can slow down and learn the other bits.



Catherine [cat] Morley
Creative Director - Katz
Project Manager - Creative Latitude
Reply With Quote
  #4 (permalink)  
Old April 27th, 2004, 08:32 AM
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

No, I am not saying you should change the design. The design looks perfect to me ;)

I just said that, using CSS, you could set the background of the header <div> with an image of your logo. Then the header <div> itself can hold the navigation code.

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
While typing this post, I was listening to: Zealots by Fugees (Track 4 from the album: The Score) What's This?

Reply With Quote
  #5 (permalink)  
Old April 27th, 2004, 11:51 PM
Authorized User
 
Join Date: Apr 2004
Location: , , Brunei.
Posts: 40
Thanks: 0
Thanked 0 Times in 0 Posts
Default

imar,

ahhh, ok. [thanks]

i do believe i need to go back to the books. while i was trying to sleep last night some of the css came back to me, and what i've done is incorrect.

so, i'll be back ;)

cat



Catherine [cat] Morley
Creative Director - Katz
Project Manager - Creative Latitude
Reply With Quote
  #6 (permalink)  
Old April 28th, 2004, 08:12 AM
Friend of Wrox
 
Join Date: Sep 2003
Location: Madison, Wisconsin, USA.
Posts: 451
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to Ben Horne
Default

Hi Catherine,

If you want to know, I would not even use tables in your website for layout. I believe I read somewhere here that CSS is much better for layout purposes. I believe it was Imar who advised against using tables for layout although I can't remember the specifics of what he said.

Imar, if you could maybe jump in here, that'd be awesome:D

Ben Horne
Madison Area Technical College - Truax
3550 Anderson Street
Madison, Wisconsin 53704-2599


-------------------------
http://community.webshots.com/user/valerian114

"There are two kinds of people in the world: Those who claim to be Flash junkies and those who actually are Flash junkies"
Reply With Quote
  #7 (permalink)  
Old April 28th, 2004, 07:06 PM
Authorized User
 
Join Date: Apr 2004
Location: , , Brunei.
Posts: 40
Thanks: 0
Thanked 0 Times in 0 Posts
Default

ben,

you are right in that i do not want to use tables. that's the point of doing this site, to use all css.

but the learning curve is a killer

cat


Catherine [cat] Morley
Creative Director - Katz
Project Manager - Creative Latitude
Reply With Quote
  #8 (permalink)  
Old April 28th, 2004, 07:19 PM
Friend of Wrox
 
Join Date: Sep 2003
Location: Madison, Wisconsin, USA.
Posts: 451
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to Ben Horne
Default

Hi Catherine,

If you're ever having problems implementing any CSS, don't hesitate to ask for help in either this forum or the HTML Code Clinic forum (under the Web category)

Hope This Helps.



Ben Horne
Madison Area Technical College - Truax
3550 Anderson Street
Madison, Wisconsin 53704-2599


-------------------------
http://community.webshots.com/user/valerian114

"There are two kinds of people in the world: Those who claim to be Flash junkies and those who actually are Flash junkies"
Reply With Quote
  #9 (permalink)  
Old April 28th, 2004, 07:26 PM
Authorized User
 
Join Date: Apr 2004
Location: , , Brunei.
Posts: 40
Thanks: 0
Thanked 0 Times in 0 Posts
Default

thanks ben,

what i really need to do though [as i'm not getting it], is go back to the books and come back in. i'm impatient is all.

cat



Catherine [cat] Morley
Creative Director - Katz
Project Manager - Creative Latitude
Reply With Quote
  #10 (permalink)  
Old April 28th, 2004, 08:23 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

Hi Catherine,

I wanted to point out that your DOCTYPE may be invoking quirks mode, depending on whether you went to the bother of downloading the DTD and saving it to a local directory:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

Your source code shows strictly formed XHTML, therefore, I would use a DOCTYPE invoking standards mode and use the strict DOCTYPE for XHTML. And that DOCTYPE as Imar pointed out is,

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

2nd, I wouldn't be too worried about coding for IE 5 for Windows, IE 5.5 and 6 make up close to 90% of the market share by most estimates, 6 being the bigger chunk. The other 10 % +/- will be standards-based browsers like NS 6, 7, Mozilla, Safari, Opera, etc. And a marginal percentage will still be using ancient browsers. In CSS its very important to use a standards mode DOCTYPE or you can get unexpected results in IE 6, as far as IE 5.5, don't worry so much about this at first, get your design working in IE 6 first, then worry about tweaking for other browsers. (That'd be my approach anyway)

Ok, as far as your design, I just reviewed one of the URLS, http://www.katzidesigns.com/bms_site/index.htm.

Add the following the keep your content from going behind the right colomn,

#centercontent {
    width: 420px;
 ...

Or whatever width you desire, the idea is that you're using absolute widths, so one needs to be specified explicitly there.

To get rid of the blue border around your header image:

img {
    border-width: 0px;
}

Ok, the next thing is to fix your positioning, here's a trade secret, use margins to absolutely position your boxes instead of top, left, right, bottom. Why? Because the CSS box model is more consistent in IE (version 6 standards mode, anyway) than IE's interpretation of relative positioning. Trust me, doing this will make a design that works in IE, NS, Moz and Opera, probably Safari too but I don't have a Mac to test it. Use top, left, right, bottom very sparingly. Second, use a <div> to wrap your content to gain the consistency I was just talking about with margins. Use the z-index property to layer each <div> to prevent one margin from interfering with another.

It'll go something like this:
Code:
        <div style='position: relative;'>
            <div id="header">
                <h1>
                    <a href="http://www.katzidesigns.com/bms/site/home.asp">
                        <img src="http://www.katzidesigns.com/bms_site/header.jpg" alt="header" width="800" height="151" />
                    </a>
                </h1>
            </div>
            <div id="leftcontent">
                <h1 align="center"><img src="http://www.katzidesigns.com/bms_site/logo.gif" width="73" height="101" /></h1>
            </div>
            <div id="centercontent">
                <p>&nbsp;</p>
                <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>
                <br />
            </div>
            <div id="rightcontent">
                <h1>Whats New?</h1>
                    <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, PL is a bleep 
                        and lorem ipsum ame sit amet,PL is a bleep and lorem ipsum 
                        ame sit amet,PL is a bleep and lorem ipsum ame sit amet,PL 
                        is a bleep and lorem ipsum ame sit amet,PL is a bleep and 
                        lorem ipsum ame sit amet,PL is a bleep and lorem ipsum ame 
                        sit amet,
                    </p>
                    <p>
                        Be sure to watch this space every month as we clue you to 
                        classical Brunei.
                    </p>
                    <p> </p>
            </div>
        </div>
I think this method will even position things properly in IE 5 and 5.5, don't have those to test on, so I wouldn't know.

I'm not a fan of CSS hacks, this isn't what CSS is intended to do and with each new browser release that fixes non-working features those hacks are broken. So if you must adjust be specific browsers its better to use a server-side technology or javascript to make adjustments rather than hard-coding CSS hacks.

Hoefully I'm not way over your head! Let me know if you have more questions.

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 11:29 PM.


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