Very good CSS examples

Web programming topics
Post Reply
Tony
Lieutenant
Lieutenant
Posts: 86
Joined: Tue Jul 21, 2009 4:11 pm

Very good CSS examples

Post by Tony » Sun Nov 29, 2009 5:07 am

Below is an example of a CSS menu. Copy the code into an html page.

Code: Select all

<style type="text/css">
#menu {
display: block;
border: solid 1px rgb(190,60,40);
list-style: none;
text-align: left;
width: 85px;
margin: 0px;
padding: 0px;
background-color: white;
}
#menu li {
margin-bottom: 4px;
margin-left: 4px;
margin-right: 4px;
}
#menu a {
font-size: 16px;
font-weight: bold;
height: 18px;
text-decoration: none;
display: block;
color: rgb(79,79,79);
padding: 0px 0px 0px 6px;
background: rgb(244,244,244);
border-left: 4px solid rgb(200,200,200);
border-right: 4px solid rgb(200,200,200);
}
#menu a:hover {
background: rgb(232,232,232);
color: rgb(190,60,40);
border-left: 4px solid rgb(190,60,40);
border-right: 4px solid rgb(190,60,40);
}
</style>
<ul id="menu">
<li style="margin-top: 4px;"><a href="#" onfocus="this.blur();">Home</a></li>
<li><a href="#" onfocus="this.blur();">Music</a></li>
<li><a href="#" onfocus="this.blur();">Pictures</a></li>
<li><a href="#" onfocus="this.blur();">About</a></li>
</ul> 
Below are some CSS centering techniques. Copy the code into an html page.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Note the above doctype - IE must be put into standards mode for this CSS to work -->
<body style="margin: 0px auto; width: 500px; border: solid 1px black; padding: 20px;">
this is how you can center a page by using CSS in the body
<div style = "width: 300px; margin: auto; border: solid 1px black;">
this is how you can center a division
</div>
<div style="position: absolute; top: 100px; left: 50%; width: 300px; margin-left: -150px; border: solid 1px black;">
this is how you can center in a specific spot
</div> 
Below is an example a three column page using CSS. Copy the code into an html page.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Note the above doctype - IE must be put into standards mode for this CSS to work -->
<!-- This example has a fluid design when the page is resized. It shows how you can use absolute positioning inside a container that is also positioned -->
<body style="margin: 0px">
<div style="position: relative; width: 90%; margin: 10% auto; border: solid 1px black;">
<div style="margin-right: 200px; margin-left: 200px;">
this is the center column<br />it will resize
</div>
<div style="position: absolute; width: 200px; left: 0px; top: 0px; border-right: solid 1px black;">
this is the left column<br />it stays the same width
</div>
<div style="position: absolute; width: 200px; right: 0px; top: 0px; border-left: solid 1px black;">
this is the right column<br />it stays the same width
</div>
</div> 
Below is an example using CSS for a PopUp. Copy the code into an html page.

Code: Select all

Click <a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display = 'block' " ><span style="text-decoration: underline;">here</span></a>
<div id='PopUp' style='display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; font-size: 12px; width: 135px;'>
This is a CSS Popup that can be positioned anywhere you want on the page and can contain any test and images you want.
<br />
<div style='text-align: right;'><a onmouseover='this.style.cursor="pointer" ' style='font-size: 12px;' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display = 'none' " ><span style="text-decoration: underline;">Close</span></a></div>
</div> 
Mysoogal
Captain
Captain
Posts: 223
Joined: Thu Dec 17, 2009 7:15 am
Location: Planet VPS

Re: Very good CSS examples

Post by Mysoogal » Sun Dec 20, 2009 7:37 am

even better one with facebook window

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Facebook Overlay Example</title>
        
        <style type="text/css">
            
            * { margin: 0; padding: 0; }
            
            body { font: 87.50%/1.5 "Lucida Grande", Helvetica, Arial, sans-serif; }
            
            p { margin-bottom: 1.5em; }
            
            button { padding: 4px 8px; }
            
            #canvas { margin: 20px; }
            
            #fbOverlay { display: none; }
            
            .yui-widget #fbOverlay {
                display: block;
                background: rgba(0, 0, 0, 0.5);
                border-radius: 6px;
                -moz-border-radius: 6px;
                -webkit-border-radius: 6px;
                padding: 10px;
            }
            #fbOverlay .yui-widget-hd {
                border: #3B5998 1px solid;
                background: #6D84B4;
                color: #fff;
                padding: 0 10px;
                cursor: move;
            }
            #fbOverlay .yui-widget-bd {
                background: #fff;
                border: #555 1px solid;
                border-top: none;
                border-bottom : none;
                padding: 0 10px;
            }
            #fbOverlay .yui-widget-ft {
                border: #555 1px solid;
                border-top: none;
                background: #f2f2f2;
            }
            #fbOverlay .yui-widget-ft > div {
                border-top: #ccc 1px solid;
                padding: 5px 10px;
                text-align: right;
            }
            
        </style>
        
    </head>
    
    
    <body class="yui-skin-sam">
        
        <div id="canvas">
            
            <h1>Facebook Overlay Example</h1>
            
            <p>
                This example of a Facebook-style overlay is created with YUI 3 and CSS 3.
                The overlay is also draggable; grab it by the heading.
            </p>
            <p><button id="show-fbOverlay">show overlay</button></p>
            
            <div id="fbOverlay">
                
                <div class="yui-widget-hd">
                    <h3>Facebook Overlay Example</h3>
                </div>
                
                <div class="yui-widget-bd">
                    <p>the body</p>
                </div>
                
                <div class="yui-widget-ft">
                    <div>
                        <button id="hide-fbOverlay">close</button>
                    </div>
                </div>
                
            </div>
            
        </div>
        
        <script src="http://yui.yahooapis.com/3.0.0b1/build/yui/yui-min.js" type="text/javascript"></script>
        <script type="text/javascript">
            
            YUI().use('overlay', 'dd-constrain', function(Y){
                
                var fbOverlay = new Y.Overlay({
                    
                    contentBox : '#fbOverlay',
                    width : '540px',
                    height : '300px',
                    visible : false
                                        
                }).render();
                
                // make overlay draggable
                new Y.DD.Drag({
                    
                    node : fbOverlay.get('boundingBox'),
                    handles : ['.yui-widget-hd']
                    
                }).plug(Y.Plugin.DDConstrained, { constrain2view : true });
                
                // show overlay
                Y.get('#show-fbOverlay').on('click', function(e){
                    if ( ! fbOverlay.get('visible') ) {
                        fbOverlay.align(this, [Y.WidgetPositionExt.TL, Y.WidgetPositionExt.TR]);
                        fbOverlay.show();
                    }
                });
                
                // hide overlay
                Y.get('#hide-fbOverlay').on('click', function(e){
                    fbOverlay.hide();
                });
                
            });
            
        </script>
        
    </body>
</html>

Post Reply

Return to “Web programming”