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;
}
Related
Heres an image of the issue I'm trying to resolve. I am working on my portfolio site; and I have images of some of my personal projects, all of them are the same width but some have different heights. Due to getting full page screenshots of my work, some of the images have a much greater height than others. Instead of allowing displaying all the images the same size and allowing scrolling in the modal window, it scales the images down to fit within the same height as all the others. This gives it an odd look cause some of the images get scaled down a lot. I would like to get all the images to display in the same width, and those that need it to allow scrolling to see the rest of the image. I tried to use overflow: scroll; on the .lightbox but that didn't help. I've also tried overflow-y. I would also like to disable the page in the background from being able to scroll, to allow the scrolling to be focused on the images that it is necessary on.
.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
}
.lightbox .lb-image {
display: block;
min-width: 100%;
height: auto;
border-radius: 3px;
/* Image border */
border: 4px solid white;
}
.lightbox a img {
border: none;
}
.lb-outerContainer {
position: relative;
*zoom: 1;
width: 250px;
min-height: 250px;
margin: 0 auto;
border-radius: 4px;
/* Background color behind image.
This is visible during transitions. */
background-color: white;
}
Lightbox2 by default appends calculated width & height to the image and .lb-outerContainer. But you can override this by doing the following -
.lb-outerContainer {
width: 100% !important;
height: auto !important;
}
.lightbox .lb-image {
width: 100% !important;
height: auto !important;
}
I don't recommend this because this breaks the intended use of this plugin. I'm sure you'll find an alternative to lightbox2 that achieves what you're looking for. So you can consider this as a temporary fix.
EDIT: Here's a jsfiddle to see it work. https://jsfiddle.net/hsugx6wm/43/
this might be a weird one but what I am trying to do is make a div slide up from the bottom of the screen when someone clicks an image. To paint this clearer, imagine the Windows desktop, and if you click the start menu image/icon, instead of the start menu popping up from the button, the entire start menu bar would slide up exposing the entire div.
What I'm doing now (forgive me as I have just learned JS and jQuery from codecademy) is using the slideUp function. However, this is causing the div to slide down out of sight instead of up, exposing the entire div. The goal is that when you click the button the div slides up, and if you click the button again (or anywhere outside the div) it'll slide back down leaving the top 60px exposed like before.
Here's my JS/jQuery code:
$('#start').click(function() {
$('#nav').slideUp('slow');
});
My HTML
<div id="nav" class="nav">
<img id="start" src="img/btn_start.png">
</div>
My CSS
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
font-family: Helvetica;
}
.nav {
width: 100%;
min-width: 100%;
height: 500px;
background: #000;
color: #fff;
position: absolute;
bottom: -440px;
text-align: center;
padding: 5px;
box-sizing: border-box;
overflow: auto;
}
.nav ul li {
display: inline;
}
.nav li {
padding: 20px;
margin-top: 80px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#start {
float: left;
}
Thanks, and I hope this isn't too ridiculous.
Instead of slideUp you should use
$('#start').click(function() {
$('#nav').animate({bottom: "0px"}, 1200);
});
...which will smoothly animate from the current location until the bottom is at 0px (i.e. aligned with the bottom of the containing element).
For even smoother results, checkout velocity.js (http://julian.com/research/velocity/), which does even smoother animation by synchronising with browser frame updates.
JsFiddle here: http://jsfiddle.net/11r46jnm/
You can also do this with CSS transitions instead. For stuff like this I like to hook my CSS into data attributes on the HTML:
<div id="nav" class="nav" data-nav-state="collapsed">
<img id="start" src="img/btn_start.png">
</div>
...use javascript to change the attributes...
$('#start').click(function() {
//toggle the nav element between two states
var currentState = $('#nav').attr("data-nav-state");
var newState = "collapsed";
if ( currentState === "collapsed" ) {
newState = "expanded";
}
$('#nav').attr("data-nav-state", newState);
});
Finally we use CSS to set the positions of the two states, and to ensure that transition is smooth. CSS transitions have much better performance than jQuery, so I recommend using them if you can:
#nav[data-nav-state=collapsed] {
bottom: -440px;
}
#nav[data-nav-state=expanded] {
bottom: 0px;
}
#nav {
transition: bottom 1.2s ease;
}
See this jsFiddle for a demo: http://jsfiddle.net/Lv2saepy/1/
after 1 hour of try and error and searching for problems like this, i try to get an answer here.
I want to include a bootstrap Nav-Bar into a Div.
I centered the Nav-Bar, but now my Div is higher then the content. This problem is only available when the Nav-Bar is centered. If i let if float left, the space below the Nav-Bar isnt there...
Screenshot (i want to remove the red-striped part)
here my Code:
Code
a margin-bottom:0; will do the trick if added to navbar
.navbar {
margin-bottom:0;
}
This is a bootstrap example with both navbar and jumbotron
Try this:
#header {
color: white;
width: 100%;
background-color: #222222;
font-weight: 100;
margin: auto;
padding: 30px 0;
text-align: center;
font-size: 1.2em;
}
I'm creating a website which needs to be responsive, no problem here as I know how that's being done, but I also need to change the display based on the size of the screen, and this must be done dynamiccly and thus I cannot use media queries (I think).
I'm open to all options: pure css, html, javascript, jQuery, ...
I have a website which looks like the the following:
This is looking already good, now, when I resize the window to make it smaller, the background will dissapear, and this is achieved based on a CSS3 media query:
#OfficeUI { min-height: 52px; background: url('../Images/Application/Backgrounds/Circuit.png') no-repeat scroll right top rgba(0, 0, 0, 0); color: #444; font-family: 'Segoe UI'; font-size: 0.75em; overflow: hidden; }
#media screen and (max-width: 497px) {
#OfficeUI { background-image: none; }
}
So far, so good, but now the real problem does show up.
When I resize the window to a very small portion of what it is right now, the website does behave like this:
In this particular case, the text 'Inbox - user...' is moving over the icons. What I would like to have here is that the area of the icons is made smaller, meaning that the most right icon will not be showed anymore. If I further resize the window, the area can shrink again so again an icon is removed.
But the problem here is that I don't have any control over the content which is displayed, there might be 6 icons and there might a very long title, or vice versa.
The only idea I can up with, not implemented in a solution is the following (jQuery):
Calculate the width of the Window.
Calculate the width of the title area.
Calculate the width of the icons area.
On resizing the window, I would implement them something like this:
If the size of the icons area and the size of the title area is larger than the window size, then shrink the icons area with a specified amount of pixels (predefined) so that 1 image is removed and repeat that on every resize.
The only problem that I do have with this solution is that the website will grow a lot and performing all those kind of calulcations on every window resize might not be best-practice.
I'm a bit affraid that the website will become very laggy.
[EDIT]: I've added a snippet with the current code.
/* General styling that can be applied to all the elements. */
.no-margin { margin: 0px; }
.no-padding { padding: 0px; }
/* General styling for the root of the website. */
#OfficeUI { min-height: 52px; background: url('../Images/Application/Backgrounds/Circuit.png') no-repeat scroll right top rgba(0, 0, 0, 0); color: #444; font-family: 'Segoe UI'; font-size: 0.75em; overflow: hidden; }
/* General styling that can be applied to all kind of elements inside the OfficeUI container. */
#OfficeUI .center { text-align: center; }
#OfficeUI .absolute { position: absolute; }
/* Container elements. */
#OfficeUI .container { display: inline-block; }
#OfficeUI .container-full-width { width: 100%; }
/* Styling for the OfficeUI elements itself. */
#OfficeUI .application-title { margin: 6px 3px 0px 0px; }
#OfficeUI .application-icons img { margin: 3px 1px 0px 4px; }
#OfficeUI .application-icons img:first-child { margin: 3px 0px 0px 7px; }
#OfficeUI .application-icons img:hover:not(:first-child) { background-color: #cde6f7; }
/* Provide some responsive styling.
The following styling is applied to the screen when the width of the window is less than 497px. */
#media screen and (max-width: 497px) {
/* Hide the background image when the size of the screen is smaller than the size of the background-image. */
#OfficeUI { background-image: none; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Defines the main content area for the website. -->
<body class="no-margin no-padding">
<!-- Provides the main OfficeUI area. -->
<div id="OfficeUI">
<!-- Defines the header itself. -->
<header>
<!-- Provides the area in which the application icons are being showed. -->
<div class="absolute">
<div class="container application-icons">
<img src="Resources/Images/Application/Application.png"/>
<img src="Resources/Images/Application/Send-Receive.png"/>
<img src="Resources/Images/Application/Undo.png"/>
</div>
</div>
<!-- Provides the area in which the application title is being rendered. -->
<div class="container container-full-width center">
<div class="application-title">Inbox - user#github.com - Outlook</div>
</div>
</header>
</div>
</body>
When the window is resized, I would like to see something like:
Any toughts on this?
Kind regards,
#OfficeUI .application-icons { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#media screen and (max-width: 350px) {
#OfficeUI .application-icons { width: 25px;}
}
#media screen and (max-width: 250px) {
#OfficeUI .application-icons { display: none}
}
Demo: http://jsfiddle.net/qk1du0wh/
I have four <div>. One of them is not displayed using display:none and is only displayed once you click an icon. When the item is clicked jQuery toggle function is called. One <div> is set to display:none and the one which was previously hidden is displayed. This is working perfectly but for some odd reason the page content moves 10 pixels or so up on toggle. I don't know what's causing it as all the <div> have same css and classes. Here is the css:
element.style {
margin-right: 5px;
margin-left: 10px;
left: 0px;
display: block;
}
#contactus {
background-color: #DDD;
position: relative;
position: relative;
left: 0;
}
#media (min-width: 1200px)
.span4 {
margin-left: 5px;
width: 320px;
}
span4 is the class for the toggled divs. Element styling is also the same. Can any one give me a hint what is causing this behavior. Here is the url:
http://contestlancer.com/davidicus/
You can see it the problem if you click on message icon besides the logo heading.
Ahmar.
add a height to your logo header eg
height: 90px;