Zaznaczę na początku, dopiero zaczynam. Mam problem. Chciałbym stworzyć menu swojej pierwszej strony na podstawie 5 okręgów w których znajdzą się odpowiednie teksty, całość będzie pełnić funkcję linku. Lecz nie mam pomysłu jak zrobić by tekst był w okręgu a nie pod. Poniżej załączam dwa kody z css i html. Z góry dziękuję za pomoc i wyrozumiałość.
<html lang="pl">
<head>
<title>Moja strona</title>
<meta name="keywords" content=""/>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href='https://fonts.googleapis.com/css?family=Raleway&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container">
<div id="one">
<svg width="200px" height="200px">
<circle cx="100" cy="100" r="100" fill="#006666" />
</svg>
</div>
<div id="two">
<svg width="200px" height="200px">
<circle cx="100" cy="100" r="100" fill="#006666" />
</svg>
</div>
<div id="three">
<svg width="200px" height="200px">
<circle cx="100" cy="100" r="100" fill="#006666" />
</svg>
</div>
<div id="four">
<svg width="200px" height="200px">
<circle cx="100" cy="100" r="100" fill="#006666" />
</svg>
</div>
<div id="five">
<svg width="200px" height="200px">
<circle cx="100" cy="100" r="100" fill="#006666" />
</svg>
</div>
</div>
</body>
</html>
.....................................................................................................................................................................
body
{
background-color: #99CCCC;
font-family: 'Raleway', sans-serif;
font-weight: 400;
}
#one
{
margin-top: 70px;
margin-left: 382.5px;
margin-right: 200px ;
float: left;
height: 200px;
width: 200px;
background-color: #99CCCC;
}
#two
{
margin-top: 70px;
float: left;
height: 200px;
width: 200px;
background-color: #99CCCC;
}
#three
{
margin-top: 60px;
margin-left: 182.5px;
float: left;
clear: both;
height: 200px;
width: 200px;
background-color: #99CCCC;
}
#four
{
margin-top: 60px;
margin-left: 200px;
float: left;
height: 200px;
width: 200px;
background-color: #99CCCC;
}
#five
{
margin-top: 60px;
margin-left: 200px;
float: left;
height: 200px;
width: 200px;
background-color: #99CCCC;
}