Develop Reference

element unable to overflow html css

I am new to this css and html
recently I try making a simple website with top navigation bar on top. However I find out that the top navigation bar wont overflow even though it has been set to "overflow = scroll"
below is my code:
css
.topnav {
overflow: scroll;
background-color: #333;
}
.topnav a,
.topnav input {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4caf50;
color: white;
}
html
<div class="topnav">
<input
type="file"
id="getval"
style="color:#FFFFFF; width: 200px; font-size: 8px;"
/>
<a id="clearBut" href="">Clear</a>
<a id="undoBut">Undo</a>
<a id="saveBut">Save Picture</a>
<a id="savecsvBut">Save CSV</a>
<a id="saveJsonBut">Save JSON</a>
<a id="showtoolbox">Toolbox</a>
</div>
It looks okay when I havent upload and display pictures:
when I haven't uploaded any picture
And it looks weird when I upload a picture larger than the window
the display becomes weird after I upload picture
please help and advise me on what to do. thank you

i would set the topnav class an height of:
.topnav { max-height: 100vh; }
and the img:
img {display: block; margin: 10px auto; max-width: 90vw; }

If the issue with the display is that the uploaded image is much wider than the topnav div (and the viewport), you can add a css rule to limit the width of any img element:
img { max-width: 100vw; }
This example would set the maximum image width to 100% of the viewport's width (and the image should stay in scale with itself).
EDIT:
To stretch the navbar to the size of the image (with its original dimensions-- e.g., if the image is twice as wide as the browser window, change the navbar so that it is twice as wide as the browser window, too), rather than editing the CSS, I think you may have to use a script to update the width of the navbar after the image loads.
var image = document.getElementById('uploaded-image'); //replace "uploaded-image" with the id attribute of your image element,
//as defined in the <img> tag
image.onload = function () {
document.getElementsByClassName('topnav')[0].style.width = image.width + "px";
}
I see where it makes sense to assume that setting "overflow: scroll" in the CSS would accomplish this, but that setting is actually internal. In other words, if the navbar does not have room to display all of its contents (in this case, the upload button, "Clear", "Undo", "Save Picture", and etc.), "overflow:scroll" tells it to let you scroll WITHIN the navbar, to see the child elements that got cut off.

Put below styles in your image class. Hope it makes your image responsive
.image-class-name {
width: 100%;
max-width: 100%;
height: auto;
}

Aligning divs with responsive design

I have 2 divs that I'm trying to align a certain way with it being responsive. I basically want the right div to be on top of the left div when the width of the screen reaches a certain width. Right now they are setup splitting the 100% width of the container.
The left side is the form and the right side is the content. I want the content on top of the form to fit the width of a mobile screen. I like how the width is setup to be viewed on the desktop/laptop setting. I hope this makes sense.
Is there a way to do this with CSS or do I need JQuery for this? Please let me know if this is unclear.
CSS
#left {
float:left;
width:65%;
border-radius: 25px;
background-color: #F8F8F8 !important;
}
#right {
float:right;
width:35%;
background-color: white !important;
padding-left: 40px;
}

If I understand you correctly, this JSFiddle is doing what you'd like it to do.
http://jsfiddle.net/isherwood/wgbn8c0d/1/
(Thanks to iSherwood for fixing the CSS)
Here's a way to do this with only CSS and CSS's #media queries:
#left {
float: left;
border: 1px solid black;
width:calc(65% - 26px);
border-radius: 25px;
background-color: #F8F8F8 !important;
}
#right {
border: 1px solid black;
float: right;
width:calc(35% - 40px);
background-color: white !important;
padding-left: 40px;
}
#media screen and (max-width: 500px) {
#left {
display: block;
width: 100%;
}
#right {
display: block;
width: 100%;
}
}

Ideally you could accomplish this using media queries to detect at what screen width you want them to stack.
At that width say it's 768px for instance. You could then remove the float values and set the widths to 100%. If you mark up your HTML so that the right section of content is coded before the left then it will just naturally be rendered first above the left side.

#container {
display: flex;
}
#left {
order: 1;
width:65%;
border-radius: 25px;
background-color: #F8F8F8 !important;
}
#right {
order: 2;
width:35%;
background-color: white !important;
padding-left: 40px;
}
#media only screen and (max-width: 767px) {
#left, #right { width: 100%; }
#left { order 2; }
#right { order: 1; }
}
If you don't have to support IE9 and below you can use display: flex and then just change the order of the items on the breakpoint where you want them to stack

