What would be the proper way to do this? I have an <h1> tag, and I want to display a <a> that is inline with it.
display: inline
should do the trick. It will make the <h1> behave like any inline element.
By default the h1 tag has a display:block; Thus changing it to display:inline you will lose the normal feel of an h1. But your link will directly follow it.
Also why not just place the link within the h1 tag? ie:
<h1>Hello World</h1>
Or you could float it to the left (or right):
float: left;
However, this can cause other problems sometimes.
Also, margin-top: - height-of-h1 on a could do the trick - you have like 1000 options (almost literally), we can't tell you more until we see some sample code.
Or you could use a tag:
<h1>Important title <span style="float:right">Link</span></h1>
Related
I was wondering if there is any way for my links not to get underlined/change color when I hover them.
Well <a> tag is used for links. But if you want to have link in a text without the decorations in it i recommend you to use CSS. Add this to your <head> tag.
<style type="text/css">
a.class{
text-decoration:none;
color:#000000;//Your default color
}
</style>
Else try to clarify what you want to do.
Not sure exactly what your issue is, but you can definitely find ways around highlighted text if that's the critical issue here. What I might try, is wrap this code in a <div> tag and give the class to the <div>. It may looks something like this:
<div class="yourClass" id="yourID">
Highlighted Link Text
</div>
And use CSS to deal with the text-decoration.
You should only use the <a> tag if you're looking to link. Otherwise, use something like the <p> (paragraph) tag.
In HTML, how do I prevent this "linebreak" when using the <div> tag?
Example:
<div class="menu"><br><br>menu</div>
<div class="apple"><br><br>apple</div>
Visual example:
How do I make it so that apple appears directly to the right of menu? I can't seem to do that successfully; apple always appears to be below menu
NOTE: Pretend that 'apple' is inside its own invincible maroon box.
When using <span> instead of <div>, you need to get rid of the line breaks (<br>).
If using inline CSS (which is the style attribute), you may want to add style = "float:left;" to the first div only. This way:
<div class="menu" style="float:left;"><br><br>menu</div>
<div class="apple"><br><br>apple</div>
It sounds like you have two block elements that you would like to display side by side?
Have you tried using the "display: inline-block;" property in your css yet?
You can change your CSS to include the following;
div.menu, div.apple {
float:left;
display:inline-block;
}
You might also need to set the width of each to less than 50%.
<div class="menu"><br><br>menu<span class="youtube"><br><br>youtube</div>
i have the following markup
<a class="block"><span class="inline">hello</span>world</a>
the <a> has a display:block ... if i give the span.inline a margin-top:3px it also pushes down the text after it. here is a jsfiddle to see this behaviour
http://jsfiddle.net/YLMeh/
could anybody give me a hint why this is happening?
All inline elements on a row share the same line-height. If you think about it it makes sense. What would happen when you have multiple lines of text otherwise? It would be completely unreadable.
In these situation the vertical-align attribute is what you have to work with. Read up on that and you should be fine.
margin-top: 3px; applied to your <span class="inline"> pushes the baseline down for the whole text.
understanding the vertical-align css property may help: https://developer.mozilla.org/en-US/docs/CSS/vertical-align
Stupid question maybe, but I cannot seem to get the text to wrap around my images. In the editor it looks fine, everything is wrapped around it, but when I save it, there is no wrapping.
example: http://www.beatinganger.com/three-reasons-for-angry-children
remove the float: left; from #left_container p
there's no need to float all the paragraphs you already have the image floating inside the content so it's the only one that needs to float for the p or any other element to wrap around it
It sounds like you may need to add styles to the images, either float left or float right - can't say for sure as the link is broken.
Edit: It is because you have width:100% and float:left set on #left_container p, and the images you are adding are wrapped in p tags. Remove width:100% and float:left and you should be back in business.
as clairesuzy says aswell...
Put a float on the <img> tag. But I suggest to avoid writing css in the tag though, it's not good practice unless you really have to. Do it externally. You can target the image by doing, p img{ float: left; } (basic code), depending on the class or id you've giving the tags.
I'm trying to place normal size text on the same line as a header tag. Doing this put the normal size text on the next line because a header tag is a block element.
<h1>Header</h1>normal size text
Any help is much appreciated.
h1{display:inline;}
Will cause the H1 Tag to stop blocking
Or, if you don't want to use inline elements, float the h1 instead:
h1 {
float:left;
}
In some scenarios may need to wrap both the h1 and normal size text in a div, that's also floated left, to keep it contained on the same line:
<div id="foo"><h1>Hello</h1>World</div>
alternatively, you might want to try
<h1>Header <span class="normal">normal size text</span></h1>
, and style the .normal span using css to look like normal text. not semantic, but visually works even in IE6.