Whenever I append new element the div's width will increase. I want it to act as a static one. Why don't I just put it to static pixel value? Well I need to have it working on all monitors and resolutions. I need the width of 100% so it goes to the right border and after appending it acts as the static one letting me scroll through the div.
In JSFiddle I set the width to 50% so you can see how it acts(In real environment it will be 100%) Try clicking 10 or more times on Add Tab to see what's happening. After that change the width to static one to see how I want it to behave.
fiddle
Change this code:
.l_tabs {
height: 57px;
display: block;
width: 50%;
/*Changing this to px works as i want it to work but then i have screen resolution problems TRY to set the width to 500px to see*/
background: #474544 none repeat scroll 0 0;
overflow: hidden;
}
Related
REFERENCE: http://www.templatewire.com/preview/landscaper/
I want to make a web page, and in that page, I want to have divs/sections each the size of the screen.
Now, I mean, the width and height of the monitor, and it won't resize again, and will stay the width and height of that monitor, regardless of the browser size, and regardless of how much content is inside it.
The link shows you what I mean, but I have a 1920x1080 browser window, you can see the top and bottom of the sections above and below it. I don't want the top and bottom of neighbouring sections to be seen if the monitor is very big, nor do I want the section to not be fully visible if the monitor's too small.
Example, say I had 5 sections like in the reference, and my browser window was 1920x1080, the overall height of that document would be 1920*5400.
(I want it to be the height of the screen minus the height on the nav bar.)
You can use Viewport units (the browser window size). 100vh is the height of the screen. If you got sections that bigger than the height of little screen you can use the min-height property and set it to 100vh.
Since you didn't place your code, this is generally example of use case:
section { min-height: 100vh;}
Read more here:
https://developer.mozilla.org/en-US/docs/Web/CSS/length
Good luck!
It appears you're looking for viewport percentage lenghts.
To give any element current viewport's height, in CSS, one should use:
your-selector {
height: 100vh;
display: block;
}
If the element is a <div> or any other element with a default value of block for display, it obviously doesn't need the second rule.
See it working:
your-selector {
height: 100vh;
display: block;
transition: background-color .3s linear;
}
/* let's add a hover, for testing */
your-selector:hover {
background-color: red;
}
body {
margin: 0;
min-height: 200vh;
}
<your-selector>Test</your-selector>
Note: you can also apply viewport percentage lengths to other properties, such as min-height, max-height, etc...
Note: although default viewport is browser window, that's can change. For example, 3d transforms turn any regular DOM element into a viewport for their children, affecting behavior of viewport percentage lengths, as well as behavior of position:fixed in any of their children.
I am trying to create a responsive design for my app.
I have a big background image and it will show the full size when user has large screen and only show partial if user uses small screen.
I want to place few elements on my app with absolute position but the problem is I can't lock their top and left value because the screen size changes.
I have something like
css
#background{
background: url('BG.jpg') no-repeat top center fixed;
width: 1900px;
height: 1200px;
}
#element{
position: fixed;
z-index: 5;
top: 50%; //looks fine in 1900 x 1200 screen but position is off on 1200 x 1000
left:70%; //looks fine in 1900 x 1200 screen but position is off on 1200 x 1000
}
html
<div id='background'></div>
<img id='element' src='test.jpg' />
How do I keep the position of the element on the same spot when user has small screen? Thanks for the help!
When using position: absolute, you need to make sure that it has a parent with a position attribute other than the default (which is static). If there is no such parent, the document is the effective parent. For your example, I would advise making the img#element a child of div#background like so
<div id='background'>
<img id='element' src='test.jpg' />
</div>
and then adding position:relative; to the #background css style
#background{
background: url('BG.jpg') no-repeat top center fixed;
width: 1900px;
height: 1200px;
position: relative;
}
The reason relative is used, is because it doesn't take the element out of the document flow (like fixed or absolute would) and as long as you don't specify a top, left, 'bottom', or right attribute to the parent (#background in the case), it will stay in the same location as it would with default positioning.
Edit:
I don't think this will work out of the box for you. You need to figure out how to make the image's width dynamic as well. You can either give it a % based width or use media queries.
Edit 2:
Ia also just noticed you have position:fixed for img#element. Change that to position:absolute. that will make it so that it is positioned relative to the position:relative parent rather than the window.
Consider making a javascript function that calculates the screen width. After that add margin-left to #background equal to ( screen width / -2 ). Make #background width & height - 100%
I'm working on a site which has some big images etc to show. On my screen, at 1024 x 768 resolution, it fits the screen completely, going from left to right.
However on my client's screen, who has a bigger resolution, he sees the right part of the screen as blank, and wants me to center the layout rather than have it be left aligned. (I have my margin-left set to 0.)
If I simply increase the margin-left, it will cause a horizontal scrollbar to appear on lower resolutions like mine.
Is there any way to solve this that will work on all resolutions? Or do I have to resort to using javascript which will detect screen resolution, and increase the margin-left if the resolution is bigger than a certain value?
#wrapper { margin: 0 auto; width: 960px; }
this will horizontally center an element with id="wrapper", so if all your content is inside that element, your page will be centered
basically if you apply margin-left: auto; and margin-right: auto; to a block element, it will be centered horizontally
Make a container element around all the elements you want to center and give it an id like id="container" then add a css selector to center it.
#container {
margin: auto
}
I just need help making an element fit the remaining space of a div, that is covered by a fixed position element.
Over-simplifying: I have a left-fixed menu and it has 25% of total width BUT a limit: max-width: 350px and min-width: 280px.
I also have a center aligned div that has 80% of width.
I want to put content in the second div, between the point where the divs touch, and the left margin.
I already tryed to put a spacing div between the div start and the menu end, (to the content take the rest of the space), but i reached the conclusion that it is imposible to make those calculations with css due to the min and max widths. (If i change the screen res. the width may change OR NOT).
How can i fix this?
Its javascript a good idea?
I think either this fiddle or this fiddle may get you what you want. In either case, I used a pseudo-element to generate a float to space it.
#container:before {
content: '';
display: block;
float:left;
margin-left: -12.5%; /* push float to left edge based on 80% container width */
width: 31.25%; /* make float 25% of total width based off its 80% container */
max-width: 350px;
min-width: 280px;
height:100%; /* or 90% in first fiddle */
}
The second fiddle also has overflow: hidden set on the #content if you want it kept right always. Both also require a height: 100% set on the body and html tag.
you can use this type javascript
var a =$('#id of outer div').height();
var b = $('#id of inner div').height();
var c = a-b;
$('#id of filling div').css("height",c);
In my intro page I have a really big image in height and width to fit all the resolutions (more than 4000px in width) and I set it as below:
#source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Then, I added some text over that image with these style properties:
.description {
position:absolute;
top:510px;
left:23px;
width:340px
}
And it looks properly (and as I want it to be shown) on my 15.6 inch laptop with 1366x768 resolution.
However when my roommate saw it on his high resolution monitor the description was not on the “right” position. Of course, I understand why this is happening.
My question is how can I keep dynamically the proper position of the description text in all resolutions?
Thank you very much.
Set the distance from the bottom, not from the top. Or set it in %.
EDIT: I've adapted one of my experiments into an example: http://dabblet.com/gist/2787061
The position of the description is set relative to the bottom and the left of the image container (the image is filling its entire container).
In the first case, the distances to the left and the bottom of the image container are fixed, in px.
In the second case, they are in % and change on resizing the browser window.
Basically, the rules that do the trick are
figcaption {
bottom: 5px;
left: 23px;
/* more rules here */
}
in the fist case (fixed distances, in px) and
figcaption.perc {
left: 10%;
bottom: 17%;
}
in the second case (percentage).
Also, please note that you don't need position: absolute or to set the top and the left properties for the image.
However, you do need to set position:relative on the parent of the description box.
For the image to fill the screen horizontally, you need to have margin:0; and padding:0; on the body element and width: 100%; and margin: 0; on the figure element. I've edited my example to reflect these changes http://dabblet.com/gist/2787061
For the image to fill the screen both horizontally and vertically, the easiest way is to not even use an img tag, but simply set the image as a background image for the body and set the height for both the html and the body elements to 100% - example http://dabblet.com/gist/2792929
Be careful for two reasons: one, this will really distort the image and can make it look ugly when resizing the browser window and two, if you need some content below the image you will need to give the the outer element position: absolute and set its top: 100%. Both these two aspects can be seen in the example I've linked to. You can simply remove the content below the image if you don't need it.
use position:relative; for the div that wraps the image, and position:absolute; for the text div
please set percentage
check the example- description box set in horizontal center,
first set position relative into wraper div
.description {
position:absolute;
top:510px;
left:50%;
width:340px;
margin:0 0 0 -170px
}