Trying to make a webpage where the contents don't flow over eachother
I want a webpage so in different screen resolutions the webpage contents have a scroll bar on the side instead of overlapping eachother. This is what i have for css
@charset "utf-8";
/* CSS Document */
body {
overflow:auto;
font-weight:light;
font-family:Andale Mono, "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:.875em;
font-weight:lighter;
text-align:center;
}
a:link { /* unvisited link */
color:#000;
text-decoration:none;
}
a:visited { /* visited link */
color:#333;
text-decoration:none;
}
a:hover { /* mouse over link */
color:#C60;
text-decoration:none;
}
div.mainbody {
margin-top:3%;
font-size:1em;
margin-left:auto;
margin-right:auto;
}
div.textbody {
height:100%;
overflow:hidden;
font-size:.875em;
margin-top:1%;
position:absolute;
margin-left:10%;
margin-right:10%;
}
div.arrowleft {
position:absolute;
top:40%;
margin-left:25%;
}
div.arrowright {
position:a开发者_Python百科bsolute;
top:40%;
margin-right:30%;
margin-left:70%;
}
div.Footerbar {
background:#ffffff;
border-style:dashed;
border-width:1px;
border-left-style:none;
border-right-style:none;
position:absolute;
bottom:1%;
left:0%;
right:0%;
padding-bottom:;
padding-top:;
font-size:.70em;
font-weight:lighter;
text-align:center;
letter-spacing:.2em;
}
div.footer {
z-index:2;
background:#ffffff;
position:absolute;
bottom:0px;
left:0px;
right:0px;
font-size:9px;
font-weight:lighter;
text-align:center;
letter-spacing:2px;
}
div.ads {
position:absolute;
left:0px;
right:0px;
bottom:4%;
width:728px;
height:100px;
margin:auto;
text-align:center;
}
and when i put one of my pages in a standard monitor resolution (1024x768) It causes items to overlap instead of making a search bar. Please help meeee
Not much details given in your question. Here's an example i did where divs do not overlap. As you expand the window contents will start floating horizontally next each other, when window size is smaller, they dropdown vertically. Check example http://jsfiddle.net/5zcge/
精彩评论