I have a design issue in my app, the body text is scrolling through my nav- and command line and i don't know how to fix it. I'm not looking for a z-index fix where the body text flows underneath, i want to restrict the lorem ipsum filler text upper scrolling to just below the command bar. The body text is huge, and scrolling is necessary. Currently it looks like this:
Navbar CSS:
position: fixed;
width: 100%;
top: 0;
Command Line:
margin-bottom: 60px;
Body Text:
position: relative;
min-height: 1px;
padding-left: 8px;
padding-right: 8px;
box-sizing: border-box;
float: left;
I'm using Microsofts ui-fabric grid system, and can post more code if necessary. But i was hoping there would be an easy "set vertical scrolling breakpoint for this div at x pixels from top" - or something like that. But i can't seem to find anything.
I guess i don't understand this well enough, so if someone can explain the big picture of how to resolve this scrolling issue, that would be helpful.
You can limit the height of the container in which the text is to a specific height and then set the overflow on the y axis to scroll, this will result in the behavior you want because the scroll is limited to the container div, thus the text won't scroll through the navbar.
Remember to adjust the margin from the top accordingly so it starts under your nav and command bar.
Example (assuming your navbar is 10vh):
#text-container {
height: 90vh;
margin-top: 10vh;
overflow-y: scroll;
}
If your navbar is for example 100px you could do:
height: calc(100vh-100px);
margin-top: 100px;
This would correct the height so it will always fill your whole screen.
If a horizontal scrollbar appears you can hide this with overflow-x: visible; or overflow-x: hidden;depending on the behavior you want
To start with an offset on the body text just give it a margin-top which is the same height as you nav bar, i.e.
margin-top: 50px;
This will give your body an initial spacing before it starts, after the user starts scrolling it'll
.full_width {
position: relative !important;
z-index: 5000;
}
Related
I am trying to make some responsive cards. I have the cards completed and spaced out properly. On the front of the cards I want an image on the top of the cards and a title in the middle. The title is fine and the image is fine except for the right side of the image.
Here is the CSS code for the image (image is in an img tag in HTML page with a class of "image"):
div .image {
padding: 5%;
height: 45%;
width: 100%;
}
The right side for some reason is ignoring the padding and sticking out of the card parent div. Any ideas why?
did you already set div's width?
also as far i know is no need to set image's height if you already set it's width to 100%
anyway here some example
div { width: 200px; height: 150px; padding: 6px; }
div img { width: 100%; }
You set the width to be 100% and padding 5%. Make sure you have:
box-sizing: border-box;
for the parent.
Also without the full example of code, hard to answer. Can use overflow: hidden; on the parent to hide that part sticking out.
I am using ngDialog for my popup windows. I can make it as wide as my whole screen but not as tall. Here is a style I am using:
<style>
.ngdialog.dialogcaseeditor .ngdialog-content {
width: 95%;
height: 100%;
padding-top: 5px;
overflow: auto;
}
</style>
height: 100%; does not even near give a maximum height.
Somewhere in the code then after a dialog is opened I can say something like this:
$dialog.dialog.find('.ngdialog-content').css('height', $window.innerHeight);
That will make the the popup window as tall as the whole screen, bu the screen itself will become scrollable, even though the popup does not exceed the screen.
As you can see, there is a vertical scroll bar on the right side.
Can this scroll issue be fixed?
Thanks
You can use CSS to hide scroll bars:
overflow-y: hidden;
overflow-x: hidden;
I've gone through CSS validation (which did find some pesky unclosed tags, sorted now).
I'm trying to align an image to the top right side of my page, with title text on the top left.
I can do this, but when I resize the browser window the image always wants to overlap the title text before either of them resize. If I remove the margins that I've used to place the image then the image sits under the title text (and to the right) instead of just to the right of it, but I feel removing this (while keeping the positioning) might be key. I do need the image to be overlapped by some other elements though.
Here's a snippet of my code for the image:
img#site-logo {
max-width: 100%;
height: auto;
clear: both;
position: relative;
z-index: 0;
margin: -12.87em 2em -16em 0px;
}
And for the site title:
#site-title a {
font-size: 4.875em;
font-weight: bold;
line-height: 78px;
padding: 0px;
margin-right: auto;
white-space: nowrap;
z-index: 2;
position: relative;
}
Site is live here:
http://dominicpalma.com/
There are surely several different approaches to solve your problem.
But in my eyes it would be the best solution to set a min-width for your #page element.
#page{
min-width:900px;
}
I have played a little bit around with the width and think a min-width of 900 px fits best in your case.
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.
If you will notice when you visit... http://www.thebattleforarcadia.com/construction/index.html when you shrink the size of the screen the top bar content overflows it's parent div and runs over the rest of the website.
What I want to do is, if in-case the resolution of the receiving end is too small, I want to force them to have to use the scrollbar at the bottom so they can see everything. Just so the website is displayed properly.
Any coding ideas?
Thank you,
Aaron
Add...
min-width: 1260px;
at the
#news-container
css rule.
Your website will display fine in 1280x** resolutions but there will be a vertical scrollbar in anything less than that (in width).
Perhaps you could make the min-width 960px and make the text expand in two lines (pushing the top graphic a bit) ? Just a suggestion
EDIT: here's an example
#news-content {
float: left;
padding-left: 25px;
padding-top: 12px;
overflow: auto;
padding-bottom: 20px;
}
#news-container {
width: 100%;
background: url(images/news-background.png) repeat-x left bottom;
z-index: 10;
}
#news-header {
width: 150px;
height: 23px;
float: left;
padding-left: 25px;
}
The above example will make the header "Expand" when the resolution is shrinked without forcing screenwidth < 1280px users to use the vertical scrollbar
Give the body element or any other element that is setting the width you want a min-width to match that. This should make sure that whenever the page is being viewed on a smaller resolution have a horizontal scroll-bar
See here for Commonly used pixel sizes for webpages and their pros/cons.