My Distill Blog is not showing the scroll bar for wide codes and outputs.
It is possible to scroll on mobile devices (without the bar appearing), but in the Desktop browser not even that.
Also, I don't know how to set the code cells' width to match the body text's width.
I really couldn't find anything to help me manage the CSS needed to deal with this problem, and I think it's something related to alignment stuff.
Here is the visual problem:
You can add overflow: auto !important; to div with class sourceCode. !important must be there, because you are using it somewhere else and without this you cant overwrite it.
Here is example:
Related
I apologize ahead of time, I am not a skilled web designer at all, and I did do some googling before asking this, but it was complicated as most solutions require creating new divs and stuff, I was hoping there is a simple mod or line I could just add to the existing code for the footer to solve this?
Here is the site: http://ratecitident.com/ See how the black footer is overlapping the ratings box, how can I prevent this, to keep the footer at the base on any size screen? it may not show the problem on your screen, but it does on certain sizes, and on phones.
This is how it looks like on my desktop screen: http://gyazo.com/112b627bb056fc0bc6eb48070939d9b7
Thanks
You can simply add this little bit of code to your CSS:
div#content {
margin-bottom: 20px;
}
This is gonna give you more spacing,because you are forcing the footer to bottom of the content div to 20px.
You can always,target a specific screen using media queries,in this case you must target the iPhone screen,here is some good tutorials about the media queries.
css-tricks.com's tutorial
mozilla developer network's tutorial
I am new to web design and development and started to create a website on here using Content Management System called Joomla.
However, I am currently experiencing an issue where menu section cannot stretch out long enough to fit the entire width of the page (if that makes sense, forgive me for my poor grammar skills).
Previously I had an issue with the positioning of the elements moving around the page whenever I zoomed in and out of the page, thankfully I used the solution from here by positioning the min and max width of the page body, however this does not solve the menu section issue that I am experiencing (it's a bit worst when viewing on mobile phones).
I would like all my menu headers to fill the entire page width horizontally, without leaving a gap. I tried using a combination of float and width CSS attributes from here but unfortunately no lucky
Any bit of help or solution on tackling this issue would be greatly appreciated, thanks.
If ancient browser support is not a problem, you can make use of css3 Flex property.
apply
display:flex; justify-content: space-around for the <ul> and remove float:left
Here's a screenshot of your website after doing so
Read more about css Flex # css-tricks
Min-width: 100% is going to be the solution.
What you have to consider, though, is "nesting", that is, the menu header being "inside" another element that already is not wide enough. In that case, you would have to set ALL the elements you menu header is nested inside to min-width: 100% (or just width: 100%) as well
OR
move the menu header to another position where it isn't nested. Having never used joomla myself, I can't tell you which solution is easier.
I have created a layout using DIVs/CSS. I have attached an example image and links below which shows how I would like things to be organized. Within the header, there is a logo and a menu which are cumulatively 1000px in width. The feature, content, and footer sections are also to be 1000px in width. However, the actual background images for ALL sections are 100% in width and are repeated horizontally.
Below is an example of what I want to do:
What I have actually put together so far (in terms of the design) can be viewed here: http://ohachem.com/2/. This is what I would like to follow. The CSS can be viewed here: http://ohachem.com/2/style.css
What is the best way to accomplish this? As you can see, the text in the "feature" section does not align completely in the centre. I've tried using clear:both, overflow:hidden, and several other methods, with no luck.
The "misalignment" of the "featured" text is caused by the floating logo. Because the float hasn't been cleared and extends outside of your header, it is causing that text to flow around it. Adding overflow: hidden to your #header element will correct it, but there's other ways to clear floats without adding extra markup.
Alternately, you could just make your logo the same height as the header. Right now the height property is set to the same value, but the logo has some extra padding, which is causing the overflow.
The website you're pointing to uses a liquid layout, here's a bunch of examples: http://www.dynamicdrive.com/style/layouts/category/C13/ .
One note, on your example, there's no positioning attributes that I can discern, a large part of making a layout responsive is ensuring it looks consistent across all browsers & screens.
I would Suggest you to use CSS3 Media Queries rather than Script for the Responsive/ Adaptive Web page design.
Please have a look at this
These do not process a lot, hence Light weight and most modern browsers and Devices support CSS3 hence a convenient and reliable Option.
I'm working on http://www.lceonline.co.uk
When working on a smaller screen res, anything less than 1000px, I'm getting a horizontal scroll bar appear. This happens on all browsers.
I've tried
overflow-x : hidden;
but then the web pages' background doesnt repeat, it just seems to be one large gray background. It also is a css-3 property, One i'd rather try and avoid.
I've had a look at the sites' DIV tags and still cant see what is actually causing the problem. I havent built this from scratch, someone else worked on it before me and I feel they have used too many containers.
Can someone provide me with a possible solution on how to get rid of it?
Thanks
Your issue is that
#page-container and #page-container2 both have width:1000px;
If you remove the width from both of those the scrollbar disappears, as does the centring and the gray background.
I am using the CSSStickyFooter.com tutorial in my amateurishly imperfect attempt to get the perfect sticky footer working.
This is a specific question regarding the overflow:auto; style on the "main" div. With this in place, and when the window is narrowed by the user, I get a horizontal scrollbar halfway down my page. Can't this added scrollbar automatically appear at the bottom of the window like it's supposed to?
The reason you're getting the scrollbar in an odd place is because it is on the <div> rather than on the page. This is a result of using overflow:auto;.
overflow:auto; tells CSS that you want that particular <div> to get scrollbars (either horizontal or vertical) when it is too small to display all its content.
Therefore the direct answer to your question is No; you can't position the scrollbar elsewhere on the page, since it is attached to the <div>.
However, there may be ways around it.
Firstly, if you don't mind the content being clipped when the display is narrow, you can set the scrollbars such that it only gives you a horizontal one, and supresses the vertical one. You'd do that something like this:
overflow-y: scroll;
overflow-x: hidden;
Alternatively, there may be other ways to fix your code; CSSStickyFooter.com is quite well know, so if it works for others without this glitch, it can probably be made to work for you too. But we'd need to see a bit more of your code in order to help you further down that line.
I researched and tried many techniques for sticky footers and found this one to work great:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
I had problems with many other techniques I used before that one. If using CSSStickyFooter.com is not a strict requirement for your project, I recommend you use the technique described in the link I referred to.