going from java to css [and others]

cat · September 27th, 2004, 06:50 AM

is there a css expert in the house?
because i'm getting really frustrated ...

below is my attempt at taking out the java from my new home page design

http://www.katzidesign.com/katz/index1.htm
http://www.katzidesign.com/katz/home1.css

and here it is before i made this, um, 'intellectual' leap

http://www.katzidesign.com/katz/index.htm
http://www.katzidesign.com/katz/home.css

what is happening to the css clean site:

1] in ie - the top nav isn't there at all
2] in mozilla and ie - there is no bottom line in the left nav
3] i'm trying to make the banner rollover and blink like i did in the java [index], but cannot find an online tutorial to help me do this and i KNOW it's blinking simple. just don't have the magic wand handy.
4] when i reduce the browser window width, the far rt column collapses

personal css skill level = low
{as if you didn't know already]

cat

richard.york · September 27th, 2004, 07:18 AM

Skill level low?? This design looks very good!

First thing that I see in your source. You are missing an opening <body> tag. Check for markup errors by using the W3C validator:
http://validator.w3.org

The "#topnav" rule does not have a z-index specified, specify a z-index and IE will probably display it.

#navBar ul a:link, #navBar ul a:visited {
    display: block;
    font-family: "Times New Roman", Times, serif;
    color: #D19217;
    text-decoration: none;
}

Add a width: 100% here so the whole list item is clickable in IE.

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

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid white;} /*changed this*/

I don't think that fixes this bug. You're talking about the extra space above and below each list item, right?? I only know two ways of fixing this. First is remove all white space between list items in the source of the document.
i.e.[list]<li><a href="contact/index.htm">Contact us </a></li><li><a href="about/index.htm">About us </a></li><li><a href="what/index.htm">What we do </a></li> <li><a href="how/index.htm">How we do it </a></li><li><a href="portfolio/index.htm">Portfolio</a></li><li><a href="comments/index.htm">Comments</a></li><li><a href="quote/index.htm" class="last">Quote?</a></li></ul>

Second is apply a display: inline; declaration to the <li> elements. Neither are particularly appealing hacks and the latter could totally screw up the page. Of course I could be wrong about that, but I haven't heard of applying a border to fix that bug.

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}

Let's see if that gets you anywhere, then we can look at other things causing concern.

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
[http://pear.php.net/Mail_IMAP] A PHP/C-Client/PEAR solution for webmail

richard.york · September 27th, 2004, 07:22 AM

You could simplify this selector too:

#navBar ul a:link, #navBar ul a:visited {
    display: block;
    font-family: "Times New Roman", Times, serif;
    color: #D19217;
    text-decoration: none;
}

I would recommend that this as:

#navBar ul a {
    display: block;
    font-family: "Times New Roman", Times, serif;
    color: #D19217;
    text-decoration: none;
    width: 100%;
}

You want these styles to apply to all links regardless of their state. What you had will probably work just fine, but from a logic standpoint selecting the <a> element without a state (unvisited, visited) makes more sense.

Regards,
Rich

--
[http://www.smilingsouls.net]
[http://pear.php.net/Mail_IMAP] A PHP/C-Client/PEAR solution for webmail

richard.york · September 27th, 2004, 08:08 AM

Here are some more fixes:

body{
    font-family: "Times New Roman", Times, serif;
    color: #444444;
    line-height: 1.166;
    padding: 0px;
    margin-top: 0px;
    margin-left: 0px;
        min-width: 775px;
}

This prevents the page from shrinking when the 775px width is met. Or in other words, prevents the page from shinking so small that it is unreadable. (Doesn't work in IE though)

/* Add bottom border to "Quote?" list item */
#navBar ul > :last-child {
    border-bottom: 1px solid #cccccc;
}

You need to specify the bottom border on the "Quote?" list item explicitly. The > (direct child selector) and :last-child pseudo-class don't work in IE though. If you want IE compatibility you'll have to use an id or class selector.

/* Prevent column from dropping at certain width*/

#rtcolumn{
    /*float:left;*/
    /*width: 60%;*/
    padding-right: 15px;
    padding-left: 15px;
    padding-top: 10px;
    margin-top: 10px;
        margin-left: 280px;
    font-size: 80%;
}

Remove the float from this one, floating the first two columns will cause this column to float beside of those. Remove the fixed 60% width, this causes IE to still drop down the column at a certain width. In this case it is also better to take advantage of this column being a normal block element, e.g. it will expand and fill up all of the space available to it, still providing you with the liquid effect that you're after. Finally, apply a left margin equal to the width of the other two columns. this prevents the column from dropping.

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
[http://pear.php.net/Mail_IMAP] A PHP/C-Client/PEAR solution for webmail

cat · September 27th, 2004, 08:47 PM

rich,

<<Skill level low?? This design looks very good!

and you are very kind. iÃm cobbling the css together because i still cannot get css positioning into my head, nor what goes where, and what can be grouped to make cleaner css. it must all look like a dogs breakfast to you :-)

------------------------------------------------------------------------

<<First thing that I see in your source. You are missing an opening <body> tag. Check for markup errors by using the W3C validator:
http://validator.w3.org

ok, iÃve fixed the body tag, and checked with the validator. i have one problem, but when i delete it the page goes all to heck [collapses]. i noticed this before but backed out after the results. it did have two extra </div>'s there, but will let me delete only one.

Line 45, column 5: end tag for element "DIV" which is not open
</div>

------------------------------------------------------------------------

<<The "#topnav" rule does not have a z-index specified, specify a z-index and IE will probably display it.

iÃve given it a z-index, but nothing is happening. question - none of my bits have a z-index, is that the problem? iÃve looked it up in several of the books i have here, but none help.

------------------------------------------------------------------------

/* Add bottom border to "Quote?" list item */
#navBar ul > :last-child {
ÃÃÃÃborder-bottom: 1px solid #cccccc;
}
You need to specify the bottom border on the "Quote?" list item explicitly. The > (direct child selector) and :last-child pseudo-class don't work in IE though. If you want IE compatibility you'll have to use an id or class selector.

