Can anyone please tell me how to give a scrollbar to the div? In my program, I am listing my Facebook friends inside a div. I have given fixed height to the div. I will paste the code.
<div id="main_fb">
<div id="friend_list">
// friendlist code.......
</div>
</div>
And the css is :
#main_fb {
height:250px;
}
#friend_list {
overflow-y:scroll;
height:224px;
width:100%;
overflow:none;
}
Is there any wrong in my code? Please give me a solution. Thanks in advance.
I think that there is a chance that the second overflow is overriding the first overflow-y in your CSS. Because you already specified width as 100% of the page, I would personally simplify things by just using overflow:scroll; and forget about the overflow-y property.
Related SOF question: Scrollbar in div scroll instead of page scrollbar
You have overflow-y: scroll and then overflow:none, I think they are conflicting somehow.
For webkit on touch devices there is the vendor specific -webkit-overflow-scrolling: touch; but it is only supported on recent versions.
For more info see here: How much support is there for -webkit-overflow-scrolling:touch
I had a same issue bro. refer to this if you are stuck with similar situation. In my case I ultimately learned that, scrolling is ignored in android 2.3.x versions I don't know what's your target device, but still might be helpful, I guess.
Related
I am building a website for some local business and I can't figure out what is causing the side scrolling. I must have been really tired and messed up somewhere. Any and all help would be wonderful. The link to the site is http://theparkwayrv.com
If you look, you'll see that there is a side scrolling bar. Please let me know if you can figure it out. I've gone over it like 10+ times and i'm losing my mind right now.
Thanks!
Add
body {overflow-x: hidden;}
to your CSS.
Generally, this is due to having items with width or min-width set to 100% or 100vw in your page. When the browser adds a vertical scrollbar to it (17px in Chrome), it makes it 100% + 17px, hence the need to add a horizontal scroll. This, however, doesn't happen on most mobile UI's and any browser that uses semi-transparent-show-on-scroll-only scrollbars.
As very well spotted by Tersosauros, the only one who, instead of providing a quickfix, like the rest of us, actually took the time to look for the real cause of your bodys extra width, in your particular case, this is due to using Bootstrap classes incorrectly. You used .row independently, without being a direct child of .container and the page is wider with 30px.
However, the quickfix still solves it. At least in this life, we're mostly payed for solutions, not for being right. Right? :)
This issue is being caused by the 15px left and right margins on .row (line #7, bootstrap.min.css) affecting the child div within the parkway_about_page div. This is part of how Bootstrap expects your page to be structured, as pointed out by #Andrei Gheorghiu . If parkway_about_page were also a .container bootstrap would fix this for you.
Either option fixed it for me:
Add (as the many other 1-line answers with no explanations have suggested) overflow-x: hidden; to #parkway_about_page.
--- OR ---
Remove the margin(s) from the .row div underneath parkway_about_page, (or just remove the class entirely).
Use this css to your body section:
body{overflow-x: hidden;}
Try this...
body {
overflow-x:hidden;
}
add this to your css file :
body{
overflow-x: hidden;
}
in body just put overflow-x: hidden
Alright, so I have an HTML form and I want to be able to use that form to upload links to my database and then have the links displayed on an updated page. Everything works fine, but my issue is that whenever the link is retrieved and displayed from the database, I am unable to make changes to the CSS. For example:
This is a Great Site
is what I would enter into the form, this would be saved to the database, and the output would be:
This is a Great Site
my issue is, I am unable to change any of the link styles outside of color and other inline CSS options. I am unable to change things like what color it appears after the link has been clicked on, or what kind of action it does when hovered over.
What would be the easiest way to go about this? Is there a simple CSS workaround that I'm missing or am I going have to do something a little bit more complex?
Thanks in advance.
Assuming you show these links in a fixed place, add a class to the element that contains these links. This will safe you the trouble of adding a class to every link you add.
<div class="container">
This is a Great Site
</div>
Then you can change the CSS of these specific links with:
.container a {
color: green;
}
.container a:hover {
background: yellow;
}
I don't get your question.
Your link is 'www.stackoverflow.com'.
You output your link as
This is a Great Site
What prevents you from outputing a class or style attribute?
This is a Great Site
This is a Great Site
<a class="myOtherLinkClass" href="www.stackoverflow.com">This is a Great Site</a>
<style>
a.myOtherLinkClass,
a.myOtherLinkClass:hover,
a.myOtherLinkClass:active,
a.myOtherLinkClass:focus{
color: #d5d5d5; //Alternative add !important to the value
}
</style>
Try it like this. Be sure to put this into your .css-File without the <style> tags and put it after your "a"-Definition.
I am using a very simple free Wordpress theme that I am really happy with but I cannot figure out how to move the names of the budgies along to the right:
http://swearingbudgies.co.uk/
I have tried Firebug to find out how to do this but the only tag I can see is a: - problem is when I apply padding-left to a: it also shunts the images along. Will this require changes to the html/php as well as the CSS to fix?
Add the following class in your CSS. Next time onwards don't come up with site url. Add your problem in fiddle/codepen or something like that and post here your code. Otherwise people will give downvote and close your question including me.
a.image_link + div
{
text-align:right;
}
try
#main-content div.post div{
text-align:right;
}
What I am trying to do is create a site that displays my rants in faux letter form.
I want the "paper size" (div size) to be fixed, and the text to continue on the second piece of paper (a second div) displayed just below the first paper like this..
I apologize, being a new user, I am not allowed to post the
screenshots I have created to help explain my situation, so am forced
to link until I have enough reputation points:
http://img16.imageshack.us/img16/5538/pagesuc.jpg
ONLY FOR THE SAKE OF SIMPLICITY: I've created a simple html/css page to demonstrate in the simplest form what I am trying to accomplish with the code:
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
}
.container {
background: #FFFFFF;
width: 600px;
height: 400px;
margin: 0 auto;
}
#lbox {
background: #F00;
width: 300px;
height: 400px;
float: left;
}
#rbox {
background: #00F;
width: 300px;
height: 400px;
float: right;
}
.flowcontent {
padding: 10px 50px;
}
</style>
<div class="container">
<div id="lbox">
<div class="flowcontent">
<p>Lorem Ipsum...</p>
</div>
</div>
<div id="rbox">
<div class="flowcontent"> </div>
</div>
</div>
Screenshot:
I apologize, being a new user, I am not allowed to post the
screenshots I have created to help explain my situation, so am forced
to link until I have enough reputation points:
http://img689.imageshack.us/img689/7853/overflowc.jpg
In this case I would like the overflow from the red div to continue in the blue div on the right.
I realise this may not be possible with HTML/CSS alone, but was hoping maybe CSS3 might have some new tricks for this, as it has more advanced column handling.. If that's a no go, does anyone have a suggestion for a logical way to go about breaking this up using PHP or even JavaScript or JQuery?
I know PHP, but am still a JS/JQ newb so I have provided some (hopefully) very simple example code for anyone to plug in their own JS/PHP examples.
Anyway, thanks for your time.
I came up with a small JS Script that might help you out. It's far from perfect, but might give you a decent starting point. Essentially, it loops through your large text and looks for a scrollbar to appear. You may need to alter the calculations just a bit.
JSFiddle http://jsfiddle.net/Tt9sw/2/
JS
var currentCol = $('.col:first');
var text = currentCol.text();
currentCol.text('');
var wordArray=text.split(' ');
$.fn.hasOverflow = function() {
var div= document.getElementById($(this).attr('id'));
return div.scrollHeight>div.clientHeight;
};
for(var x=0; x<wordArray.length; x++){
var word= wordArray[x];
currentCol.append(word+' ');
if (currentCol.hasOverflow()){
currentCol = currentCol.next('.col');
}
}
HTML
<div class="col" id="col1">Lorem Ipsum ....... LONG TEXT .......</div>
<div class="col" id="col2"></div>
<div class="col" id="col3"></div>
<div class="col" id="col4"></div>
<div class="col" id="col5"></div>
CSS
.col{
width:200px;
float:left;
height:200px;
border:1px solid #999;
overflow:auto;
font-family:tahoma;
font-size:9pt;
}
UPDATE
For this example, you must include the jQuery Libray in your scripts.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>
PS - if you get to know jQuery, you will start to use it for everything. It greatly increases cross-browser compatibility and simplifies many common tasks.
What you want is CSS Regions module proposed by Adobe and currently supported by zero browsers. Adobe did release a very rough webkit-based browser for playing with the spec if you're really interested. But as others have said, right now you're SOL and will need to find another solution.
http://www.adobe.com/devnet/html5/articles/css3-regions.html
http://labs.adobe.com/technologies/cssregions/
http://dev.w3.org/csswg/css3-regions/
CSS3 has Multi-column Layout Module. However, I doubt it is widely supported to the moment.
Test it on your target browsers: http://www.quirksmode.org/css/multicolumn.html
You cannot do this with HTML and CSS only. CSS is targeted primarily at web browsers, and the layout model is that of a document on a vertically expanding surface. You can make boxes auto-height (which is the default), or fixed-height, but you cannot change the way content belongs to a parent box (which is what you would need for this to work).
A few options you could consider, if this is really important to you:
Use the paged-media features that are built into CSS to provide nice paging when rendered onto paged media (such as printouts); I'm talking about properties like page-break-after, page-break-before, etc. You won't get pages in a web browser, but at least you can control how it prints on physical paper
Write some incredible clever javascript that partitions your content into pages. There's a bit of a vicious circle here, because you won't know if your content fits until you try, so you may have to reflow several times in trial-and-error fashion. If your content has a special structure you can take advantage of, e.g. a poem form, where all line breaks are explicit, or if you use a fixed-width font, then a one-pass algorithm is possible, and you may even be able to do it server-side, using PHP, ASP.NET, or any other server-side scripting technology.
Use a different document format that gives you control over pages and absolute placement of elements within a page structure, e.g. PDF. (I wouldn't recommend using PDF for general web documents though; from a user's perspective, PDFs aren't convenient at all).
Use something like Flash or Silverlight to produce the desired layout. This, too, is something you should avoid unless there are other reasons why you'd be using it anyway; also, the formatting algorithm suffers from the same problems as a javascript implementation would, except that you have more control over the rendering part (fonts, kerning, etc.).
For most things on the web, however, I'd just let go of the idea and go with a more realizable design.
If you know how many characters one of your pages hold you can separate your string dynamically using javascript or php and then print the first part of the array in the first "paper sheet" and the second on the second.
You won't be able to do that with just HTML/CSS
Shapes by Adobe does exactly that, however, it has a very limited browser support.
IE: 11+
Chrome: 37+
FireFox: 32+
I have a relative positioned div inside another div. The inside-div is positioned with percentage (left: 0%; top:13%).
My problem is that in all IE versions the div is displayed some pixels further down than where it is displayed in Chrome, or FF...
Anybody recognize this?
<div class="nav_container" id="nav_container">
<div id="nav_container2" style="position: relative; left: 0%; top: 13%;"></div>
</div>
Also, I am just about to browser adjust my website so some article about most common problems with IE is appreciated.
Thanks
UPDATE:
Here is the style for the primary div.
.nav_container {
background-image: url(../Graphics/menu_lvl1.gif);
height: 101px;
width: 720px;
}
My guess is IE is rendering the padding/margins differently than Chrome/Firefox (which is usually the issue with layout bugs).
You're best off to specify both padding and margin when position matters, otherwise you're leaving it up to the browser defaults (which are all different).
You should also make sure your page isn't being loaded into Quirks Mode by IE. Be absolutely sure that you have the proper DOCTYPE definition at the top of your page to force IE to load into standards mode. W3Schools has a good rundown of where and how to use it:
W3Schools - HTML doctype declaration
And then the W3C has a list of all the valid declarations:
W3C QA - Recommended list of Doctype declarations you can use in your Web document
If none of those take care of it, you can create IE version specific CSS and load them using Conditional Comments. That will allow you to specify different values for top based for IE.
#Camran
Here you go bro I hope this helps you out. http://www.positioniseverything.net/articles/cc-plus.html Everything is fully detailed and easy to follow along. Trust me I was having that same issue and what kills me is everyone I talked to who claimed they were professionals kept stating that it's an impossibility to have perfect positioning, yet here's somebody who came up with a solution.
Make sure IE isn't running in quirks mode. This happens when you have any text before the doctype declaration. If its in quirks mode it behaves hideously for CSS. Well moreso than normal.
Use conditional comments to target IE and change top accordingly.
IMO, that's the ONE thing you need to know to resolve IE issues.
Are you using a css reset? (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) It'll help you make sure all your browsers are starting with the same default padding and margin.
Try a reset stylesheet, and see if that helps. Include it before any other CSS declarations.