Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,153,239 members, 7,818,814 topics. Date: Monday, 06 May 2024 at 05:21 AM

CSS Cheats And Tricks(Learn and Teach) - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / CSS Cheats And Tricks(Learn and Teach) (3725 Views)

Joomla And Drupal Users Only Come And Teach/learn / Latest Free Browsing Cheats / Wordpress Help Zone - Tutorials, Answers, and Tricks. (2) (3) (4)

(1) (2) (Reply) (Go Down)

CSS Cheats And Tricks(Learn and Teach) by adexsimply(m): 7:38am On Jan 26, 2013
you'll be amazed at wat you can do with cascading style sheet..||if you think you have sumthing superb to share on CSS...you can post them here
Re: CSS Cheats And Tricks(Learn and Teach) by adexsimply(m): 8:13am On Jan 26, 2013
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML
Nearly all browsers nowadays support CSS and many other applications do, too. To write CSS, you don't need more than a text editor, but there are many tools available that make it even easier.
Re: CSS Cheats And Tricks(Learn and Teach) by yawatide(f): 11:13am On Jan 26, 2013
go on
Re: CSS Cheats And Tricks(Learn and Teach) by adexsimply(m): 11:35am On Jan 26, 2013
yawa-ti-de:
go on
k
Re: CSS Cheats And Tricks(Learn and Teach) by adexsimply(m): 12:37pm On Jan 26, 2013
..case u ve had no prior experience with CSS usaage, RELAX!!! thats very easy..
THERE ARE THREE METHODS OF APPLYING CSS>>
In-line
Internal/Embedded
External
Re: CSS Cheats And Tricks(Learn and Teach) by Afam4eva(m): 3:30pm On Jan 26, 2013
Are you teaching us something different or introducing us to CSS?
Re: CSS Cheats And Tricks(Learn and Teach) by adexsimply(m): 6:00pm On Jan 26, 2013
Afam4eva: Are you teaching us something different or introducing us to CSS?
sumthn diff..but i nid to introduce css to starters....ryt?
Re: CSS Cheats And Tricks(Learn and Teach) by adexsimply(m): 6:41pm On Jan 26, 2013
HERE..CSS FONT SHORTHAND
its function is to save developers some lines of code..
SYNTAX :
 body {
   font: font-style font-variant font-weight font-size/line-height font-family;
}

EXAMPLE: 
 body {
   font: italic small-caps bold 13px/150% Arial, Helvetica, sans-serif;
}

below is an image on how to effectively manipulate this useful trick

Re: CSS Cheats And Tricks(Learn and Teach) by adexsimply(m): 6:57pm On Jan 26, 2013
If your visitors use IE6, avoid using px as the unit of measurement for text. IE6 users have no zoom functionality; they rely on text resizing, which doesn’t work with px. Use a relative unit instead, such as em.
Re: CSS Cheats And Tricks(Learn and Teach) by adexsimply(m): 8:17pm On Jan 26, 2013
[size=13pt]3D TEXT[/size]
HTML:<body class="mytxt">
ADEXSIMPLY
</body>
CSS:
.mytxt {
	font-size:50px;
	font: italic message-box  bolder 15pt Georgia, "Times New Roman", Times, serif ;
	text-shadow: 1px 0px #F00, 0px 1px #ccc,
               2px 1px #F00, 1px 2px #ccc,
               3px 2px #F00, 2px 3px #ccc,
               4px 3px #F00, 3px 4px #ccc,
               5px 4px #F00, 4px 5px #ccc,
               6px 5px #F00, 5px 6px #ccc,
               7px 6px #F00, 6px 7px #ccc,
               8px 7px #F00, 7px 8px #ccc,
               8px 8px#F00;
			   }

1 Like

Re: CSS Cheats And Tricks(Learn and Teach) by ibietela2(m): 10:47am On Jan 27, 2013
Nice one... I really need this css
Re: CSS Cheats And Tricks(Learn and Teach) by yawatide(f): 11:54am On Jan 27, 2013
Given the time it takes to resolve IE6 bugs and the fact that even MSFT is campaigning for people to stop using IE6, I would strongly advise any serious web developer to stop coding for IE6
Re: CSS Cheats And Tricks(Learn and Teach) by adexsimply(m): 12:56pm On Jan 27, 2013
yawa-ti-de:
Given the time it takes to resolve IE6 bugs and the fact that even MSFT is campaigning for people to stop using IE6, I would strongly advise any serious web developer to stop coding for IE6
ryt. but the problem is,even IE9 still has sum of those bugs...
Re: CSS Cheats And Tricks(Learn and Teach) by yawatide(f): 11:00am On Jan 28, 2013
^^^ Oh yeah? List them please.
Re: CSS Cheats And Tricks(Learn and Teach) by ibietela2(m): 2:35pm On Jan 28, 2013
I can you tell if they visit with IE?
Re: CSS Cheats And Tricks(Learn and Teach) by adexsimply(m): 5:43pm On Jan 28, 2013
TEXT SELECTION COLOR
CSS(embedded):
<style>
::-moz-selection {
       background-color: #FFA;
       color: #000;
}

