here is my angular js markup:
<div layout="row">
<h1 ui-sref="home" style="cursor:pointer">Element A</h1>
<h1 flex="10"></h1>
<h1 ui-sref="simulator" style="cursor:pointer">Element B</h1>
</div>
however in the browser I see "Element A" and "Element B" very close to each other.
How can i make some space between them?
CSS is your friend. Simply apply either margin or padding to space out your html elements like h1's. This is what CSS is for - it is better to apply styling rather than rely on html elements like a to space things apart.
h1 {margin: 15px;}
Also - you should perhaps not have multiple h1's - semantically there should only be one h1 per semantic section (it used to be stated that you should only have 1 h1 per page - but with the advent of self contained HTML5 elements like sections - each one may have a h1 -h6) although I personally prefer to only have 1 h1 and treat all other headings as subservient to that.
also better to not have your styles inline - but in the hea or in an external style sheet.
h1{
margin: 15px;
cursor:pointer;
}
<div layout="row">
<h1 ui-sref="home" >Element A</h1>
<h1 flex="10"></h1>
<h1 ui-sref="simulator">Element B</h1>
</div>
Related
can we use h2 tag before h1,likewise h4 before h3 tag? is it appropriate?
<body>
<div class="">
<h2>content</h2>
<div>
<div class="">
<h1>content</h1>
</div>
</body>
There is no order to how you use header tags, however, there is a validation rule that a heading cannot be a child of another heading. Please use the W3C Validator to validate your html.
Yes, it is appropriate.
Also as a side note, when search engines read your HTML, they give higher priority to h1 tag, then h2 etc. regardless of where your tags are. You can have h4 before h1.
I am using the mixItUp jQuery API on my website. I was having an issue with spacing on inline-block elements primarily because of the excess whitespace inline-block adds.
Normally I would use a <!-- --> to remove the whitespace between the html elements where needed, but I can't seem to do that on account of the html results get generated dynamically. The html code that structures the search results are also in a different "search-results" PHP template file for organization.
<div class="container">
<!-- The three DIVs below are generated with PHP in a different template file -->
<div class="result 1">Content</div>
<div class="result 2">Content</div>
<div class="result 3">Content</div>
</div>
So the question is how would I remove the whitespace produced by inline-block on these 3 hypothetical DIV elements?
Please note, I don't want to use any hacky CSS tricks as they always have a support related con (ex. margin-right:-4px, font-size:0, etc).
Thank you!
Super easy:
.container {
font-size: 0;
}
.container > div {
font-size: 1rem;
}
This option sets the font-size to 0 so that the white-space consumes no space. Then, it resets the font-size to the root-level declaration with font-size: 1rem for all immediate children divs.
--OR--
<div class="container"><!--
--><div class="result 1">Content</div><!--
--><div class="result 2">Content</div><!--
--><div class="result 3">Content</div><!--
--></div>
This is simply adding a comment between the items so that you can preserve your document layout (for editing purposes) while essentially telling the browser to ignore everything in between the tags.
Why do people do this in CSS:
#section #content h1
{
margin:0;
}
When they can just do:
#content h1
{
margin:0;
}
for code like this:
<div id="section">
<div id="content">
</div>
</div>
and get the same results (at least in IE7 - my target browser, unfortunately). Is it just for specificity in the code? Code clarity to declare what you are referring to?
CSS files are generally designed to be reusable so that the same CSS can be used all over the website and can be applied to all pages in the application.
Targeting a very Specific node can be useful to prevent any surprising behavior.
Suppose you had this code as you said,
#content h1
{
margin:0;
}
<div id="section">
<div id="content">
</div>
</div>
Someone came after you and created another HTML page using the same CSS and the structure was this
<div id="content">
</div>
and you desire a different styling for the H1 on this page.
You can argue that even with this CSS
#section #content h1
{
margin:0;
}
if the new page consisted of the same structure,
<div id="section">
<div id="content">
</div>
</div>
well in that case it is easier to debug, in this example the structure is quite simple, but real life CSS tend to be complex.
If you (or anybody else) is doing it, you shouldn't be. You're just trying to hold together a poorly developed CSS structure.
Try your hardest to stick to this rule: IDs are for JavaScript, classes are for CSS.
You should never need multiple IDs in a selector since IDs must be globally unique in the document. This means your #section #content h1 is overkill since it includes 2 IDs.
Other types of selectors (classes, tag names, etc) are not unique, so you might need to string a few together to get the element you want. For example, #section .content p would be perfectly reasonable in many contexts.
You might not want all #content h1 to look the same.
In that case #content h1 might have an ancestor ID/Class that you would want to latch onto so you can change the style of the h1 for those instances.
For example:
#content h1 { /* style 1 */ }
#about #content h1,
#contact-us #content h1,
.products #content h1 { /* style 2 */ }
The term you are looking for is "Specificity" best example ive seen to describe this is using a points based system.
You use multiple selectors so that you don't select sections that you don't want.
For example, taking your use case, we would have to expand it from a section and content div, to something slightly larger.
<div class="wrapper">
<div class="header">
<div class="content">
</div>
</div>
<div class="section>
<div class="content">
</div>
</div>
</div>
Now, without adding the extra specificity, you will grab all H1 tags in every content section of the page, but you probably don't want to do that.
It's not a problem to be non-specific in small files, but when you begin to reach into the hundreds of possible css interactions being very specific about what you are doing in the css can save you major headaches.
I have a div container with a series of p tags. Each p tag will float to the left. I want two p tags per line, so think field/value.
Title: Some Title
Author: Some Author
<div id="container">
<p class="field">Title</p><p>Some Title</p>
<p class="field">Author</p><p>Some Author</p>
</div>
If I set the "field" class to clear: both, I get the desired functionality in most browsers except IE 7 (not worried < 7). However, in IE 7 if the containing div is wide enough, the clear: both seems to be ignored and I'll get something like this:
Title: Some title Author:
Some Author
A couple of thoughts:
I can monitor the width of the containing div so that only two p tags can sit on one line but that seems very brittle.
I can muddy up the markup by placing clearing divs after every two p tags. It would work but makes me feel dirty inside.
How can I overcome this issue?
Use this pattern (span is optional - for additional styling if needed). Lists make more semantic sense than re-purposing the wrong tags. This is a list. :)
<ul>
<li><label>Title</label><span>Some Title</span></li>
...
</ul>
CSS:
ul, li {
padding:0;
margin:0;
list-style-type:none
}
li {
clear:both
}
label {
float:left;
width:150px;
}
http://jsfiddle.net/QUL9v/1/
Using the p tags....
<div id="container">
<p class="field">Title</p><p class="field">Some Title</p><div class="clear"></div>
<p class="field">Author</p><p class="field">Some Author</p><div class="clear"></div>
</div>
with css:
.field {
float: left;
}
.clear {
clear: both;
}
This is just sticking to the use of the p tag. Personally, this is how I would accomplish it (http://jsfiddle.net/QUL9v/3/):
<div id="container">
<div class="field">Title</div>
<div class="field">Some Title</div>
<div class="clear"></div>
</div>
<div id="container">
<div class="field">Author</div>
<div class="field">Some Author</div>
<div class="clear"></div>
</div>
The only reason I'm recommending this is because since this is more of a layout issue, it feels more natural to me to use the div as opposed to p element. Also, it will ensure the position of the text, regardless of what you put inside the divs (anchors, forms, tables, etc).
Another thing you should pay attention to is I'm using the clear as the last sibling instead of the first (as in your examples). If you're clearing the front; then its possible that since your trailing elements are floated and inline, you're going to potentially run into errors down the road, especially with IE7. A lot of the times, the floating rule will get passed on to elements you never intended or thought it would be passed to. Clearing at the end ensures that this doesn't happen.
I like the h1 element because it specifies the contents are header style contents, but you're not supposed to put things like images or divs inside an h1, so is there an alternative to an h1 that I can put other markup in?
My current html looks like this:
<div class="section">
<h1>
<div style="float:left">header text</div>
<div style="float:right">text</div>
<div style="clear:both;float:none;"></div>
</h1>
<div>body contents</div>
</div>
I like the h1 because I can add a css style to any h1 with a div.section class, but I'm not suppoed to put divs in it...
You could always do
<h1>header text <span>text</span></h1>
Then you handle the css for clearing the floats and floating the second text in the css file.
You should use a semantic image replacement method: Which makes for the most elaborate design (images, colors ect.. the graphic is your oyster) as well as being completely semantic and accessible.
Otherwise as mentioned above, you can add any element that is an inline element: A, SPAN, ect... inside of your H1... but I would shy away from this if you are interested in semantics and being SEO friendly.:
<style>
h1{
background: url('../path/to/image/image_to_replace_header.jpg') no-repeat top left; // Sets the BG that will replace your header
text-indent: -9999px; // Moves the test off screen
overflow: hidden; // Hides the staggered text for good
width: 300px; // Sets width of block(header)
height: 100px; // Sets height of block(header)
}
</style>
<h1>My Awesome Site</h1>
Now your text is still technically there, but you have a pretty photo in its place. Sighted, non sighted, and robot friendly.
The method i personally prefer is to keep the <h1> tags intact and use <span> tags instead of divs inside them. You can style the spans to be display:block and then treat them like divs if need be. This way, the semantic meaning of your <h1> tags is kept, and needless <divs> are omitted. Read up on divitis.
This won't solve your problem if you need to include images inside your <h1> tags. You probably shouldn't be adding graphical styling with img tags anyways, but rather applying the image as a background to the the <h1> element, moving style-related graphics out of your markup into your CSS files.
Is there a reason you don't specify just:
<div style="float:right">text</div>
<h1>header text</h1>
<!-- <div style="clear:both"></div> only if really necessary -->
This will keep your markup semantic, still float text to the right and keep it out of the h1 tag which it is semantically not part of.
To answer your question directly: yes you can use another method. It keeps your CSS editing ability, as well as having a proper H1 element:
<div class="section">
<div id="Header">
<h1 style="float:left">header text<h1>
<div style="float:right">text</div>
</div>
</h1>
<div>body contents</div>
</div>
All the important text is in the H1 and you can still style it as you like.
You can use html5 structural elements :
<section>
<header>
<div>header text</div>
<div>text</div>
</header>
<article>body contents</article>
</section>
Just reverse the nesting order of some of your code:
<div class="section">
<div style="float:left"><h1>header text</h1></div>
<div style="float:right"><h1>text</h1></div>
<div style="clear:both;float:none;">body contents</div>
</div>
I'm not sure that the right-floated text was supposed to be h1, but you get the idea. Often these things are best solved by keeping block-elements on the outside and nesting the line-elements within them.
Headers have semantic meaning. Think of a magazine and why they use headers. If you want to place an image in a header for decoration purposes, use a background-image. I cannot think of a reason why you would need to put an image into a H1 for contextual purposes.