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.
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>
So i'm looking to achieve something like this:
https://preview.ibb.co/fRidmR/example.jpg
So pretty much each color is a different div.Can it be done with only CSS? I tried a few things with transform: skew, but can't figure out how to make the one I want to be over the other and also the first one gets into the previous element each time.I tried with minus margin and more padding, but I want it responsive and it doesn't look good that way.Please help.Thanks in advance.
best I can think of is could have a series of nested divs, each with a graphic background that has a transparent area to show the background of the div it is nested in.
So the html code would be like this:
<div id='grey_bg'>
<div id='red_skew'>
<div id='black_skew'>
</div>
</div>
</div>
and then have the css code like so:
#grey_bg{background: grey;}
#red_skew{background-image:url(red_skew.png);}
#black_skew{background-image:url(black_skew.png);}
Otherwise, just have a single bg image for the element.
This is basically the site http://funkz.nfshost.com/
The bottom post with <div id="big-post"></div> element is floated to the left,
and the sidebar with <aside id="tab-lists"></aside> element is floated to the right,
but when i add another(or more) <div id="big-post"> element after the first one it moves the whole sidebar down with the post...
I've tried clearing, but nothing helped...I'm pretty sure the solution is simple, can someone help me?
<div class="some_new_div">
<div id="big-post">...</div>
<div id="big-post">...</div>
<div id="big-post">...</div>
</div>
<aside id="tab-lists"></aside>
CSS
.some_new_div{float: left;}
Remove float from big-post and then take a new element, inside that- put big-post element
Right-floated elements have to be placed before other elements, so you have to do something like this:
....
<aside id="tab-lists"></aside>
<div id="big-post"></div>
<div id="big-post"></div>
....
Your <aside id="tab-lists"></aside> element needs to occur before any of the<div id="big-post"> elements.
I've just moved it above the post div in chrome developer tools and could add another post successfully.
right goes over left in this case, your aside needs to be moved up in the chain, in this case above the big-post.
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'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.