https://www.bootply.com/101100#
I have found this and Im using the code for the floating side bar on my website. However, I want to move the sidebar a bit more left. I cant seem to find the CSS for it or maybe i was looking in all wrong. I would appreciate your help. I've tried changing some codes using dev tools(inspect button on browser)
And also, is there a way to make this behave properly on mobile?
Thanks!
The sidebar is structured as the contents of a column in that example. It's aligned to the left edge of the first column, which is aligned with the left side of the row, and ultimately the left side of the container. This is standard Bootstrap structure. You might consider using container-fluid to expand the entire layout of your page closer to the edges of the viewport.
To retain the existing page width, you could pull the sidebar over with negative margin:
.sidebar-nav-fixed {
margin-left: -30px;
}
This shifts the sidebar from its normal layout in the grid.
You could also set it with respect to the viewport:
.sidebar-nav-fixed {
left: 20px;
}
These approaches may have undesirable side effects for smaller screens or mobile layout, however. It's better to use a standard layout grid pattern.
Related
I am working on ASP.NET MVC3 application using Twitter-bootstrap but I think that this problem is more likely to be solved with pure CSS still a bootstrap solution is also welcome.
I have a several links in my vertical menu (for the purpose of my example they are 3). Each menu has
width: 100%;
min-width: 40px;
The menu is within <p> and each paragraph is wrapped in div with:
width: 30%;
Here is my JsFiddle link. The problem is that as the screen get's smaller (smaller media, or just resizing) the menu is expanding towards the bottom but in my real design expanding is acceptable (desirable even) but I want this to happen towards the top of the page so the bottom line stays on the same level for all menus. How can I achieve that?
I think you might need to give it a height, since you only have width the browser only checks the X axis ! Try it out , height:xx%;
I have a header with a small horizontal bar right underneath it that serves as the main navigation for my site. When the window is full sized it works perfectly. But if the window is resized even a little bit smaller, the right-most menu moves down to the next line, as you would expect any floated element to behave.
Question: How can I make it so the navigation bar always stays on one line, resizing appropriately to the window size? I've tried changing the lengths to percentages, though this often causes problems since there are many components to the CSS.
Here is all the relevant code: http://jsfiddle.net/HSVdg/1/
Here is what I think is the main culprit, though I could be wrong:
.menu2 li {
position: relative;
float: left;
width: 150px;
z-index: 1000
}
Some notes on the above link:
I am using Tiny Drop Down 2 (http://sandbox.scriptiny.com/tinydropdown2/) for drop-down functionality (in the form of JS and CSS, which are noted in comments), though the drop down is not actually working in the jsfiddle. I'm pretty sure all of the JS is irrelevant to my question.
The buttons are not vertically lined up with the actual bar, but again this is not the main issue since this is not happening on my actual site.
The window size in the jsfiddle doesn't actually accomodate the entire length of buttons, so you immediately see the problem of the buttons moving to the next line.
Any help would be immensely appreciated!
You can do this by using CSS display modes.
Just set the ul to have display:table
And the child list items to display: table-cell
The table cells will automatically adjust thir width to fill the parent table at any width.
You'll need to remove the explicit width from
<li>
and
<a>
to allow them to be automatic.
I've updated the fiddle for you: http://jsfiddle.net/HSVdg/13/
Hope this helps.
I'm building a site with various background images with content laid on top of it. The way I have it now is not working because when I view the site on a mobile browser, some of the elements get pushed to the left leaving an ugly white space on the right.
This is because the elements that are being pushed aren't contained within a wrapper. However, I am not sure how to lay out all of the elements especially with the various background images that they need to be laid upon.
I've created a simple image of how the divs are laid out.
Note: All the text 100% width, etc is referring to the divs under the red transparent boxes (the content). The actual site can be viewed here.
Can someone help me figure out how I should build the HTML properly for the layout of this website? For example, should I split the top half and bottom half to #top and #bottom with a wrapper within each? I'm stuck as to how I should approach this.
It seems that all your widths are based on pixels when (for responsive results) should be percentages.
What is ruining your iPhone layout seems to be the pinboard ID at 1122px with a margin of 47px. That is much wider than the other divs above and below.
However, fixed layouts can be applicable to mobile. See -> fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
I am an HTML/CSS novice and am trying to build a website for my wedding next year. On the main page here I have identical ribbon images on either side of my main div. What I want to happen is that the site remains centered no matter the screen resolution (showing more or less of the ribbons on either side depending on the resolution). It seems to work for the left ribbon but the right does not want to cooperate. The issue is particularly bad on iPads where the entire site appears left justified and the entire right ribbon is visible.
Any help would be welcome,
thanks.
apply the following css to html:
overflow:hidden;
applying overflow:hidden to the img won't work, the img isn't overflowing relative to its own width. (in contrary to how you think the overflow property would work)
Im trying to make a layout that uses the whole screen so I have not set fixed widths on the layout. I'm using percentages.
im working on this http://www.abdhulzaman.co.uk/work/rima
as you can see at the top i have a logo and a header on the top left of the header and also a navigation thats position absolute to the right. now when i minimize the screen.. the nav and the logo header will overlap which is really annoying.
anything to do with position absolute/relative? This may seem very simple.. would appreciate then help! thnx :)
its something similer to http://jsfiddle.net/YFCWm/
Is the size of your navigation dynamic? If not, you could just set a min-width for your header (although it'd be better to set it in a container that wraps your entire site).
If you're just beginning with css and layouts, it can be a good idea to use a grid based framework like twitter bootstrap or blueprint css.
http://twitter.github.com/bootstrap/
http://blueprintcss.org/
Using one of those will make your layout problem trivial.
A quick fix to your problem would be to give the nav element a margin on the left side
margin: 0 0 0 230px;
That will prevent the nav from 'going' further left than 230px from the left edge of the header element.