Causing Form To Submit OnChange Loading With Selected Setting From PHP – Using an array Loading With Selected Setting From PHP – Using find and replace on a string Doing specific things Get selected item text
All posts by
zindex
z-index sets the stack order of the element. It only works on positioned elements (position:absolute, position:relative, or position:fixed). It's natural to assume elements with higher z-index values are in front of elements with lower z-index values, and any element with a z-index is in front of any element without a z-index. This is how it […]
Rollover buttons
Based on this guide http://www.table2css.com/articles/how-create-rollover-image-button-html-and-css-without-any-javascript Create your image double height with the roll over image in the bottom half In the <head> <style type=”text/css”> a.myrollover { display: block; width: 80px; height: 30px; background-image: url(‘button_combined.png’); } a.myrollover:hover { background-position: center bottom; } </style> Then for your link <a href=”#” class=”myrollover”></a>
.Lists
Targetting Specific List Elements Hide the li class “comments” in ul “meta-single”: Getting rid of list dots Using An Image As The List Bullet Point 2 Column List List items in a horizontal line and with an icon each
Hover
You can use :Hover on anything – doesn't have to be a link E.g. .my_style_name:Hover { color: #000000; } Tool Tip Style Hover Text You can use the title attribute to add pop up text to most things: <span title="Text that will show on hover">Text on page</span> Using CSS instead when you want to […]
Font
Global font Set the font in the <body> style and nowhere else to allow the font to be changed from one place. Spacing Lines If you don’t want the spacing between paragraphs use margin. If you set margin to 0 there will be no spacing. If you have a gap between 2 different sytles, then […]
Creating A Page On A Background
CSS .page_background { background-color: #FFFFFF; width: 924px; padding: 8px; margin-top: 0px; margin-right: auto; margin-left: auto; margin-bottom: 0px; } .page_background_shaddow_top { width: 950px; padding: 0px; margin-top: 10px; margin-right: auto; margin-bottom: 0px; margin-left: auto; background-image: url(images/background_drop_shaddow_top.gif); height: 5px; } .page_background_shaddow_middle { width: 950px; padding: 0px; background-image: url(images/background_drop_shaddow_sides.gif); background-repeat: repeat-y; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; […]
Scroll Bar Box
Fixed size box with scroll bars pre { background-color:#FDFDFD; font: 1.0em ‘Courier New’, Courier, Fixed; overflow: auto; line-height: 1em; width: 640px; margin-top: 5px; margin-right: 0px; margin-bottom: 10px; margin-left: 10px; padding: 5px; text-align: left; Scroll bars only appear when you hover pre { background-color:#FDFDFD; font: 1.0em ‘Courier New’, Courier, Fixed; overflow: hidden; line-height: 1em; width: […]
.Positioning
There are 4 states to the position property: position: static; /*(default)*/ Not affected by the top, bottom, left, and right properties. position: relative; Positioned relative to its normal position.Setting the top, right, bottom, and left properties will cause it to be adjusted away from its normal position. Other content will not be adjusted to […]
.Images General
Specifying Image Size (e.g. using double resolution images for retina displays) .header_logo {background-image: url(images/header_logo.png);background-size: 260px 55px;width: 260px;height: 55px;border: none;} Adding an image (e.g. an icon) to the left of some text Cropping overflow: hidden; Curved Corners border-radius: 4px 4px 4px 4px; Specifying Image Class <a href=”school_home.php”><img class=”my_thumb_class” src=”a.png” ></a> img.my_thumb_class { Floating An Image Over […]