Css Tips And Tricks

[Qbikaris]

CSS PLaY - http://www.cssplay.co.uk/

great site, with loads of demos, shows you how much you can actually do with css (create games for example)

[aaron_martone]

Ok this is a Tips and TRICKS thread, right?

Here’s a fun trick to play on other web developers, if you get the chance. Open up their CSS file and add

b,strong { font-weight: normal; font-style: italic; }
i,em { font-weight: bold; font-style: normal; }
u { text-decoration: none; border-top: 1px solid blue; }

Tons of fun.

[vgarcia]

@aaron_martone

Ok this is a Tips and TRICKS thread, right?

Here’s a fun trick to play on other web developers, if you get the chance. Open up their CSS file and add

b,strong { font-weight: normal; font-style: italic; }
i,em { font-weight: bold; font-style: normal; }
u { text-decoration: none; border-top: 1px solid blue; }

Tons of fun.

u {text-decoration: overline;}

we don’t need no stinking borders

[beejereeno]

Thanks for the list of resources, webnauts.

I’m an old skool slicer / dicer designer and need to get started in developing more sites using CSS rather than tables and mostly graphics…so’s I can catch up with the rest of my colleagues in this industry

I think I’m afraid to get started but I will dig through these.

Much appreciated :tup:

[PaulOB]

@carlsson

Didn’t find a good resource for emulated frames using CSS

Here’s some :

http://www.pmob.co.uk/temp/fixedlayoutexample5.htm
http://www.pmob.co.uk/temp/fixedleft-header.htm
http://www.pmob.co.uk/temp/fixedlheader-footer-left.htm

http://www.webpelican.com/blog/examples/css-frames-example.htm
http://tagsoup.com/-dev/null-/css/fixed/
http://www.cssplay.co.uk/layouts/fixed.html

[MacRankin]

I haven’t been to these forums in a while now. I’ve been over on the Killersites forums, and this is where i’ve been laying down all my dodgy experiments.

1st Notes:
I’ve edited out my holy grail no.8 that was here for a little while, mostly because it wasn’t all that appreciated as i had hoped it would be, but i will carry on trying to better it, and if i do i can’t promise that i’ll be posting it in this section, as there is no double posting allowed.

Anyway, here is something that i hope you will appreciate; it is a centered horizontal menu bar list with equal width buttons. The buttons themselves aren’t images, just simple text on a background-color.

Initially, i was only able to get this thing to work in Mozilla 1.2.1 for the Mac platform, but with the help of billyboy over at the Killersites forums we were able to crack it. You will find a more complete summary of this horizontal list on those forums.

Blah DL 8

The latest thing that i’m attempting to do is to create a ‘faked table’. I’ve got a little table on my website that i use for dates, issue numbers, and magazine names. I was hoping to replace it with this faked table, but as you’ll see the css code is humongous, and it’s only humongous because i wanted to keep my ‘zebra stripes’ intact.

Faked Table Display:

Table Forge No.4

2nd Notes
I thought it might be an idea to edit this post for a second time inorder to put in a link above to direct you to the Blah DL 8 summary over at the Killersites forums, and also to drop in another Definition List tip & trick.

I used to have a couple of lists (#listleft & #listright). They were both identical, and allowed me to fool most browsers into displaying each list side-by-side, where each line of text, say in, #listleft would also be level with a line of text in #listright.

This next one will allow you to twin two columns in a dl, or definition list:

Twin List 9

[motion_ex]

Just found this one recently, since it was not yet in this list, i al adding it:
http://www.brunildo.org/test/

[Webnauts]

@motion_ex

Just found this one recently, since it was not yet in this list, i al adding it:
http://www.brunildo.org/test/

Great link! Bookmarked. Thanks.

[MacRankin]

I wanted to find a way to enhance my dodgy definition lists (TwinLists) to include images and text side-by-side.

Quite recently, i came across Nathan Smith’s, ‘hoverbox’, and realised that this was something i could use or adapt to carry on using images in almost the same style as i use on my home page without losing too much continuity.

As you may already know, a hoverbox allows you to seemingly enlarge a smaller image. There are in fact two images, one that has been restricted via some piece of css code that you actually see, and a ‘preview’ image that does this hoverbox, or lightbox enlarging trick.

Hoverbox Image Gallery:

Hoverbox image gallery | SonSpring

Err, anyway, i’m pretty sure that i’ve managed to get it to look the way i want it to look across all browsers, but as for the actual hoverbox part doing its magic - now that is something that is quite out of my hands, and i have no idea if it actually works in anything other than Mozilla 1.2.1 and iCab 3.0.1, so i’ll just leave it in your capable hands…

http://www.macrankin.co.uk/web_projects/smart_lists/hoverlist_09.html

2nd Notes: (hoverlists updated!)

The above hoverlist has been completely overhauled, err, but not by me. billyboy - a pc using and php code-crunching guru has solved yet another one of my dodgy dl lists.

So i’m editing this post just in case some of you are tearing your hair out trying to get this thing to work. I doubt that you are, but just in case.

Look ma, no workarounds…

bb hoverlist:
http://www.macrankin.co.uk/web_projects/smart_lists/bb_hoverlist.html

P.S. You can find billyboy’s comments regarding his overhaul of this particular hoverbox list over on the killersites forum.

http://www.killersites.com/mvnforum/mvnforum/viewthread?thread=5535

[gregorious]

thanks for the CSS resource!

[porov]

Great list thanks!

[savagepriest]

thanks this is what I really needed

[dr_uzo]

I need a CSS tutorials (the basics). I don’t want to read voluminous books. I want to watch video presentations, perhaps in CD-rom format.

Suggestions will help.

[PaulOB]

It costs a fortune but Eric Meyer has one here:

[pixelecho]

Writing color style in different formats in CSS :
(Web-NamedColors, HEX/HTML, RGB, RGB%)

1---------------------------------------------------------
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: DeepPink;
}

2---------------------------------------------------------
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FF1493;
}

3---------------------------------------------------------
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: rgb(255,20,147);
}

4---------------------------------------------------------
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: rgb(100%,8%,58%);
}

Go to: http://www.design-lib.com/, you can use [URL=“http://www.design-lib.com/color_tool_mixer.php”][B]online color mixer[/B] to convert in above formats and [B][URL=“http://www.design-lib.com/color_tool_schemer.php”]online Color Scheme Tool[/B] to make a color schemes.

[D9r]

Since the subject’s been brought up, here are a few more color references:

D9r Color Links
Color Schemer
color cube
WEB SAFE COLOR CHART

[sleepyhead3]

thank you so much webnauts! your a genius!

[optl]

Can someone tell me why when I set my div’s display to inline the height:39px property doesn’t work?

Thanks

[PaulOB]

Hi Opt1,

You should really have posted this in your own thread but I’ll answer it now I’m here

When you set an element to inline then dimensions don’t apply because the element is “inline”. Vertical margins are also ignored.

If you need to set dimensions then you can either float the element or leave it as block level. Or alternatively you can use padding on inline elements to create some vertical height but this will be unreliable if the height is greater than the line-height etc.

It all depends on exactly what you are trying to do.

[optl]

Thanks Paul. Sorry for not creating a thread.