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/
Related
I have an image that, when clicked I'd like to take the user to the top of the page (it's a "back to top" link.)
I have linked the image using an ID to my 'navigation' div using the code below, as I have been told is the correct way to do so, but it does nothing.
Live site
HTML
<div id="navigation">
stuff in here
</div>
and
<!-- Back to top link -->
<div class="bottom">
<a href="#navigation">
<img src="images/back_top.png" />
</a>
</div>
This doesn't seem to do anything though, I thought the name attribute was deprecated and thus id's should be used instead but this doesn't do anything?
Since your #navigation element is positioned with position: fixed it is always on screen. You need to link to an element that will stay at the top of the document.
You could add in another element, or add an id to the body. Alternatively, change the position of the navigation so it stays in flow. Or, you could use JavaScript to animate a scroll to the top (e.g. with jQuery .animate and the scrollTop property).
Put this:
<a name="top"> </a>
right after/before your navigation div.
Then, change
<a href="#navigation">
to
<a href="#top">
P.S.: After looking at page-source, I'd suggest you put it just after the <body> tag.
you have linked it to something which stays already on the screen(Fixed positioned). link it something which is not fixed positioned .
Just to throw this out there for people coming along reading this... Linking to an A NAME is deprecated and not a best practice... Linking to an ID is the best way to go in the long run.
http://www.w3.org/TR/html4/struct/links.html
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'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).
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.