The short answer is no you don't need jQuery and yes you can use CSS.
What you need is a grid system. The underlying grid will be using media queries to get the screen size, which you can do as well, but a grid system would be better as far as covering edge cases and you wouldn't have to reinvent the wheel.
A couple of popular grid systems to take a look at:
Skeleton
Foundation
Bootstrap
In my humble opinion if you are trying to do something simple Skeleton would be the best place to start because it will give you an efficient grid without getting in your way with other opinionated features (like colored buttons).
But if you want your CSS framework to define other parts of your style as well feel free to go for Foundation and Bootstrap which are (arguably) more popular.

How to make a dynamic ascii horizontal divider?

In place of something like a horizontal rule or div border, I'd like to do something like this:
My Title
/*----------------------*/
My content
Notice how the divider between the Title and content is literally a slash, asterix, dashes, and then an asterix and slash to end (it's supposed to look like code).
I'm curious how I could achieve this effect on a fluid layout, with the divider stretching to fill the whole width of the div. Also, I'd like to not use any art for this. Just using ascii would be perfect.
Summary: How can I create a dynamically resizing custom ascii divider? I'm pressuming this will probably have to be done mostly in Javascript and then polling the width of the div everytime the window is resized, and then calculating the length of characters (it's a monospace font) required to fill that space. Is this on the right track?

What a great question, had a lot fun messing around making this CSS only solution.
(This needs to be tweaked for each new font family due differences in kerning but it should hold up reasonably well at different font sizes of the same family.)
hr {
/* reset */
display: inline-block;
border: none;
/* sizing */
box-sizing: border-box;
width: 100%;
height: 0.1em;
/* dashes */
background-image: linear-gradient(90deg, rgba(0,0,0,0.8) 80%, transparent 80%); /* space */
background-size: 0.4em 0.4em; /* dash */
/* spacing between start/end */
padding: 0 0.7em;
background-clip: content-box;
/* anchor ::before/::after */
position: relative;
}
/* start/end */
hr::before,
hr::after {
position: absolute;
top: -0.5em;
}
hr::before {
content: '/*';
left: -0.1em;
}
hr::after {
content: '*/';
right: -0.1em;
}
<hr>
Editable demo: http://jsbin.com/tefuli/2

This is possible without using JavaScript with the white-space CSS property:
#container {
width: 300px;
position: relative;
border: 1px dotted black;
}
#dashes {
white-space: nowrap;
width: 100%;
overflow: hidden;
}
#opencomment, #dashes, #closecomment {
position: absolute;
}
#opencomment, #closecomment {
background-color: #FFFFFF;
z-index: 10;
}
#closecomment {
right: 0px;
}
<div id='container'>
<h1>Title</h1>
<div id='opencomment'>/*</div>
<div id='dashes'>----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
<div id='closecomment'>*/</div>
<!-- position:absolute elements don't affect the DOM, so we need to
"clear a line" -->
<div> </div>
<p>Content</p>
</div>
I just used an absurd amount of dashes in order to fill up wide screens. You can change the width of #container in order to make it wider or narrower, or you could remove the #container element entirely.

CSS - displaying a dynamic height floated DIV - missing background image

