En créant un site Web pour un projet de conception de logiciels, l'un des critères est que rien ne se chevauche. J'ai une fonction de vol stationnaire de sorte que lorsque vous passez la souris sur les étapes, le processus de l'étape est affiché.Comment rendre un objet solide afin qu'il ne soit pas chevauché par les éléments de survol? (CSS & HTML)
Avec l'étape 2 & 3 le texte affiché pendant l'effet de survol est bloqué par le bord de la page Web afin qu'il crée de nouvelles lignes sous la forme d'un paragraphe.
Capture d'écran de la page Web avec effet de vol stationnaire à l'étape 2: http://s32.postimg.org/kw0u3lk8l/Screen_Shot_2016_05_14_at_7_05_13_PM.png
Voici ce que je veux faire à l'étape 7 & 8 comme au lieu d'être bloqué par tout ce qu'ils continuent comme une chaîne, qui se chevauchent le cercle. Donc je me demandais s'il y avait une façon de faire du cercle un objet solide ou quelque chose qui ne peut pas se chevaucher, forçant le texte à faire de nouvelles lignes.
image du chevauchement à l'étape 8 effet de vol stationnaire ci-dessous: http://s32.postimg.org/yof8z8b05/Screen_Shot_2016_05_14_at_7_05_25_PM.png
Voici mon 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>
Trouvé la solution à mon problème. Il est décrit ci-dessous. – ASA2k