I'm trying to figure out which html elements or out of place because I'm wanting the two boxes to have the same spacing from the top as my register form. All the css is correct but not sure what elements are out of place.
Also if you notice on the register form box right below where it says Register For An Account there is a space between the the form area and that title which is not like the template. Why is that?
Welcome Page
Register From
Template
You are missing <div class="wrapper"> and <div class="box"> from your template, right after <div class="background"></div>
#content-wrapper { top: 250px; } should do the trick (or something similar to it).
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 have a ".ui.inverted.menu" top bar.
Now I want to add a "ui.sidebar.inverted.vertical.menu" below the topbar.
But I can't figure out how to do it, the sidebar will always push away the topbar, and not appear below the topbar.
Any ideas?
Thanks!
ps. Sorry for bad grammar.
You need to initialize your sidebar with a custom context.
Instead of doing something like this:
$('.ui.sidebar').sidebar();
You need to point the sidebar at the element that you want to attach it to otherwise it will attach to your main <body> tag and push away all content underneath it. In this case, the context should be a <div> element in the same hierarchy as your .ui.inverted.menu.
If your HTML looks something like:
<div class="ui inverted menu">
<a class="item">Open Sidebar</a>
</div>
<div class="otherstuff">
<div class="ui sidebar">
</div>
</div>
Your initialization code should look something like this:
$('.ui.sidebar')
.sidebar({
context: $('.otherstuff')
})
Here's a very quick demo (you may need to tweak some CSS styles depending on your own content) http://jsfiddle.net/8po0b10v/
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.
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.
I am pretty new to web design stuff but what I understood from DIV tag is that I it like a logical container for what ever is inside it and those thing will follow its rules..
so now I have an outer DIV tag defined as <div style="margin-left: 10px;" >and I have put some textbox, buttons, comboboxes inside it...now I also have a HyperLink that I want it to be there BUT I want this one to be at the right hand side , aligned to right , so I defined another DIV like <div align="right"> and put the hyperlink insde this one. they are all still inside that other outer DIV tho. but it is not going to the right...what is wrong and how can I fix it? I attached the picture, see I want it to be like this picture, at the right hand side of that combobox...
thanks all
As long as you need to align inline element (your link tag) to the right, you can use text-align property of the style, and set it to right:
<div style="text-align:right">
blabla
</div>
there is no align. Do you mean text-align? That will affect inline elements within block level elements.
Try this:
<div style="margin-left: 10px;">
<p>Reason for Referral</p>
<input type='text'></input>
<div style="display:inline"><a href='#'>Not Found?</a></div>
</div>
Maybe its below the combobox becouse the text is too long to fit in the outer div? that would make it go one row lower.
If you have something like:
<div class='group'>
<p>Reason for Referral</p><br/>
<input type='text'></input>
<div class='right'><a href='#'>Not Found?</a></div>
</div>
Then in css:
div.right {
float: right;
}
You should get something close to the effect you want.