hey good thread - somebody posted a link to this website the other day in a thread http://www.soulacreative.com/about_us.html

so i clicked it cuz i was bored - on the right there's a menu with a Flash animation background. I like it. So I looked at the source and the style sheet to see how they put a Flash animation in the background underneath a menu and I couldn't find out how they got it there.

i'd appreciate an explanation - it's mostly a CSS layout.

thanks

excellent thread. bump.

Question... when using on page javascript and styles, you'd comment it out so that it wouldn't fuck up on some browsers.... eg:

How are you supposed to do that on the newer XML/XHTML doc types?

Like this???

or???

Yes, <![CDATA[ tells the browser to NOT parse anything within those tags as XML... so it will try to ignore &'s and &#37;'s and everything else that would otherwise break XML.

I hate the <![CDATA[

But what can ya do... it's a necessary UGLY evil that seems to be coming on strong, especially with RSS as popular as it is now.

I don't really have time to be making examples.... I barely have time to revisit this thread from time to time. Besides, you seem pretty convinced and can't be told otherwise anyway.

However, suffice to say... there are differences. Otherwise they wouldn't have bothered making the doctypes in the first place. Right?

There's plenty of examples, tutorials, descriptions and so on with a few quick searches in Google... for example: http://htmlfixit.com/tutes/tutorial_...ferences.shtml

You can continue to make pages designed with tables if that's what works for you, but CSS is still a better method. Or you can use CSS and not bother with DOCTYPES if that's what works for you, but using proper DOCTYPES is still a better method.

I believe your answer lies in the "wmode=transparent" parameters within Flash.. and of course, keeping your DIV set to a higher z-index.

Read more: http://www.google.ca/search?q=wmode%3Dtransparent

Yes, there are differences. Differences in how the code is written, not in how a layout will be displayed in a browser. Seriously, I'm beginning to wonder if you even do know the true differences between each doctype.

It's sad you can't admit you're wrong. You were all about me being the stupid one at first, but as soon as I go a bit more in depth and provide some examples you back off.

Seems to me you're the one using CSS and not using proper doctypes. Since you're so naive to doctypes and how they effect a page. I truly wonder if you realize what each one is designed for and how using different ones can benefit different types of web pages.

Of course I do, which I've been stating. You're the one who continues on with "it makes no difference" over and over again, and now you're saying that there are differences in how the code is written.

Did you actually read what I wrote? Ok man, I'll dumb it down and reexplain.

Changing a doctype has no effect on a layout, or design. Creating a layout that works in say strict xhtml, will also work in transitional xhtml and/or html strict/transitional. Both layouts will look exactly the same. Doctypes will not change positioning, margins, or 0px as you say they will.

The differences in code, in say strict xhtml compared to html 4.01 are nothing to do with layout discrepancies. Such as, In xhtml an image tag must have a closing bar.

Valid image tag for xhtml strict doctype.
Whereas, in html 4.01 or less strict doctypes. the closing "/" is not needed. Also, stated in the article you provided originally, <font> tags are not allowed in xhtml strict doctypes. However, in html less strict doctypes it is.

So I'll quote you again;
Yes, there are differences in the way the code is written (I never argued that or said there wasn't). However, font and closing bars for image tags will not change a layout. Which is what I had stated. Not that the code was the same, but that the layout/design would still remain the same. Why you replied to that menial piece of my post makes no sense. Again, just admit you're wrong. It's cool of you to come here with CSS tips, and I'm sure they'll be useful to alot of people. But in your #1 tip, you're giving people the wrong information. You were wrong. You'll continue to argue with me and attack meaningless bits of my posts which have nothing to do with what I'm saying. If you want to somehow prove you're right. Just show me one example of a layout written for one doctype, and then have it look different in another doctype. It would end the discussion, and should be real simple for you to do since you say doctypes have effects on floats, margins, 0px, or positioning. You've got yourself plenty of options to make an example of.

Uhg, this just makes absolutely no sense. You're telling me you'll code a layout that doesn't work properly. But setting the doctype to strict makes it suddenly work? It's just ludicrous. I'd love to see what kind of fucked up code you could muster up to do that. Because since doctype won't effect the way a layout's displayed. You could create said layout without a doctype, and then make 6 different copies with six different doctypes and they'll all look exactly the same as the one without a doctype.

Me thinks you can't make this mysterious layout that will magically look different with different doctypes.

I'm bored right now by the way, waiting for my gf to finish her nap. So one more post before I wake her up to head out.

Goes to figure I missed this originally. Ok, it's clear to me now you're just writing your code wrong. Properly written code will not be displayed differently in different browsers. Properly written code also has nothing to do with w3c valid code. You can make a shit layout but have valid code. Just like you can write a shit sentence but it'll pass through spell check ;) .

If you're having discrepancies in cross browser compatibility. Even with anything, but in this case specifically with pixel dimensions. Then you're most likely getting in over your head with advanced css design and using more complex margin or padding rules. Which is what most beginners have trouble with. They'll get good at css and try to expand into more complex designs but just run into more problems with how bad code can be rendered. I'm willing to bet the problem you had in your example had to do with improperly using either margin or padding styling.

If I were to replicate a CSS design into HTML and put the two side by side, you'd be able to tell the difference without looking at the source?

Of course not.

From the surfer experience standpoint, there is no compelling reason to take an HTML plus graphics site and convert it to CSS plus graphics. The end result to the surfer will be exactly the same.


Don't think I am slamming CSS though. It's a great tool for a site with hundreds of pages. If you want to change the appearance of one thing on each page, you just update one file. But if we were to talk about gallery builders switching to CSS, what would be the point in that?

this is the first time i've seen a legitimately helpful thread such as this.

Something I came across last night which is kinda cool

text-transform:lowercase;
text-transform:uppercase;

If you look in their stylesheet at http://www.soulacreative.com/style.css it seems they just position the menu element accordingly to be over the top of the flash movie, and then ensure it's high presence on the Z-axis by setting the value to 9:
I could be wrong though.

Bump for a great thread!

Fourth time in history I'm bookmarking a GFY thread. Amazing.

Good thread Stu.

Would have been better if I checked the date first too. LOL

still a good thread today

I guess some things never change :1orglaugh

one of my favorite CSS tricks is when using it in conjunction with ASP.NET to show/hide controls.

those of you who work with .NET know that if you set the visible property of a server control to false, it won't render to the browser at all, so you can't make it visible without using a postback.

so what i like to do is leave the visible property as true, but during the page load add a "display: none" CSS attribute to the control, then use a javascript to change that to "display: inline" on the client side so i can avoid at least one more trip back to the server.

makes the page much smoother since the show/hide is all done client side.

Indeed, I do this quite a bit... now I also add in some AJAX to streamline things even further using this same method.

Great tip :thumbsup

i've just started messing around with AJAX not too long ago. at the moment it is more of a curiosity to me than anything, but i think i am going to incorporate some of it's functionality in to one of the current projects i am working on.

it makes life a hell of alot easier than writing all kinds of wacky java functions myself, and while it seems i will still need to augment it with custom java work, i don't think it will be nearly as much as before. (i hate java. i have never had any patience for any language that is case sensitive of requires ; to terminate lines, but for client side functionality, you can't beat it).

other than that though i don't really utilize all that much CSS. i am slowly starting to incorporate it more and more as needed, but i still do things relatively old school. old habits die hard. ;)

I cannot lie I have not built a site from scratch in a while and #1 saved me $30. I was about to pay a guy to remind me how to get the cross browser compatibility. Maybe I just smoke to much, Ya never can tell. Thanks alot for the free tip, the rest I had fresh in my memory so it wasn't helpful to me but Im sure someone else will find something useful.

Awesome thread :) I bookmarked it yesterday.

About doctype issue, from my own experience, yes, it affects layout in some cases. I can't give an example at the moment (you can call me lazy if you want), but I have to mention that StuartD is right when it comes to doctypes.

I just want to learn how to make a simple text box on a layout :(

Floats are fragile and I hate to rely on it for my positioning.... good thing they have position: I use position 90% of the time to build sites.

A lot of the CSS that I see out there is so div heavy, it's the same as using tables. Try to use the least amount of divs. Don't forget that every standard tag can have css applied to it...

I didn't see this tip out here so here's my 1 cent

bookmarked.

I made a small typo on that one...

potter, stop shitting on a good thread.

As StuartD said, a DOCTYPE does have everything to do with how a web page is rendered. You say it doesn't matter and it will not effect the appearance of a web page, but what you clearly don't understand is that DOCTYPE's are used to tell the client how to render a web page.

So don't forget to add a DOCTYPE :winkwink:

Also your CSS attributes are old school bro. Those ones have pretty much been around forever and you probably wouldn't notice a difference in the rending of code as basic as yours. Try using some more advanced CSS features such as those in HTML5.

Here is your prove. Maybe you should read up on the different formatting standards for each DOCTYPE.

I suggest you read the following article as well:

Fix Your Site With the Right DOCTYPE!
Written by Jeffery Zeldman who is a huge advocate of web standards.

So, did you actually read what I wrote?

Not it's called a web standard and a DOCTYPE is clearly something you didn't, but hopefully now to understand.

Wrong, because it wouldn't be 'proper' without that W3C standard.

Code structure and design should never be intertwined. However, this is a whole separate discussion. :winkwink:

Stuart great thread/ Ive been looking for this type of info, as I'd like to do my galleries using CSS.

I have a question. How can I create a a 15 pic gallery say thumbs 135 x 180 - using background images sliced for faster loading. Would that be a mix of css and tables?

Would I create <div> for each area Id like to lay out a number of thumbs? I hope that made sense.

what this thread boils down to is most people are idiots. most of you wannabe designers cannot even hack out a half decent CSS page if you were payed for it.

you claim proper code but you suck, i dont need to name names because i wish you the best of luck anyway, stuart you are a fucking programmer stick to it. its called fucking style sheets for a reason programmers have 0 style. :2 cents:

Great thread...

Awesome thread and I thought I'd share one tip that's helped get my layouts look the same with IE and Firefox. When creating a stylesheet I type it out adhering to CSS2 standards and it always works out fine with Firefox but when viewing it in IE sometimes there is the odd div that isn't positioned exactly the same so I create an extra rule for IE only by adding !ie:

#wrapper {
top: 0px;
top: 5px !ie;
}

In this example the div snuggles up to the top nicely with Firefox but with IE it was nudged up slightly higher so I added a little padding that Firefox ignores but IE reads. :)

Seems CSS is ALL FUCKED UP and you have to do umpteenth work arounds to get anything to look right.

HTML had shit just about perfect.

http://www.9xs.net/thumbs.html

If you view the source in this page, you'll see that the images go side by side quite neatly, and wrap to the edge of the browser window.

There's nothing stopping you from creating a div that's say... 180px wide (135 x 2 + padding) and putting the images inside that. Then the images would wrap 2 by 2 within that div, rather than the entire browser window.

It means having to do a little math on your part to get the divs the right size to make everything fit snug, but you make your divs, put your thumbs in and the galleries will just work.

:1orglaugh

Udamang..

This could be: CSS for dummies, you should sell it to them, very good thread

excellent thread StuarD and thanks 4 taking the time to share it with us! :thumbsup:

Thank you everyone. I'm glad that it has been of some use to some of you. :)