http://homepage.mac.com/dmanthei/97063/index.html
http://homepage.mac.com/dmanthei/97063/main.css

This is the first full site I've made from the ground up strictly using code. I understand all of it pretty well at this point, but there are some small things that are stumping me.

One, I can't figure out how to move the text in the side nav further left or right. I try adjusting the div they're in, and they don't move. I try adjusting the core properties of ul or li and they don't move. Any ideas? I want to be able to center them within the div that has all the graphical elements of the side nav.

Two, how do I make the corner link image not have the border in Firefox? I want it to link back to the U of Mn's website, and it shows up fine in Safari, but in Firefox there's a "link" border around the image, making it look crappy. Also, is there some way to float it in front of the side nav elements?

Thanks! 

Try margin-left:5px; in your li I'd make a seperate class for that, that way your li's globally won't be affected.

A simple border=0 will get rid of your image border in straight html markup or you can use

border: none; in the id="umn" css. 

Two, how do I make the corner link image not have the border in Firefox? I want it to link back to the U of Mn's website, and it shows up fine in Safari, but in Firefox there's a "link" border around the image, making it look crappy.

I think a more pressing question you need to ask is why in Firefox is it only the border that's clickable and not the image itself. 

I just added the "border: none;" to the div in CSS, but that didn't change anything.

Could:
a:link {
color: #FFFFFF;
}

Be messing it up? 

I think a more pressing question you need to ask is why in Firefox is it only the border that's clickable and not the image itself.

Ah... I hadn't realized that was what's going on... I'll have to rework the code so that it's the image and not the border that's the link. 

<img src="umnlogo.png" border="0"/> <--That will work 

Id make your class for your menu something like

.left_menu li {

margin-left:3px;

}

then adjust appropriately. you can also use negatives. -3px 

http://homepage.mac.com/dmanthei/92006/index.html
http://homepage.mac.com/dmanthei/92006/main.css

<div id="umn"><a href="http://umn.edu"><img
src="umnlogo.png" border="0"></a>
</div>

a:link {
color: #FFFFFF;
}

a:visited {
color: #CC0000;
}

a:hover {
color: #CCCCCC;
background-color: #666666;
text-decoration: none;
}

div#umn {
float: left;
position: absolute;
border: none;
}

This is the only code I can find that affects the corner logo. Goodthing's suggestion about "border='0'" inside the img tag worked great for Firefox, but it still is only clickable by the edges, and a small corner part goes goofy when you hover on it too.

Any ideas? 

I'm still unsure as to why the image itself isn't clickable... it almost seems like the div is what's clickable, but not the image. Anywho..

Flash gurus:

Flash 8 question:

I want my movie to wait for a certain amount of time before proceeding. From the googling I have done, it seems as though setInterval is the function to use but I can't figure out how to make it work properly. It would be nice if Flash had a "wait(duration)" sort of function.

Could a mod rename this thread "Web Design thread."? 

<div id="umn"><a href="http://umn.edu" class="logo"><img
src="umnlogo.png" target="_blank"></a>
</div>

a:link {
color: #FFFFFF;
}
a:visited {
color: #CC0000;
}
a:hover {
color: #CCCCCC;
background-color: #666666;
text-decoration: none;
}
div#umn {
float: left;
position: absolute;
}

.logo {
border-style: none;
}
a.logo{
border-style: none;
}
a.logo:hover{
border-style: none;
}

I would also make the PNG a gif instead. Your menu is jacked in IE6 

http://homepage.mac.com/dmanthei/102406/index.html
http://homepage.mac.com/dmanthei/102406/main.css

Any idea why the corner logo won't lie flush with the left and top? I can't find any CSS attributes that seem to affect it, and yet there it sits. 

I want my movie to wait for a certain amount of time before proceeding. From the googling I have done, it seems as though setInterval is the function to use but I can't figure out how to make it work properly. It would be nice if Flash had a "wait(duration)" sort of function.

setInterval works thusly:

var count = 0;

var intervalID:Number = setInterval(this, "myFunction", 1000);

The var intervalID:Number is for declaring the variable named intervalID so you can use it to stop the interval later or do whatever with it.

The setInterval(this, "myFunction", 1000) means that you are assigning this to the intervalID variable.
The this is the object's scope. Just leave it alone.
myFunction is the function that the interval calls each time.
1000 means myFunction is called every 1000 milliseconds.

function myFunction() {
if (count > 10) {
movie_mc.gotoAndPlay(2);
clearInterval(intervalID);
}
count++;
}

