I have an input box, and I want some nice light grey text right below it (1 line instruction).
As of now the text is sitting a lower than I want in relation to the textbox (which is above it).
I am doing a clear:both, and if I remove it the next is all the way to the right of the input box.
What is wrong here?
Your HTML tags (for the text input and for the paragraph of text below it) all have default margin and padding. Probably the issue can be resolved by reducing the margin-bottom attribute on the text input as well as the margin-top on the paragraph. Here's some example code.
CSS:
.text_input_style {margin-bottom:0;}
.help_text_style {margin-top:0;clear:both;}
HTML:
<input type="text" value="default value" name="text_input" class="text_input_style" />
<p class="help_text_style">Help text here.</p>
Obviously, you don't have to use classes (you could just attach to the HTML element and/or IDs), but this is the idea.
Bottom line: adjust margin-bottom on the input and margin-top on the help text.
Well it all depends on what HTML tags your placing the text within.
Each element has a default behaviour.
A DIV element will display as a block. As such it will display on the following line in the natural flow of the HTML in the page. It will also cause all the HTML that comes after it to be displayed below it.
A SPAN element will not be displayed as a block. In fact it provides no visual change by itself with no CSS applied to it. A SPAN element is simply displayed inline and everything just flows around it like normal.
You can use CSS styles to modify the layout behaviour of HTML elements.
For example, you can specify that a DIV element be displayed left or right of the HTML content by using float:left or float:right. You could then use the CSS clear:both to specify that an element should be displayed below all floating content.
So, in your case, if you remove the clear:both style, then the element will no longer be displayed below floating elements and this will cause your elements to be rearranged.
-Frinny
You can make it higher by applying this:
.class { position: relative; top: -5px; }
or you can reduce the line height:
.class { line-height: 10px; }
You have to have the clear: both in order to make it go to the next line, but because it is a new line, the line-height property applies. Reducing the line height should make it higher, and if it isn't close enough, try positioning it relatively.
You probably have padding on the "instruction". Relevant html and css maybe?
Related
In this page:
http://getbootstrap.com/components/#input-groups-buttons
If you change the Go! button to a label (with the Chrome inspector) you'll notice that the Go! button is not longer on top of the input field:
(Instead of the borders to be one on top of the other they are side by side.)
Why is this and how to make the two elements to be one on top of another?
Bootstrap applies max-width:100% to a label. That shrinks its border box (box-sizing:border-box is applied throughout) such that that fits inside its containing block (its parent span element), whose width is reduced by one pixel because that is determined by the fact that it must contain the margin box of the Go! button/label which has margin-right:-1px applied. The span is the button/label's containing block because its input-group-btn class makes it display:table-cell
So to get the same effect with a label, just set label { max-width:none; } In practice, you will probably want a more specific selector.
Putting a label on top of an input isn't the best idea, it would be better to split them up and have them float next to each other. This question answered here may help. This could also be adjusted using the z-index in the style portion of each div. As to answer you title in why this happens, i'm not entirely sure...
I'm very new to html and I was wondering if there is anything I can use other than a div element. The code that I want to use displays a hover. For example: <div id="cartpopup">.
Well this makes it so whatever I put in between these tags gets lowered. Everything is working fine I just don't want my image to be lowered because of div. Help would be appreciated.
To prevent line wrapping, try using a span element, which is inline.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
You could also set a div to display inline or inline-block (which allows CSS sizing, for example) using CSS:
#cartpopup {display: inline-block;}
I came across an interesting HTML button tag behavior while trying to style a button that has no text inside, only a font icon -- the button without text causes all subsequent buttons which do have text to be pushed down. The issue only appears when the buttons have a height attribute specified.
JSFiddle
<header>
<button><!-- No text here --></button>
<button>This button is pushed down</button>
</header>
button { height: 40px; }
At first I was sure it was due to the font icon inside the first button that did some weird baseline magic, but as you can see from the minimal working example, the behavior is maintained when there is no content at all inside the button.
I can fix this by adding content to the first button, but because my only content is a <span class="icon user"></span>, which is a font icon, it does in fact interfere with the font baseline, and positions the button off just a few pixels. This is why I have decided to position the icon inside absolutely, which fixes the original slight positioning issue, but introduces this new one, as the button now acts as if it were empty.
So, the question remains -- how do I avoid positioning issues with empty buttons?
Note: it seems that the above only happens on webkit browsers; Firefox positions buttons with text correctly, but pushes the empty ones up.
It is because the button is an inline element, which is aligned to baseline by default.
From W3C :
Align the baseline of the box with the baseline of the parent box. If
the box does not have a baseline, align the bottom margin edge with
the parent's baseline.
Inorder to align them correctly, use vertical-align: top; (Or middle, bottom as a value)
button {
height: 40px;
margin-left: 5px;
vertical-align: top;
}
Demo
On the other hand you can also use zero width space entity - Demo
This behavior is common with inline and inline-block elements, if you want to avoid everything above, you can use float here, than you won't need the vertical-align property as float will force the button to be inline as well as block level
Demo (Using float: left;)
Note: If you are going with float, just make sure you clear them, if you aren't sure what clear means, than refer my answer
here which will explain in detail.
add text to the button and indent the text off the screen. This will solve your problem as well as helping with your SEO as robots indexing your site can register text but not the content of the image.
button{
width:;
height:;
display:block;
text-indent:-9999px;
}
I got a CSS question related to this fiddle: http://jsfiddle.net/r584e/
Here the relevant screenshot
Sometimes I've got to style an inline element in a such way, trying to almost avoid space between rows and applying a background only under the text. As you can see, the first paragraph has a link inside, in which I set line-height: 1em . The paragraph on the right has instead a line-height: 0.8em;. (Note: I know in this way I could roughly cut some letters - like q,g,p,... but the text is uppercase so it's not really a problem)
In the second paragraph rows are actually closer (as I want) but unfortunately each row is also partially overlapping the previous one (unless you remove the background color applied) and this is not good (e.g. see the word «uppercase» on the bottom), so here my questions:
how can I get the rows closer (like paragraph on the right) without them overlapping each other and defining a background color (no matter the element in which it is applied but it has to stay under the text, not fill a whole block)
Optionally there is a way to add an horizontal padding to each line of text?
Feel free to change the CSS and/or markup. I'm looking for a pure CSS workaround.
An optimal solution should work on modern browser and, if possible, at least from IE8+
Thank you in advance. =)
Edit:
About 2nd question, using #thirtydot solution I can add space (to the right) using white-space: pre-wrap applied on the span element
Simply add a wrapper element inside the em, such as a span, and apply position: relative.
See: http://jsbin.com/axefaf
<a href="#"><em style="line-height: 0.8em">
<span>This is an uppercase multirow text inside a link element</span>
</em></a>
span {
position: relative;
}
This works in all modern browsers and IE8, but does not work in IE7.
I can't seem to wrap my head around how img tags behave alongside text in an html page.
I've removed margins and padding, but there always seems to be some extra space under the img or some other unexpected behavior. I'm sure theres quick CSS workaround using absolute positioning or negative margins but I'm looking for a more general solution.
Question: Can someone explain how img tags are positioned, specifically why do they get offset vertically when alongside text?
If you want the <img> to be an inline element, you can use the vertical-align CSS attribute to specify how the image will be aligned relative to the line of text it appears in. This page has examples under the "vertical-align on inline elements" heading.
The key to getting your text to wrap around your image is setting the float attribute like so:
img {
float:left;
display:block;
}
CSS has two types of display: attributes: block and inline.
Inline is like text. It streams along, wraps at the end of a box, stuff like that.
Block is chunky and has margins and padding and width (either calculated or derived).
It doesn't make a whole lot of sense, but <img> is actually an inline element, along with <a>, <abbr> and many others. What's happening is that the image is actually being rendered roughly equivalent to letters, and it just happens to not be 12pt tall, but maybe 130px or whatever your image is. That's why it sticks up.
Declare <img style="display:block;" src="image.png" /> to get it to behave like the box most people think it is.
IMG elements get positioned just like any other inline element.
What you see under the img is the space needed for the descendant part of a glyph like g or j. An image behaves just like a letter and sits on the baseline.
img
{
display: block;
}
Will fix it for you.
An experiement that might shed some light:
<p style="font-size: 1em;">Lorem ipsum dolor <em style="font-size: 800%;">sit</em> amet.</p>
Think of the <em> as a ~128px high image (if 1em is 16px that is).
If you want more control over your image positioning, wrap your image in a DIV and control the positioning of the DIV. You can float the div if you want to intermingle it with your text.
This might not be relevant in this particular case (hopefully the advice from previous answers should solve your problem), but if you're finding you're getting unexpected extra space around elements, make sure that you've removed the default padding, margins etc. that browsers often add to elements (and of course different browsers often add different amounts of padding, margins etc.
If you make sure you've zeroed margins and padding etc. by using
body { margin: 0; padding: 0; border: 0; }
at the start of your CSS, you can then add any padding and margins etc. without having to worry that the browser's defaults are going to cause any unexpected spaces, and hopefully fewer inconsistencies between browsers.