Software and Programming Whiz

Tuesday, November 29, 2011

Making A Drop In Box With CSS

Creating a content box on your website can be quite easy using cascading style sheets or CSS. Here is a quick guide on how to create a custom CSS content box.

Click "Start," "All Programs" and click "Notepad" to open the text editor.

Click "File," "New" to open a new file. Copy and paste the following script:

div.dropinbox{
width:400px;
height:230px;
border:1px solid black;
padding:5px;
background:#e7e7e7;
}

Save the file as an "HTML" file and add it to your site.

Monday, November 7, 2011

How to Use CSS to Make Borders With Background Images

Open the HTML file you want to use to create the CSS borders and background images.

Type the following script into the <head> tag:

<script>
#borderimg {
border:#006600 medium solid;
background-image:URL(images/bgpattern.gif);
}
</script>

This will configure the borders. The "#006600" image value creates a green border. Use the image value of your choice.

Type the following script to create the background image:

<div id="borderimg">
<p>A block of data with a border and background image, paragraph one.</p>
<p> A block of data with a border and background image, paragraph two.</p>
</div>

Saturday, November 5, 2011

Creating a Drop-Down Menu Using a CSS Script

Adding a drop-down menu to your website can be an efficient use of space and give users several options through one link. Here is the CSS script to help you do that.

Click "Start" and click "Notepad" to open the text editor. Click "File," "New" to launch a new text.

Type the following CSS script to create the drop-down style:

#drop li.top {font-family: Verdana, Geneva, san-serif;
font-size: 100%;
color: #FF00FF;}

Type the following CSS script to create the menu options styles:

#drop ul .link{display:none;
font-family: Verdana, Geneva, san-serif;
font-size: 75%;
color: #0000FF;}

Type "#drop ul:hover .link{display:block;}" to show secondary items when a user hovers over a menu option and type "#drop{position:absolute;}" to place the drop-down menu at the top of the page.

Create the menu by typing the following script:

Click "File," "Save" to save your CSS drop-down menu script.

Writing Scripts in CSS

Cascading Style Sheets or CSS is a computer programming language used to refer to the layout of text and images on a Web page. It is a straightforward programming language that is simple to use.

Click "Start," and click "Notepad" to open the text editor. Click "File," "New."

Create the index page by typing the title and body using the following script: <html><head> <title>My Home Page</title></head><body></body></html>.

Replace "My Home Page" and "Body" with the title and body of the index page.

Create a title for the CSS page by typing the following script: <html><head> <title>My Home Page</title></head><body></body></html>. The title for the CSS page must end with a CSS suffix.

Place the link of the CSS page within the header of the index page. For example, it should look like this: <html><head> <title>My Home Page</title><link rel=”stylesheet” href=”mycsspage.css” type=”text/css” /></head><body></body></html>

Create a heading for the title page using the following script: <body><H1>This Is My Homepage</H1><br /><p>My name is Jane Smith</p></body>. Replace the text with text you want to use.

Place a background color on the page directly into the header for the title page, such as this script: Bgcolor=”#ff0000” So now the css page will look like this.<html><head> <title>My Css Page</title>{background:#ff0000;}</head></html>. This creates a red background.

View your Web page by clicking "File," "Open File."