I want the btn next to the string. I can't figure it out even using CSS inline
<span class="subscribe_button"> <h3>Books</h3> <%= render 'follow_form' %></span>
CSS:
.subscribe_button {
display: inline;
}
You have some invalid HTML here.
A block level element cannot be within an inline one, this is basic HTML knowledge.
What I suggest you do is wrap both elements in a div and use float: left;
<div class="wrap">
<h3>Books</h3>
<span class="subscribe_button"> unsubscribe</span>
</div>
CSS:
.wrap
{
width: 300px;
}
.wrap h3,
.wrap span
{
float: left;
}
.wrap span
{
margin-left: 10px/*your value*/;
}
I also suggest you go read up on HTML rules, what is allowed where and why they are or are not allowed.
http://jsfiddle.net/Kyle_Sevenoaks/zJUZs/
The Books part is (also) a block (due to <h1>), so you need to set it to inline as well (as shown in the comment of limelights), otherwise your button will still be pushed to the next line.
Try adding this to your CSS
.subscribe_button h3 {
float: left;
}
If you float an element it means other elements after it will wrap onto the same line as it (as long as theyre width does not make them too wide).
Span is inline element and h3 is block element. Inline elements should be inside block elements. Have you tried to validate your html code? http://validator.w3.org/
try:
display: inline-block;
Try following code
.subscribe_button h3{
display: inline;
}
use float:left for both h3 and button
I think you can do this with this code:
.subscribe_button > * {
display: inline;
}
'>' is a child selector and * matches to all element.
Yo can read more about CSS2 selectors: CSS2 Selectors
Related
So I'm trying to create a multiplication equation in the form of 5 × 5 but since h2 tags are block-level elements, they start a new line. I tried to use display: inline and display:inline-block with margins (margin-left and margin: auto), using h2 and .equation as selectors, but it didn't do anything. Using text-align also didn't do anything. There's no float center option, so that doesn't work either. A little help?
<div class="equation">
<h2 id="num1" class="num1multiply"></h2>
<h2 id="msign">×</h2>
<h2 id="num2" class="num2multiply"></h2>
</div>
CSS:
h2 {
display: inline;
}
If you want to inline all the elements then flex-box is the best choice.
You can do so by adding it to your stylesheet.
.equation {
display: flex;
align-items: center;
justify-content: center;
}
If you don't want to use flexbox. Then display: inline-block with a float will help. The example will be.
h2 {
display: inline-block;
float: left;
}
Note: This is for example purposes only. Don't try to apply styles directly on the h2 tag, the style will be applied to all h2 elements of the page
Use it like this if you want it to apply on h2 tags within the .equation
.equation h2 {
display: inline-block;
float: left;
}
Instead of h2 use label or span and set font accordingly
Ok, first off I want you all to know that I have tried using the <span></span> tag (though maybe incorrectly).
Is there something I'm doing wrong with the <span></span> tag? Or is there something I need to do differently altogether?
Here is my current code to create a space without <br></br>:
#beforeImage span {
padding: 40px;
}
<span id="beforeImage">text</span>
2 things to fix:
you were applying the CSS to span of an ID selector, but you were using a span with an ID selector in your HTML.
span won't have padding because it is an inline element by default, so set inline-block or block
Snippet
#beforeImage {
padding: 40px;
display: inline-block; /* or block */
/* demo */
background: red
}
<span id="beforeImage">Foo bar</span>
<span> is by default an inline element and will not be sized nor accept vertical padding without resetting its display to inline-block ( or else but inline).
You might look for:
span{
display:inline-block;
padding: 40px;
}
beside, br could still be used
br {
line-height:3em;
vertical-align:top;/* debug FF/IE */
}
http://codepen.io/anon/pen/GoVdYY
But, do you really need an extra tag, could you not apply a bottom margin or padding to another element ?
Can simply target the Id of the span:
#beforeImage{
display:inline-block;
padding: 40px;
}
Or all spans:
span{
display:inline-block;
padding: 40px;
}
I have applied background-color: #C0C0C0; to my span element .grey_bg but the background is not changing color. Why is that?
.grey_bg {
width: 100%;
background-color: #C0C0C0;
}
<span class="grey_bg">
<h1>Hey</h1>
</span>
Because it's not really valid HTML to put block-level H1 element inside span (inline element). You can either use div instead of span
.grey_bg {
width: 100%;
background-color: #C0C0C0;
}
<div class="grey_bg">
<h1>Hey</h1>
</div>
... or make span block-level too:
span {display: block;}
.grey_bg {
width: 100%;
background-color: #C0C0C0;
}
<span class="grey_bg">
<h1>Hey</h1>
</span>
First your markup is not correct. You can't have a block element, h3, inside an inline element, span.
But in case you want to keep that markup, you have to make the container element to behave as block. So make it as:
.grey_bg {
width: 100%;
background-color: #C0C0C0;
display:block;
}
Your code is incorrect because your span is wrapping your H tag.
You should not use span to wrap inline element's like H tag's. Instead you want the span to be inside your H tag.
The span element is the inline level generic container. It also helps to inform the structure of document, but it is used to group or wrap other inline elements and/or text, rather than block level elements.
The line between the two different types might seem fairly arbitrary at first. The difference to bear in mind is the type of content, and how it would appear when written down without any styling. A div is placed around a group of block level elements—for example, to wrap a heading plus a list of links to make a navigation menu. A span wraps a group of inline elements or (most usually) plain text. The key word is “group”: if a div wraps just one block-level element, or a span just one inline element, it's being used unnecessarily. For example, check out the way the div and span elements are used in the following simple markup:
W3C
.grey_bg {
width: 100%;
background-color: #C0C0C0;
}
<h1><span class="grey_bg">Hey</span></h1>
I figured out that I had to target the h1 as well in the css:
.grey_bg h1 {
background: #C0C0C0;
}
All I want to do is put a header that has the page title and has a link to sign in that's inline with the title. This seems very simple but nothing I do is working. Here is what my code looks like:
HTML
<h1>Title</h1>Sign in
CSS
.signIn {
float: right;
display: inline;
}
The float: right works but it isn't inline with the title like I want it to be. Thanks.
Replace h1 with the a in the markup
Sign in<h1>Title</h1>
when leaving CSS as it is.
Just place the a with the .sign-in class before the h1, as for tags with float:right; or classes with float:right; declarations should be declared first.
Here is the WORKING SOLUTION
The HTML Change
Sign in<h1>Title</h1>
tr y giving float:left; to h1 tag
I think this is what you need
h1{display: inline;}
.signIn {
display: block;
float: right;
}
Here is the simple html
<p> some text here </p>
more
and the css I tried
p+a{
color: #f00;
display: inline-block;
/* also tried float: left; */
}
To bring up the output as this
some text here more
I want more in the line of p.
p is a block level element. So you couldn't inline to a. Therefore you need to style your p as display: inline; or display: inline-block; and then give display: inline; or display: inline-block; to a
here is the fiddle.
You need to give the paragraph display: inline-block; as well, because it is a block-level element. Therefor it automatically takes the available space and pushes the anchor to a new line. Also you'll need to add the closing " to your href-attribute.
(If you're able to manipulate the markup of the paragraph – just add the anchor inside of it.)
HMTL:
<p>some text here</p>
more
CSS:
p {
display: inline-block;
}
p + a {
color: #f00;
display: inline-block;
}
Note: Please use classes to style things like that instead of elements. Add a class to your anchor and select it with p + .read-more or something like that.
just add the below css to your stylesheet.
p{ dislpay:inline-block;}
P is a block level element make it inline-block so next inline element come up next to p tag.
use this code
CSS:
p > a {
color: #f00;
display: inline-block;
font-size: 18px;
}
HTML:
<p>some text here more</p>