This link has been bookmarked by 471 people . It was first bookmarked on 02 Mar 2006, by Dan Phillips.
-
26 Feb 18
-
04 Feb 14
-
16 Jul 13
-
16 Apr 13
-
19 Sep 12
-
09 Aug 12
-
21 Jul 12
-
16 Jul 12
-
26 Jun 12
-
11 May 12
Ady GouldTen more CSS tricks you may not know
Tags:
Web development
Our article, Ten CSS tricks you may not know has proven to be such a success that we decided it was time to offer you ten more CSS tricks that you may not know.
1. Block vs. inline level elements
Nearly all HTML elements are either block or inline elements. The characteristics of block elements include:
Always begin on a new line
Height, line-height and top and bottom margins can be manipulated
Width defaults to 100% of their containing element, unless a width is specifiedhacks webdev web design tricks html tutorial tips webdesign css Web Design - General #delicious
-
23 Apr 12
-
22 Feb 12
-
20 Jan 12
-
19 Jan 12
-
18 Jan 12
-
27 Sep 11
-
25 May 11
-
31 Mar 11
-
03 Mar 11
-
27 Jan 11
Jesse Bruton"Most websites highlight the navigation item of the user's location in the website, to help users orientate themselves. This is a fundamental requirement for basic usability, but can be a pain as you'll need to tweak the HTML code behind the navigation for each and every page. So can we have the best of both worlds? Is it possible to have the navigation highlighted on every page, without having to tweak the HTML code on each and every page? Of course it is...
First of all, you'll need to assign a class to each navigation item:
<ul>
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About us</a></li>
<li><a href="#" class="contact">Contact us</a></li>
</ul>
You'll then need to insert an id into the <body> tag. The id should be representative of where users are in the site and should change when users move to a different site section. When in ‘Home’ it should read <body id="home">, in ‘About Us’ it should be <body id="about"> and in ‘Contact Us’ <body id="contact">.
Next, you create a new CSS rule:
#home .home, #about .about, #contact .contact
{
commands for highlighted navigation go here
}
This basically creates a rule that only takes effect when class="home" is contained within id="home", and when class="about" is in id="about" and class="contact" is in id="contact". These situations will only occur when the user is in the appropriate site section, seamlessly creating our highlighted navigation item." -
12 Jan 11
-
22 Oct 10
-
24 Sep 10
-
03 Jun 10
-
07 May 10
-
- Always begin on a new line
- Height, line-height and top and bottom margins can be manipulated
- Width defaults to 100% of their containing element, unless a width is specified
- Begin on the same line
- Height, line-height and top and bottom margins can't be changed
- Width is as long as the text/image and can't be manipulated
1. Block vs. inline level elements
Nearly all HTML elements are either block or inline elements. The characteristics of block elements include:
Examples of block elements include
<div>,<p>,<h1>,<form>,<ul>and<li>. Inline elements on the other hand have the opposite characteristics:Examples of inline elements include
<span>,<a>,<label>,<input>,<img>,<strong>and<em>. -
- Have an inline element start on a new line
- Have a block element start on the same line
- Control the width of an inline element (particularly useful for navigation links)
- Manipulate the height of an inline element
- Set a background colour as wide as the text for block elements, without having to specify a width
o change an element's status you can use
display: inlineordisplay: block. But what's the point of changing an element from being block to inline, or vice-versa? Well, at first it may seem like you might hardly ever use this, but in actual fact this is a very powerful technique, which you can use any time you want to: -
The box model hack14 is used to fix a rendering problem in pre-IE 6 browsers on PC, where by the border and padding are included in the width of an element, as opposed to added on. A number of CSS-based solutions have been put forward to remedy this, so here's another one which we really like:
-
6. Disappearing text or images in IE?
IE has a very strange bug where text or background images sometimes disappears from sight. These items are still actually there, and if you highlight everything on screen or hit refresh they'll often re-appear. Kind of strange, huh?
This problem mostly occurs on background images and on text next to a floated element. To remedy the problem, simply insert
position: relativeinto the CSS command for the disappearing element, and for some bizarre reason that'll usually fix the problem. If this doesn't work (it sometimes doesn't), assign a width to the offending element in the CSS and that should fix the problem. -
To make text invisible you can use
display: none- easy! This works fine for hiding text from handhelds (if CSS is supported) and printed web pages, but isn't so great for many screen readers. Screen readers are now becoming too clever for their own good, and some will actually ignore the any text that has the ruledisplay: noneassigned to it.For screen readers users therefore, a new approach is needed:
position: absolute; left: -9000px. This basically takes the text and positions it 9000px to the left of the left edge of the screen, essentially making it invisible. -
CSS document for handhelds
-
First of all, you'll need to assign a class to each navigation item:
<ul>
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About us</a></li>
<li><a href="#" class="contact">Contact us</a></li>
</ul> -
Next, you create a new CSS rule:
#home .home, #about .about, #contact .contact
{
commands for highlighted navigation go here
} -
his basically creates a rule that only takes effect when
class="home"is contained withinid="home", and whenclass="about"is inid="about"andclass="contact"is inid="contact". These situations will only occur when the user is in the appropriate site section, seamlessly creating our highlighted navigation item.
-
-
04 May 10
Alexandre Barrosng these empty comment tag
-
To remedy the problem, simply insert
position: relativeinto the CSS command for the disappearing element
-
-
03 Apr 10
-
characteristics of block elements include:
-
- Always begin on a new line
- Height, line-height and top and bottom margins can be manipulated
- Width defaults to 100% of their containing element, unless a width is specified
-
Examples of block elements include
<div>,<p>,<h1>,<form>,<ul>and<li> -
Inline elements
-
- Begin on the same line
- Height, line-height and top and bottom margins can't be changed
- Width is as long as the text/image and can't be manipulated
-
Examples
-
<span>,<a>,<label>,<input>,<img>,<strong>and<em>. -
3. Minimum width for a page
-
-
30 Mar 10
-
02 Feb 10
-
29 Jan 10
-
28 Jan 10
-
19 Jan 10
-
06 Jan 10
-
11 Dec 09
-
23 Nov 09
-
11 Nov 09
-
10 Oct 09
-
02 Oct 09
-
20 May 09
-
05 May 09
-
23 Apr 09
-
16 Apr 09
-
12 Apr 09
-
06 Apr 09
-
28 Mar 09
-
25 Mar 09
-
06 Feb 09
-
13 Jan 09
-
09 Jan 09
-
04 Jan 09
-
30 Dec 08
-
22 Dec 08
-
06 Dec 08
-
31 Oct 08
-
29 Oct 08
-
25 Sep 08
-
22 Sep 08
-
26 Aug 08
Tammy Nethertonyou are on this webpage
-
20 Aug 08
-
13 Aug 08
-
06 Aug 08
-
31 Jul 08
-
04 Jun 08
-
16 May 08
-
29 Apr 08
-
23 Mar 08
-
21 Mar 08
-
20 Mar 08
-
14 Mar 08
Simon Ford.box { width: 80px; height: 35px; } html>body .box { width: auto; height: auto; min-width: 80px; min-height: 35px; }
-
01 Feb 08
-
21 Jan 08
-
padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;
-
-
15 Jan 08
-
14 Jan 08
-
20 Dec 07
-
27 Oct 07
-
26 Oct 07
Bob JohnsonFollow up to the popular article, Ten CSS tricks you may not know - learn something new and see how many you already know!
-
22 Oct 07
-
11 Oct 07
-
18 Sep 07
-
01 Sep 07
-
31 Aug 07
-
07 Aug 07
-
Our article, Ten CSS tricks you may not know1 has proven to be such a success that we decided it was time to offer you ten more CSS tricks that you may not know.
-
-
23 Jul 07
-
18 Jul 07
David PittFollow up to the popular article, Ten CSS tricks you may not know - learn something new and see how many you already know!
-
16 Jul 07
-
15 Jul 07
-
27 Jun 07
-
20 Jun 07
-
12 Jun 07
-
22 May 07
-
12 May 07
-
09 May 07
-
04 May 07
-
26 Apr 07
-
02 Apr 07
Jason Pedersenunderstand this command, so we'll need to come up with a new way of making this work in this browser. First, we'll insert a <div> unde
-
22 Mar 07
Page Comments
Would you like to comment?
Join Diigo for a free account, or sign in if you are already a member.