Ask a Question

button macro

0 votes
by (880 points)

i cant get the button to work again, im using what was posted. here is the code from the story stylesheet.


<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.macro-button {
    background-color: royal_blue; 
    border: none;
    color: white;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
	border-radius: 8px;
}
.macro-button:hover {
    background-color: #f1f1f1;
}
.button:hover {
    background-color: #f1f1f1;
}
</style>
</head>

<head>
<style>
#overflowTest {
    background: #4CAF50;
    color: white;
    padding: 10px;
    width: 900px;
    height: 650px;	
    overflow: auto;
    border: 1px solid #ccc;
}
</style>
</head>

1 Answer

0 votes
by (159k points)
selected by
 
Best answer

1. You should only be placing CSS withing the Story Stylesheet area, HTML elements like head, meta and style do not belong in there.

2. royal_blue is not one of the offical HTML colour names, I think you meant either RoyalBlue or royalblue.

eg. Only the following sections of your example belong in the Story Stylesheet area.

.macro-button {
    background-color: royalblue; 
    border: none;
    color: white;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
	border-radius: 8px;
}
.macro-button:hover {
    background-color: #f1f1f1;
}
.button:hover {
    background-color: #f1f1f1;
}

#overflowTest {
    background: #4CAF50;
    color: white;
    padding: 10px;
    width: 900px;
    height: 650px;	
    overflow: auto;
    border: 1px solid #ccc;
}

 

by (880 points)
edited by
Oh, this will save my fingers from having to write that extra stuff.Thanks. Also what would i use to have one line of space between paragraphs, the spacing between paragraphs are huge.
by (44.7k points)
If you right-click on an element and choose to "Inspect" it, it will open up a window where you can see the CSS for the various elements on the page.

Play around with the CSS until it looks how you want, and then add the same changes you made in the CSS to your stylesheet.

At least, that's how I usually do it.  ;-)
by (159k points)

Without an example of what you consider "paragraphs" within your Passage it is difficult to know exactly what is causing you to not have "one line of space between paragraphs".

If the contents of your Passage looks something like the following example, which consists of two "paragraphs" of continuious text seperated by a two line-breaks:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

..then there are at least two things that are controlling the size of empty line/space between the two "paragraphs".

1. The number of line-breaks used to seperate them.

By default each line-break found within the content of a passage is converted into a HTML br element.

2. The CSS line-height property value of the br elements.

However, If on the other hand you are using actual HTML p (paragraph) elements like those in the following example to contain the  "paragraphs" within your Passage.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

... then as well as the two above mentioned causes there is at least a third.

3. The top and bottom CSS margin properties of each of the HTML p elements.

And as explained by HiEv you can use the Web Developer Tools built into modern web-browsers to Inspect both the HTL elements that make up the current page as well as the CSS being used to style those elements.

Snow Theme by Q2A Market
Powered by Question2Answer
...