CSS « Richard Kotze – Web Technology, Design and Development

Posts Tagged ‘CSS’

CSS create tool tip

Posted on Wednesday, August 31st, 2011 in CSS

The content attribute in CSS is pretty useful. It can only be used with the Pseudo properties before and after which essentially determine where the content is going to be outputted.

So a basic example using the content attribute would be to label small items: 09839 048882

.phonenumber:before{ content: 'Phone number: ';}

Essentially this snippet will add “Phone number” in every element that uses this class at the beginning of the text. Pretty useful when there is a mass change of labels needed to be done.

How to make a tool tip just using CSS? Read more

Comments Off

Make navigation elements hover over flash.

Posted on Monday, August 1st, 2011 in Top Tips

I was working on a drop down menu which unfortunately was dropping behind a flash advert, so most of the navigation items were not visible.

There are essentially two things you need to do to combat this small issue. Firstly the flash object (embed tag) needs to have wmode attribute and set to transparent. A param tag also needs to be added, setting the wmode, as seen in the example below.

<embed wmode="transparent" />
<param name="wmode" value="transparent" />

The menu class then needs the z-index set to a very high value in this case: 9 999 999 to layer above the flash item. The item also needs to have an absolute position for the z-index to take affect. The reason for using z-index is because this controls the layers level in the web page, essentially the depth. Flash objects and web forms naturally have a high z-index and this is why most elements appear below them. The simple script can be used over web forms as well, you don’t need to do anything special to the forms.

Z-index the higher the value the near to the top it will be.

.menuItems{
      position:absolute;
      z-index: 9999999;
}

Comments Off

Hiding rows in a table using JQuery

Posted on Thursday, October 28th, 2010 in JavaScript

I was writing a simple JQuery script which filters out table rows based on class name. When I used visibility:hidden; I noticed that when it was made visible again, the table looked slightly broken. To fix this instead of using visibility:hidden use visibility:collapse; and this keeps the table format correct when it is made visible again.
Read more

Comments Off

Remove link border when clicked

Posted on Thursday, October 28th, 2010 in Top Tips

How to get rid of the dotted border around a link when it has been clicked.

a {
    outline: 0;
}

Comments Off

nth-child

Posted on Saturday, October 9th, 2010 in CSS3

Using CSS3 pseudo-class nth-child now means that you can select a specific group of html elements. Essentially its a simple patten search through the HTML elements. For instance in a table you would like every alternate row to be one colour and for each other row to be a different colour. By making the rows in a table alternate colours you are making it easier to read the data. See example1:

Example 1

Row1: Collumn1 test data	Collumn2 test data	Collumn3 test data	Collumn4 test data
Row2: Collumn1 test data	Collumn2 test data	Collumn3 test data	Collumn4 test data
Row3: Collumn1 test data	Collumn2 test data	Collumn3 test data	Collumn4 test data
Row4: Collumn1 test data	Collumn2 test data	Collumn3 test data	Collumn4 test data

Comments Off

Override CSS properties

Posted on Tuesday, August 17th, 2010 in CSS

How can I override a CSS rule? You might find that you have a standard rule for curtain elements which is applied throughout the whole site but there are cases when you need to style an element differently from the rest. A common problem is sometimes an element is referred to twice through the different rules and depending on the cascade order determines which one is used. In order to force a specific property in a rule to be used by an element, the !important declaration should be applied. No matter what the CSS cascading order is for this element, it would have the highest priority.

Below is an example of how to apply the !important declaration, by putting it between the property-value and semi-colon.

#mainbody p {color:black;}/*main css file*/
#mainbody p {/*sub page css file*/
color:grey !important;
background-color:black;
}

Comments Off

Ten useful CSS scripts

Posted on Friday, August 13th, 2010 in CSS

icon for CSS articles Here is a list of ten useful CSS scripts.

Horizontal Navigation list

ul{list-style-position:inside;list-style:none;padding:0;margin:0;}
li{display:block;float:left;padding:5px 10px;margin:0;}

Comments Off

Pseudo first-child

Posted on Thursday, August 5th, 2010 in CSS3

icon for CSS articles Here is something interesting that I have recently stumbled upon and that is the pseudo class first-child does not work in certain cases. For instance lets say your content is wrapped in a div tag and you want to make the first p tag italics or bold but you have a heading above this paragraph, then div p:first-child does not work. This is because it is looking for looking for the first child element in the div tag which is the heading. Meaning it is not looking for the first instance of a chosen element.

How to over come this? Well CSS3 does provide a pseudo-class that over comes this and that is first-of-type. This means that if now looks for the first instance of a chosen element no matter how many elements are above it. Example:

div p:first-of-type{
     font-weight:bold;
}

This is also similar to last-child just use the :last-of-type and this will pick up the very last instance in the group.

div p:last-of-type{
     font-style:italic;
}

Comments Off

From: 1 to 812 Next page »

Tag cloud

Posts Tagged ‘CSS’

How to make a tool tip just using CSS? Read more

Horizontal Navigation list