/* Works in Safari */
::selection {
       background-color: #F00;
       color: #000;
}
</style>


HTML:
<body>
<font size="7">try selecting this text and see the background color </font>
</body>

Re: CSS Cheats And Tricks(Learn and Teach) by adexsimply(m): 5:56pm On Jan 28, 2013
yawa-ti-de:
^^^ Oh yeah? List them please.
i'll just list some common ones

1)Floated layout misbehavior
2)Centering a layout e.g margin:auto;
3)it totally ignores top-margin if compatibility mode is turned on
4)staircase effect..i.e using <ul>,<li> for navigation
5)inabilty to have elements with small heights
6) at times Border-Radius does not work at all.etc
Re: CSS Cheats And Tricks(Learn and Teach) by yawatide(f): 6:09pm On Jan 28, 2013
Hmm, looks like you lifted these from somewhere and not based on your personal experience #justSaying smiley

1) I currently use IE9 and haven't seen a problem with floating
2) Same as #1
3) Why would your users turn on compatibility mode if you have added a proper doctype?
4) Explain
5) Failing to see how this, technically, is a problem
6) I haven't experimented much with this (because I use the pie.htc plugin) so I will concede to you on this one.

Overall though, IE9 has improved but yes, it does have its problems. Having said that, I would still insist that any serious web developer should dump IE6 when developing websites. I dumped IE6 in 2007 and haven't regretted or looked back since cool
Re: CSS Cheats And Tricks(Learn and Teach) by adexsimply(m): 7:01pm On Jan 28, 2013
yawa-ti-de:
Hmm, looks like you lifted these from somewhere and not based on your personal experience #justSaying smiley

1) I currently use IE9 and haven't seen a problem with floating
2) Same as #1
3) Why would your users turn on compatibility mode if you have added a proper doctype?
4) Explain
5) Failing to see how this, technically, is a problem
6) I haven't experimented much with this (because I use the pie.htc plugin) so I will concede to you on this one.

Overall though, IE9 has improved but yes, it does have its problems. Having said that, I would still insist that any serious web developer should dump IE6 when developing websites. I dumped IE6 in 2007 and haven't regretted or looked back since cool
let me explain number first..but b4 i explain
how do u make ur dropdown menus?
Re: CSS Cheats And Tricks(Learn and Teach) by adexsimply(m): 7:24pm On Jan 28, 2013
yawa-ti-de:
Hmm, looks like you lifted these from somewhere and not based on your personal experience #justSaying smiley

1) I currently use IE9 and haven't seen a problem with floating
2) Same as #1
3) Why would your users turn on compatibility mode if you have added a proper doctype?
4) Explain
5) Failing to see how this, technically, is a problem
6) I haven't experimented much with this (because I use the pie.htc plugin) so I will concede to you on this one.

Overall though, IE9 has improved but yes, it does have its problems. Having said that, I would still insist that any serious web developer should dump IE6 when developing websites. I dumped IE6 in 2007 and haven't regretted or looked back since cool
as per number 1...view images below
CSS:
<style>
/*Author:Adex
Date:24/12/12
*/
#element, #anotherelement{  
    background: #096;  
    border: solid 1px #36F;  
    width: 100px;  
    height: 150px;  
    margin: 30px;  
    padding: 10px;  
    float: left;  
}  
#container{  
    background: #C2DFEF;  
    border: solid 1px #36F;  
    width: 365px;  
    margin: 30px;  
    padding: 5px; 
    0verflow:auto;   
}  </style>

HTML:
<div id="container">Background
<div id="element">you should float left</div>  
    <div id="anotherelement">you should float Right</div>  
</div>

[size=13pt]mayb i lifted them too grin[/size]

Re: CSS Cheats And Tricks(Learn and Teach) by yawatide(f): 8:05pm On Jan 28, 2013
I will answer both your last posts at once since they are related:

This "issue" hasn't really been an issue for me, which is why I was asking for clarification. Any web developer should know to clear their floats immediately after floating. This is called defensive coding. It's just like when you are driving a car on the road - you don't (or shouldn't at least) expect the person next to you to hit you but you should drive as though they will.

Always code defensively and you should be good to go.
Re: CSS Cheats And Tricks(Learn and Teach) by adexsimply(m): 8:10pm On Jan 28, 2013
yawa-ti-de:
I will answer both your last posts at once since they are related:

This "issue" hasn't really been an issue for me, which is why I was asking for clarification. Any web developer should know to clear their floats immediately after floating. This is called defensive coding. It's just like when you are driving a car on the road - you don't (or shouldn't at least) expect the person next to you to hit you but you should drive as though they will.

