Module11: Creating A External Style Sheet and Creating A Gallery

342
-1

Published on

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
342
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Module11: Creating A External Style Sheet and Creating A Gallery

  1. 1. Module 11:Setting Up An External Style Sheet With A Gallery Step 1:Using Google Images select 5 pictures which are the same size preferably less than 400pixels on either side. Step 2:Place these Images in a folder. 3.Start a new web page that includes the following code and include it in the folder. Save it as a HTML file named practice.html. <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1­transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http­equiv="Content­Type" content="text/html; charset=utf­8" /> <title>Practice</title> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <p>Test Font</p> <hr> <div id="redbox"> </div> </body> </html> 4.Using a notepad enter the following code. Save this page as mystyle.txt in the same folder. body{width:1000px; height:900px; background-color:#efefef;} p {font-family: georgia, serif; font-size:24px;} hr {color: #000000; height: 20px } #redbox{ width:300px;
  2. 2. height:300px; background-color:green; } Step 5: Size your divs and page to accept the sizes of the images in your gallery. Make space for a galllery in terms of width and height. Step 6 :Add the following HTML code to the div you want the photo ton show.Repeat the red text for each photo. Make sure your names are correct and the image is saved in your web folder. HTML : <ul class="hoverbox"> <li> <a href="1.jpg"><img src="1.jpg" alt="text" /> <img src="1.jpg" alt="text" class="preview" /></a> </li> Step 7: Add the following CSS to your external style sheet. You only need to add it once. CSS : .hoverbox { cursor: default;
  3. 3. list-style: none; } .hoverbox a { cursor: default; } .hoverbox a .preview { display: none; } .hoverbox a:hover .preview { display: block; position: absolute; top: -33px; left: -45px; z-index: 1; } .hoverbox img
  4. 4. { background: #fff; border-color: #aaa #ccc #ddd #bbb; border-style: solid; border-width: 1px; color: inherit; padding: 2px; vertical-align: top; width: 175px; } .hoverbox li { background: #eee; border-color: #ddd #bbb #aaa #ccc; border-style: solid; border-width: 1px; color: inherit; display: inline; float: left; margin: 3px; padding: 5px; position: relative;
  5. 5. } .hoverbox .preview { border-color: #000; width: 300px; } .hoverbox a { position: relative; } .hoverbox a:hover { display: block; font-size: 100%; z-index: 1; } .hoverbox a:hover .preview {
  6. 6. top: -38px; left: -50px; } .hoverbox li { position: static; }

×