I've looked all over google and to be honest there aren't that many articles to answer a question as specific as this one , and i've tried going through the interface.
So when you make a new page , you have a body , and by default , that body has some margin's between it and the browser window , now i've managed to take care of the top and bottom one so there's no padding on the browser window ( a.k.a. margin's on the body ) but there's still space between the browser and the body on the left and the right side.
So how can i make my body's width be 100% of the browser's window because there's no width setting for the body , but only the page ( the browser window area).
body {
margin: 0;
padding: 0;
}
Okay here is the best I can do...
Aside from going to Page > Page properties > metadata and adding your own css file. what you can do is go to the rectangle tool and expand it to whatever height you want, however you MUST make sure that you expand the width to the edges of the web canvas past the body border until the tooltip displays 100%. afterwards embed whatever you want in there. but bewarned, the more complex the object the more custom coding you need to add.
Hope this helps
There is a way to make an object 100% the width of a browser. It's not so obvious and it's hidden:
Draw a rectangular box and fill the box with photo (scale to fit), set color to none.
Resize the rectangular box to the same width of the canvas (page size).
The combination of the procedures above activates 100% width on the object.
Be sure you are using "browser fill" and not just "fill".
The fill one will fill in a box in the center....
Browser fill will literally fill the whole page. Got stuck on this for ages!
There is a simple one-click solution for 100% width, which I just came across in this awesome article after having trouble getting my footer to go all the way across on wide screen laptops...
In your top toolbar between the X/Y and W/H inuts, there is a little box with an arrow that points either way. Hover over it and you will see that it says '100%'.
click it and you're done!!!
:-)
http://www.designeasy.co/2014/07/5-very-cool-tips-for-adobe-muse-cc-2014.html
insert the following code into your header tags as follows (Where theme.css is the name of your css.)Now, go to you css and enter the css given to you by user255
Open your page in adobe muse Go to "Page properties" select "Metadata" From Page properties and add the following code to HTML for <head> area:
<style>
body {
overflow-x:hidden;
}
</style>
Related
I have managed to embed a PowerBi Dashboard into a webpage.
Unfortunately, it looks hideous. For example, the padding is ridiculous; The title is stuck in the top-left corner, which I'd like to remove; all the content is loaded into an iFrame, which if I do not set the height and width, makes the dashboard near-invisible and non-responsive (in terms of window scaling); nothing is centred...
I have tried overriding the CSS. For example, I tried to set the display: none !important; property on the header (to remove the title), but it has no effect. I also tried changing the background color of the iFrame from grey to match the color of the webpage, but that too did not work.
Does anyone know how I can style my PowerBI dashboard and embed it without an iFrame (is this even possible?)?
As far as I know, at the moment, it's not possible to embed anything from PowerBI to a web page without an IFrame.
Do you really need a dashboard, maybe a report would do it? At least you'd be able to place the components as you like.
I had the same issue. I managed to use CSS to re-style the iFrame for both reports and dashboards.
I'm using an angular project and added the CSS to my component that is displaying the Iframe.
border-width: 0; //Removes Iframe horrible border
I also adjust the height, width and position.
If you struggle to find what element to change the CSS, use the inspect element in Chrome and test by changing some CSS on each element.
I was able to hide and change the position of the title when I found what div it was in with:
visibility: hidden; //true to show
text-align: centre; //left or right
I have an image in my header that I would like to crop whenever its DIV is narrower than the image itself.
Here's the page when I scale the browser window down: a slider appears and you can see the grey body
Here's what I would like to happen: for the div to be cut off, and you can't see the rest of the image without scaling the window back.
It would be ideal if this was the property of the div, rather than the image, so that whatever other object is placed in the div, behaves in the same way.
I'd love to post a more in-depth illustration of the problem, but I've lost my previous account and I don't have the reputation to post the links/images.
I've already tried overflow: hidden and it doesn't do anything for a single object (it hides additional objects though).
EDIT: Ok, so here's where my mistake was: I typed in overflow: "hide" instead of "hidden", now it works perfectly. Thanks for the answers!
set
overflow:hidden;
at your container DIV
use overflow hidden like this on the parent element(.slider in your case I guess)
.parent{
overflow-x:hidden
}
http://primoburgers.herokuapp.com/
I am working on this website. It looks fine on my laptop, but when I load it onto a bigger desktop monitor, it has a red bar under the html tag at the bottom of the page. This red bar shows under all of the pages. Does anyone know how to remove this?
Thank you for taking the time to look at this!
You need to set your html and body elements to height: 100% first.
After that set top-pic-wrapper to height: 85% or so. % height wont take effect till the other parent elements also have a height set for them.
No need to define a height for your menu pic class.
Just change your class below
.heightMenuPic {
height: auto;
}
Not sure how to best ask my question. And I can't yet post screenshots. :( This issue does happen in mere current coding practices. You can currently even see this issue happening on Facebooks home page.
Here's my URL:
www.alpacanation.com
How to replicate live
Grab the right hand side of your browser and pull inwards. Eventually a scroll bar appears. Not necessarily bad. As I have a fixed with here. However… Notice the scrollbar is the length of the background color up in the top of my header which is actually creating a "Curtain" like effect.
Make matters worse:
If on other high level parent elements like .Footer or .Page you play around with overflow and position relative the curtain will then begin overlaying on top of the entire site.
Check out Facebook: They often have this issue as well. Obviously most don't notice it as it's not going over top of the content.
In either case I know there is something not right.
Help appreciated!
Add something like this to your CSS:
body { min-width: 980px; }
You have min-width: 980px; set in many of the elements on your page, but not on html, body, or .container. Once the viewport is smaller than this, these elements will overflow html and give you the scrollbars you're seeing.
But this doesn't make html any bigger. It--and its background--is still at the viewport size. This is why you get the "curtain" effect when you scroll.
Setting width: 100% on html doesn't fix this; this only sets html to 100% width of the browser window. If you're going to use min-width, make sure you you don't just apply it to elements that hold your content, but also those that have your backgrounds.
to fix this, add
html, body {
min-width: 980px
}
in your www.alpacanation.com/styles.css:40, then you are done. :)
EXPLANATION: the problem is this container,
<!— stat container —>
<div class=“container”>
<!— START FOOTER MENU SECTION —>
that container has width:980px which screws up the view because it forces that container to stay at 980px wide while the rest is shrinking, thus creates the ‘curtain’ like effect.
I have a header that is 100% of the page and should have a background-color.
Then I have my content div centered and along width that an extra div to the right for ads.
When shrinking the window so that all content + ads doesn't show I have a horizontal scroll which works great except for that the header looses the background-color for the part which was outside the viewport. How can I get the background-color to run all the way?
A simple solution is to set the top background-color on body instead but we'll want the same design on a future footer. We can't use multiple backgrounds because of browser support issues.
Example page: http://niklasholmberg.se/test.html
As others have pointed out, the problematic thing here is that your "right" column is taken out of normal flow and is therefore not actually part of the "page". Browsers are (IMO) correct in not painting the background all the way to the right in the "head"... but (again IMO) wrong in even allowing you to scroll to see the right column when it is outside the page bounds.
If you set overflow on the boby to hidden you solve the problem of the background... but of-course you don't make advertisers happy that way :)
Suggestion
Maybe it is enough to get what you need:
#fakebg {
position:absolute;
top:0;
width:1102px;
background:#000;
margin:0;
z-index:-1;
}
http://jsfiddle.net/Mfsx6/1/
In summary: I added a dummy div to the head with the same offset placement as the right column. This gives us a surface there to add a background to.
I think the problem you're having is not that the background doesn't run all the way. It's that the content DIV is being resized by your use of right:-200px; That essentially makes the content DIV 200px larger than it should be, pushing it outside of the BODY.
If you set #right to use right:0px; the problem no longer exists.
I'm not sure if that renders correctly for your needs though.
V.
Set the min-width value for the #head. For my resolution it is working perfectly with min-width:1102px.
try this out.
Going further on #Martin Westin's answer, to make it work for any size window dynamically:
I added a div with id = "full-width-bg" to the header where I needed the background to stretch all the way across. Custom.Toolbox.getFullWidth() gets the actual size of the DOM whether it is in the viewport or not, so it includes overflow and the entire width of the page. Then we set the width of #full-width-bg to the full width.
window.Custom = window.Custom || {};
Custom.Toolbox = {
init: function(){
Custom.Toolbox.fixBG('#full-width-bg');
jQuery( window ).resize(function() {
Custom.Toolbox.fixBG('#full-width-bg');
});
},
getFullWidth : function(){
return Math.max(document.documentElement["clientWidth"], document.body["scrollWidth"], document.documentElement["scrollWidth"], document.body["offsetWidth"], document.documentElement["offsetWidth"]);
},
fixBG : function(selector){
jQuery(selector).css('width', Custom.Toolbox.getFullWidth() + 'px');
}
}
jQuery(function(){
Custom.Toolbox.init();
});