<h5>Category</h5><h6>auto</h6>
places Category and auto on separate lines, like this:
Category
auto
How can I place them both on the same line, like this?
Category auto
h(n) elements are 'block' elements, which means they will grow to take all available horizontal space. This also means they will push anything "right" of them down to the next line.
One easy way to accomplish this is to set their display to inline:
<style>
h5, h6 {display:inline;}
</style>
Note that inline-block is not supported in all browsers.
You can also float block elements, but that can become a sticky issue as floating can be fairly complex. Stick with inline for cases like this.
<h5 style="display:inline-block;">Category</h5>
<h6 style="display:inline-block;">auto</h6>
You must change the display mode of the elements. H tags are rendered as BLOCK elements by default. To override this behavior add the following style definitions to your website or CSS
h5,h6 { display: inline; }
You can also decide to let them "float" next to each other you can do that via:
h5,h6 { float: left; }
Please note that floating only works on block elements (so using both styles will perform no float because inline elements cannot float).
Related
I have a div that contains several inline-block children:
The DOM looks like this:
It has the following CSS:
Each child has the following css:
If one unchecks and rechecks the display: block line marked above in the Chrome debugger, the div now looks like this:
Note that there is now space between the labels, and they are more readable. However, the CSS used to render this is presumably identical. Moreover, the div is actually still display: block when the specific selector's display: block is unchecked; it just obtains this from a less specific selector (in my case, the UA stylesheet for div).
I want the div to render the second way - is there a way to make this happen? How is the div supposed to be rendered, and where does the spacing between the display: inline-block elements come from?
UPDATE: This is probably caused by a weird interaction between Chrome's renderer and Meteor's Blaze rendering engine, and won't be seen except on highly dynamic pages.
This is a result of whitespace being evaluated. You can throw:
font-size: 0;
on the parent div and this will go away. Alternatively, adjust your markup to remove space between the list items.
What is the purpose of an empty comment in a clearfix div? I assume this is for some sort of older browser shim; not sure why you would want to go around putting empty comments everywhere though. Seems just one or two CSS rules would be a heck of a lot easier to maintain.
If the website has two divs next to eachother using display: inline-block, the whitespace between those divs will add annoying space in the layout. To combat this, developers use html comments that start right after the closing tag of the left div, and end right before the opening tag of the right div, with no space between the tags.
CSS can (or could at the time) only format elements and pseudo-elements. An element after the float is needed for clearing the float, i.e. for returning to the normal document flow.
The clear declaration is in the "one or two CSS rules", particularly those whose selector contains (or is) .clearfloat. That fixes the height of the box of the float having an otherwise last child element that is not a float. I should look like so:
.clearfloat {
clear: both;
}
More elaborate and hackish workarounds are known, for example:
.clearfloat {
clear: both;
height: 0;
font-size: 0;
line-height: 0;
overflow: hidden;
}
But in some layout engines (particularly MSHTML < 8) the clearing element must have content. Yet we do not want that dummy element to be visible. Hence the (empty) comment.
This is actually pretty common. I wondered about this as well when I was younger. As far as I know, this is to signal to other programmers that the contents of the div were left intentionally empty, and this serves as a completely "blank" content in the div.
In other cases, it may be used to remove whitespace.
Here is what I need the output to be.
HTML Markup is:
<h3 class="TRM_Propane_sfty_ttl">Placement of Your Grill & Propane Cylinders</h3>
<h3 class="TRM_Propane_sfty_ttl">Use of Your Grill</h3>
<h3 class="TRM_Propane_sfty_ttl">Other Propane Cylinder Safety Tips</h3>
What is the CSS I should apply to the h3 tag, so that the text "Use of Your Grill" will be vertically aligned at middle? I should n't use specific line height for the second h3 tag.
I tried display: table, table-cell, table-head. Nothing worked :(
h3 is block level (that is the next element will go to the next line) so one way is to make that inline (like span element).
.TRM_Propane_sfty_ttl
{display:inline;}
in your CSS.
Check my demo with table also by the way is used.
And without using h3 element you could also make your font look bigger like this one
and your code a little tidier ;-)
Why don't you just use font-style on a span:
<span style="font-size:large;bold,etc.">
Make the span look like an h3, etc. It might not look 100% unless
you have made modifications to the h3 already (thus changing the standard h3 css configuration)
One way to do it is to wrap everything in a new tag and apply display:table to it. The h3 elements should then be set to display:table-cell
Like this:
http://jsfiddle.net/QSjM3/
Having said that, I do agree that three h3 tags in a row is unusual so you should consider re-structuring your markup
If you look at this jsFiddle example:
http://jsfiddle.net/jrXwf/1/
You will see the UL tag displaying a star rating, with text below it on the next line.
Is there any way to get everything on one line?
Thanks
just use float left in your this class .any-rating { float:left; }
or
here is the fiddle : http://jsfiddle.net/jrXwf/15/
http://jsfiddle.net/jrXwf/5/
Add display: inline-block to your unordered list (or any other element that you want to behave that way). You could also float the element, but inline-block probably best represents what you want to accomplish with a minimum amount of hassle. You want to display the element inline, and you want it to have a display box which behaves like a block element (thus inline-block versus inline).
Your overall markup structure could/should be modified. As others have pointed out, nesting a SPAN inside UL is not legal. You also have a fairly complex structure that could possibly be simplified to use fewer elements.
first, remove the <span> surrounding that <ul> because it's illegal. you can't place a block-level element in an inline-level element.
then, style the <ul> with either
display:inline-block
float:left
Add Style display : inline-block to ul with class any-rating
ul.any-rating.rating {
display:inline-block;
}
here is the fiddle http://jsfiddle.net/jrXwf/12/
Is there an "invisible" tag in HTML (4) that I can use to make CSS distinctions
tag.myclass tag.mysubclass h1 { }
without having any visual impact on the HTML rendered?
My background is that I have areas in a form that belong to different groups. As I am opening those in lightboxes (long story involving DOM operations and such, not really important) I don't want to rely on the usual div class=x or span class=y to style the subsequent elements, as I would have to reset margins here, paddings there, and so on.
A layout-neutral wrapping tag would be just what I need in such situations.
No, there is not.
(And that's because such an element wouldn't really fit into the rest of HTML. The only reason DIV and SPAN affect the surrounding area is because they're block and inline elements, respectively. What would an 'invisible' element be? If you need something that's completely independent, absolutely (or relatively) position it and give it a higher z-index.)
If you want to group elements use a div or a span tag as a wrapper element. Apply your id or class to this, and style it accordingly.
EDIT
There isn't an 'invisible' tag - but margins and padding can be easily reset 'margin: 0; padding: 0;'
While all browsers give default styling to many HTML tags, at it's core HTML only describes data, it doesn't format it.
What you're probably looking for is a DIV tag, because no browser gives any default styling to that tag.
I think you want a <fieldset>.
I'd say a span tag is as neutral as they come. I don't think there's any browser that applies a margin nor a padding and it just wraps around it's contents.
I suspect you can use <object> tag without usual attributes for that purpose, but I haven't tested it thoroughly yet. It's even in HTML5 (unlike FONT tag).
The right answer is use a div tag and define a class for it. Here is an example:
<h2 style="font-size: 14px">Project 1 - Project 2
<div class="username">{% if request.user.is_authenticated%} Welcome {{request.user.username}} {% endif %}</div>
</h2>
then in your css file you can have a class like this:
.username {
color:white;
float:right;
padding-right: 100px;
}
voila!! It all belongs to h2 tag but the user name has a different css applied.
You can add display: none; to it. That won't display it (obviously).