for some reason this is not working in mozilla [or ie like you said, but iÃll have to figure out that one later]. so i still have that missing line on the bottom.
------------------------------------------------------------------------

<</* Prevent column from dropping at certain width*/
#rtcolumn{
ÃÃÃÃ/*float:left;*/
ÃÃÃÃ/*width: 60%;*/
ÃÃÃÃpadding-right: 15px;
ÃÃÃÃpadding-left: 15px;
ÃÃÃÃpadding-top: 10px;
ÃÃÃÃmargin-top: 10px;
ÃÃÃÃÃÃÃÃmargin-left: 280px;
ÃÃÃÃfont-size: 80%;
}
<<Remove the float from this one, floating the first two columns will cause this column to float beside of those. Remove the fixed 60% width, this causes IE to still drop down the column at a certain width. In this case it is also better to take advantage of this column being a normal block element, e.g. it will expand and fill up all of the space available to it, still providing you with the liquid effect that you're after. Finally, apply a left margin equal to the width of the other two columns. this prevents the column from dropping.

EXCELLENT! looks like cacca in dw, but itÃs doing just what i want in real time. thanks!
------------------------------------------------------------------------

question - can you point me to a url that can walk me through getting the top banner to rollover like ivÃe got in the java on http://www.katzidesign.com/katz/index.htm ? i know it must be a simple process, but i'm at that 'simple' stage with css.

------------------------------------------------------------------------

thank-you very much for helping me with these problems. what iÃm attempting to do is get this sorted and make templetes, update my site, then get back to the nitty gritty of learning css after itÃs live. i know, totally backwards, but i have no choice. i have a deadline that keeps getting pushed [clients] and cannot do anything about it.

again, MEGGA thanks!

cat

richard.york · September 28th, 2004, 08:39 AM

> it must all look like a dogs breakfast to you :-)
Sure it could use some slimming, but who cares about that, at least you're using CSS and beginning to understand how stuff works.

