just a quick question. I have recently dicovered the use for percentages and positioning in css. However I'm having a little trouble with moving elements.
I have two Images one on the left side of the screen and one on the right. both images are set to relevent positioning. The issue im having is getting the image on the right to stay put rather than moving to stay in frame of the window. How would I achieve this using percentages?
Css
.left {
position:relative;
left:0%;
z-index:250;
}
.right {
position:relative;
right:100%;
z-index:250;
}
ADDED ON REQUEST
/* -- page layout */
#wrapper {
position:relative;
width:auto;
height:auto;
margin:0;
padding:0;
z-index: 0;
}
#wrapper #head{
position:relative;
width:100%;
height:50px;
z-index:200;
margin:0;
margin:0;
}
Note
These images are placed within a a div, that spans 100% of the screen. Thanks again!
If I follow you correctly, try
.right {
position:relative;
left: 80%;
z-index:250;
}
I recommend using float instead.
http://jsfiddle.net/beautifulcoder/HCjvK/
/* -- page layout */
#wrapper {
position:relative;
width:auto;
height:auto;
margin:0;
padding:0;
z-index: 0;
min-width: 1280px;
overflow:hidden;
}
This has fixed it for me! Thanks for all your help!
Related
I'm making a small website. The background is filled with a picture, say, a map. On the right is an overlay on top of the picture. The overlay has a title, and a list below it.
Now I cannot get to have the list get a scrollbar if it is too large to fit in the screen.
I do not want the page to scroll: the background fills out the screen 100%. I do not want the complete overlay to scroll (comment out the first CSS comment to get this). I also do not know the size of the title beforehand - if I knew that, it would be easy (simply comment out the second comment in the CSS, and hey presto, works). I can go the long way, and have javascript watch the title panel size, but I'd rather have a plain CSS/html solution.
Any ideas?
Code:
<html>
<style>
div {
font-size:1.5em;
padding:10px;
background-color:green;
}
html, body {
height:100%;
margin:0;
}
.panels {
position:fixed;
top:50px;
right:50px;
bottom:50px;
/* overflow:auto; */
}
.list {
/* position:absolute;left:10px;right:10px;top:150px;bottom:20px; */
background-color:white;
overflow:auto;
}
</style>
<div class='panels'>
<div class='header'>Some title or other</div>
<div class='list'>
<ul>
<li>Entry</li>
...lots of entries...
<li>Entry</li>
</ul>
</div>
</div>
</html>
JSFiddle: http://jsfiddle.net/95ajc0us/
Add height:100% for the second div.
.list {
background-color:white;
overflow:auto;
height:100%;
}
DEMO
If you wish the list should scroll down in case of more entries.
Just write down :
ul{
overflow:scroll;
height: 200px;
}
for your UL(Unordered list)
Please feel free to ask again we are not on same page..
Thanks
you have fixed the html and body position.
instead fix the position of header
.header{
position:fixed;
width:100%;
left:0;
top:0;
}
link
You'll need to adjust the top and bottom properties to taste:
div
{
font-size:1.5em;
padding:10px;
background-color:green;
}
html, body
{
height:100%;
margin:0;
}
.panels
{
position:fixed;
top:50px;
right:50px;
bottom:50px;
}
.list
{
position:absolute;
left:10px;
right:10px;
top:150px;
bottom:20px;
background-color:white;
overflow-y:scroll;
}
scroll is missing because you have a fixed panel, which will prevent the div from scrolling
you need to fix header, not list
.header{
position:fixed;
width:100%;
top:0;
}
demo
final edit (updated fiddle on Suresh Ponnukalai answer)
I am trying to lay out a group of images in a table format with using div's. I have an image and then I want to put a Delete link underneath the image. But I can't get it to layout correctly. This is what I have:
<div class="container">
#foreach (var item in Model)
{
<div class="imagetiles">
<img src="#Url.Content(item.ImageURL)" alt="" width="30%" height="30%" />
<a>Delete</a>
</div>
}
</div>
My styles look like this, I copied it from the Fiddler mentioned in the comments below. The Fiddler works, but when I apply it, it doesn't work.
div.container {
width:100%;
}
div.imagetiles {
display:inline-block;
margin:10px;
}
div.imagetiles a {
display:block;
text-align:right;
width: 30%;
}
Below is how this renders. I want this to put the images next to each other with up to 3 per line. Why doesn't the Fiddler work for this here? Why is the imagetile div so big, I can't reduce it to fit the image?
If you want three per row, I would set the image container (not the main one) to be 33% and then make the width of each image to control the spacing around it (kind of like padding). Something like this:
div.container {
width:100%;
margin:0; /* make sure there is no padding or margin on container */
padding:0;
}
div.container div.imagetiles {
float:left;
width:33%;
padding:0;
}
div.container div.imagetiles img {
width: 95%;
margin: 10px;
}
div.imagetiles a {
display:block;
text-align:right;
width: 100%;
}
Demo: http://jsfiddle.net/Gd2V6/
If you are using something like LESS (recommend or SASS):
div.container {
width: 100%;
margin:0; padding:0;
div.imagetiles {
float:left;
width: 100%;
padding:0;
img {
width: 95%;
margin:10px;
}
a {
display:block;
text-align:right;
width: 100%; /* may need to tweak this */
}
}
}
There are small things we need to maintain when display is not defined.
Also we need to analyze the position: property of element that plays big role in this.
After adding the above I have added z-index to the element and that did it!!.
Have a look at this fiddle
CSS:
div.container {
display:block;
width:100%;
position:relative;
}
div.imagetiles {
display:inline-block;
margin:10px 5px;
float:left;
}
div.imagetiles img{
position:relative;
display:inline-block;
z-index:1;
}
div.imagetiles a {
height:25px;
width:50px;
position:relative;
display:inline-block;
float:right;
top:-25px;
left:-50px;
z-index:10;
}
your Implementation is all right. you just need to add width of imagetiles
like:
div.imagetiles {
display:inline-block;
width:30%;
margin:10px;
}
It will work like a charm :)
I am trying to scroll a content child of a fixed div. I am trying to scroll without the scroll bar being visible (using the mouse scroll). I have pretty much tried all the solutions I came across on Stackoverflow and on google in general but no success.
Please find here the JSfiddle of the problem:
THE CSS:
#left-panel {
position:fixed;
height:100%;
top:0px;
left:0px;
border:1px solid red;
width:220px;
overflow: hidden;
}
nav {
position:relative;
height:100%;
overflow-x:hidden;
overflow-y:auto;
}
JS FIDDLE:
http://jsfiddle.net/5Xg5v/2/
Please note that the parent div must be fixed and must be 100% height.
Thank you in advance!
You could kinda hack it cross-browser by expanding the width of the nav element and force scrollbars. Updated JSFiddle.
nav {
position:relative;
height:100%;
width: 110%; /* <---- */
overflow-x:hidden;
overflow-y:scroll; /* <---- */
}
Of course, you'll want to adjust the percentage to your needs or use calc( 100% + 15px ).
You can try the following :
#left-panel {
position:fixed;
height:100%;
top:0px;
left:0px;
border:1px solid red;
width:220px;
overflow:hidden;
}
nav {
height:100%;
overflow-y:auto;
overflow-x:hidden;
width:100%;
padding-right: 15px;
}
Example
You can style the scrollbar using webkit.
element::-webkit-scrollbar {styling here}
In order to hide the scroll bar on your nav element you can use the following:
nav::-webkit-scrollbar {
width:0!important;
}
I'm creating a sidebar with this CSS code:
.sidebar {
position: absolute;
z-index: 100;
top: 0;
left: 0;
width: 30%;
height: 100%;
border-right: 1px solid #333;
}
But the sidebar width doesn't scale when I change the browser width. How can I make the sidebar fluid?
Thanks.
Look at the height in body in CSS part.
Here is a working example for you:
Your HTML:
<div id="content">
<p>This design uses a defined body height of 100% which allows setting the contained left and
right divs at 100% height.</p>
</div>
<div id="sidebar">
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>
Your CSS:
body {
margin:0;
padding:0;
width:100%; /* this is the key! */
}
#sidebar {
position:absolute;
right:0;
top:0;
padding:0;
width:30%;
height:100%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:1px solid #333;
}
#content { margin-right: 200px; }
Its kind of an odd issue, but it seems its challenging to get the background color to stretch to the bottom of both columns, when using fluid layout.
I included the workaround along with a simple 2 column fluid layout.
Try this- jsFiddle
html, body {
margin:0;
padding:0;
background:silver;
/* workaround to get the columns to look even,
change color depending on which column is longer */
}
#sidebar {
position:absolute;
left:0px;
top:0px;
padding:0;
width:30%;
background:silver;
word-wrap:break-word;
}
#content {
position:absolute;
right:0px;
width:70%;
word-wrap:break-word;
background:gray;
}
On this site, you'll see that the footer is stuck on the left. This is the CSS:
#footer {
width: 800px;
clear:both;
float:right;
position:relative;
left:-50%;}
Please let me know why this might be.
Thanks,
Tara
You should keep it simple and use:
#footer {
width: 800px;
clear: both;
margin: 0 auto; /* center it */
}
This is exactly the same technique as you've already used successfully on .container, for instance.
#footer {
position:absolute;
bottom:0px;
width:100%;
}
Example demo : http://jsbin.com/ecolun/3
To center the footer:
#footer {
width:800px;
position:absolute;
padding-left:50%;
margin-left:-400px;
bottom:0px;
}