Topic: Sort of my first self built CSS design

Ok so most of you know that I've asked dozens of questions regarding CSS, and finally started to get the jist of everything, sort of. Bought countless books on CSS, and I've actually built my first 3 column site on my own without using a template. I sort of started with one, but quickly abandonded it as I broke it somewhere along the way.

www.caicc.net/portlandicc/index.php

I'd like to get some feedback on what I did wrong. There are a couple of ugly hacks that I needed to do to achieve the look, for example, the top of the main body section consists of 3 rounded box tops that I couldn't figure out how to piece together so I just created a <div id="columntop"> section to place it there.

Then my hack for getting the left and right column was to float the left column left, and float the right column right. It appeared to work fine, but the center column bg image would only go as far as the content would go and looked awful. So I took the body background and made it the container bg so it would be there no matter what. I think this is an ugly approach, but did the job.

I haven't launched the site yet, and I wanted to get as much feedback as to what I did wrong.


Thanks guys, and fire away!

Site looks pretty. I suck at CSS so I can't say anything about that

good job Rob. The only thing that I see that I would probably change is the nav at the top. That's a list too it's just in-line right?
If you click on the "Valid XHTML" you will see that it errors out because of the javascript. I think that javascript should be called by using the <script> tag (don't forget the attribute "type").

Other than that, good job

<edit>

by the way, what does the JavaScript do besides swap the images? You can get this same effect by using just CSS and either images or just plain text. It looks like it is to set the opacity of the image but it doesn't seem to be working on my browser at least. Or I just don't know where it's being used.

</edit>

Later,

C:\

(Edited by CPrompt on 10-05-2008 14:15)

Yeah, the JS confused me as well. It looks to be superfluous.


___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | the Fellowship of Sup

I would much rather do it through CSS, but I'm not exactly sure how to do it...
I also wanted to use PHP to do an "active" page image, but with that js it didn't work.

The mouseover script is one I found called dom mouseover, that seemed to work pretty good, except for the js errors. I've been really trying my best to ensure the W3C is valid... kind of a chore, but worth it in the long run.

Any tips or directions someone can point me to a mouseover css style?

http://wellstyled.com/css-nopreload-rollovers.html

well, from the looks of the site, you don't need to do an "image" change. It's just a text color change right?

a{color:#875522}

a:hover{color:#f5f7f4}

So, if you did it that way, you don't really need to do the images here :

<div id="nav">
    	<a href="index.php"><img src="img/btn_home_off.jpg" alt="HOME" border="0" class="domroll img/btn_home_over.jpg"/></a>
        <a href="sermons.php"><img src="img/btn_sermons_off.jpg" alt="SERMONS" border="0" class="domroll img/btn_sermons_over.jpg"/></a>
        <a href="articles.php"><img src="img/btn_articles_off.jpg" alt="ARTICLES" border="0" class="domroll img/btn_articles_over.jpg"/></a>
        <a href="gallery.php"><img src="img/btn_gallery_off.jpg" alt="FAMILY ALBUM" border="0" class="domroll img/btn_gallery_over.jpg"/></a>
        <a href="churches.php"><img src="img/btn_family_off.jpg" alt="FAMILY OF CHURCHES" border="0" class="domroll img/btn_family_over.jpg"/></a>
    	<a href="resources.php"><img src="img/btn_resources_off.jpg" alt="RESOURCES" border="0" class="domroll img/btn_resources_over.jpg"/></a>
        <a href="contact.php"><img src="img/btn_contact_off.jpg" alt="CONTACT" border="0" class="domroll img/btn_contact_over.jpg"/></a>
    
    </div>

It could just be :

<div id="nav">
  <ul>
    <li><a href="index.php">HOME</a></li>
    <li><a href="sermons.php">SERMONS</a></li>
    <li><a href="articles.php">ARCTICLES</a></li>
    <li> <a href="gallery.php">GALLERY</a></li>
    <li><a href="churches.php">CHURCHES</a></li>
    <li><a href="resources.php">RESOURCES</a></li>
    <li><a href="contact.php">CONTACT</a></li>
  </ul>
</div>

Then you just style the nav, nav ul, nav li and so forth to get the same results. After all the menu is just a list just horizontal right? Which in CSS terms is done as "in-line". Set some padding, put it inline and so forth and you have a nice menu that degrades nicely and don't have to worry about swapping out images.

Later,

C:\

check this site out for some lists as menus.

Later,

C:\

Yeah I guess that would work, I was just going for an esthetic thing... I found a couple links to some cool css rollovers that involve one image with both states and the over state pulls from a: hover to move the image over just enough to display the "over state". Very cool, but heard it was kind of buggy.

The person I'm doing the site for actually wanted only text for the navigation, but I opted for this method. Maybe simple text would be fine...

I would definitely go for text, but that's just me. If the buttons were something that required graphics, I could see maybe going with graphics, but I think you could easily get away with text here. Give it a shot and see how it works out. It will simplify the code and lighten up the page a bit.