My Goal:
Here is what I'm trying to accomplish. We have an list of categories that appear on a page. The number of categories is unknown. The description can be pretty much any size... yet we want a uniform look. So, we are using the dotdotdot plugin to put ellipses on the paragraphs. When you hover over the item, it should expand the description and show the full text.
I want that hover to float or overlay whatever is below it. Due to some of my layout items (see my NOTE below) my sccontainer element doesn't have a set height. It's dynamic based on the content... with a max-height set.
When I change that height to AUTO in the hover event (which causes the text to flow down and displays all the content), I lose the background on the sccontainer element.
Some pertinent CSS:
.sccontainer { width: 280px; zoom: 1; float: left; margin: 5px 10px; padding: 0; border: 1px solid #8697a1; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 6px #777; -webkit-box-shadow: 0 0 6px #777; box-shadow: 0 0 6px #777; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=90, Color='#777777')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=90, Color='#777777'); position: relative; background: #fff url(http://imagecss.com/images/background.jpg) repeat-x left top; }
.sccontainer .parent { position: absolute; width: 270px; }
.sccontainer .image { margin: 5px; float: left; }
.sccontainer .image img { width: 48px; }
.sccontainer .icon { margin: 0; }
.sccontainer p { margin: 8px; padding: 0; max-height: 145px; }
.sccontainer h1 { line-height: 24px; display: inline-block; vertical-align: middle; width: 200px; height: 48px; padding: 0; margin: 5px 0 0 0; overflow: hidden; }
.sccontainer h1 a { padding: 0; font-size: 24px; color: #fff; font-weight: normal; }
.sccontainer .content { position: relative; height: 210px; padding: 0 5px; font-size: 15px; line-height: 22px; width: 270px; }
.sccontainer a:hover { text-decoration: underline; }
.sccontainer.hover { height: 250px; }
.sccontainer.hover .content { height: auto; }
.sccontainer.hover .content p { min-height: 135px; max-height: none; }
jsFiddle:
Here is a jsFiddle version of what I have right now. You can see this in action, if you hover over the text in the blue box. It's a bit large, so I used jsFiddle instead of putting all the bits here code tags...
http://jsfiddle.net/ztMM5/1/
And here is a mockup of what I'd like to see. Method 5a expands slightly to show the full content.... yets overlaps the red line. None of the other items move around or are affected.
NOTE: Sorry for the size of things. I've trimmed it down about as much as I can. Also, I am modifying an existing intranet website... it's 3rd party, so I have limited control of the source code - hence the table usage. :(
What I've Tried/Researched:
I believe the issue stems from the fact that my sccontainer item is floating, and doesn't have a height specified. That's why the image disappears.
I had a version that kept the background... but the sccontainer box didn't resize like we need... the text just overflowed it... rather ugly.
I don't know enough CSS to make this all work right. I'm not adverse to using jQuery to do more if needed.
I did work on a version that handled most of the hover using the :hover stuff... but it didn't work quite as well as the jQuery approach.

This answer may not solve your specific problem but it may help others with a similar scenario (working with tables makes difficult to render a clean layout in most cases.)
I ran into this issue before and this is how I solved it. It basically relies in an html nested div structure to achieve the expandability of the content without affecting the floating layout of the near elements :
<div id="wrapper" class="cf"><!--wrapper with border and CLEARED-->
<div class="sccontainer"><!--position relative-->
<div class="inner"><!--position absolute-->
<div class="content"><!--position relative-->
<!-- my content here -->
</div>
</div>
</div>
<!-- more containers etc-->
</div><!--END wrapper-->
First, we are going to apply the infamous clear-fix hack to the #wrapper container (use your preferred method):
.cf:after {
visibility:hidden;
display:block;
content:"";
clear:both;
height:0
}
* html .cf {
zoom:1
}
/* IE6 */
*:first-child+html .cf {
zoom:1
}
Then the style for the .sccontainer container :
.sccontainer {
width: 280px; /* or whatever - could be % for responsiveness */
padding-bottom:200px; /* any value to give height without using height ;) */
position: relative;
float: left;
margin: 5px 10px; /* or whatever */
overflow: hidden; /* this is important to keep all same height and big content out of sight */
z-index: 1; /* this is important too, see later */
background: white url("imagebackground.jpg") 0 0 repeat-x; /* need to explain? */
}
Then the .inner container, which actually will help to keep the layout in order if we hover the elements
.inner {
position: absolute; /* please don't move */
width: 100%; /* to fill the whole parent container */
height: 100%; /* same */
}
And the content :
.content {
position: relative;
background: white url("imagebackground.jpg") 0 0 repeat-x; /* not redundant though */
width: 100%; /* helps to fill the gaps with small content */
height: 100%; /* same, specially if using image backgrounds */
/* other styles, etc */
}
NOTE: we should apply same border-radius properties to the three containers and box-shadow to .sccontainer and .content for consistency
Now, what happens when we hover ?
.sccontainer:hover {
overflow: visible; /* show the full content */
z-index: 999; /* place me on top of the others if needed (which lower z-index, remember?) */
}
.sccontainer:hover .content {
height: auto; /* as it really is, including background image */
}
NOTES : this effect will happen regardless if the content's height is smaller than the parent container's height. You may not like the effect mostly if you are using borders and shadows (could be shown as smaller box inside the parent container) so we could add an extra class to .sccontainer like
<div class="sccontainer withhover">
and apply the hover effects only if that class exist like
.sccontainer.withhover:hover {
overflow: visible;
z-index: 999;
}
... and use a bit of jQuery to remove that class for shorter content, so it won't be affected :
jQuery(document).ready(function ($) {
$(".sccontainer").hover(function () {
var $contentHeight = $(this).find(".content").height();
if ($(this).innerHeight() > $contentHeight) {
$(this).removeClass("withhover");
}
});
});
See JSFIDDLE

Mysterious whitespace in firefox

There's a mysterious whitespace along the right of my site in firefox (on both PC and Mac, latest versions) and I can't for the life of me figure out what's causing it.
This is what it looks like -
I've been searching the CSS for ages now trying to figure out if it's some margin or padding issue but I can't find anything.
Also, if I remove the div ID 'slider3' the issue seems to disappear, yet I can't figure out how this div is causing the whitespace, since it has no CSS applied to it - it's simply a container.
Here's my site http://www.simplerweb.co.uk
Here's some relevant code so the answer is useful for people later on.
<div class="fullw">
<div class="sliderleft"></div>
<div class="sliderright"></div>
<div id="slider3">
<div class="quote">
<div class="centmid">
<h1 class="fronth">Hello</h1>
<h2 class="frontp">Welcome to Simpler Web</h2>
<h2 class="frontp2">We're an Edinburgh based Web<br> Design Agency</h2>
</div><!-- end div centmid -->
</div> <!-- end div quotes1 -->
<div class="quote2">
<div class="centmid">
<h2 class="frontb">We make wonderful, cross platform <br> accessible Websites </h2>
</div> <!-- end div centmid -->
</div> <!-- end div quotes2 -->
<div class="quote3">
<div class="centmid">
<h2 class="frontc">We can translate your ideas into reality </h2>
</div> <!-- end div centmid -->
</div><!-- end div quotes3 -->
</div> <!-- #slider3 -->
</div>
CSS
/* The following styles are essential to the slider's functionality */
.plusslider {
overflow: hidden;
position: relative;
padding-top: 140px; /* The height / width of the slider should never be set via the CSS. The padding increases the slider box-model while keeping it dynamic */
}
.plusslider-container { position: relative; }
/* Slides must have a set width - even though they may be dynamic. If no width is set on <img> slides, the default image size will be assumed */
div.child { width: 480px; }
.plusslider .child { float: left; }
/* PlusFader Specific (not needed with plustype:slider */
.plustype-fader .child { display: none; position: absolute; left: 0; top: 0; }
.plustype-fader .current { z-index: 5; }
/* End PlusFader Specific */
/* No-javascript fallback -- change "#slider" and "#slider2" identifiers as needed for your html */
#slider > * { display: none; }
#slider > *:first-child, #slider2 > *:first-child { display: block; }
/* End no-javascript fallback */
/* End essential styles*/
/* The following styles are not essential for slider functionality. They are specific to the example content.
It is important to note that the fading effect does not work correctly with non-image content unless that
content area has a solid background (either a background image or a background-color, but not transparent).
Slides to not have to be the same width or height, but if you'd like a consistent width and/or height, make sure to set that within the CSS! */
#slider .slide1 { padding-left: 40px; padding-right: 40px; margin-left: 0; margin-right: 0; }
#slider .slide1 { height: 210px; padding-top: 20px; padding-bottom: 20px; margin-top: 0; margin-bottom: 0; }
.slide1 { height: 500px; padding: 20px 40px; }
.slide1 h2 { color: #fff; font-size: 20px; margin: 0 0 20px 0; text-align: left; }
.slide1 p { border-left: 3px solid #fff; color: #fff; padding: 0 0 0 10px; }
.quote, .quote2, .quote3 { height:400px; padding: 20px 0; width: 980px; width: 100%; position: relative; }
.quote { background-image: url(../images/weare.png); background-position: center; background-repeat: no-repeat; }
.quote2 { background-image: url(../images/headlogosandroid.png); background-position: center; background-repeat: no-repeat; }
.quote3 { background-image: url(../images/ideafront.png); background-position: center; background-repeat: no-repeat; }
.plusslider a img { border: none; } /* Prevent blue borders in IE (not only does it look ugly, but it messes up spacing which breaks the "slider" type */
.plusslider-pagination { position: absolute; left: 0; bottom: 0; }
.plusslider-pagination li { float: left; list-style: none; margin-left: 5px; }
#slider3 {margin: 0; padding: 0;}

You have (in FF) exactly 17px extra width that is exactly the width of the browser scrollbar.
Your starting (initial) loading black screen (that animates) leaves a glitch of 17px:
cause it's animation maintains the DOM width that equals the screen width without the right scrollbar (100% screen width).
After the page is fully loaded and the scrollbar is added to the page, it actually adds the extra 17px (to the 100%) width that were maintained by the Loading animation.
Hope I put you in the right direction.
By the way, try to add:
html {
overflow-y: scroll;
}
and - if still needed - adjust the loading element width as I mentioned before.

Add this:
body{
overflow-x: hidden;
}
Problem solved. (temporarily)
So where is the problem?
It is at your <div> with the classes plusslider slider3 plustype-slider. You are constantly setting an incorrect width to it. You have to subtract the scrollbar width.

You can also try to do this: Padding: 0px(or whatever) 17px; and margin: 0px(or whatever) -17px; now your whitespace at the sides are gone.