> i have one problem, but when i delete it the page goes all to heck [collapses]
You should try indenting the source code of the document, makes these things much easier to find. Although I understand how difficult it can be to keep it that way using Dreamweaver's WYSIWYG. Here's an example:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Katz-i Design Group :: Web &amp; Graphics</title>
    <link href="home1.css" rel="stylesheet" type="text/css">
    <!--[if gte IE 5]>
        <style>
            #topnav a  {
                    position: relative;
                    height: 1em;
                    zoom: 100%;
            }
            #topnav {
                    top : 10px;
            }
        </style>
    <![endif]-->
    </head>
    <body>
        <div id="banner">
            <img src="t_images/katz_banner_logo.gif" alt="Katz banner logo" name="Katz banner" width="284" height="70" border="0"/>
        </div> 
        <div id="topnav">
            [list]
                <li><a href="../posters/index.html"></a></li>
                <li><a href="../exhbtns/index.html"></a></li>
                <li><a href="../entrtnmnt/index.html"></a></li>
                <li><a href="../pubs/index.html"></a></li>
                <li><a href="../projects/index.html"></a></li>
                <li><a href="../gallery/index.html"></a></li>
             </ul>
        </div>
        <div id="navBar">
            [list]
                <li><a href="contact/index.htm">Contact us </a></li>
                <li><a href="about/index.htm">About us </a></li>
                <li><a href="what/index.htm">What we do </a></li>
                <li><a href="how/index.htm">How we do it </a></li>
                <li><a href="portfolio/index.htm">Portfolio</a></li>
                <li><a href="comments/index.htm">Comments</a></li>
                <li><a href="quote/index.htm" class="last">Quote?</a></li>
            </ul>
        </div>

        <div id="ccolumn">
            <h1>
                The Katz-i <br/>
                Design Group
            </h1>
            <p>
                specialises in unifying creativity with culture for a blend of print and web-based communication.
            </p>
            <p>
                Based in Southeast Asia (but bred in the West, as well as the East), the Katz-i team of designers, writers, photographers 
                and programmers understands the nuances required when communicating between Eastern and Western cultures.
            </p>
            <p>
                From this cultural bouillabaisse comes a unique perspective with smart solutions that will impact your audiences where 
                ever they are.
            </p>
            <p>
                For more information on how we work, check out 
                <a href="what/index.htm">what we do</a>, 
                <a href="how/index.htm">how we do it</a>, 
                or take a quick ramble through our 
                <a href="portfolio/index.htm">portfolio</a>.
            </p>
            <p>
                Other design samples can be found in the Katz-i archives by typing the appropriate word in the search box below.
            </p>

            <form action="/cgi-sys/entropysearch.cgi" target="searchwindow">
            Search Query <input type="text" name="query" value="">
                <input type="hidden" name="user" value="wwwkatzi">
                <input type="hidden" name="basehref" value="http://katzidesign.com">
                <input type="hidden" name="template" value="default">
                <input type="submit" value="Search">
            </form>
        </div> 
        <div id="rtcolumn">
            <h1>Now that you've found us, would you like to ...</h1>
            [list]
                <li><a href="how/index.htm" class="style3">See how we work with clients</a>
                    <p>
                          Whether your promotianal goals call for a brochure, logo, compete identity, poster, publication or 
                          website design, our team is positioned and ready to serve you with savvy concepts and flawless execution. 
                          Our process has been tested over time to insure a smooth workflow that's on target, on time and on budget.
                    </p>
                </li>
                <li><a href="questions/index.htm" class="style3">Download our project questionaires</a>
                    <p>
                          Our website development questionnaire helps us identify your goals, marketing environment, target audience 
                          and techicnal parameters. Our print questionnaire has the same blahh blahh, but angled more towards print. 
                          Many of our clients have said it also helped them focus their entire marketing and communication efforts. 
                          In turn, it may just help you gain insight into yourown organization.
                    </p>
                </li>
                <li><a href="proposal/index.htm" class="style3">Request a proposal</a>
                     <p>
                          A well-crafted proposal is the heart of a successful project. It speaks to the scope, goals and mission of 
                          the effort in a clear, concise manner. We look forward to crafting one for your next print, identity or web 
                          project.
                     </p>
                </li>
            </ul>

            <h1>... or cruise recent projects from Katz-i</h1>
            <div id="thumbnail">
                <a href="portfolio/dinner/index.htm"><img src="portfolio/images/dinner.jpg" alt="Dinner Concert" name="dinner_concert" width="66" height="66" border="0" id="dinner_concert"></a> 
                <a href="portfolio/idp/index.htm"><img src="portfolio/images/idp.gif" alt="IDP exhibition" name="idp" width="66" height="66" border="0" id="idp"></a> 
                <a href="portfolio/college_eng/index.htm"><img src="portfolio/images/college_eng.jpg" alt="College English" name="college_english" width="65" height="65" border="0" id="college_english"></a>
                <a href="portfolio/ahn_sohyun/index.htm"><img src="portfolio/images/ahn.jpg" alt="Ahn Sohyun" name="ahn_concert" width="66" height="66" border="0" id="ahn_concert"></a>
            </div>
            <div id="rtcolumnl">
                <p>
                    Amet quae in <a href="portfolio/dinner/index.htm">Dinner concert</a>. Treprobo, hendrerit <a href="portfolio/idp/index.htm">IDP education exhibition</a>. feugiat facilisishendrerit feugiat facilisis humo luctus Amet quae in reprobo, <a href="portfolio/college_eng/index.htm">College English</a> humo luctus. Amet quae in reprobo, humo luctus. <a href="portfolio/ahn_sohyun/index.htm">Ahn piano concert</a> quae in reprobo,  hendrerit feugiat facilisis humo luctus..
                </p>
            </div> 
        </div>

        <div id="footer">  
            <div align="center">
                <a href="contact/index.htm">Contact us</a> | 
                <a href="#"></a><a href="about/index.htm">About Us</a> | 
                <a href="what/index.htm">What we do</a> | 
                <a href="how/index.htm">How we do it</a> | 
                <a href="portfolio/index.htm">Portfolio</a> | 
                <a href="comments/index.htm">Clients comments </a> | 
                <a href="#">Request a quote </a> | 
                <a href="#">Home</a> | 
                <a href="#"></a><a href="#">Site Map</a> | 
                <a href="#">Links</a><br>

                Founding Member: <a href="http://creativelatitude.com/" target="_blank">Creative Latitude</a><a href="#"></a> | 
                &copy; Copyright 2004 Katz-i Design Group<br>
            </div>
        </div>
    </body>
