Copyright Derek O'Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.
<!doctype html>
<html>
<head>
<title>Course notes example code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div
{
width:100px;
height:50px;
margin-top:10px; /* leave a gap between each div */
padding:10px; /* put padding around the text inside the div */
}
#equal
{
border:red thin solid;
border-radius:25px;
}
#top
{
border:green thin solid;
border-top-left-radius:25px;
border-top-right-radius:25px;
}
#right
{
border:blue thin solid;
border-top-right-radius:25px;
border-bottom-right-radius:25px;
}
#diagonal
{
border:black thin solid;
border-top-right-radius:25px;
border-bottom-left-radius:25px;
}
</style>
</head>
<body>
<div id = "equal">
Equal
</div>
<div id = "top">
Top
</div>
<div id = "right">
Right
</div>
<div id = "diagonal">
Diagonal
</div>
</body>
</html>
List various HTMLelements that you might usefully apply rounded corners to.
By making the rounded corners large enough, we can make a circle. Write code to place an image inside a circle, as shown in this link.
Make three circles of diameter 100px, 200px and 300px, as shown in this link. Make sure to use CSS id and class, so that you do not repeat any CSS code.
The total size of the width of an element includes its width, padding and margin. Adjusting the margin, while keeping the overall size of the width the same, can be used to increase an image's size when the mouse hovers over it. Write code to increase the size of an image by adjusting the margin, as shown in this link.
By adjusting the padding rather than the margin, we can adjust the size of the image inside a 'div'. This gives the effect of the image being zoomed. Write code to zoom an image when the mouse hovers over it, as shown in this link.
Example of a DropDown Menu with Rounded Corners (Run Example)
<!doctype html>
<html>
<head>
<title>Course notes example code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.menu a
{
text-decoration:none;
}
.menu ul li span, /* span is used to identify drop-down title */
.menu a
{
display:block; /* Expand hyperlink to fill container*/
background-color:#61c6f0;
color:#ccc;
}
.menu ul li:hover span,
.menu a:hover,
.menu a:active
{
background-color:#ddd;
color:#0ac;
}
.menu ul
{
list-style:none; /* Remove the bullet from list items */
padding:0px; /* Remove default padding from list items */
margin:0px;
}
.menu li
{
width:110px; /* width for each list item. Not absolutely necessary for horizontal menus. */
text-align:center; /* Not needed for either menu. */
}
.menu.horizontal li
{
display:inline-block; /* Force list items onto same line. */
float:left; /* Force list items tight together. */
}
.menu.vertical li
{
display:block; /* Force list items onto seperate lines. */
}
/* Additional code to have drop-down menus. */
.menu ul li:hover ul
{
visibility:visible;
}
.menu ul li
{
position:relative; /* Needed for drop-down menus. */
}
.menu ul li ul
{
visibility:hidden;
position:absolute; /* Needed for drop-down menus. */
z-index:10;
}
.menu.vertical ul li ul
{
left:110px; /* Position vertical drop-down menus */
top:0px;
}
/* End of additional code for drop-down menus. */
/* Additional code to style menus. */
/* top level horizontal menu list items. */
.menu.horizontal ul li a,
.menu.horizontal ul li span
{
border-radius:10px 10px 0px 0px;
}
/* top level vertical menu list items. */
.menu.vertical ul li a,
.menu.vertical ul li span
{
border-radius:25px 8px 25px 8px;
margin-bottom:8px;
}
/* drop-down level horizontal menu list items. */
.menu.horizontal ul li ul li a
{
border-radius:0px;
border-left:thin #aaa solid;
border-right:thin #aaa solid;
border-bottom:thin #aaa solid;
}
/* drop-down level vertical menu list items. */
.menu.vertical ul li ul li a
{
margin-bottom:1px;
border-radius:10px 10px 10px 10px;
border:thin #aaa solid;
}
/* End of additional code to style menus. */
</style>
</head>
<body>
<div class="horizontal menu">
<ul>
<li><a href="home/home.html">Home</a></li>
<li><span>Drop Down</span>
<ul>
<li><a href="home/home.html">one</a></li>
<li><a href="home/home.html">two</a></li>
<li><a href="home/home.html">three</a></li>
<li><a href="home/home.html">four</a></li>
</ul>
</li>
<li><a href="about_us/about_us.html">About Us</a></li>
</ul>
</div>
<br>
<br>
<div class="vertical menu">
<ul>
<li><a href="home/home.html">Home</a></li>
<li><span>Drop Down</span>
<ul>
<li><a href="home/home.html">one</a></li>
<li><a href="home/home.html">two</a></li>
<li><a href="home/home.html">three</a></li>
<li><a href="home/home.html">four</a></li>
</ul>
</li>
<li><a href="about_us/about_us.html">About Us</a></li>
</ul>
</div>
</body>
</html>Use the horizontal menu above to create a website that contains the following four webpages on the Irish rugby team website... Home, Team, History & Fixtures. You should use appropriate colours and graphics in your website.
Use a vertical menu with rounded edges to create a website that contains the following three images on the Dublin Zoo website... Home, Tiger, Elephant. You should use appropriate colours and graphics in your website.
Copyright Derek O' Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.