Im creating a website for a Software Design project and one of the criteria is that nothing is allowed to overlap. I have a hover feature so that when you hover over the steps, the process of the step is shown.
With step 2 & 3 the text displayed during the hover effect is blocked by the edge of the webpage so it makes new lines in a kind of paragraph form.
Screenshot of Webpage with hover effect on step 2: http://s32.postimg.org/kw0u3lk8l/Screen_Shot_2016_05_14_at_7_05_13_PM.png
This is what I want to do with step 7 & 8 as instead of being blocked by anything they continue as a string, overlapping the circle. So i was wondering if there was a way of making the circle a solid object or something that cannot be overlapped, forcing the text to make new lines.
Image of the overlap on step 8 hover effect below: http://s32.postimg.org/yof8z8b05/Screen_Shot_2016_05_14_at_7_05_25_PM.png
Here is my Code:
<!DOCTYPE html>
<html>
<head>
<title>Fetch Execute Cycle</title>
<style type="text/css">
html {
box-sizing: border-box;
background-color: #faa635;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font: 16px/1.5 "Comic Sans MS", cursive, sans-serif;
margin: 1em;
}
h1 {
font-family: American Captain, "Comic Sans MS", cursive;
}
.circle {
width:450px;
height:450px;
border-radius:50%;
border: solid;
color:#3658bf;
line-height:500px;
background:#000;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* COMMON HOVER EFFECTS */
.common {
display: block;
font-weight: 700;
text-align: center;
border: 2px solid #3658bf;
color: #3658bf;
background: transparent;
border-radius: .25rem;
cursor: pointer;
padding: .5rem;
position: absolute;
transform: translate(-50%, -50%);
}
.common:hover {
background: rgba(54, 88, 191, 0.888);
color: #fff;
}
.common:focus {
outline: 0;
}
.common:hover {
font-size: 0;
}
.common:hover:after {
content: attr(data-hover);
font-size: 1rem;
word-wrap: break-word;
}
/* HELP */
.help {
left: 50%;
top: 13%;
}
/* STEP 1 */
.step1 {
left: 70%;
top: 20%;
}
/* STEP 2 */
.step2 {
left: 80%;
top: 40%;
}
/* STEP 3 */
.step3 {
left: 80%;
top: 65%;
}
/* STEP 4 */
.step4 {
left: 70%;
top: 82%;
}
/* STEP 5 */
.step5 {
left: 50%;
top: 90%;
}
/* STEP 6 */
.step6 {
left: 30%;
top: 82%;
}
/* STEP 7 */
.step7 {
left: 20%;
top: 65%;
}
/* STEP 8 */
.step8 {
left: 20%;
top: 40%;
}
/* STEP 9 */
.step9 {
left: 30%;
top: 20%;
}
</style>
</head>
<body>
<h1><center><u>[]'s example of the Fetch Execute Cycle</u> </center></h1>
<div class="circle"><img class ="centered" src="http://i64.tinypic.com/4tsk5i.png" onMouseOver="this.src='https://i.imgsafe.org/67289f5.png'" onMouseOut="this.src='http://i64.tinypic.com/4tsk5i.png'" border="0" alt="Fetch Execute Cycle Image" width="300"></div>
<!-- Help -->
<a class="common help" data-hover="Hover over steps for information">Help</a>
<!-- Step 1 -->
<a class="common step1" data-hover="Fetching the instruction from primary storage!">Step 1</a>
<!-- Step 2 -->
<a class="common step2" data-hover="Decoding the instruction into an operation code and data addresses!">Step 2</a>
<!-- Step 3 -->
<a class="common step3" data-hover="Copying the operation code into the instruction register!">Step 3</a>
<!-- Step 4 -->
<a class="common step4" data-hover="Copying the addresses of the data into the address register!">Step 4</a>
<!-- Step 5 -->
<a class="common step5" data-hover="Using the address register to copy the data into the storage register!">Step 5</a>
<!-- Step 6 -->
<a class="common step6" data-hover="Sending the operation code and data to the ALU!">Step 6</a>
<!-- Step 7 -->
<a class="common step7" data-hover="Executing the instruction on the data!">Step 7</a>
<!-- Step 8 -->
<a class="common step8" data-hover="Sending the result to the accumulator, ready for the next instruction!">Step 8</a>
<!-- Step 9 -->
<a class="common step9" data-hover="Storing the results in primary storage!">Step 9</a>
</body>
To fix this issue a width must be specified, then you can word-wrap. So add the lines into css for .common:
width:250px;
word-wrap: break-word;