I'm building a tab bar in css, and want it to be able to handle having more tabs than can be shown on the screen. My HTML is structured roughly:
<div id="tabbar">
<div id="tablist"></div>
</div>
css:
#tabbar {position:absolute;width:100%;height:24px;overflow:hidden;}
#tablist {position:absolute;top:0px;left:0px;height:24px;}
div.tab {float:left;}
with all tabs inserted into #tablist. So long as the there are few enough tabs that they don't overflow, #tablist shrinkwraps correctly and I can get their collective widths. However, as soon as there are more than can fit on the screen, they wrap to the next line (though you can't see it, obviously, due to #tabbar's overflow:hidden), and #tablist's width ceases to accurately represent the total widths of the tabs.
I could set #tablist's width through javascript manually, adding the total widths of each tab, but this seems an awfully messy and error-prone approach. I could also use a table, but I'd rather not since it violates the whole css-for-layout theory.
What I'm looking for, in essence, is a means to shrinkwrap a div around its contents without its contents being wrapped to a second line due to the width of the div's parent.
EDIT: The purpose of this is to build a tab bar which allows the user to scroll when there are too many tabs, but in order to do that I need to know when the width of #tablist, or the total widths of all tabs, is greater than the width of #tabbar, so that I can activate the 'scroll right' button. I also need to know the exact width, not just the fact that it's wider, so that I know how far it should be able to scroll.
From what I understand, you want to keep the tabs on one line even if they're not shown on the screen, perhaps you'll be scrolling them? I could be wrong, but if I'm correct - you can simply set a big enough width on #tablist to float all tabs, which will then be hidden by the parent (#tabbar) overflow:hidden.
#tablist {width: 10000px}
Related
I have a website on which one of the pages should not be scrollable (the entire page should fit on the client's screen). On this site I need to have a list of selectable objects in a column, which could potentially be quite large (it will certainly eventually overflow the screen)
I have stored these items in a <v-list> component and ordered it to scroll when it overflows. The problem is however is that it is forcing its parent column to increase in size when the number of <v-list-item> elements is too high, destroying the non-scrollable page layout. It seems to be because all of the actual <v-list-item> components are still being rendered, which is stretching out the <v-list>, despite the fact that it is set to overflow when it reaches 100% of its parent height.
I am able to sort of fix this by defining max-height in terms of px. But this is not an acceptable solution because it needs to be fully responsive.
This is demonstrated in the codepen. The list in the purple column (initially commented out) should make the list scroll when it becomes larger than the purple column's height. But, instead, it stretches out the entire page height and makes everything render with a different height before finally starting to scroll.
Codepen link
The orange column is basically what I want, but obviously with max-height being defined in px it wouldn't necessarily be right on everyone's screen. But it should look sort of like this:
All colours are just for referencing.
As a final note, we did find some oddities about the fill-height parameter being used in <v-container>, apparently it is deprecated? But it was the only way we could consistently get the full page height to render properly before adding everything else.
I think I got what you were looking for: https://codepen.io/tino-hb/pen/eYvdMXO?editors=1000
It is a slightly different base layout, but I think it will do nicely and match your use case.
The keys are the 100vh for v-main and the combination of flexbox and max-height: 100% around the grid columns and lists.
<v-main style="height: 100vh;">
...
<v-col style="max-height: 100%; background-color: magenta;">
<v-list class="overflow-y-auto" style="max-height: 100%">
...
...
</v-main>
So my problem is this - I have a div with fixed size of 970px. Inside it I want to create a horizontal menu where the first element will be a link to the home page with the logo of the company and the others will be standard links to different parts of the page.
What I want is to make the link with the logo wider than the other links and let the other links occupy the space left equally. Due to the fact that in near future the width of the container div may be changed even though I know the number of links I would like to use percentages to determine their width so the width of one link will be = (width of the div - width of the logo link)/5 (the number of link I'll have.
I tried with something like this
<div id="main-container">
<div id="logo-container">
</div>
<div id="standard-menu-container">
</div>
</div>
But I couldn't make it work (In fact all this is wrapped in one other div that I haven't shown here). So googling about this I get to the understanding that maybe using some sort of table may solve my problem. To be honest I have never used table this way but I followed an example and I got this result : JSFiddle Example where the red rectangle is meant to be my Logo link and the problem is that everything else is stacking under. In this particular example the logo link is excluded from the <ul> but I played around with that case too and simply trying to set one width in pixels and other - in percentage seems to be not what I need to do.
I would appreciate any help, just bare in mind that I tried a lot of styling with divs and display: inline-block and it breaks other parts of my structure so I would prefer a solution where the normal flow is not disturbed (like using a table for example)
You're on the right lines with the display: table-cell. I've made a few changes where you had extra code that wasn't needed, and set the <ul> to display: table, rather than the container. Adding table-layout: fixed will make items in the list (the cells) occupy an equal width.
Then, float the logo left, don't specify a width for #main-menu-navigation because then it will fill remaining space, and give it margin-left: 150px to cater for width of logo.
So that won't make much sense when read. Take a look here:
http://jsfiddle.net/LREbC/1/
Try resizing, the cells will adapt to the width.
Note: When using table-cell you don't need to define a width, the behaviour is the same as actual table cells.
So, I'm working on coding my first site. It's a lot of googling for hours, then putting down the code, but I'm struggling through it, and enjoying it. However, I have a problem I've been unable to solve.
I am trying to get a div that fills the whole page by default, but that also expands when text goes past the "100%" height. I've tried using the two seperate divs to accomplish it, and it's worked. However, I am trying to use a semi-transparent div, meaning I can't stack two on top of each other, or else part of it (the "height:100%") becomes solid, while the other part (the div that expands to fit the text) is still semitransparent. Is there any way to make a div fill the remainder of the page from the point it starts? So that that way it could fill from the bottom of the 100% height to the rest of where the text fits? I would just space it using a margin-top characteristic, but the pages need to be elastic and be able to grow with the content. Sorry if this doesn't make sense.. It's hard for me to explain it without examples and being able to point. Haha.
I believe the CSS property you would want to use in this instance is min-height. If you give an element a min-height, even if the content is smaller than the min-height, it will render at that value. If the content is larger than the min-height, then it will expand to fit the size of the content.
I'm having a slight problem. Whenever I hover over the "SEO" option on my navigation in IE, the navigation breaks & moves to the side. This doesn't happen in Firefox. Changing the navigation to position:absolute fixes it, but then the main content becomes merged with the navigation. It all validates. Any help would be much appreciated!
http://www.joemarketeer.com
http://jsfiddle.net/eoJ1/Ra4tR/
Thanks loads!
The navleft and navright divs are resizing independently, which is to be expected given your design structure. But it looks weird as it comes down on top of the content below:
One suggestion I can give you is not to set the navigation bar width in %, which you have done for these two divs. If you set a fixed width (in px) or remove the width specification completely (in which case it will take the width of its inner content), a horizontal scrollbar will appear below the page when the width is small, which I suppose is fine. Also, use as few floats as possible as they break the flow of content in the document and are more prone to breaking layouts. Both these divs have a float:left, which can be dumped for more stable solutions. I'm saying all this because I think the breaking of the layout on hover is occurring due to these reasons. If you can take care of this, your problem might disappear.
So my suggestion is to have a single nav div with width: 100%. Inside this put two divs: navleft and navright with display:inline and widths a.) specified in px or not at all, or b.) specified in % but with some min-width in px. If you don't specify any width for navright, it will expand to fill all of the space on the right.
This way these two divs will not reflow independently.
Basically, toy around more until you get better command over CSS; I think more experience will automatically help you sort out issues like this.
Here is my site, first of all.
You'll notice that underneath the divider bar in the middle of the page, there are three columns, one with a form, one with text, one with links.
Now, resize the window to slightly smaller, and the right div will drop down to the next line.
Is there anyway to just not display that? So, the divs will adjust (I have a liquid layout) up to the point where they won't fit, then, instead of wrapping the div down to the next line, it just won't be displayed?
You can also achieve that with CSS only.
Just assign the following CSS attributes to #row4:
#row4 {
min-width:1202px; /* the exact value depends on the sum of the width of your 3 column boxes */
overflow:hidden;
}
This differs slightly from your intended solution, since the right box will stay partly visible when sizing down the window and will not immediately disappear completely.
Please be aware that min-width won't work in IE6. However, there are several ways to emulate the min-width property, if you need to support old IEs:
http://www.thecssninja.com/xhtml/ie6-min-width-solutions
You can give them a wrapper div with a min-width set and force it to use a horizontal scrollbar if it gets too small. The nice thing about a wrapper div is you can give it a max-width as well and keep things from getting wonky on super huge monitors.
I'm not a fan of horizontal scrollbars, but it beats completely removing content.
Ok here is what you should do
Wrap all three floated division on a parent div, something like this
<div id="parent">
<div class="form">......</div>
<div class="text">......</div>
<div class="links">.....</div>
</div>
Now to solve your problem give a fixed height to the parent div like
#parent { height:400px;clear:both; }
You would have to use Javascript to get the width of the viewport, then change the display property of the div that is wrapping to display:none so that it doesn't show up when the browser width is too small.