I have a graph that looks like this (yes it needs some styling ):
whole graphic when window is larger
this is a graphic seen in its entirety.
When i make the window smaller, it cuts of the right side of the graphic. I don't want that i want the grapihc to go left to show the right side of the graph when its smaller. does anyone know how to do this?
this happens when resizing windows to mobile
i need it to do this. entire graphic to go to the left
In the link you have provided, the graph resizes. But if you want to show your right side of the graph, fix the width and then use position property along with right: (any)px.
Hope this is what you were talking about :)
I have prepared a demo below. Where .graph is your graph.
Add absolute position with 0 right with 100% width and height.
By default I have set 100% width to the graph.
For smaller screens, specify the proper dimensions in media query and fix the width of graph. Thus it would stick to the right once the screen width exceeds your graph width.
.graphCont{
width: 100%;
height: 200px;
position: relative;
}
.graph{
position: absolute;
right:0;
height:100%;
width:100%;
background: orange;
}
#media screen and (max-width: 500px){
.graph{
width:300px;
}
}
<div class="graphCont">
<div class="graph">
</div>
</div>
Related
Here's the situation. I'm building a webpage where i position an image on the right side of the page. When I make the browser window smaller, i want horizontal scroll bars to appear, so i include overflow: visible property. I also want the image to be positioned fixed so that when the page is scrolled down the content in the middle along with the background scrolls but the image stays as it is. But I am not able to bring both features to my page.The two properties seem to conflict each other. Is there a way around it?
Your code is too little.The problem of the front with the example of code.
try img fixed:
img.fixed{
position: fixed;
right: 10px;
top: 10px;
width: 100px;
z-index: 55;
}
I think you need to use css concept called media types....
you can not achieve this using only position:fixed
add this css to your page
#media all and (max-width: 699px), (max-height: 500px){
.overflowDiv{
position:fixed;top:100px;height:100px;width:100px;
overflow:scroll;
}
change max-width and max-height according to your need
here is jsfiddle demo
Hope it'll help you.
Thank you
So I have a div that stick at the top right hand corner of my screen.
I can make the div stay at the top right hand corner using the following CSS:
.dockbar {
background: #000000;
width:300px;
float:right;
position: absolute;
left:1180px;
top:10px;
height:38px;
}
But I hate this approach because the div has space to the right if the screen is larger. I would prefer to using percentage based sizing, but doing that causes the div to move with the screen (because of the percentage..)
Is there a way to position a div at the top right hand corner:
Without using fixed positioning
Without declaring exact pixel based positioning
Thanks
Change left:1180px; to right: 0px and everything should work fine.
#wrapper{
width: 800px;
}
<div id="wrpper">
<div class="dockbar"></div>
</div>
Something like this, maybe.
See this webpage.
First try scroll it, see that the left bar remains fixed.
Resize the height of your window, so that not all of the content of the left bar is visible. Now scroll. This time, the left bar is not fixed.
In this page, there is a jquery that calculates height of left bar, compares it to the window-height and then makes the left bar position fixed or absolute.
However, I'm wondering if something similar is achievable through just HTML and CSS, not using jQuery or similar.
Any suggestions?
In short what I'm looking for is a bar with content that remains fixed, but is scrolled if the content overflows. But the scrolling should be together with the whole page.
You can use media queries to direct CSS at certain screen sizes (and other things too) so you could use one stylesheet if the screen is too small. I'm no expert so no examples, but take a look here http://css-tricks.com/css-media-queries/ . Sorry! but guess you figured it out :)
Edit: The working result is this:
#leftnav {
/* default look */
width: 300px;
position: fixed;
top:0;
height: 100%;
}
/* set the size at which the content is clipped and we cannot have fixed position */
#media all and (max-height: 500px) {
/* things inside here will only have an effect if the browser window shows
less than 500 px in the height, so here I apply the special rules */
#leftnav {
position: absolute;
height: auto;
/* etc.. */
}
}
I'm trying to create a "fluid" website and have in my css file:
page-wrap{
min-width: 780px;
max-width: 1260px;
margin: 10px auto;
}
In my template for the page, I have my main body of text set to a width of 80% and centered. My intention is that when I make my browser window smaller, it will remove the white space on the left and right side of the body until there is no space around the body. At that point, a horizontal scroll bar appears. I'm not sure if I explained that clearly, but an example would be like stackoverflow.com, with the whitespace on the left and right side of the body being removed when you make the browser window smaller. Unfortunately, with what I have, the space around my main body stays the same while my main body adjusts to the 80% width. So what do I need to do to correct it and achieve my desired results? Do I need a fixed size for this instead of a percent?
That's fairly simple, all you need to do is have a fixed width on your page wrap div with auto margins.
#page-wrap
{
width:780px;
margin:10px auto;
}
Forget the min/max-width.
It's not clear for me.
If you use, for the width 80% of the available window width, it's normal that the bloc resizes to adapt…
You must have a fixed width for the center part.
I use this :
#centerdiv {
position: absolute;
width:950px;
left: 50%;
margin-left:-475px; }
Ok, lets see if i can explain this. My page content has a width of 960px. It is centered in another div that has a width of 1426px (#siteWrap).
#siteWrap{
margin:0px auto;
width:1426px;
background: url(../images/bg.jpg) no-repeat ;
}
What i need to find out is how to get #siteWrap to center on a page regardless of screen resolutions. Most of my visitors are on a 1024x768 screen resolution. When i test this page on that resolution i am forced to scroll left to right to get to the site content.
Any help would be appreciated.
Just set
width: 100%;
and the margin: 0 auto; should be set on your content div, not on this one.
When a container overflows horizontally, the browsers natural reaction is to dock it to the left side of the screen. I think it should be doing this. To get around it, you can use Javascript to center your container element by calculating the necessary offsets based on screen/viewport resolution.
Try the following:
#sitewrap {
position:absolute;
top:0px;
left:50%;
width:1426px;
margin-left:-713px;
background: url(../images/bg.jpg) no-repeat ;
}
This will be centered but will overflow the browser window.