I have one more problem to solve before I can call my first website done, and I would greatly appreicate the help of this community.
You can see my website for yourself at www.dylanbisch.com
The problem I am trying to solve occurs on the homescreen between the class artdesign and tumblr-wrapper.
Basically, the class "artdesign" contains the two circular buttons and the class "tumblr-wrapper" contains the black and white photos on the homescreen.
My problem occurs if you shrink the browers window and then try to scroll left and right. Instead of scrolling left and right across the entire page, only the black and white photos in the "tumblr-wrapper" class scroll left and right.
I am looking for a solution that would stop the tumblr-wrapper from being the only thing to scroll when the brower window is small, and would create full page left right scrolling.
I hope I have explained by problem adequately, but if I need to explain something differently please let me know.
On line 370 of style.css, you have a position:fixed applied to the .artdesign.
Im not sure what the logic was for putting it there exactly, but if you remove it, the page will scroll as you expect.
The fixed position means that div is fixed and will not move (even if you scroll), its mainly used to stick headers and footers to the top and bottom of pages. (Like the twitter bootstrap page [notice the black header menu along the top?.. thats fixed])
So basically:
.artdesign { /* Line 370 of style.css */
float: left;
padding: 200px 0 0 10px;
position: fixed; /* REMOVE THIS POSITION FIXED TO SCROLL! */
width: 579px;
list-style-type: none;
}
You have .artdesign set to "position: fixed" so this will always stay at the same window location. Change this to "position: absolute" and this should solve the problem.
Related
https://stackblitz.com/edit/angular-5p7xog?file=app%2Fsidenav-responsive-example.html
I'm altering one of the sidenav examples found on the Angular material page. The sidenav works perfectly on larger resolutions, but once you scale down, the header pops down leaving whitespace above it. Could anyone explain what's happening here and a possible solution?
Its happening because you are explicitly setting 56px as margin in mobile view.
<mat-sidenav-container class="example-sidenav-container"
[style.marginTop.px]="mobileQuery.matches ? 56 : 0">
Which is fine, but since the position of the element is changed to fixed. You need to set the top to 0 otherwise it will take the margin-top.
Modify your toolbar style to this
.example-is-mobile .example-toolbar {
position: fixed;
/* Make sure the toolbar will stay on top of the content as it scrolls past. */
z-index: 2;
top: 0;
}
I am creating a page that does not scroll vertically. Here is the problem page for reference - http://horizonwebtest.zxq.net/knowledgebase/
It has worked well with the exception of 2 things:
When viewing on iPad (possibly other tablets), the footer is pushed up approximately 10 px and the background image shows below the footer.
More importantly, on the above linked page, when I click on a link for an anchor that is inside a div, it scrolls the page up, showing space below the footer and partially cutting off the menu.
Is there something I'm missing?
I was able to fix it by doing the following:
1.) Setting the h6 inside the .footer-left.fltlft div to margin-top: 20px;
2.) Removing the padding-top: 20px from the div itself
3.) Setting margin-bottom:0; on the h5 inside the .footer-right.fltlft div.
As a side note, do your vertical text centering with line height, it works a lot better and will help prevent these kinds of issues.
please set your content box central_container Flexible (percentages) its better for view in any devices then try to set footer as #mash's answer . ;) ( margin-bottom:0; )
When using the like or send widget on a Fan Page (no mater if you use iframe tag or fbml for it) the overlay for commenting is positioned always to the right. see
http://twitpic.com/4q7ggi for example.
I cant find a way to get the widget to respect the 520px boundary of the facebook tab.
see http://www.facebook.com/pages/Ludwig-Test/127771653944246?sk=app_101150316644842 for an example.
Anyone an idea how to solve this ?
TIA
Rufinus
Try adding this to your css:
.fb_edge_comment_widget {
margin-left: -350px;
}
This will move comment box to the left, but the little arrow pointing to the button will move too (which you could try to cover with another element). It will only work if you're using XFBML, not an iframe.
Here's an example.
I had to move the little arrow to the bottom, and that's how i did it.
1) Move your popup window to the desired position. Use the !important statement to overwrite default styles.
.fb_edge_comment_widget {
top: -224px !important; left: -246px !important; height: 191px;
background: url(../img/arrow-down.gif) 0 100% no-repeat
}
This style also contains a new arrow image which replaces the bottom line of the popup window. It contains my own new bottom arrow, which is blue (#283E6C) by default and grey inside (#F2F2F2). We can use height to adjust the vertical position and move the background image to the bottom.
The image will look like this:
.
2) Apply overflow: hidden to the span that wraps the iframe, We'll be able to cut off parts of the iframe by applying margin-top in step 3, and replace them with our own.
.fb_edge_comment_widget > span {
height: 184px !important; overflow: hidden; border-top: 1px solid #000;
}
I'm using border-top to create my own upper border, since in step 3 we are cutting of the default border and arrow.
3) Move the iframe up a bit to cut off its upper border and arrow.
.fb_edge_comment_widget > span > iframe {
margin-top: -7px;
}
The result looks like this in my case:
If you're using the XFBML implementation of the Facebook Like button, you can use CSS to re-position the "flyout" menu relative to its original position near the Send button:
The above example using jsFiddle and this CSS:
.fb_edge_comment_widget {
margin-left: -343px;
}
Since the contents of the "flyout" are inside an iframe you won't be able to apply any CSS to it — meaning, moving the triangle indicator to the right side of the "flyout" isn't possible.
Web browsers have tightened security on cross-frame scripting due to spoofing and other hacks, so iframes are treated like separate HTML pages with their own CSS and JavaScript.
For any advanced CSS styling, you would have to inject the Facebook Widget's iframe using DOM Scripting ... and even then it may not work across browsers.
Not a great answer but the only option I have found is to wrap the widget in an absolutely positioned Div to keep it on the left side of the window
To fix it I strongly recommend to put the Facebook widget on the left side of your page. Any other solution could work for a certain period of time, but in the future will fail.
The reason is that Facebook updates its widget frequently.
Basically i'm trying to get a divider to run to the right edge of the screen (without overflow).
If you look here: http://gomysites.com and scroll down to the twitter section you will see i've set the twitter panel to run off to the left edge of the screen (no matter the size).
Now i want to do exactly the same on the right side. If you notice the grey divider between the blog posts id like this to run to the right edge of the screen (no matter the size) without it adding a horizontal scroller.
I've tried setting the css for the divider exactly opposite as i did for the titter panel:
.widget_gomy_news .divider{
margin:30px -10000px 30px 0;
background:#f3f3f3;
height:30px;
float:right;
width:610px;
padding:0 10000px 0 0;
}
But it adds a horizontal scroller. So i did try adding overflow:hidden; to the body. Which removes the scroller but i can still scroll everything left and right with the mouse.
Anyone got any ideas how i can achieve what i'm after? or will i need to use some js to make this work?
Thanks in advance.
Just remove the -10000px right margin and the 10000px right padding and it works. What do you need that for?
Use overflow-x: hidden on the body element. This will prevent the horizontal scroll but may trip you up in older versions of IE - Tested in IE8 and Chrome.
Edit:
You could also write some jQuery to grab the Window viewport height/width like: $(window).height();, and size your entire page's "container" div accordingly. This will allow you to know what numbers you're working with for setting the negative/position margins in your "divider" hack.
I think i've sorted it. I wrapped all the page content inside a div and added overflow hidden to that (rather than body). This worked in everything except IE7, but i can do a simple work around for IE7. Thanks for all the replies, Jeff sent me down the right path thanks.
Thanks to everyone who helped with my last question but I've got a new browser-independent problem:
For some reason, the image navigator (not yet functioning) on a website I'm working on is currently not displaying in the correct place on Firefox. It appears in the right place in IE8 and Opera but Firefox seems to have a problem with it.
As can be seen in the below image, the imageContainer div (the image and the left/right arrows) appears on top of the footer, this is how it should look i.e. how it looks in IE8 and Opera.
But in the image below, the imageContainer div is cutting into the footer div for some reason, and I don't know why.
imageContainer has a margin-top: 110px; to get it in the right place at the bottom of its column. There are 2 columns, the left housing the paragraphs and imageContainer and the right housing the Calendar and contact details. The footer div also has clear: both;
Also, it's not just the image that is falling into the footer, it's the arrows as well only they are the same colour as the footer so this isn't immediately apparent.
Any ideas why it isn't displaying correctly? Is there a better way of aligning the imageContainer to the bottom of it's column (to keep the box shape of the website) other than using the margin-top to position it?
Thanks in advance,
infinitifizz
P.S.
Completely forgotten I hadn't posted the site's link, here is where I got some temp space to host it: Temp Hosting
Not having access to the actual site makes it difficult to answer, but you could try something like position: relative; bottom: 0 to place items at the bottom.