So I have a question that might be easy but I could not find anything that works after a lot of searches.
I have this h2 tag which is defined in .aspx. Right below this, I have a div with an id.
<h2>Documents</h2>
<div id="abcdocuments"></div>
I am appending an image before the start of the whole grid which gives me a result like this that there is a heading first. then below I get that image and then below the whole grid
I want the image to be right next to Documents Heading and for some reason, I can't define the img at .aspx It has to be at the class level. Also, I can not move my heading at the class level. Is there any way I can change the styling or something to move the image next to the header?
my html:
<h2>Documents</h2>
<div><img src="../../Images/pincomment.png"
style='width:2%;cursor:pointer;'
/></div>
You can make the heading and the image sit next to each other by making them inline-block.
This snippet is simple because the given HTML is not in its real life context - so the specificity in the CSS does not need added classes, but in the real situation you would of course need to ensure that you had selected the right h2.
h2,
h2+div {
display: inline-block;
}
<h2>Documents</h2>
<div>
<img src="../../Images/pincomment.png" style='width:2%;cursor:pointer;' /></div>
<div class="FDAccordions"></div>
<h2>Lorem ipsum…</h2>
<div style="position:relative;"><img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=" style="width:2%;top:-3em;left:17em;position:absolute;"/></div>
Related
What is the difference between these two? What difference does it make if we put another div inside the first div?
<div class="blah">
<div class="blahInner>
<img src="pony.jpg">
</div>
</div>
<div class="blah">
<img src="pony.jpg">
</div>
Multiple divs allow you to customise your HTML with different effects based on properties assigned to different CSS attributes. Additionally, the use of multiple divs allow you to add different kinds of CSS and, jS to elements of your HTML page. Rather than have all your CSS within one selector, you can then spread it across multiple divs which allows you or someone else working on your code to easily make sense of it.
You may also want to pair different sets of styling for different parts of the webpage, and having multiple divs will enable you to easily call the same divs and form combinations of the attributes from different selectors. Ultimately, you could just use them as follows,
<div class="art" id="dart">
Text
</div>
OR with multiple divs as shown below.
.dart {
color: white;
}
#art {
background-color: #ADFF2F;
width: 115px;
height: 20px;
}
<div id="art">
<div class="dart">
I am dummy text
</div>
</div>
Essentially, there is no difference and is therefore useless unless you use it in your linked CSS or JavaScript.
The difference is that there is another <div> element for other web languages like CSS or JavaScript to act upon.
It gives the other languages a chance to add special positioning, animations, and styles to the containing <div> element.
I hope this answer was informative.
Let me know if you have any complaints.
As others have pointed out, extra div acts as a sub-category.
Extending to your example, lest's say there are 2 sub classes (blahInner1 & blahInner2) within the class blah. We can easily manipulate font of blahInner2 only.
<div class="blah">
<div class="blahInner1">
<img src="pony.jpg">
This is 1st caption.
</div>
<br/>
<div class="blahInner2">
<img src="pony.jpg">
This is 2nd caption.
</div>
</div>
<style>.blahInner2{color: red;}</style>
I am making a website for a class project and I'm running into an annoying issue... After my Div tags, my next heading tag <h2> is appearing beside my div gallery instead of below it.
What should I do?
I would put the h2 within a div as so:
<div style='display: block'>
<h2>what ever you want to say</h2>
</div>
I honestly can't say for sure as you didn't provide any code to work with. But this would be my best guess, if you have any questions comment :)
I have a homepage with slider after the header. Below the slider are other content sections.
I am not sure how to structure my document. Where should I place my h1 and can I have multiple h1 tags?
Is it good practice to use h1 tags for banner captions or banner titles?
The problem is that some designs make it hard to document the structure properly.
<body>
<div class="slider-wrapper">
<div class="slide">
//some text - image in background
</div>
<div class="slide">
//some text - image in background
</div>
<div class="slide">
//some text - image in background
</div>
</div>
<div class="client-wrapper">
<h2>Our Clients</h2>
<div>
Client Logos
</div>
</div>
....
</body>
It is generally possible to have many h1 tag, but structurically it may be better if you have only one h1. You can modify your headers h1's font-size with CSS if you have it inside something, like header tag. Like that:
HTML:
<header>
<h1>My awesome page!</h1>
</header>
<h1>Thing I want to talk about today</h1>
CSS:
header h1 {
font-size: 1.5em;
}
There is no requirement that you only have 1 h1 tag (see the example in the WHATWG doc here), but many designers reserve h1 to the title of the page, useing lower-level headers sub-headings. I would recommend only putting one on the page.
h2,h3,etc. will, by default, be smaller than h1. While you could use multiple h1 tags with class attributes to target CSS to the different headers, I would highly discourage this, use h2,h3,etc instead.
I'm not clear on what exactly you mean by "banner headers/captions" in this context.
Where should I place my <h1>?
The <h1> element is generally used to mark up the primary heading of the document, so... the <h1> element will conventionally appear somewhere near the top of the visually-displayed document.
In the source mark-up, you can technically place the <h1> anywhere, since position: fixed or position: absolute in your CSS will be sufficient to display the element somewhere near the top of the visual document.
Normally however <h1> appears in the source mark-up quite soon after the <body> begins.
Can I have multiple h1 tags.
Something of a hornet's nest. Yes you can, but...
It's probably inadvisable.
The best single article which looks how document structure and headings were intended to work in HTML5 and how everything actually works in practice is:
The HTML5 Document Outline is a dangerous fiction by Steve Faulkner
Is it good practice to use h1 tags for banner captions or banner
titles?
It's good to use h-something elements for all sorts of headings and heading-like elements throughout your document.
Bear in mind though that some elements have their own native caption elements.
<figure> uses <figcaption>
<table> uses <caption>
I've been using HTML/CSS for ~2 weeks now.
I'm having trouble getting the text on my site to sit right next to the puppy thumbnail, rather than under it.
If I float both the text and the picture, they are side by side, but the text is first, not the picture. Why would this be? The text comes AFTER the picture in the HTML.
Here is the JSFiddle. I've never used JSF before so I hope I did it correctly. I don't know why the pictures in the JSF aren't working (the external link ones (puppies)).
http://jsfiddle.net/nhv54/
When lining up images and text, I like to use inline or inline-block elements rather than put them inside a block element. Here is an example that should work for your case in particular.
Html
<p>
Vertically centered text
<img src="http://www.suffolkdogday.com/wp-content/themes/sdd/images/dog.png" style="vertical-align:middle">
</p>
Check this out
http://jsfiddle.net/nhv54/3/
Things to notice in CSS
.pull-left * {
float: left;
}
And every div you want content to be on one line should have class "pull-left"
<div class = "ProjectsModules pull-left" id = "example1">
<img src = "http://royalk9.ca/uploads/images/_thumbs/beagle-puppy .jpg"/>
<div id = "ProjectsModulesText">
<h1> Jim </h1>
<p>
stuff
</p>
</div>
</div>
You can also set vertical-align: middle; on whatever tag your text is inside, presumably a p.
You could use inline-blocks
I updated your JSFIDDLE
http://jsfiddle.net/nhv54/16/
I've got some HTML:
<div id="thing">
<div id="contentheader">
<h3>Header</h3>
</div>
<div id="contentcontainer">
<div id="image">
<img alt="balt" src="imagesrc">
</div>
<div id="body">
<p>hegl gegl</p>
</div>
</div>
</div>
I need to push the h3 in 'contentheader' down alongside the image in 'contentcontainer' while having the body text sit alongside it. Everything is of variable width save the image.
Perhaps an image will demonstrate better:
As you can see, grey corresponds with 'thing', green with 'contentcontainer' and blue with 'contentheader'.
Editing the HTML would be a major hassle. I also can't make anything other than the image fixed-width. Is it possible to do it with just CSS? (It'd be awesome to be able to do it with floats and stuff but I don't know if it's doable)
I don't think you're going to find a perfect solution with CSS. You could use positioning but you would probably run into issues if you had a long title that ran more than one line.
If you're open to using javascript the following non-framework snippet would work.
// Add the header inside the container div just before the body
containerDiv = document.getElementById('contentcontainer');
headerDiv = document.getElementById('contentheader');
bodyDiv = document.getElementById('body');
containerDiv.insertBefore(headerDiv, bodyDiv);
You could recreate this code as a neater, one-liner using jQuery or another javascript framework.
Sure, heres the Css for a rudimentary setup:
http://jsfiddle.net/Nkapr/
Ask if you have any questions.
The problem here is the HTML structure, it's not been written really with your goal in mind (which is a bummer!)
If all you're after is pushing the H3 container 'contentheader' down in line with the rest of the stuff inside 'contentcontainer' you could set a negative top margin on 'contentcontainer' to pull it upwards, and then add a positive top margin to the elements in 'contentcontainer' which need to go down (in this case 'image') giving the impression that the h3 section actually sits in with the rest of the content. It's a bit of a hack but it might do the trick if you can't alter the HTML.
Thirtydot's answewr in the comments section solved my issue.