i am making a website, where the scroll bar is not showing in any browser.....in firefox i can use down key to move downwards in chrome it worst...i am showing my codes below and i used div tag for division of page..
any suggestion:
globalheader-->at top of page;
globalnav-->should be at left hand side with fixed position no effect of scrolling.
globalcontent-->at the middle of page, here i show all data and results.
globalright-->at the right hand side of page-
css code:
html { overflow: -moz-scrollbars-vertical; overflow-y: scroll; height: 101%;}
body{ padding:0px; margin:0px; }
#globalheader{width:930px; height:28px;background:#fff; z-index:1; position:absolute;
margin: 15px 200px 0px 200px; padding: 1px; float:left; border:0px solid; }
#globalnav { float:left; margin:120px 0px 0px 0px; padding:0px; background:#FFF; z-index:2;
position:fixed; left:0px; overflow:visible; width:150px; height:auto; border:0px solid #ababab;}
#globalright{ margin-top:50px; height:auto; width:205px; position: absolute; left:1055px;
right:0px; top:50px; border:#cdcdcd 0px solid; }
#globalcontent{ margin:50px 105px 20px 215px; border:#aaa 1px solid; height:900px;
float:left; width:761px; border-top:none;}
For #globalcontent's style use, min-height:900px;, instead of height:900px;
Also, 100%, not 101% for html's height.
More importantly, consider using a standard, tried-and-proven layout, like "The Perfect 3 Column Liquid Layout" (et cetera) instead of reinventing the wheel unnecessarily.
Related
I have couple of rectangle boxes aligning in 1 column straight and each boxes has a content in it. Previously I have this below:
.frmPhases
{
width:800px;
border:solid 2px #CCC;
background: #EEE;
height:auto;
padding:14px;
position:relative;
margin-bottom:50px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
}
It displays just fine but with 1 flaw, its width isn't consistent. So every new boxes come in, I have to set its width manually base on its content's maximum width. (This requires id, which would make my CSS code REALLY long)
Now I improved the code to this:
.frmPhases
{
width:auto;
display:inline-block;
border:solid 2px #CCC;
background: #EEE;
height:auto;
padding:14px;
position:relative;
margin-bottom:50px;
margin-top: 50p
margin-left: auto;
margin-right: auto;
}
Now it has consistent width, but the rectangle boxes isn't centralized. The only way to centralize it if I would to manually key in the margin-left, which looks fine but on different resolution it does not. Any idea how to centralize it?
I have a portfolio, which I built myself with the help of lots of people and tutorials. I noticed that the actual gallery (currently featuring 8 thumbs) will not center. Especially when scaled to mobile size it looks a bit crook.
I wrapped the gallery in a div called 'imagewrapper' and gave it these properties;
.imagewrapper{
width: 80%;
margin: 0 auto;
height:100%;
}
Does the width mess with the aligning of my div? The full code is here; http://kellyvuijst.nl. Would be great if you could send me in the right direction.
I would just make a few changes to your css:
.imagewrapper{
width: 80%;
margin: 0 auto;
height:100%;
text-align: center; /* add this */
}
.mask {
position:relative;
height:180px;
width:240px;
box-shadow:0 0 1px #000;
border:5px solid #f6f6f6;
overflow:hidden;
float:left; /* delete this */
margin:15px;
display: inline-block; /* add this */
}
my page has one big div with fixed width, like this:
#index_body{
width: 1010px;
background-image: url('images/main_bg_dark.png');
margin: auto;
overflow: hidden;
min-height: 50px;
padding-bottom: 10px;
border-radius: 7px;
-moz-box-shadow: 0 5px 15px #000000;
-webkit-box-shadow: 0 5px 15px #000000;
box-shadow: 0 5px 15px #000000;
}
I want to add button (20x20px) on the right side of page (vertically in the middle) - still next to index_body.
So the button has code, like this:
#butt {
width:20px;
height:20px;
background: url('images/scrollUp.png');
position:fixed;
top:50%;
left:WHAT SHOULD BE HERE??
}
Because it depends on actual resolution. My index_body is always centered. if I change resolution my button is moved to the left-right...
Instead of setting the left or right position, make sure the button element is inside the index element and then use a margin.
margin: 0px 0px 0px 1010px;
Here is a tested and working version with your code - http://lukewakeford.co.uk/testsite/blackbutton/
#butt {
width:20px;
height:20px;
background: url('images/scrollUp.png');
position:fixed;
top:50%;
right: 10%;
}
The 10% is an example, change to a percentage that looks good, and it should be responsive to screen resolution.
On the other hand, why would you want a fixed element INSIDE a fixed container? just make it absolute and float it to the right with a margin.
ok, it should be just like this:
#butt {
width:20px;
height:20px;
background: url('images/scrollUp.png');
position:fixed;
top:50%;
margin-left: 1010px;
}
I have a white container on top of the bg but it stops even though min-height is set as 100%, heres the CSS for this container and in bottom I have included image of what happens when I scroll to the bottom:
Container where post is:
Yellow Bg:
.home-body {
background-color:#EAC117;
height: 100%;
.home-main-content {
width:800px;
min-height: 100%;
position:absolute;
overflow:hidden;
margin-left:56.5%;
left:-500px;
top:51px;
border-left:1px solid black;
border-right:1px solid black;
background-color:#fff;
background-repeat:repeat-y;
.home-post-echoed-container {
width:400px;
position:absolute;
margin-left:50%;
left:-200px;
top:200px;
overflow:hidden;
}
.home-echoed-posts {
width:600px;
overflow:hidden;
left:-98px;
position:relative;
background-color:#fff;
margin-bottom:-5px;
border-top:1px solid;color:#0a527e;
border-left:1px solid;color:#0a527e;
border-right:1px solid;color:#0a527e;
}
.home-echoed-posts-post {
margin:10px;
color:black;
}
.home-echoed-posts-email {
margin:10px;
color:black;
}
.home-echoed-posts-date {
margin:10px;
color:black;
}
You are doing it wrong.
To center something you should use (instead of absolute positioning):
.foobar{
margin: 0 auto;
width: 800px;
}
As for "why comments are not expanding the container", it is hard to guess without code, but there are two reasonable possibilities: positioning or floats. There nothing i can do about it. But if they are floated, then easies is to have container with following css:
.container{
overflow: hidden;
}
It is a bit counter-intuitive, but works like charm. You can read more about it here.
Update: and read this article too.
Update 2:
Looks like it is the worts case scenario. You are using positioning .. for everything. YOu really need to learn how to use floats.
.home-post-echoed-container {
width: 600px;
margin: 0 auto;
padding-top: 200px; // im guessing what top:200px was doing
overflow:hidden;
}
.home-echoed-posts {
width:600px;
float: left;
background: #fff;
margin-bottom: -5px;
border: 1px solid #0a527e;
border-bottom: 0;
}
Something like this. But I'm really just guessing.
html, body
{
height:100%;
}
Make sure you include that in the top of your CSS script, else setting .home-main-content to min-height:100%; won't work, because to CSS, if undefined elsewhere, 100% is simply the height of the current div.
Also ensure that you have that same property set if your .home-main-content is surrounded by another div.
I know that this has been addressed in many places, but the template I modified was a bit quirky and I believe that I know what is causing the problem. I just don't know what to do to fix it.
The template sets the left and right borders to 200px. I think what it needed to do was make 2 more columns instead of a border that size. I want the partial grey lines on the sides of the page to go all the way down but they don't. I know it's because the content doesn't go all the way down, but for the life of me I can't figure out what to do with this. Should I just start this all over from scratch?
I apologize ahead of time for the page quality it just has random information in it to hold places.
link to page
Site
#container {
width: 950px;
padding:0px;
margin: 0px;
margin-left: auto;
margin-right: auto;
height:100%;
}
#banner {
text-align: right;
background-color: #E39A2D;
padding: 0px;
margin: 0px;
color: #ffffff;
}
/ here is where it goes a little wrong*/
#outer{
border-left: solid 200px #E39A2D;
border-right: solid 200px #E39A2D;
background-color: #ffffff;
height:100%;
}
#inner{margin:0; width:100%; height:100%; }
#left {
width:200px;
float:left;
position:relative;
margin-left:-200px;
margin-right:1px;
border-left:2px solid #564b47;
height:inherit;
}
#right {
width:200px;
float:right;
position:relative;
margin-right:-200px;
margin-left:1px;
border-right:2px solid #564b47;
height:inherit;
}
#content{
position: relative;
margin: 0px;
height:150%;
}
I'm not looking to make it full page length that I know how to do. I'm just looking to extend the lines all the way down the left and right sides.
Thanks ahead of time.
The borders you want to edit are the ones from the #outer div:
#outer{
border-left: solid 200px #564B47;
border-right: solid 200px #564B47;
}
Anyway your code seems a bit weird, using borders for layout is not the right way to go and it will give you problems. Check this out: http://www.barelyfitz.com/screencast/html-training/css/positioning/