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.
Related
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>
I just started using jsFiddle to make this (https://jsfiddle.net/travism2006/tp2y5pvu/1/)
body .main .leftAd {
border: 4px red dashed;
width: 160px;
}
Skip Links
<div class="header">
<ul>
<li><a>Coding</a>
</li>
<li><a>Web Tech</a>
</li>
<li><a>Data Fun</a>
</li>
<li><a>Robotics</a>
</li>
</ul>
</div>
<div class="leftAd">sss</div>
Can someone explain why the 'sss' disappears + the border not showing?
I played around with the fiddle and found that my ad-blocker was adding 'display: none;' to the elements with the "Ad" substring in them.
Renaming the elements from 'leftAd' and 'rightAd' to 'left' and 'right' made them display as you'd expect.
HTML:
Skip Links
<header>
<ul>
...
</ul>
<\header>
<div class="left-ad"><p>sss</p></div>
OR
<aside class="left-ad">sss</aside>
I would suggest you go back through your code because there are a lot of semantic issues that need to be addressed if you're trying to understand it better. What Vincent said may work, but it is not the best solution. Also the new semantic elements that are added to HTML5 cut down some of the code and make your code more understandable. It beats having to make divs and text elements over and over. Instead of using div elements you should use the header and aside semantic elements which can be used for headers and advertisements respectively. You can float each with simple CSS like you have done. Lastly, you shouldn't name the class attributes left and right by themselves. That is very general and it makes your code harder for others to discern. I used .left-ad and .right-ad and it worked just fine. If you have any additional questions I'm here to help. It's essential that you understand these concepts to make your code easier to read, debug if need be later on, and makes you really understand the semantics behind what your writing.
when I opened your fiddle, the HTML lacked a lot of content. Specifically, the sss that appears here but not in your js fiddle. When a div has no content in your case it collapses in on itself and that's why you see a flat red line because the top and bottom borders are lying on top of each other. In order to make additional space for the added sss container just add custom padding values etc.
<div class="main"></div>
Suppose I have the following html:
<div style="width:200px;height:200px;overflow:scroll">
...
</div>
If the stuff in this div ends up overflowing, the most popular way to change the scrolling position of this item is to use jQuery.scrollTop(). However, I have a situation where I would like to set the initial scroll position of the div using the source HTML. Is there a way of doing this? All examples I see online for doing this end up using javascript.
One way I tried is to write a scrollTop property on the element, like so:
<div scrollTop=20 style="width:200px;height:200px;overflow:scroll">
...
</div>
However, this does not work. Surely, there must be a way to set the initial scrolling position of an overflowing item via HTML/CSS...
Here is a full version of this code that illustrates that it doesn't work- The vertical scrollbar remains at "0": http://jsfiddle.net/gueBZ/1/
Can anyone help me to make it work? Thanks so much for any pointers!
<div style="width:200px;height:200px;overflow:scroll">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="hello">autoscroll here</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
then open the page as
page.html#hello
this is the only thing you can do, with HTML only
I'm wondering if anybody knows the meaning of this tag I found in a valid html file I've downloaded.
<div style="clear: both;"> </div>
Thanks for help in advance.
It clears the floats from both left and right in order to bring the content after it back into the main flow of the page.
Official definition.
The technique is known as a "spacer div" - the article is now ten years old and at the time this was a good solution to a common problem. It typically appears in scenarios like this:
<div class="container">
<div style="float:left">
...
<div style="float:left">
...
</div>
<div style="clear:both"> </div>
</div>
The inner divs are floated - if you simply left out the "spacer div" the container element would not completely enclose its contents (unless you float it itself, which is often impractical). The is needed in some older browsers (you know which one) to ensure it behaves as expected in all situations, i.e. a simple <div style="clear:both"/> didn't always work - you really needed a div with actual (though invisible and nonsensical) content to make it work everywhere.
It's a working solution to a common problem, but there are more elegant ways to solve this, e.g. using the :after CSS pseudo class. This is more elegant because it doesn't require us adding semantically worthless markup elements that are just there for styling purposes. Another great article with a different solution.
This tag will not allow any float to be place either left or right of this tag.
I have a JPEG image that I want to slice into HTML, I am little confused about positioning things into divs. Can anyone suggest me how can I do this I am sending the jpeg along with the question.
Regards
Umair
I would look at what pieces seem to contain themselves. For instance, the fill out the form box would be a div, the legal info at the bottom would be a div, the why use online box would be a div, the 2 header pieces would also be a div. You could wrap the entire thing in a div and use a css sprite image (CSS Sprite article) for the background gradient.enter code here
<div id=pageWrapper>
<div id=header1>OnlineGrantFinders.com</div>
<div id=header2>Looking for grant money?</div>
<div id=mainContent>
<div class='infoText'>You can apply for grants ....</div>
<div class='infoText' id='whyUseUs'>Why Use Online Grant Finders.com....</div>
<div id=fileForm>Fill Out the form below....</div>
</div>
<div id='footer'>This website is owned...</div>
</div>
The css shouldn't be too difficult from here. If you don't know about floating elements I would look into that and learn how to clear them as well. The fileForm element would be best as an absolutely positioned element I would suspect.