I'm trying to set the width of the slider to be 750px so that it fits within the Facebook canvas and doesn't bring up the scroll bars.
http://www.facebook.com/pages/GolfffffffSteadyyyyy/213226708784235?sk=app_315085095232861
I can't seem to effect the "element.style" which when I inspect it, it's set to 6032px. How do I control/override the element.style?
Inspecting your link, I've found that the problem is originated by the .container:
UPDATED IT TO THIS CSS
.container {
background: none repeat scroll 0 0 #FFFFFF;
margin: 0 auto;
overflow: hidden;
width: 800px;
}
This solves your issue.
Also, take into consideration that you are setting the .container with width:900px;, and the #contentArea where it is inserted as a width of width: 851px !important;.
Related
I am trying to build a two column design with an Angular 2 app. I created a plunker to reproduce my problem: https://plnkr.co/3Evxm9?p=info
I want the scrollable area to be the red div (.overflow), not the .page. Without the .page { overflow: auto } the page won't scroll at all, though I would expect .overflow to do so since it has a defined height of 100%. The padding is there to offset from the .top div. I initially though using margin instead, but without the overflow: auto on .page, the margin goes outsides the bounds of .container (which shrinks to fit the height (padding included, margin excluded) of .overflow.
I seem to misunderstand the behaviour of the flexbox.
I made some adjustment to your css to make the red area scrollable only.
css:
.page {
width: 100%; height: 100vh;
background: red;
flex: 1;
overflow: hidden;
}
.overflow {
font-size: 30px;
padding-top: 64px;
height: 93vh;
overflow: scroll;
}
Thanks for providing a plunker. It helped a lot to find a solution for you. Here's the link to the edited plunker.
Hope this helps!
I'm currently learning web design and I was solving some sample problems online, there was one specific case when I was asked to:
Write a CSS rule that limits the width of the webpage to only half the size of the browser and centers it in the browser window.
Add a CSS rule, to the rule above , to display a green background color that fills all the browser window including the empty left and right sides.
For 2, I could use this:
body {
background-color: green;
}
But for 1, I couldn't do it. How do I get the size of the browser? It sounds confusing.
Set this CSS to your body-
body{
width:50%;
margin: 0 auto;
background-color: green;
overflow: hidden; //just in case if you don't want your any fixed width element crosses the body width.
}
All you have to do is set width: 50%;
Or if you want to set to maximum of 50%, use max-width: 50%;
To center, set margin-left: auto; and margin-right: auto;
this is very easy just one step you have to take try this
body {
width: 50%;
margin: 0 auto; //optional if you want your page in center
}
I know very little to nothing of jQuery or JavaScript. So after fiddling - and failing - for hours here's my question:
In the header of my website (http://dev.shespeakswithpassionmembership.com/index.php), I have got an svg image that shrinks on scroll. Great, it works!
But, what happens is: the menu doesn't jump next to the shrinking image. I want that because it saves a lot of space and it looks nicer.
This is what I've done so far:
The image is centered on load. For this I have added this CSS to the navbar-header:
.navbar-header {
width: 100%;
}
The image has got this CSS:
header.large img {
height: auto;
margin: 10px auto;
max-width: 100%;
width: 900px;
display: block;
}
When you scroll the image shrinks. As you can see the header has a class of .large and the image is shrunk by removing that class and replacing it with .small:
header.small img {
height: 49px;
max-height: auto;
width: 154px;
max-width: 100%;
margin: 10px 5px 0 10px;
}
This is done by this jQuery script:
function slabTextHeadlines(){jQuery("h1.slabbed").slabText({viewportBreakpoint:380,minCharsPerLine:10})}var App=function(){function e(){jQuery.browser.msie&&jQuery.browser.version.substr(0,1)<9&&jQuery("input[placeholder], textarea[placeholder]").each(function(){var e=jQuery(this);jQuery(e).val(e.attr("placeholder")),jQuery(e).focus(function(){e.val()==e.attr("placeholder")&&e.val("")}),jQuery(e).blur(function(){(""==e.val()||e.val()==e.attr("placeholder"))&&e.val(e.attr("placeholder"))})})}function r(){jQuery(".carousel").carousel({interval:15e3,pause:"hover"}),jQuery(".tooltips").tooltip(),jQuery(".popovers").popover()}function o(){jQuery(".search").click(function(){jQuery(".search-btn").hasClass("icon-search")?(jQuery(".search-open").fadeIn(500),jQuery(".search-btn").removeClass("icon-search"),jQuery(".search-btn").addClass("icon-remove")):(jQuery(".search-open").fadeOut(500),jQuery(".search-btn").addClass("icon-search"),jQuery(".search-btn").removeClass("icon-remove"))})}return{init:function(){r(),e(),o()}}}();jQuery(document).on("scroll",function(){jQuery(document).scrollTop()>100?jQuery("header").removeClass("large").addClass("small"):jQuery("header").removeClass("small").addClass("large")}),jQuery(window).load(function(){setTimeout(slabTextHeadlines,.01)}),jQuery(document).ready(function(){jQuery("#totop").hide(),jQuery(window).scroll(function(){jQuery(this).scrollTop()>100?jQuery("#totop").fadeIn():jQuery("#totop").fadeOut()}),jQuery("#totop").click(function(){return jQuery("html, body").animate({scrollTop:0},660,"easeInOutExpo"),!1})});
$(function() {
$('[data-rspnsv]').rspnsv({delay: 200, duration: 3000});
});
For the menu to jump to the right of the svg image, I need to remove the width: 100%; and to assign a width: auto; to it. I would like to do that by adding a line of code to the script above so that it not only replaces header.large with header.small, but does the same trick with the navbar-header.
Is there anyone who can append the script to do this? To me it would seem rather simple for someone who knows about jQuery (which I don't).
Thanx in advance,
Thom
This is a CSS question. It doesn't require any jQuery changes. Add this CSS
header.small .navbar-header{
width: auto;
}
If you want the menu to remain at the bottom, this is one way of doing that.
header.small #js-meganavi{
margin-top: 46px;
}
I want to make a div resizable with resize css property:
#foo{
overflow: hidden;
resize: both;
}
I can freely resize it with firefox.
with chrome/safari I can't resize it smaller than initial size.
their is a way to allow resize smaller with webkit? (min-width / min-height don't works)
see the live exemple from MDN (with 2 nested divs)
https://developer.mozilla.org/samples/cssref/resize.html
Better solution is to use :active pseudo class e.g:
div:active {
height: 0;
width: 0;
}
Example: http://jsfiddle.net/kronenbear/v4Lq5o09/1/
There is a small workaround that I found here, but it does work.
On hover, change the height and width to 1px
#foo:hover{
width: 1px;
height: 1px;
}
It sounds like this will cause a slight "flash" as the width and height are dramatically changing, but ... it is a hack.
I've been trying for hours but can't make it to work better than the hack, if I could just trigger a userresize I would be happy setting chrome's width to min-width then trigger resize to put it where I want, since it seems that you can move it back to original position after moving. But I don't find how to.
Using that live example as a reference, I was able to set the initial size to be equal to the width and height of the div, and the min-height and min-width to be the minimum dimensions allowable in Chrome.
#foo {
resize: both;
overflow: scroll;
width: 300px;
height: 300px;
min-width: 50px;
min-height: 70px;
}
div {
background-color: #acacac;
border: 1px solid #000;
}
<div id="foo"></div>
I have padding to the right of my archives and search page and I believe it has to do with my body element, however I'm not quite sure what is different on these pages are from the other pages on the site of which are all fine for style wise as they all use the same format. It's a wordpress website. As I said, it's only happening to this page and the search page and all others are fine, so I'm confused as to what it's doing.
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background: url(img/BG.jpg) repeat; min-width:1024px; }
body { margin: 0px; padding 0px; font-size: 13px; line-height: 1.231; background: url(img/NAV-bg.jpg) top repeat-x;}
header { width: 960px; height: auto; margin: 0 auto; display: block;}
#container { width: 960px; margin: 20px auto; padding: 0 1.5em;}
aside { width: 260px; height: auto; float: left; position: relative;}
#main { width: 650px; height: auto; float: right; position: relative;}
#footer { width: 100%; min-width:1024px; display: block; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; position: relative; top: 100px; }
If you decrease the size of your window you'll notice that a scroll bar on the bottom of the page shows up and then the padding on the right starts to take shape. If you make your window larger that padding space is then gone and the scroll bar on the bottom disappears. Have I restricted my body tag in any way to have this happen?
I've looked through this one but I already have a min-width defined.
Website has strange whitespace on right side of the page when the browser is resized to a smaller window
In your style.css file at Line 108, remove the width attribute from the header tag to fix your horizontal scrollbar issue.
Fixed CSS:
header { height: auto; margin: 0 auto; display: block;}
For review, 3D View in Firefox browser shows the header as the gray bar with is the root of your problem. The other styles that create the text are not affected.
Tip: Right mouse-click the above image and view in new tab to see in original size.
Ah, if I'm understanding your problem correctly, it appears that the tag header, specifically its style width: 960px, is what is causing this peculiar occurrence. The containing div around the header, #main, only has width: 650px. As a result, the excess width of the header causes it to extend beyond the edge of the div.
The reason why it seems to be appearing as padding only at smaller screen widths is because the containing div around all that, #container, is centered by its margins - so the effects of the over-wide header won't become apparent until the browser is thin enough such that its right edge begins to overlap the right side of the header.
Rather than fixing this by just dropping the width: 960px from the styles of the header (which may mess up the site where this width for header tags is actually needed), I would suggest adding an overriding class to all offending tags, perhaps on the lines of .archive-header { width: auto; }. But I guess the solution is up to you, since you probably know the site better than I do.
I hope this helps! (I really do, otherwise you'd have read all this for nothing! Sorry if you did...) For the future, try downloading Firebug for Mozilla Firefox, which has a handy element inspector which will let you play around with the styles of elements to see what works. It should help you spot these kinds of issues on your own, so you can fix them quicker.