I have a problem with two sides of my site, this is the link http://www.pagodamc.org When viewed in a decent resolution of say 1024*768, you don't have any overlap of the "sponsors" or the "announcements" portion of the page.(if you re size your browser, you'll see what I am referring to). However, if you re size the window, you have severe overlap. I searched, and couldn't find much relative to what I was looking for. I would like the page to always be a fixed width or at least so that the "sponsors" and "announcements" portion wont overlap the main page开发者_高级运维. How do I incorporate the positioning of these elements? Thanks in advance!
These are my elements
#sponsors{
z-index:300;
position:absolute;
left:0px;
top:140px;
}
#alerts{
position:fixed;
right:0px;
top:80px;
width:180px;
}
The inverse of your case-study problem is also true: when the screen is too large it also looks pretty crummy:
It seems that what you really want is a 4-column layout:
header
-------------------------------
Sponsors | Body | Nav | 2nd Nav`
Check out this css layout generator
Doing it this way will save you major headaches, and is really the industry standard way to do it.
For a layout like this, that generator tools creates this code: Perhaps you can learn from it, and incorporate it into your own design!
.header{
position: relative;
float: left;
left: 448px;
width: 1024px;
background-color: #f4f4f4
}
.wrapper{
position: relative;
float: left;
left: 448px;
width: 1024px;
background-color: #cccccc
}
.left1{
position: relative;
float: left;
left: 4px;
width: 115px;
background-color: #ccccff
}
.left2{
position: relative;
float: left;
left: 12px;
width: 601px;
background-color: #ccccff
}
.left3{
position: relative;
float: left;
left: 20px;
width: 115px;
background-color: #ccccff
}
.right{
position: relative;
float: right;
right: 4px;
width: 161px;
background-color: #ccccff
}
.footer{
position: relative;
float: left;
left: 448px;
width: 1024px;
background-color: #cfcfcf
}
body {
border-width: 0px;
padding: 0px;
margin: 0px;
font-size: 90%;
background-color: #e7e7de
}
I usually find a size that is as small as I can possibly let the site be, and then put a wrapper div around my main content with min-width: 60em; This way, the site will never compress below that size, and it's scalable (with em).
You could do this:
html, body {
width:1280px;
}
But the site would be very wide..
You could also make the sidebars very thin, and add divs to them with margins and widths.. But then they wouldn't always be visible..
You could also make the site the width of the smaller inner section inside a centered div and then position the left and right panels with negative values
#sponsors{
z-index:300;
position:absolute;
left:-180px;
top:140px;
}
#alerts{
position:fixed;
right:-180px;
top:80px;
width:180px;
}
Of course you loose the position of the right hand side of the browser this way so your menu would float.
You can use min-width on your body so that the user sees the sidebars even when the browser window is small. This should be the width of your content and your sidebars. As an alternative you can set z-index on the sidebars for browsers that don't support min-width (IE6). The body has position:relative so that the sidebars area to be positioned in, is the size of the body (even when there are horizontal scrollbars). They are positioned with position:absolute.
CSS:
* { margin:0; padding:0 }
body { text-align:center; min-width:800px; position:relative }
#content { width:600px; background:black; margin:0 auto; text-align:left }
#sponsors, #announcements { position:absolute; width:100px; background:gray; top:0; z-index:-1 }
#sponsors { left:0 }
#announcements { right:0 }
HTML:
<body>
<div id="sponsors"></div>
<div id="content"></div>
<div id="announcements"></div>
</body>
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论