I am writing a fairly (should be) simple HTML5 site that is a HTML5 table of the Periodic Table of elements. I am trying to format the data of each cell (each element) to show the abbreviation of the element, the atomic number and the atomic weight. I wrote a few CSS classes to format these cells in the table but it renders each piece of information on a new line in the cell. How can I get the data all on the same line so it fits the site of the cell?
These are the CSS classes:
/* class for element abbreviation */
h2
{
text-align:center;
font-size:12px;
}
h6.anum
{
text-align:left;
vertical-align:top;
font-size:8px;
}
h6.aweight
{
text-align:right;
vertical-align:top;
font-size:8px;
}
And this is the relevant entry in the HTML5 code:
<td><h6 class="anum">1</h6><h2>H</h2><h6 class="aweight">1.01<h6></td>
This displays more or less like this in the cell:
1
H
1.01
I would like text to be on the same line with the 1 and 1.01 in the left and right corner respectively.
I will admit this is probably done incredibly poorly from a design standpoint but this is my first HTML class so... I'm still learning.
h1 - h6 in HTML are block elements, meaning they usually stretch out to fill their container and have a blank line on either side of them. If you want them to sit next to each other, perhaps on the same line, you will need to set display: inline on them to coerce them to regular inline elements. You may also need to adjust the margin to make them sit more closely to one another.
Example CSS:
h1 {
display: inline;
margin: 0.25em auto;
/* More styles */
}
However, this isn't necessarily the way I would do it. Personally, I would put these in a div with position: relative and then absolutely position the h6 elements the way I want them. See example Fiddle
Related
What I want to do is target more than one <p> with the following code:
h1+p
{
margin-left: 20px;
}
h2+p
{
margin-left: 27px;
}
h3+p
{
margin-left: 35px;
}
Below is the effect I am trying to achieve:
The problem is that when there is a new <p> element, the block of text is obviously going to revert to it's normal position, without the margin, and not longer inline with the heading.
(like so)
Is there a better way of attacking this problem? (or one that works for that matter)
You can somewhat achieve this by using the general sibling selector ~ instead of the adjacent sibling selector +:
h1~p
{
margin-left: 20px;
}
h2~p
{
margin-left: 27px;
}
h3~p
{
margin-left: 35px;
}
Be careful with this, though, especially if your h1, h2, h3 and p elements all share the same parent. Due to the way that styles cascade as well as how sibling selectors work, all your p elements that follow the last h3 element will get the 35-pixel margin, even if the last heading in your container is an h1 or h2.
For instance, if you have this Markdown:
# Heading 1
Paragraph
Paragraph
## Heading 2
Paragraph
Paragraph
### Heading 3
Paragraph
Paragraph
## Heading 2
Paragraph
Paragraph
The last four paragraphs will have a 35-pixel margin, including the two that follow your last h2, because your h3~p rule is the last in the cascading order and all your elements share the same parent. This may or may not be the effect you're trying to achieve (I'm guessing it's not).
There isn't a pure CSS workaround for this, I'm afraid; you're going to have to post-process the rendered markup with JavaScript to add classes and such to your paragraphs based on your headings.
is this what you are trying to achieve? http://jsfiddle.net/chrismackie/5DgNH/
I'm working on a pagination sort of thing, which is simply just a bunch of floated anchor-tags inside a div. Now, in IE7, it inserts empty text nodes here and there, seemingly at random, which breaks the layout.
Result:
Example of how it looks on different pages. Note the empty text nodes. Neat, huh?
CSS:
.nwsPaging {
width:200px; /* Have also tried fluid size */
height:30px;
display:block; }
.nwsPaging a {
width:auto; /* Have also tried fixed size */
margin:0 0 0 1px;
padding:2px 8px;
border:solid 1px #ccc;
background:#eee;
float:left;
line-height:20px;
display:block;
zoom:1;
vertical-align:top; /* Should not do any difference */ }
.nwsPaging a:hover, .nwsPaging .isActive {
background:#D150A1;
color:#fff;
display:block; /* Should be redundant, but just in case */
zoom:1; }
As you can see, I've tried some different things, including setting a fixed width for the container and the floated -tags, plus giving it hasLayout. The .isActive class has nothing special in it, and it makes no difference if I never add the class.
I had the exact same problem in a different system, however I can't remember how I fixed it. I don't have access to the code, and the inspector is no help.
Bonus info:
The site is built on HTML5Boilerplate, which uses normalize reset CSS.
Edit:
The markup is very simple, and although the tags are dynamically created, there should be no line breaks which could possibly create empty text nodes.
How the markup should be presented as parsed:
<div class="nwsPaging clearfix">
Previous
1
2
3
Next
</div>
This could actually be caused by line-breaks in your code.
Strip them and see if it still does that.
I'm trying to stray away from using tables to form the layout of my content, and I can think of two alternatives that I'd like to better learn: (1) styling list items to be side-by-side, and (2) using div blocks that float onto the same line. Both of these would have their own uses for what I'm working on.
I'm already using div tags to form the entire layout of my three-column template, but what I need to do now is a bit different. In case it helps, my project can be found here.
In short, here's my question; how would I style a div so that the width of it is 50% of the width of the area it occupies, rather than 50% of the width of the page?
As for my other question, what would be the best approach to styling list items so that they are side-by-side? I'm working on a registration script now, and instead of using a table with "Username" on the left and the input text on the right, I can use two list items.
It's late and I've been working on this project of mine for about 8 hours straight now, so I apologize if I'm asking anything confusing. Feel free to ask me any questions about what I'm trying to do.
Thanks, friends. :)
When you use percentage units for widths and heights, it is relative to the first ancestor element which has defined a width or height. Therefore, all you need to do is set up a div which is as wide as two columns:
<div class="columnContainer">
<div class="column">
Column 1
</div>
<div class="column">
Column 2
</div>
</div>
.columnContainer {
width: 800px;
}
.column {
float: left;
width: 50%;
}
There's a lot more fiddling about required than just the code above, but that's the basics. As Gabriel said, you might get a lot of value out of using a CSS framework like 960.gs
ok, so to help you out best I am going to point you to http://960.gs this is a great tool for prototyping this sort of scenario and getting solid reliable code. On to your actual issue, you probably want to set:
width: 50%;
float: left;
display: block;
on the elements you want split. Good luck.
For the width, any relative sizing is relative to the parent, so put it as a child inside the element you want to be half of. For the list items... use display: inline; or float: left;
Inline list are simple but have some drawbacks, you cant set height or width for example.
ul li {
display:inline;
}
If you need block elements you need to float list items and floats can be tedious sometimes, for example you need to take care of clearing [uod]l element.
ul {
overflow:hidden;
}
ul li {
float:left;
display:block;
}
You probably want to remove margins and paddings on list itself in both cases.
ul {
margin:0;
padding:0;
}
I'm trying to put together a navigation bar using a table:
There are n links to different parts of the website
There is one "logout" link, which is an icon of fixed size
What I'd like to do is the following. The available width for the whole bar (which is known in advance) minus the required width of the icon should be divided equally among the cells containing the n links for navigation (ignoring the size of the links inside, this is not a problem).
Currently, I'm performing this computation in PHP and use to achieve this. However, this does not comply with the XHTML 1.0 Strict standards. According to the W3C validator, I should use CSS to set the width of the column. Problem is: I don't know how to do this, and if it is at all possible. Probably this problem is a hint that I shouldn't be using tables for this, but I have no other ideas at the time.
How can I achieve the effect, using tables or something else, in an XHTML Strict and CSS compliant way?
First off, scrap the tables. Your links are not tabular data.
Basics
Start off with this:
CSS
ul.navbar
{
padding-right: 25px;
list-style:none;
}
ul.navbar li
{
margin: 0px;
padding: 0px;
border: 0px;
display: block;
float: left;
}
ul.navbar li.icon
{
margin-right: -25px;
width: 25px;
float:right
}
HTML
<ul class="navbar">
<li>Home</li>
<li>FAQ</li>
<li>Contact</li>
<li class="icon"></li>
</ul>
Equal width
The icon li should be hugging the right edge. Now, there are a few ways you can acheive the equal spacing. One way would be to have these classes, and apply them to the ul, with either php or jquery:
CSS
ul.navbar.links1 li
{
width:100%;
}
ul.navbar.links2 li
{
width:50%;
}
ul.navbar.links3 li
{
width:33%;
}
ul.navbar.links4 li
{
width:25%;
}
ul.navbar.links5 li
{
width:20%;
}
jQuery
$(function()
{
var n = $("ul.navbar").children().length-1;
//Get the number of links: -1 because of logout
$("ul.navbar").addClass("links"+n);
});
Alternatively, you could just directly modify the width with jQuery or PHP. Up to you. Either way, you should use percentages.
$(function()
{
var n = $("ul.navbar").children().length-1;
//Get the number of links: -1 because of logout
$("ul.navbar").width((100/n)+"%");
});
The easiest way would be to put the links into little boxes (all the same size). Since CSS has no way to make calculations, you must still set the width of the boxes but by using CSS, you can do this once. Use DIV for the boxes. The class for the boxes must say display: inline; so they behave like words in text (the browser will place them next to each other on a line).
After that, you just calculate the width per box in PHP and send this width in a little piece of inline CSS in the header of the HTML page. That way, all boxes will have the same width and they will all be in the same line.
For an example how to create a navigation bar with CSS, look at the source code of the page you're reading just now.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
When you want to add whitespace between HTML elements (using CSS), to which element do you attach it?
I'm regularly in situations along these lines:
<body>
<h1>This is the heading</h1>
<p>This is a paragraph</p>
<h1>Here's another heading</h1>
<div>This is a footer</div>
</body>
Now, say I wanted 1em of space between each of these elements, but none above the first h1 or below the last div. To which elements would I attach it?
Obviously, there's no real technical difference between this:
h1, p { margin-bottom: 1em; }
...and this...
div { margin-top: 1em; }
p { margin-top: 1em; margin-bottom: 1em }
What I'm interested is secondary factors:
Consistency
Applicability to all situations
Ease / Simplicity
Ease of making changes
For example: in this particular scenario, I'd say that the first solution is better than the second, as it's simpler; you're only attaching a margin-bottom to two elements in a single property definition. However, I'm looking for a more general-purpose solution. Every time I do CSS work, I get the feeling that there's a good rule of thumb to apply... but I'm not sure what it is. Does anyone have a good argument?
I tend to use a bottom margin on elements when I want them to have space before the next element, and then to use a ".last" class in the css to remove the margin from the last element.
<body>
<h1>This is the heading</h1>
<p>This is a paragraph</p>
<h1>Here's another heading</h1>
<div class="last">This is a footer</div>
</body>
div { margin-bottom: 1em; }
p { margin-bottom: 1em; }
h1 { margin-bottom: 1em; }
.last {margin-bottom: 0; }
In your example though, this probably isn't that applicable, as a footer div would most likely have it's own class and specific styling.
Still the ".last" approach I used works for me when I have several identical elements one after the other (paragraphs and what-not).
Of course, I cherry-picked the technique from the "Elements" CSS framework.
Using advanced CSS 2 selectors, another solution would be possible that does not rely on a class last to introduce layout info into the HTML.
The solution uses the adjacent selectors.
Unfortunately, MSIE 6 doesn't support it yet so reluctance to use it is understandable.
h1 {
margin: 0 0 1em;
}
div, p, p + h1, div + h1 {
margin: 1em 0 0;
}
This way, the first h1 won't have a top margin while any h1 that immediately follows a paragraph or a box has a top margin.
If you want some space around an element, give it a margin. That means, in this case, don't just give the <h1> a bottom margin, but give <p> a top margin.
Remember, when two elements are vertically adjacent and they don't have a border or padding between them, their margins collapse. That means that only the larger of the two margins is considered - they don't add together. So this:
h1, p { margin: 1em; }
<h1>...</h1>
<p>...</p>
...would result in a 1em space between the heading and the paragraph.
This going to be driven partly by the specifics of what you're designing for, but there's a sort of rough heirarchy to these things in, say, a typical blog index:
You're going to have one footer on a page.
You're going to have one header per entry.
You're going to have n paragraphs per entry.
Establish whitespace for your paragraphs knowing that they're going to sometimes occur in sequence -- you need to worry about how they look as a series. From there, adjust your headers to deal with boundaries between entries. Finally, adjust your footer/body spacing to make sure the bottom of the page looks decent.
It's a thumbnail sketch. How you ultimately end up assigning your padding is entirely up to you, but if you approach it from an bottom-up perspective you'll likely see less surprises as you tweak first the most common/plentiful elements and then later the less common ones.
The point that Jim is making is the key. Margins collapse between elements, they are not additive. If what you want is to ensure that there is a 1em margin above and below paragraphs and headings and that there is a 1em margin below the header and above the footer, then your css should reflect that.
Given this markup (I've added a header and placed ids on the header/footer):
<body>
<div id="header"></div>
<h1>This is the heading</h1>
<p>This is a paragraph</p>
<h1>Here's another heading</h1>
<div id="footer">This is a footer</div>
</body>
You should use this css:
#header {
margin-bottom: 1em;
}
#footer {
margin-top: 1em;
}
h1, p {
margin: 1em 0;
}
Now the order of your elements doesn't matter. If you use two consecutive headings, or start the page with a paragraph instead of a heading it will still render the way that you indended.
I'm a relative newbie, but my own solution to the thing I think both you and I came up against (changing margins for one tag may sort out spacing in one part of a site, only to disturb a previously good spacing elsewhere?) is now to allocate an equal margin top and bottom for all tags. You might well want more space above and below an H1 than for an H3 or a p, but in general I think pages look good with equal spaces above and below any given piece of text, so this solution works well for me and meets your 'simple rule of thumb' spec too, hopefully!
This is how it should be done:
body > * {
margin-bottom: 1em;
}
body > *:last-child {
margin-bottom: 0;
}
Now you don't have to worry about what element is first and what element is last, and you don't have to always place a special class on your last element.
The only time this won't "work" is when the last child is one that is not rendered. In this situation you might consider applying margin-bottom:0; using a class on your last visible child.
I tend to agree with you that the first option is better. It's generally what I like to do. However, there is an argument to be made that you should specify a margin for each one of those elements and zero it out if you don't want to apply it since browsers all handle margins differently. The <p> (and the <h1> tag too I think) will usually have default margins given by the browser if none are specified.
I've just used first-child and last child. So for example in plain CSS:
h1{
margin-top:10px;
margin-bottom:10px;
}
h1:first-child{
margin-top:0px;
}
p{
margin:10px;
}
p:first-child{
margin-top:0px;
}
p:last-child{
margin-bottom:0px;
}
This is a basic example, but you can apply this to more elements and structure is nicer if using SASS, LESS etc :)