</html>

Maybe Imar is listening in and can drop by and give you some tips on how to maintain good code structure in Dreamweaver.

> iÃve given it a z-index, but nothing is happening.
The z-index is assigned automatically if one isn't present, but I don't think that is what's wrong here. It looks to me like you are using custom list bullets to display that list and maybe IE is having trouble with those. You could try using a background image instead. Either way you go you might experiment with setting the width and height of the[list] and <li> elements to make them visible in IE.

> for some reason this is not working in mozilla [or ie like you said, but iÃll have to
> figure out that one later]. so i still have that missing line on the bottom.

WFM, You're probably better off with a class or id selector there anyway (for compatibility). That might not be working because of the markup error too.

> EXCELLENT! looks like cacca in dw, but itÃs doing just what i want in real time. thanks!
Glad that worked out.

> question - can you point me to a url that can walk me through getting the top banner to
> rollover like ivÃe got in the java
This can be done with CSS, but you'd have to make it a background image and would require some tricky hacks to get working in IE. I suggest sticking with the Javascript in this case.

> thank-you very much for helping me with these problems.
No worries, glad to help out! :-)

Regards,
Rich

--
[http://www.smilingsouls.net]
[http://pear.php.net/Mail_IMAP] A PHP/C-Client/PEAR solution for webmail

cat · September 28th, 2004, 11:58 PM

Rich,

<<You should try indenting the source code of the document, makes these things much easier to find. Although I understand how difficult it can be to keep it that way using Dreamweaver's WYSIWYG. Here's an example:

for some reason it all went crazy. really crazy. it repeated the indents in the design view itself.

<<Maybe Imar is listening in and can drop by and give you some tips on how to maintain good code structure in Dreamweaver.

i think he's avoiding my mess :-)

<<The z-index is assigned automatically if one isn't present, but I don't think that is what's wrong here. It looks to me like you are using custom list bullets to display that list and maybe IE is having trouble with those. You could try using a background image instead. Either way you go you might experiment with setting the width and height of the[list] and <li> elements to make them visible in IE.

i fiddled with the width etc, and it's a no go. i'll try and see if i can play with background images. i'll try anyway. i really don't know enough to know how to fix what i'm breaking, so it's all greek to me.

> EXCELLENT! looks like cacca in dw, but itÃs doing just what i want in real time. thanks!
Glad that worked out.

well, it worked out for the mac, but when i go to the pc [ie] the centre column grey line does not line up with the graphic like it should. fix one, break two, yes?

> question - can you point me to a url that can walk me through getting the top banner to
> rollover like ivÃe got in the java
This can be done with CSS, but you'd have to make it a background image and would require some tricky hacks to get working in IE. I suggest sticking with the Javascript in this case.

i've put it back in java script. hate using that, but if what you are saying is more difficult than what i'm attempting now, there is no way i'll be able to pull it off.

again, thanks. i'll see about trying to do what you suggest. if i can. i'm getting really close to giving up on css. this is a nightmare. and i guess severe lack of sleep isn't helping at all :-(

cat

richard.york · October 3rd, 2004, 06:40 PM

I suppose image swapping with CSS wasn't as tricky as I first thought. Following is a test case that demonstrates how this is done.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html>
        <head>
            <title></title>
            <style type='text/css'>
                img {
                    width: 200px;
                }
                img#black {
                    display: none;
                }
                a:hover {
                    /* The presence of these two declarations 
                     * get this to work in IE.
                     * See: http://www.quirksmode.org/index.html...csspopups.html
                    */  
                    text-decoration: none;
                    border: none;
                }
                a:hover img#black {
                    display: inline;
                }
                a:hover img#blue {
                    display: none;
                }
            </style>
        </head>
        <body>
            <a href=''>
                <img src='/smilingsouls/images/black_background.jpg' id='black'/>
                <img src='/smilingsouls/images/blue_background.jpg' id='blue'/>
            </a>
        </body>
    </html>

The concept is simple enough. You need two images back to back in the source of the document. One is set to display: none, so it isn't displayed initially. When the mouse comes over the link enclosing the images, this fires the :hover pseudo-class. Then with this the images are flipped, the one displayed initially is set to display: none and the one hidden initally is set to display: inline thereby making a pure CSS image swap.

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
[http://pear.php.net/Mail_IMAP] A PHP/C-Client/PEAR solution for webmail

cat · October 5th, 2004, 09:15 PM

rich,

sorry, i forgot to say thanks for this one too. snowed under so will be getting to it later. megga thanks :-)

cat