CSS

Css rester – default options

Jun 29th

Posted by admin in CSS

No comments

@charset “utf-8″;
/* CSS Document */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

3 Ways to Highlight Links to the Current Page

Jun 21st

Posted by admin in CSS

No comments

Solution #1: HTML/CSS only

With this solution, all you have to do is add in some extra classes to your HTML and use CSS to style them. Each page has a class on the body tag that identifies it: More >

Centre widthless floats

Jun 21st

Posted by admin in CSS

No comments

#buttons{
float:right;
position:relative;
left:-50%;
text-align:left;
}
#buttons ul{
list-style:none;
position:relative;
left:50%;
}

#buttons li{float:left;position:relative;}/* ie needs position:relative here*/

#buttons a{
text-decoration:none;
margin:10px;
background:red;
float:left;
border:2px outset blue;
color:#fff;
padding:2px 5px;
text-align:center;
white-space:nowrap;

}
#buttons a:hover{ border:2px inset blue;color:red;background:#f2f2f2;}
#content{overflow:hidden}/* hide horizontal scrollbar*/

thanks http://www.pmob.co.uk/pob/centred-float.htm

, , , , ,

CSS: Align two DIVs on opposite sides on a single line

Jun 17th

Posted by admin in CSS

No comments

I want to place two different segments of text on top a table. Both segments must be aligned at opposite borders (i.e. left align and right align). I don’t want them to be aligned with any column inside the table but just with the overall width of the table.
More >

Multiple CSS Background Images

Mar 27th

Posted by admin in CSS

No comments

One of the biggest annoyances with CSS is the inability to apply more than one background image to a box.

I’m currently working on a site that is in particular need of this. The only way to tackle it, at the moment, is to throw an ass-load of span or div tags in the mix (or to rely on tags that are slightly more meaningful, if they’re appropriate, but that’s not always possible). More >

Flash: ASfunction Link Rollover Effect

Jul 30th

Posted by admin in CSS

No comments

External CSS

External css as it applies to dynamic text does have limitations Some of those limitations include:

  • javascript actions such as On rollover events in js.
  • Borders
  • divs and tables
  • text is always set to wrap which can cause formatting issues when dealing with images linked to in the content. More >

, ,

Advanced CSS Menu

Jul 1st

Posted by admin in CSS

No comments

Last tutorial, I showed you how to design a watercolor effect menu in Photoshop. This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position property.

http://www.webdesignerwall.com/tutorials/advanced-css-menu/

CSS tips , bg iamge position, DIV hover

Jun 23rd

Posted by admin in CSS

No comments

Css bg image position

stylesheet

.seabox {

background-image: url(images/seascape.gif);
background-repeat: no-repeat;
background-position: 0 0; /* remark: nothing between 0 and 0 */
}

html

<div>…</div>

http://home.tiscali.nl/developerscorner/port-hole/porthole.htm

CSS DIV HOVER

.home_tab {  (I’d call this #nav a)
width: 75px;
height: 26px;
background: url(images/home.jpg) top left no-repeat;
margin-left: 265px;
}
.home_tab:focus, .home_tab:hover, .home_tab:active { (I’d call this #nav a:focus, #nav a:hover, #nav a:active)
background-image: url(‘images/home_over.jpg’);
}

.home_tab {  (I’d call this #nav a)

width: 75px;

height: 26px;

background: url(images/home.jpg) top left no-repeat;

margin-left: 265px;

}

.home_tab:focus, .home_tab:hover, .home_tab:active { (I’d call this #nav a:focus, #nav a:hover, #nav a:active)

background-image: url(‘images/home_over.jpg’);

}

, , ,

Absolute CSS Boxes

Apr 2nd

Posted by admin in CSS

No comments

Quite some time ago, I had an argument with a friend who is a big fan of Microsoft products. While I’m no Xbox hater, I am not very fond of some of their more shoddy products such as Internet Explorer. He was justifying the shortcomings of IE6, saying that absolute positioning is rarely used in web pages, and that :hover pseudo class is not really that useful.

For the most part, he was right. Very few websites I have seen actually make extensive use of absolute positioning. By default, if you do not specify a mode, web browsers will use static positioning. This is what I used in nearly all the sites I have done. For most real-world scenarios, extra features are not needed. Still, good browsers adhere to standards as much as possible. There is even the Acid2 Test to determine how well various browsers measure up.

In that same vein of relatively useless, but somewhat amusing CSS implimentation, I have whipped up this little demo. It works in Firefox, Opera and Safari, but fails in the big blue E. Those who are proned to seizures might not want to move the mouse around too quickly. Use at your own risk:

Demo: Absolute CSS Boxes 

There you have it folks, an impractically enjoyable use of CSS! By the way, these effects do not use images or JavaScript. It uses only a single file, containing valid XHTML 1.0 Strict and CSS. Feel free to take the code and do what you want with it. Don’t forget to check it out in Internet Explorer, and show all of your friends why they need to switch to a different browser. ;-)

thanks
http://sonspring.com/journal/absolute-css-boxes

Fixed positioning CSS

Mar 16th

Posted by admin in CSS

No comments

Fixed positioning

This post will hopefully be updated when I have done a little more (like explaining stuff and publishing combinations of three, maybe four columns), for now:

123»