That function means that every 1000 milliseconds it will check to see if count is > 10,
If it's not, count will increase by 1 until it gets to 10.
After 10 the movie will play and the intervalID will be cleared(stopped)

This should work (basically) based on what you're describing, if it doesn't then I'm missing something. 

Excellent. I will remember that for the future, though I got around it by just adding more frames onto the "stopped" frame.

As for my latest website question, I'm just taking out the corner linking image until I can get it figured out. The site looks a lot cleaner without it anyway, right now.

jhumbug, since you seem to be pretty keen on Flash, do you know how to keep streaming a sound throughout multiple scenes? I couldn't find a solution to it anywhere. 

As an aside, if you're delaying it to allow more of the flash movie to load before playing,
you should use a preloader instead of a static time interval, since you can't know peoples' connection speed.

For carrying a sound across scenes, you may need to use an event sound instead of a streaming sound.
I haven't worked with flash recently, but I seem to recall that streams stop when they hit the end of their frames,
while an event sound will play and not stop unless it's forced or runs out. 

I dont know if I'm on par with all the skills here but here are two sites I designed that use all div tags and css. PHP and AJAX ftw.

Strategic Claims Services (My work)

The Last Paw (Starting a rescue group 

As an aside, if you're delaying it to allow more of the flash movie to load before playing,
you should use a preloader instead of a static time interval, since you can't know peoples' connection speed.

For carrying a sound across scenes, you may need to use an event sound instead of a streaming sound.
I haven't worked with flash recently, but I seem to recall that streams stop when they hit the end of their frames,
while an event sound will play and not stop unless it's forced or runs out.

The delay was essentially for a pause in between scenes. I know an event sound will carry across scenes, but you can't really make a "music video" type animation (with certain key sequences happening on beats) with event sounds, and some scenes can really get huge/out of control, necessitating additional scenes to keep things organized. 

Flash pisses me off. 

I dont normally like flash, but sometimes its ok.

I laid out this site: http://www.caninecreaturecomforts.com and put a flash tour on the home page. (*I'm not responsible for the graphics on this site, just the layout).

I have to meet with them this week so I can help them fix everything they messed up with the graphics. hehe 

Heres a recent one that I did for my cousin on the cheap. http://www.suburbantails.com. She owes me huge now. 

Goodthing said:

Heres a recent one that I did for my cousin on the cheap. http://www.suburbantails.com. She owes me huge now.

I like it, nice and clean, do you always use asp as opposed to php? 

Yea, it's what I learned on so depending on how much time I have, I use it because it's faster for me. Ive diddled with PHP a little. If there's some really stringent programing involved I use a real programmer so I don't waste my time debugging and trying to figure out the most efficent way. I'm not a coder. I can't sit in front of the monitor typing code. I do more of the architecture, design, seo, xhtml, css, and business aspect of it. 

Is that your cousin on the front page? She's pretty; so's the site.
asp was my first web language, too, although I only used it in one site.
I <3 PHP, tho 

Is that your cousin on the front page?

Yea, shes got huge knockers. Shes married though, so sorry fellas. 

Any pics of said knockers?
/kidding /not really 

" target="_blank">http://www.ilovejackdaniels.com/cheat-sheets/css-cheat-sheet/


That is a great CSS Cheatsheet DNA passed to me the other day...very helpful. 

Nice Slob. That's what I needed. Printed out and tacked as we speak. 

Printed out and tacked as we speak.

I did the same after I saw it! Heh. 

Use Frontpage Express!

* Friend: "The program is written, and I'm debugging it."
* Boss: "What's wrong with you people? You make programming more difficult than it needs to be. I have Frontpage Express to write web pages with, and when I write code with it, I never need to debug it. If you were as good of a programmer as me, you'd never need to debug either."

http://www.rinkworks.com/stupid/cs_programming.shtml 

OMG I know people like that.

What do you guys use to code.

I use Dreamweaver and notepad. 

dreamweaver or aptana or notepad 

I use EditPlus at work and Zend Studio at home. 

eltsdrac said:

Know any good tutorials for tableless CSS design?

http://www.barelyfitz.com/screencast/html-training/css/positioning/

This is a good introduction to learning the different uses for positioning. I think that was the most dofficult part to building tableless pages. Our team at work managed to scrape together a heavily div/css based shopping cart site with very little use of tables (most of the tables that made it into the finalized design were the result of disbelieving back end developers) http://www.bluefiresports.com 

I'm still waiting for the nightmare auto update IE7. I'm curioous to see how much it jacks up designs now. 

Dreamweaver, purely for the code colouring and auto-tag closing.

If not, EmEditor. 

Negative margins for the win. 

Dreamweaver, purely for the code colouring and auto-tag closing.

Word. Dreamweaver's rendering engine fucks up so badly it's hilarious. 

Dreamweaver's rendering engine fucks up so badly it's hilarious.

That's why I stay in code mode! :) 

dreamweaver is terribly annoying. I've been handcoding my work for many years now. so even the slightest change that an editor makes to my code pisses me off.

I used to use MS Interdev. Then when i started working in PHP and got tired of interdev not supporting php, moved to Crimson Editor. It is a great editor. My boss loves to make fun of me for being the only person here who doesn't use dreamweaver, but every so often, he'll be sitting at my desk while I'm working and I'll start selecting blocks of code, or doing multiple page replaces and all he can say is, "wow". And I go, "I know".
The end. 

so even the slightest change that an editor makes to my code pisses me off.

Unless you're using the WYSIWYG editor, how does dreamweaver "change" your code? 

I use dreamweaver (code mode) or crimson editor, but the new adobe golive isn't too bad 

[http://strobel.thoughtpool.net/]latest project[/url] will end up looking like this (menu in mouseover state)

This is a relatively new client, friend of a friend of a friend sort of thing...

The problem with this project is that it has to be done using iFrames (I suggested using <div> with includes, but was shot down because they have a whole system for video page generation in place that is done presently with iframes). Anyway, I'm laying it out in tables first, then will convert to <div> once I have a handle on placement.

They didn't want to go with a CMS because they can't figure out which one to purchase a license for, or use for free, or pay to have one developed. I'm basically forced to work with HTML and am allowed to use CSS for text/div styling and .js for the menu (dropdown, etc). This is because I will not be the one updating it, only developing it.

Um... My question is this: I don't think well when in the CSS environ in terms of laying things out (pixel width, etc) and have always laid things out in tables before defining the divs, so I'm absolutely certain of placement. Is there a way to streamline this so I don't design every page twice? 

latest project

durr... 

Yes, beef up on your CSS skillz to only do the design once with CSS. :-)

Tables are lame. 

My take on CSS table less layouts.

It's good to know how to do it, but I don't strictly just use them. I still use table because of cross browser issues and the time it takes to figure out or research a hack isn't worth it. Then theres the new IE7 that will be an automatic update. One day folks will boot up their computer and whammo theres IE7 and all those IE6 hacks you put in will look jacked up in IE7. If you use you tables smart and put all the widths. paddings, etc in a css you can still keep your page very clean.

I don't know your expertise clives but have you looked into ajax to solve your I frame problem?

To answer your question, why bother designing into divs? If you have all the time to mess with the floating and containers, etc and all that its nice to do but there are still some issues with divs that tables work better. I'm all for standards, but until all these browsers adhere to it I'm going to design whats most efficient for me since I need to pump out sites for clients. 

Yeah... they want to use iframes because that's what their web person is familiar with. I tried to get them to use DIVs with includes (a compromise) but they didn't want to.

Hell, I tried to get them to use .flv instead of .wmv/.mov/.mpg and they didn't want to.

I'd do it in PHP, but the estimate I gave them (for a new, fairly simple CMS) was also shot down.

My CSS skills aren't lacking, CH, it's that it's hard for me to extrapolate sizes/widths/heights with so many graphical elements that need to be seamless.

So what I do is I lay it out in tables first, and the CSS then takes about a minute per element..

It's not entirely slow, since all of the slicing is done in PS/IR... I just wish there was a way to get PS/IR slices into divs, instead of tables. :) 

Clives,

I think Dreamweaver 8 the newest version will convert tables into divs and css for you with a click of a button. 

zomg wtf bbq k thx! 

This site http://www.fuelcelltechnologies.com here I just finished. Granted It wasn't the design i would have chosen but it was exactly what they wanted. What a pain in the ass this simple design was to look teh same in all the major browsers. So instead of my wasting time I used some tables to hold the containers and it worked, besides making it liquid. 

I wish I could show you my latest site but it's still on our development server.

I did this a few months ago though. It's a little messy but works. We had a short time scale!

http://www.glassglass.co.uk/ 

I likey. Very nice and clean.

I'd hire you in a second if you do that kind of work.