GoFuckYourself.com - Adult Webmaster Forum - OK, here's a little CSS trick

GoFuckYourself.com - Adult Webmaster Forum (https://gfy.com/index.php)

- Fucking Around & Business Discussion (https://gfy.com/forumdisplay.php?f=26)

- - OK, here's a little CSS trick (https://gfy.com/showthread.php?t=941061)

harvey

11-30-2009 03:47 PM

OK, here's a little CSS trick

so I really got tired of fixing some CSS sheets with HORRORS (they're not even errors), therefore here's a tip for you guys to save bandwidth, make spacing coherent and clear floats all at once while saving time.

First, for those that still don't know (the vast majority for what I see), you should do something at the top of every stylesheet: reset everything. I won't go further on that since there are gazillions of tutorials on it.

So while you're resetting everything, add this:

Code:

hr{clear:both; visibility:hidden; margin:10px 0;}



/* modify the margin to whatever you want */

Now, every time you need some spacing or clear floats, instead of redefining or adding elements, simply add the <hr/> tag and that's it

of course, in the event that you need a real <hr> simply define it like <hr class="whatever" />, but chances are 99 times out of 100 you won't need the hr tag. Hell, if I remember right the last time I used the hr tag was in 1998!

Anyway, hope you like it :)

JD	11-30-2009 03:56 PM

nifty trick :) and yeah i agree on the 1998 thing about HR's

I do the same thing with a clear class like

Code:

.clear {clear:both;}

and use it on page with

Code:

<div class="clear" style="height:xxpx;"></div>

different strokes for different folks :D

CS-Jay

11-30-2009 04:01 PM

I use the JD method, but I like the hr idea too.

AIbenjamink

11-30-2009 04:19 PM

Quote:

Originally Posted by JD (Post 16600934)

Code:

.clear {clear:both;}

Code:

<div class="clear" style="height:xxpx;"></div>

:thumbsup:thumbsup

HighEnergy

11-30-2009 04:24 PM

Quote:

Originally Posted by JD (Post 16600934)

nifty trick :) and yeah i agree on the 1998 thing about HR's

I do the same thing with a clear class like

Code:

.clear {clear:both;}

and use it on page with

Code:

<div class="clear" style="height:xxpx;"></div>

different strokes for different folks :D

All's well that ends well .... but ....
1) for predictable cross-browser results call every variable at the beginning of the style sheet.

ie:
font-family
font-size
font-style
line-height
margin
padding
p margin
p padding
div margin
div padding
i margin
i padding
em margin
em padding
etc
etc
etc
Just obey cascading for the best results.

I keep all base (global) styling in a 'base' file to be read 1st.
Then unique page/site styling in a unique CSS file to be read 2nd.

... :2 cents:

RyuLion

11-30-2009 04:32 PM

guess what this does?

#index_table IMG:hover {
BORDER-RIGHT: #f09 2px ridge;
border-top: #f09 2px ridge;
border-bottom: #f09 2px ridge;
border-left: #f09 2px ridge;
FLOAT: left; MARGIN: 0px 5px 0px 0px;

HighEnergy

11-30-2009 04:39 PM

Quote:

Originally Posted by RyuLion (Post 16601079)

It doesn't do jack shit unless you have an element named index_table

StuartD

11-30-2009 05:11 PM

http://www.gfy.com/showthread.php?p=12733093
:glugglug

Deej	11-30-2009 05:28 PM

Quote:

Originally Posted by StuartD (Post 16601235)

http://www.gfy.com/showthread.php?p=12733093
:glugglug

Yea what the fuck you posers!

StuartD invented CSS :pimp

Basic_man

11-30-2009 06:31 PM

I like the simplicity of your HR trick! I should start using it :thumbsup

dallasnovelty

11-30-2009 06:47 PM

Thanks for sharing your tips. I am just learning how to do all the css stuff.

harvey

11-30-2009 09:02 PM

Quote:

Originally Posted by JD (Post 16600934)

nifty trick :) and yeah i agree on the 1998 thing about HR's

I do the same thing with a clear class like

Code:

.clear {clear:both;}

and use it on page with

Code:

<div class="clear" style="height:xxpx;"></div>

different strokes for different folks :D

yeah, but my solution is for lazy mofos like me who just want to type 5 chars :1orglaugh

Quote:

Originally Posted by RyuLion (Post 16601079)

any time a girl sees that code she feels an irresistible urge to get her ass bitten :thumbsup

Quote:

Originally Posted by StuartD (Post 16601235)

http://www.gfy.com/showthread.php?p=12733093
:glugglug

nice thread indeed

Quote:

Originally Posted by Deej (Post 16601296)

Yea what the fuck you posers!

StuartD invented CSS :pimp

yeah, but my thing is CZZ, which is only for l33t people :pimp

Deej	11-30-2009 09:09 PM

Quote:

Originally Posted by harvey (Post 16602379)

yeah, but my thing is CZZ, which is only for l33t people :pimp

O i sees - Well you mis titled then :pimp

Keep up the good shit :thumbsup

Killswitch - BANNED FOR LIFE

11-30-2009 09:24 PM

Code:

.clearFix:after {

        visibility: hidden;

        display: block;

        font-size: 0;

        content: " ";

        clear: both;

        height: 0;

}

.clearFix {

        display: inline-block;

}

/* start commented backslash hack \*/

* html .clearFix {

        height: 1%;

}

.clearFix {

        display: block;

}

/* close commented backslash hack */

*, html {

        margin: 0;

}

Deej	11-30-2009 09:27 PM

Code:

* {margin:0;padding:0;}

tops all...

calmlikeabomb

11-30-2009 09:28 PM

Here is another tip - minify your style sheets to save bandwidth:

http://code.google.com/p/minify/

JD	11-30-2009 09:43 PM

Quote:

Originally Posted by Deej (Post 16602432)

Code:

* {margin:0;padding:0;}

tops all...

lol :thumbsup

All times are GMT -7. The time now is 05:47 PM.