Always code defensively and you should be good to go.
ok.. i understand u..i just listed those bugs cos u asked me to..not because i ve not found solutions to them...
by the way are you really female?
Re: CSS Cheats And Tricks(Learn and Teach) by yawatide(f): 12:08am On Jan 29, 2013
^^^ as female as Eve was in the garden of Eden.
Yes, I did ask for them and I knew some of the things you were gonna throw out. I just wanted to get our creative and logical juices going, that's all. Just because someone says it can't be done doesn't necessarily mean that that's the case wink
Re: CSS Cheats And Tricks(Learn and Teach) by adexsimply(m): 4:04pm On Jan 29, 2013
yawa-ti-de:
^^^ as female as Eve was in the garden of Eden.
Yes, I did ask for them and I knew some of the things you were gonna throw out. I just wanted to get our creative and logical juices going, that's all. Just because someone says it can't be done doesn't necessarily mean that that's the case wink
FEMAle.. hmmn.. and you ar nt based in nigeria...thats cool.. WEB-MISTRESS cheesy
i fully support your notion..
Re: CSS Cheats And Tricks(Learn and Teach) by adewasco2k(m): 11:46am On Feb 04, 2013
sorry guys i am still learning here, i do face a problem which by one way or the other i get pass it but i know i dont understand how it work.

im sure you will laugh at me tho. but i wouldnt mind,,,i am learning wink

this is it...

lets say i want a div inside another div.
that sound simple
but some time it will work as expected some time it wouldnt not.

this is how i do it

<div id="container">
<strong> contains a div </strong>
<div id="content">
<strong> a div inside of another div</strong>
</div>
</div>

<style>
#container{
width=800px;
height=100%;

}
#content{
width=400px;
height=100%;
}
</style>


okay i just remembered what i expect to happen....i expect the container div to expand as the content div expands, but some times i get an over flowing content div even when i didnt specify a div heigh to the container div.


i hope to get clarified
Re: CSS Cheats And Tricks(Learn and Teach) by yawatide(f): 2:57pm On Feb 04, 2013
Do at least 2 things and report back:
1) where you have "=", replace with ":" in your CSS attributes
2) remove the heights, see if you get an overflow, after doing #1 above and if not, add back the height(s)
Re: CSS Cheats And Tricks(Learn and Teach) by adexsimply(m): 3:36pm On Feb 04, 2013
you can also try changing ur outer div to 
width:100%;
height:auto;
and ur inner div to 
display:inline-block;
and like YAWA said, change the equal-to sign( = )to ( : )
Re: CSS Cheats And Tricks(Learn and Teach) by GraphicsPlus(m): 3:45pm On Feb 04, 2013
Stop adding the height. Specify only the width. Then the div will continue to expand its height automatically as you add things inside it.
Re: CSS Cheats And Tricks(Learn and Teach) by adewasco2k(m): 4:04pm On Feb 04, 2013
Really thank you guys, you guys a re family! About the = and : that was a mistake on my part here...I wouldn't actually do that...I just practice using the tricka about and they seems to work perfectly, after a couple of practice, I was able to understand how it works..you you guys wouldn't mind again *wink* I would like to understand positioning (relative, absolute and fixed) though I know fixed well...but still struggling with relative and absolute. Thanks Guys
Re: CSS Cheats And Tricks(Learn and Teach) by adewasco2k(m): 4:14pm On Feb 04, 2013
I just want to add something, every single website i try to build(just practicing) eve if i manage to get it as i want on the front end...the back end is always very ugly wink if anybody view the source they will be like who is this learner sad i am still learning i know but i wish to get my codes organized and fine.
i am try to upload a page i did few day back for you guys to see that at least i am learning fast....will update the post when i upload it....just a page though. thanks guys.

updated
see this links:
http://wasconet.com/learn/learning2.html
http://wasconet.com/learn/learning.html

and mind you guys my site is just wordpress with a theme. i did absolutely little coding on it.
Re: CSS Cheats And Tricks(Learn and Teach) by solid3(m): 4:35pm On Feb 04, 2013
Nice thread.

I'm presently working on what seems like an advanced css/css3. Trying to create a slide out menu over a slider item. Been a bit tough but almost done.

Meanwhile, still chilling at the hotel reception, waiting for this Plc peep for my presentation.
Re: CSS Cheats And Tricks(Learn and Teach) by GraphicsPlus(m): 4:54pm On Feb 04, 2013
[quote
author=adewasco2k]Really thank you guys, you guys a re family! About
the = and : that was a mistake on my part here...I wouldn't actually do
that...I just practice using the tricka about and they seems to work
perfectly, after a couple of practice, I was able to understand how it
works..you you guys wouldn't mind again *wink* I would like to
understand positioning (relative, absolute and fixed) though I know
fixed well...but still struggling with relative and absolute. Thanks
Guys[/quote]


Positioning can really be confusing to every beginner. Relative positioning simply takes its position from the parent container. But absolute positioning takes its position from your browser window. For instance, if you position something absolutely and do ctl -, u wil discover that the thing wil just jump out of the page and position itself at the edge of ur browser window.

So if u must use absolute positioning, then u must position the parent of that thing to relative.

With positioning, u can use-
top:2px;
bottom:2px;
or
right:2px;
left:2px;

U can use positioning to position your div, image or anything to any place in your web page.

(1) (2) (Reply)

Glo Unlimited Free Browsing With Uc Mini Handler Now Active (see How) / Experience Unlimited Internet With Tizeti – Wifi.com.ng! Sign Up / Good Dating And Group Chat Scripts

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 48
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.