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;}
Related
Since I am having trouble with Firefox about positioning a block element by nature (header) to be inline by using display:run-in; i'm asking you for your help ! been searching for quite some time now and I cant find which CSS method could be used instead of just applying display:run-in; to the element, which is supported in all the major browsers. It is crucial that i position the element this way.
Anyone knows a method how to do this ?
If you'd like to display your element as a block element, but would position it inline, then
display: inline-block;
will do the trick for you.
The MDN still lists run-in as an experimental value, so we shouldn't be too surprised if it doesn't fully function in Firefox at this time.
As for options, there are at least two you could use: display: inline and display: inline-block.
Inline might suffice if you don't need the properties of a block element on your header. Inline-block keeps it as a block element, so you can still do nice things like give it width, height, margin and so on.
View them on JSFiddle.
Alright i found a solution ! :) Using display:inline; in a combination with float:left; will make a block element by nature use space only as much as he needs, not full 100% of its parent element.
There is just one problem with this tecnhique if you are using bigger font for lets say a heading and want to add a paragraph right after it (on the same line). If the headings font-size is a bit bigger, heading could take 2 or even more lines of space in height where paragraphs text should be,and you will have a small gap between header and another row of paragraph under it. The solution is to add display:block; and margin-top:Xpx; to the paragraph element to align it as needed.
How do you choose when to use DIV and when SPAN, to wrap something?
Many time when we make PSD 2 HTML, in some conditions to get any effect or to wrap something to get needed effect, we use div or span.
And I know div is block level element and span is inline level element and we can change display properties through CSS. and I also know div cannot come inside span.
What are cases when you use div as a display:inline and span as a display:block? and should we try to avoid those scenarios? is this semantically incorrect?
and when we use blank div or span (no content inside) to get some effect, than which is correct?
As you note, you should use divs as dividers of blocks, and spans for marking inline content.
And yes, you should try to avoid changing the display types of them.
Regarding blank element, div is better as you can define its width and height while for span it won't have proper effect.
Most simple example to prove this point can be seen in action here: http://jsfiddle.net/yahavbr/4DZkV/
This is still a good question but the suggested answers only seem to address part of the question. There are three CSS display types, which help put this into perspective: inline, block, and inline-block. If you read this other Stackoverflow topic, CSS display: inline vs inline-block, I think you'll get some useful guidelines. For example, if you need to ensure the element has distinct top and bottom padding and margins, then it probably needs to be a div (with CSS style inline-block), otherwise a span is probably a better choice.
I'm trying to create css buttons by using the following html markup:
Forgot password
But it ends up being not bigger than the text in the middle. Even though I've set the class's height and width.
You can preview the problem here btw, www.matkalenderen.no
Notice the first button, that's a form button and it's using it's own class. At first I tried to use the same class on the css button as well and the same problem appeared, so I tried to separate them into their own classes. In case there was some kind of crash. But it didn't matter anyway.
What am I missing here?
As the others have said, by default <a> is an inline element, and inline elements can't specify a width or height. You can change it to be a block element like this:
a {
display: block;
}
Though it will then display (unsurprisingly) as a block, sitting on its own, outside the flow of the surrounding text. A better solution is to use display: inline-block which might be a best-of-both-worlds solution depending on your situation.
See PPK's writeup about it.
The real use of this value is when you want to give an inline element a width. In some circumstances some browsers don't allow a width on a real inline element, but if you switch to display: inline-block you are allowed to set a width.
Because <a>'s are inline elements by default. In CSS define a { display:block; } and height and width settings will be applied.
Of course, you may not want to declare all anchor tags as block level elements, so filter by class or id as needed.
I think the most proper solution is display: inline-block; which will allow you to set height for the element that still will be treated as inline element.
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?
I have written code that automatically creates CSS sprites based on the IMG tags in a page and replaces them with DIV's with (what I thought was) appropriate CSS to position the sprite image as a background letting the appropriate part show through -- the problem is that I cannot get DIVs to behave as drop in replacements for IMGs.
If I leave the default 'display' value set to 'block' then if the original IMG was positioned at the end of some text, the replacement DIV will jump down to the next line after text (which of course is what I would expect something with display: block to do).
If I change the 'display' to inline, then the DIV stays on the same line as the text but it ignores the 'width' and 'height' I have set and collapses. I've tried putting 's inside the DIV but it then only takes up enough width to contain the nbsp.
I've tried experimenting with setting display to all possible values (including the "obscure" ones like 'table-row', 'run-in', 'compact', etc) but all with no luck. Is it even possible to create a DIV with the same layout behavior as an IMG?
I am open to having something more complicated than just a single DIV, however I've tried the obvious things there (one DIV inside another where the inner DIV is set to display: block with the outer set to display: inline) but I haven't found a combination there that works either.
There are always specific things I can do outside of the replaced IMG/DIV to get the layout I want, but my goal is to have a generic auto-CSS-sprite mechanism that works regardless of the rest of the HTML.
Did you try display: inline-block; ?
you may have to also use display: -moz-inline-block; for firefox2
Images have an equivalent of "display: inline-block". This was not originally included in CSS but was added in part to address the fact that images behave this way.
The issue is that all browsers are just now supporting it. If you want to support browsers from even a year ago, you are stuck.
Another, but not as great, solution is floating the div ("float: left").
inline-block : Introduced in CSS 2.1. This causes the element to generate a block element box that will be flowed with surrounding content as if it were an single inline box (behaving much like a replaced element [meaning an image] would.).
Source Mozilla Developer Center
Display: inline-block is supposed to work in this situation. Did you try it?