Hello i have question when i'm watching on my bigger monitor my height is not correct my height in footer so i need help?
when i'm watching on my bigger monitor is like :
and on small monitor is like :
btw i need fix that lines
Try this code.
https://jsfiddle.net/b2avu1h9/3/
I have edited this part
.column{
width: 20%;
//height:50px;
height: 90px !important;
float:left;
border-right:3px solid #6bae6b;
padding-left:15px;
}
you can try this
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
Related
I'm trying to add a vertical scroll bar to my div, and I have the code there however it's just not working, it's likely I'm doing something wrong, but could someone please help?
This is what I have already, and I am using the browser FF, however it's not working in any browser I open.
width: 200px;
left:20px;
top:10px;
padding:10px;
position: fixed;
float:left;
overflow-y:scroll;
overflow-x:hidden;
height:600;
background-color:#ffffff;
border:solid 1px #e2e2e2;
Thanks in advance!
should be height:600px;
please add the px
You must add max-height on div.
width: 200px;
max-height:50px;
left:20px;
top:10px;
padding:10px;
position: fixed;
float:left;
overflow-y:scroll;
overflow-x:hidden;
height:600;
background-color:#ffffff;
border:solid 1px #e2e2e2;
I made a header(menu) for my website from the left side to right side (like in this image)
and it works. But when I resize web browser right side of header gets cut down (image)
my code:
#header {
width:auto;
height:50px;
background-color:#ffffff;
margin-bottom:10px;
border-bottom:1px solid #ccc;
}
#headercontainer {
width:980px;
margin:0px auto;
}
Use percentage values for better flow. If you want more customization on how you want your website to behave in different screens use media queries. Here is a good tutorial
#headercontainer {
width:75%;
margin:0px auto;
}
Don't use px in width, make your width size in percent like
#headercontainer
{
width: 80%;
margin: 0px auto;
}
#header {
width:100%;
height:50px;
background-color:#ffffff;
margin:0 auto 10px;
border-bottom:1px solid #ccc;
}
if you use auto, the header will adjust to the required width, so you need 100% . Of course, just trying to figure what your html looks like since you didn't include it, but in 9 out of 10 situations, this is what you need
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 am making my own website, but for some reason I can't move the black box into the middle of the screen please could you guys help me out. I have to make it on JSFiddle because I don't have enough RP to show screenshots on here.
Please see this link to view my code:
http://jsfiddle.net/xiiJaMiiE/LfWBn/4/
#white_box {
position:absolute;
margin:auto 0;
min-width:80%;
max-width:100%;
height:85%;
top:0%;
background:black;
z-index:1;
width:80%;
}
Thanks in advance!
If the width is always 80% then just offset the left half of the restant width:
left:10%;
Check this Demo http://jsfiddle.net/LfWBn/7/
Hope it will work:
#white_box {
position:absolute;
margin:auto 0;
min-width:80%;
max-width:100%;
height:85%;
top:7%;
left:10%;
background:black;
z-index:1;
width:80%;
}
You have the margin on auto, try it out: margin: 20px;
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!