Has anybody had the same problem when settting a list div it would display as an inset list instead of a full width list as shown on the website?
<div class="list" >
...
</div>
Related
I have a fixed div element at the top of the page. It can have varying height depends on word count. Underneath is a scrollable list. I would like the list to always appear a small distance below the fixed div element. So the margin top will be 10px. The set up is as follows:
<div fixed>
fixed item here
</div>
<div>
scrolling item here
</div>
You can use ion-header and ion-content to achieve this. Put the fixed header div in ion-header and the scrolling list inside ion-content.
P.S. you can even put ion-header and ion-content inside another ion-content if needed.
I have a simple set of tabular data in an unordered list. I need the table to stay fixed width and have scroll bars appear if the users browser is too small or if they shrink their browser. Instead, the unordered list is collapsing into itself:
http://www.actionmediadesign.com/unordered_list_table.html
I need that unordered list to stay fixed width, regardless of the window size around it. Thanks in advance for any help with this problem.
You should give it a fixed width but since you want it scrollable wrap t inside a div and give that div an overflow-y: auto; and then your whole page will not have a horizontal scroll and it will only be contained to the table.
Give your ul a fixed width:
#sortable_list{width:1560px;}
Update:
If you want the scrollbars to only appear inside your 'table' you should try wrapping your ul into a div with overflow-x:auto:
HTML:
<div id="table-wrapper">
<ul id="sortable_list">
[ Your li's here.. ]
</ul>
</div>
CSS:
#table-wrapper{overflow-x:auto;}
#sortable_list{width:1560px;}
Ok, so let me explain my problem here, i have a "typeSelector" that should be 100% of the page, and inside of it i want few divs that are "filters" and below them there should be a list. The filters could be 0, 1, or 2, so i don't know how much space will they take, and i want the list below them to expand for the space that is left in the container but when i put the list to be 100% the page shows a scrollbar... I want the page to fit 100% without showing a scrollbar and i want the list to expand for 100% of the height of the page and when there are more items the scrollbar should appear. When i remove the "filter" divs from the container the list is expanding good no matter how i resize the window, but when they are there everything is messed up.
Here's the layout:
<div id="ftsContainer">
<div id="typeSelector">
<div id="filtersContainer">
<div class="filtersEtc">
List filter here
</div>
<div class="filtersEtc">
List filter here
</div>
<div class="filtersEtc">
List filter here
</div>
</div>
<ul id="selectorList">
<li> test 1 </li>
<li> test 2 </li>
<li> test 3 </li>
<li> test 4 </li>
</ul>
</div>
</div>
I made a jsFiddle with my problem here:
http://jsfiddle.net/rb6WJ/
Hope someone can help.
Thanks!
Add the following jQuery code to your fiddle:
var fCH = $("#filtersContainer").height();
var tSH = $("#typeSelector").height();
$("#selectorList").height(Number(tSH) - Number(fCH) - 3);
You need to subtract also the margin-bottom of 3 pixels.
Working demo: http://jsfiddle.net/VVxY7/
In the main content area of this page, I'm using the responsive grid provided by Bootstrap. I want the table to occupy a column than takes up 75% of the page width and the filter to occupy the remaining 25%, so I've marked it up like this:
<div class="row-fluid">
<div class="span9" id="table-container">
<!-- table markup goes here -->
</div>
<div class="span3">
<!-- filter markup goes here -->
</div>
</div>
But for some reason the table is horizontally overflowing it's parent element (with ID table-container) and extending into the column that shows the filter.
table-layout:fixed will fix the problem, but you will need to set your columns' width, which might prove troublesome in a responsive context.
I am trying to build up a website with a Navigation bar on top of the page. It should be fixed on top of the browser when we scroll the page (like facebook or twitter), but not scroll with the page(like google search??). see Fig like:
seems like we should set the css attribute position of this navigation bar like
#nav_bar {
postion:fixed;
}
but why all those websites use a whole bunch of div to do this? Does all these divs make any sence? Like twitter:
where topbar js-topbar is the outmost div which size is 1583*40px, but I didnt find the definition of its size. And then it goes to global-nav->global-nav-inner->container, finally...container, which is acutually hold the navgation items like a list, a search bar so on and so forth. something Weired is that the size of it is 865*0px. For more information, you can view source of the home page of twitter.
And my question is : but why all those websites use a whole bunch of div to do this? Does all these divs make any sence? Why is a div which height is 0px can hold those navigation items?
why the 'many' divs?
The general idea is the more wrapping elements you have the more flexibility you have with regards to what you can achieve in styling with css. Obviously there is a limit, as you should also try to keep your markup readable and semantic. I would say many important or segregated regions in a site would benefit from three wrapping elements:
<div class="positioner">
<div class="padder">
<div class="alignment">
Menu Here
</div>
</div>
</div>
Obviously with the more semantic HTML5 elements you can make this more readable:
<header class="positioner">
<div class="padding>
<nav class="alignment">
Menu Here
</nav>
</div>
</header>
The reason for keeping a seperate element for padding is so that you can set specific dimensions to your positioner (i.e. header) and not have that calculation messed up on certain browsers (with old box modles) by the addition of padding.
The reason for keeping alignment seperate is because it will give you greater flexibility on the alignment tricks you can use.
The reason for using the header element is because this content will act as a header imo.
The example you give above, each element will most definitely have it's reason for existing and they will most probably all be used to achieve the layout the designer wanted with regard to css. Some times extra wrapping divs are also used as placeholders for content that may be AJAXed, this is probably quite likely when dealing with the likes of Twitter.
You can of course get away with using only a single wrapping element, but you will be limiting what styling and positioning you can achieve later on down the line.
why the height 0px?
There is a trick often used with positioning absolute layers in a relative location (rather than an absolute location) - and I believe this is the reason why you are seeing this, but the trick in itself isn't the actual cause of the height:0px. The trick uses the following construction:
<div style="position: relative;">
<div style="position: absolute;">
The content here will float outside of the document flow,
but remain in the correct location within the document flow
- in all viable browsers.
</div>
</div>
If you inspect the above construction, using any browser debug method, you will notice that the position: absolute; layer has collapsed to have no height (in modern browsers). This is the default behaviour of position absolute outside of the old Internet Explorer world (with no other positioning or dimensions settings), because an absolutely position element is taken out of the document flow and by default doesn't calculate anything to do with it's children.
If you wish to override this behaviour you can simply use overflow:hidden; (as long as the height has NOT been specifically set to 0px by some other class or by JavaScript) - this will force the element to calculate the dimensions of it's children and wrap them.
First of all use position:absolute; if you don't want it move with you when scrolling. position:fixed; if you do.
Second of all when you build a website the first thing you're going to have to do is decide how the structure of your website is going to look like. So the menu at the top will be
<div id="Menu"> </div>
Now you may want to create a header under it
<div id="Header"> </div>
Under that you want to share content, since thats what website do.
<div id="Content"> </div>
Under that you may want a footer, that says 2012 Copyright etc.
<div id="Footer">2012 Copyright zoujyjs © </div>
Now you may want to center everything. Why not just put all these previous divs inside a wrapper div. Then all we have to do is center the wrapper div.
<div id="Wrapper">
<div id="Menu"> </div>
<div id="Header"> </div>
<div id="Content"> </div>
<div id="Footer"> </div>
</div>
You could also add stuff like a logo inside the header, etc.
I think you get the idea. But isn't it obvious you're going to get "divception" then?
Also: When no height is specified on a div, the div will automatically resize with the content within.
<div style="background-color:black;">
<!-- Nothing will be seen on your page, because the div is 0 height, 0 width by default -->
</div>
<div style="background-color:black;">
Height of the div will now be the same height as the height of this line. (15 px by default I believe
</div>