Module 11:Setting Up An External Style Sheet With A Gallery
Step 1:Using Google Images select 5 pictures which are the sam...
height:300px;
background-color:green;
}
Step 5: Size your divs and page to accept the sizes of the images in your
gallery....
list-style: none;
}
.hoverbox a
{
cursor: default;
}
.hoverbox a .preview
{
display: none;
}
.hoverbox a:hover .preview
{
...
{
background: #fff;
border-color: #aaa #ccc #ddd #bbb;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2p...
}
.hoverbox .preview
{
border-color: #000;
width: 300px;
}
.hoverbox a
{
position: relative;
}
.hoverbox a:hover
{
display...
top: -38px;
left: -50px;
}
.hoverbox li
{
position: static;
}
Upcoming SlideShare
Loading in …5
×

Module11: Creating A External Style Sheet and Creating A Gallery

421 views
372 views

Published on

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
421
On SlideShare
0
From Embeds
0
Number of Embeds
39
Actions
Shares
0
Downloads
2
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; }

×