CSS coding tips and tricks.

Status
Not open for further replies.
Sorry for the delay ... I have been very busy of late and I have been meaning to post more tips :)

CSS coding lets you control the images you use for lists instead of the standard boring bullets and it is very easy. Let me show you how. ;) Lets make a list first

Code: 
<ul>

[*] List item one

[*] List item two

   <ul>

      [*]Sub List item one

      [*]Sub List item two

   [/list]

[*]List item three

[/list]

To change bullets for all list items

Code: 
li {list-style-image:url(../yourimage.jpg)}

To change bullets for all unordered list items

Code: 
ul li {list-style-image:url(../yourimage.jpg)}

To change bullets for all Sub List items in unordered list
Code: 
ul ul li  {list-style-image:url(../yourimage.jpg)}
 
border radius is in gecko/mozilla and webkit both. just not in IE yet.

In CSS3 specs it's "border-radius" so I always put this property for fine future support since browsers are eventually going to move to that property name. also khtml-border-radius for konqueror if you care :P

See CSS3 Previews - CSS3 . Info for more interesting stuff in CSS3
 
^^ Thank you for sharing, while appreciated, this was already added earlier in the thread ;) Please read the thread before posting :)
 
PiXeLpUsHeR said:
^^ Thank you for sharing, while appreciated, this was already added earlier in the thread ;) Please read the thread before posting :)
Click to expand...

I searched the page's sources. I couldn't find any of these keywords: "khtml" and ".info" (for css3.info).

--

Here's some interesting animation stuff in webkit if you care.

http://webkit.org/blog/324/css-animation-2/

--

Enough goodness about all this at http://webkit.org/blog/ though it definitely gets an advanced topic for beginners.
 
IE CSS Bugs That’ll Get You Every Time

Source: http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/

The Box Model

This is perhaps the most common and frustrating bug of all in IE 6 and below. Let’s say you declare a box like this:

div#box {

width: 100px;

border: 2px solid black;

padding: 10px;

}

IE 6 will calculate the width of the box to be 100px.

Modern browsers will calculate the width of the box to be 124px.
Click to expand...

more in the link.
 
This is super easy to do.

Here is the CSS style

#myCenteredLayer {

width:650px

position:absolute

left:50%

margin-left:-325px

}

Here is the code

<div id="myCenteredLayer">Content here</div>

This needs to absolutely positioned, and the margin left is always (negative) half of the total width.
 
Status
Not open for further replies.
Top Bottom