My father always wanted a website with a seminar chart that consists of circles and lines connecting them as the main navigation to articles on his site. The site will have a header and footer and between, the seminar like chart(kinda like a flow chart but only cirlces). I am not a programmer by would like to do this for my dad. Did some research and found two options. Use images as the circles or use CSS3. Can anyone point me in the right direction. Heres my attempt by hand.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Circles</title>
<link rel="stylesheet" href="circle.css">
</head>
<body>
<div id="wrapper">
<div id="header"><h1>Header</h1></div>
<div id="content">
<div class="c1"><a href="http://www.google.com" class="with-style">Hello</a></div>
<div class="c1"><a href="http://www.google.com" class="with-style">Hello</a></div>
</div>
<div id="footer">My Footer</div>
</div>
</body>
My CSS:
#wrapper {
background-color: black;
position: relative;
width: 600px;
height: 600px;
margin: 0 auto;
}
#header {
height: 8.3%;
width: 100%;
background-color: gray;
text-align: center;
}
#content {
color: green;
}
a.with-style {
display: block;
width:100px;
height:100px;
border-radius:50px;
font-size:20px;
line-height:100px;
text-align:center;
text-decoration: none;
text-shadow: 0 1px 0 #f15;
color: white;
background: blue;
}
a.with-style:hover {
border: 4px double #bbb;
color: #aaa;
text-decoration: none;
background: #e6e6e6;
}
div.c1 { display: inline; }
#footer {
background-color: grey;
text-align: center;
position: absolute;
bottom: 0px;
height: 8.3%;
width: 100%;
}
