I've setup a vertical set of tabs as outlined here. However the content area only extends about halfway across the page.
I've been trying to adjust the CSS to allow it to flow to the far edge of the page by adding width='100%' attributes to various UI CSS-tags or playing the built in width attribute values and it does extend the window but it starts putting the actual content in the wrong place.
For example if you remove the width: 55em from .ui-tabs-vertical the white container area does extend fully but the 'hello' text appears in the following spot:
How can I adjust the CSS to allow the content area to full the page width but still start at a nicely padded left side of the vertical tab list?
JsFiddle example
If setting width might fix it, try doing this one :
width: calc(100% - 162px);
162px is what I assume the width of the left sidebar.
Changing the .ui-tabs-vertical .ui-tabs-panel rule from
.ui-tabs-vertical .ui-tabs-panel
{
padding: 1em;
float: right;
width: 40em;
}
To float: left
.ui-tabs-vertical .ui-tabs-panel
{
padding: 1em;
float: left;
width: 40em;
}
Appears to work as expected.
Related
Kind of a conundrum. I have a div that is full height of browser with a background set as 100% size, and image content, in two inline divs set to vertical-align middle content with each other.
One of the divs, the image is "bigger" than the view port (this is needed unfortunately), so I have overflow: hidden set to the containing div of these two inner divs to hide whatever is outside the viewport (height 100%)
I know its sound weird to explain, so I set up a CodePen
https://codepen.io/deelite310/pen/bjvKPG
The issue I'm running into are several:
1) The right div content since the image is bigger than the div full height, its causing the left div content to "vertical align" with that full height, instead of the containing DIV's 100% height. That means the left div content is disappearing in the overflow: hidden;
2) When resizing the browser up and down (so say a view port of 1680x600), the content in the main section is covered up by the footer area (so the images disappear or are being covered up, the background isn't resizing down, etc)
so my questions are:
1) Resize divs and content if browser is not a normal viewport settings (like 1680x600) so that the main section shows fully, without the footer covering it up
2) Where both divs in the main section, show all the content, despite one side having content extending past the and hidden by overflow: hidden;
some of my CSS, you can see the whole thing at the CodePen link above
section {
width: 100%;
min-height: 100%;
display: table;
height: inherit;
margin: 0;
padding: 0;
background: url("https://placeimg.com/1000/400/tech/sepia") no-repeat center top;
background-size: 100%;
}
#hero #col {display: inline-block; width: 50%; verticle-align: middle;}
#hero #col:nth-child(1) img {width: 65%; height: auto;}
.place {margin-bottom: 20%;}
#footer {width: 100%; height: 400px; text-align: center; border-top: 1px solid #000}
#footer p {font-weight: bold; font-size: 32px; margin-top: 3%;}
To solve your first issue I would try, instead of a vertical-align, to add a float to your hero and col id. By the way, as your using the id col twice it would maybe be appropriate to use a class instead.
If using the float, you would have to add a clear to your footer probably but it should work. And, with the float, reduce a bit the width (48 or 49% instead of 50%) should help because, by adding borders you end up with more than 50% in width which can explain why the second block goes under the first one.
For the background-resizing you can still use a background-size:100% 100% however; be aware that your image can, with that method, appears weirdly, it'll end up distorted in some cases.
For your images size, I don't really understand why you go through a nth-child use. but, anyway, you can use overflow:auto instead of overflow:hidden which will allow a roll box to appear, meaning that your content won't simply disappear has it does with the hidden attribute.
It's the first time I ever answer to someone here. Hope it'll help...
I want to create a simple side-navigation that takes up the entire screen's height. I am using Milligram for my base, and I want my side-nav to work with it. I have the following set up:
Codepen demo
As you can see, my sidebar is the following element
<div class="sidebar"></div> with the following styles:
div.sidebar {
position: absolute;
width: 250px;
height: 100%;
z-index: 99;
background-color: black;
}
This sort of works, the sidebar appears above all else, but everything else does not get pushed to the side. And if the screen is small, the content clashes with the sidebar.
How can I make it so the sidebar pushes everything else (including the navbar) to the right by 250px(its width)? I know this will make things unusable on smaller screens, but I will give the user a way to toggle it.
Any help is appreciated.
You can set the left margin on your equal to the width of your sidebar.
section .container {
margin-left: 250px;
}
PROBLEM: I want to create an two sidebars running the entire length of their parent container, that are truncated by a footer, and are also responsive.
It appears that there are several techniques, but for the moment, I am choosing to attempt it using large negative margins & padding. I am basing my efforts from this example (http://jsfiddle.net/yJYTT/)
After adding the following CSS to the right sidebar (with id="aside_secondary):
#aside_secondary {
float: right;
width: 17%;
background-color: #ececec;
padding: 14px;
margin-bottom:-8000px;
padding-bottom:8000px;
}
I do indeed get an effect similar to what I want, but if you look here at the result (http://jsfiddle.net/danieldropik/rjyvR/4/), I have the following problems:
The light gray right sidebar(id="aside_secondary") extends beyond the darker grey footer, when really, I want the dark gray footer to be the very bottom of the page. (NOTE: this problem doesn't occur in the fiddle that I am using for a refrence(http://jsfiddle.net/yJYTT/)
Here is a photo:
I find a working solution, first modify your css for the sidebar_right (remove the padding and margins):
#aside_secondary {
float: right;
width: 17%;
background-color: #ececec;
padding: 14px;
}
Then play with jQuery, when the page finish to render (or when the sidebar are rendered) launch this:
$("#aside_secondary").css("height", $("#aside_primary").height());
This puts the height of the sidebar_left to the sidebar_right.
When you don't know if the input text can be viceversa (height of the right is greater than the height of the left), you can do something like this:
function fix_sidebars_height() {
var left_sidebar_height = $("#aside_primary").height();
var right_sidebar_height = $("#aside_secondary").height();
if (left_sidebar_height <= right_sidebar_height) {
$("#aside_primary").css("height", right_sidebar_height);
} else {
$("#aside_secondary").css("height", left_sidebar_height);
}
}
// then call when the render is complete
fix_sidebars_height();
You should fix the height with the jQuery, because the smaller sidebars "doesn't know" the height (how much content) of the other.
Added JsFiddle DEMO
I'm struggling to get the text of a rotating banner (the text in red) aligned to the right (to the left of the social icons). It would be too long to post the code here so here is a link where you can see it in action (note that I'm using modern-ticker plugin).
I suspect that this could come from the below code (part of modern-ticker.css) but when I change it to float: right the text disappears. I also tried text-align: right at various places without success. Thanks for your help!
.mt-news li {
float: left;
}
Floating elements get as wide as their content, so you need to specify it in order to be as wide as the container (in this case the container is very very wide but the visible area is 400px wide).
.mt-news li {
width: 400px;
}
More changes
In this example, you don't really need the parent to be very wide and the lis to float because you're fading them in a way that they're not displayed at once. I would recommend:
Remove width: 50000px; from ul
Remove float: left; from li
Remove float: left; from .mt-news
That is if the real live situation won't be different from this example.
At cjshayward.com/index_new.html, there is a wrapper div around the body's content, about 1000 pixels wide, and it works as intended for the top 100 or so pixels in Chrome and Firefox. Next down the page is a jQuery UI set of tabs, containing a fixed-width accordion and something close to jQuery.load()ed plain old, simple HTML.
However, on the "Browse the Library" tab (but not "About the Author"), which is presently open and which contains the fixed-width accordion, below 100 or 150px down, the area under the tabs appears to have the same width as the window; it has the correct left margin, and horizontally scrolls an apparently equal distance to the right. Furthermore, the body background tile does not display; the whole width is white, as was specified for the wrapper div's interior.
How can I get the "Browse the Library" tab to display as intended (like the "About the Author" tab does)?
Thanks,
You're absolutely positioning way too much and that's ruining the flow of things. I'll go through a list of edits you can do to make this work.
/*
#accordion and #details will be floated, so we'll need to
clear #tabs. Add this property.
*/
#tabs {
overflow: hidden;
}
/*
Remove the absolute positioning from #accordion, along
with the top and left properties and do this instead.
*/
#accordion {
float: left;
width: 400px; /* This already exists */
margin: 0 10px 0 0;
}
/*
Remove the absolute positioning from #details, along
with the top and left properties and do this instead.
*/
#details {
float: left;
width: 580px;
}
This will get you a lot closer. You should also try to avoid using height on these elements. Let the content dictate the height.
Here is what i ended up with making those edits: http://i.imgur.com/niizuoR.png
Okay lets make a step by step solution (watch for the edits).
Background
Your background is set in the body. So the body needs to be extended to fill the whole page.
I would recommend this way but there are others.
body,html{
height:100%;
}
Normally the body would fit its contents but with position:absolute this mechanism doesnt work anymore.
Also remove background: #fff css (normalize.css) from the html.
html {
background: #fff;
color: #000;
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
Also your background scrolls with your content. Set background-atachment: fixed to change this.
Wrapper
Same counts dor your wrapper which holds the white background.
Set its height to 100% too.
div#main {
height: 100%;
}
The reason why your content is bigger than your wrapper is that
<div id="details" style="width: 713px; height: 0px;">
this div holding the content has a fixed size set. Removing that size make it fit the wrapper.
The width seems to be set per javascript in the load event, so I cant help you with that. Provide your .js code and may i can help you with that too.
As stated in the comments, your layout issues are based in your use of absolute positioning rather than flow layout:
I went through your site and quickly switch everything so it was positioned statically (width floats, not absolute values) and this cleared up the issue. There were some other issues as well. You probably need to look over how you are setting up your HTML from the top level on.
I would start out again and concentrate on using floats for your layout, rather than absolute positioning.
For a basic example on doing so, here is a super simply page: http://cdpn.io/kmCFy