在大屏幕上查看时，Div似乎从中心移开
[英]Div appears to remove from the center when viewed on larger screen
问题描述
I have a section of my home page that when viewed in screen sizes other than the one I am working on, it changes position. 
我的主页上有一部分，当以非我正在使用的屏幕尺寸查看时，它会改变位置。 I think it is to do with the position element but I am not sure exactly what it should be set to or where it should be placed within my CSS. 我认为这与position元素有关，但我不确定应该将其设置为什么或将其放置在CSS中的位置。
The section I want remaining in the same place is a jquery image transition which is shown below the navigation menu within the image. 我想保留在同一位置的部分是一个jQuery图像过渡，显示在图像中的导航菜单下方。 See HTML and CSS below aswel for further reference. 有关更多参考，请参见下面的HTML和CSS。
Thank you for any help guys 谢谢你们的帮助
HTML:
<body>
<div id="top_bar">
<div id="top_inner">
<div id="logo"> <a href="http://www.edosbornephotography.com"><img src="images/logo.gif" alt="Ed Osborne" width="225" height="115" class="logo"></a></div>
<div class="nav">
<ul class = "menu" >
<li> <a href = "#" > Home </a> </li>
<li><a href = "#" > Packages </a>
<li><a href = "#" > Weddings </a>
<li><a href = "#" id="left" > Lifestyle </a>
<ul class = "submenu" >
<li> <a href = "#" > Families </a> </li>
<li> <a href = "#"> Newborn/Child </a> </li>
<li> <a href = "#" > Portraits </a> </li>
</ul>
</li>
<li> <a href = "#" > Blog </a> </li>
<li><a href = "#" id="left"> Abous Us </a>
<ul class = "submenu" >
<li> <a href = "#" > Ed Osborne </a> </li>
<li> <a href = "#" > Testimonials </a> </li>
<li> <a href = "#" > FAQs </a> </li>
</ul>
</li>
<li> <a href = "#" > Contact Us </a> </li>
<li> <a href = "#" > Links </a> </li>
</ul>
</div>
</div>
</div>
<div id="main">
<div id="smart-gallery">
<a href="images/cubagallery-img-1.jpg">
<img src="images/cubagallery-img-1.jpg" /></a>
<a href="images/cubagallery-img-15.jpg">
<img src="images/cubagallery-img-15.jpg" /></a>
<a href="images/cubagallery-img-3.jpg">
<img src="images/cubagallery-img-3.jpg" /></a>
<a href="images/cubagallery-img-4.jpg"></a>
<img src="images/cubagallery-img-4.jpg" /></a>
</div>
</div>
CSS: CSS：
#top_bar {
width: 100%;
height: 145px;
background: #000000;
padding-bottom: 20px;
}
#top_inner {
text-align: center;
margin: 0 auto;
width: 1000px;
height: 144px;
}
.nav {
margin: 0 auto;
position: relative;
padding-top: 100px;
}
ul.menu {
list-style: none;
margin: 0;
float: left;
background: #222;
font-size: 1.2em;
background: url(../images/topnav_bg.gif) repeat-x;
}
ul.menu li {
float: left;
margin: 0;
position: relative;
}
ul.menu li span {
width: 11px;
height: 35px;
float: left;
background: url(../images/subnav_btn.gif) no-repeat center top;
}
.min-gallery
{
width: 927px;
height: 615px;
border: solid 1px black;
background-color: Black;
background: url(../images/bg.jpg);
margin: auto;
margin-left: 232px;
}
.min-gallery .preview
{
width: 852px;
height: 493px;
margin-top: 36px;
margin-left: 36px;
margin-right: 36px;
position: relative;
border: solid 2px black;
overflow: hidden;
background-color: White;
}
.min-gallery .preview img
{
width: 795px;
height: 525px;
position: absolute;
}
.min-gallery .bottom
{
width: 100%;
height: 98px;
color: Gray;
font-family: Arial;
font-size: 1em;
font-weight: bold;
overflow: hidden;
}
2 个解决方案
解决方案1
2 已采纳 2012-09-16 13:35:18
You html code does not contain any element with min-gallery class... but if you change it min-gallery with smart-gallery: 您的html代码不包含具有min-gallery类的任何元素...但是如果您将其更改为具有smart-gallery的min-gallery：
.smart-gallery
{
width: 927px;
height: 615px;
border: solid 1px black;
background-color: Black;
background: url(../images/bg.jpg);
margin: auto;
margin-left: 232px; <- remove
}
.smart-gallery...
解决方案2
1 2012-09-16 13:37:23
You can use percentages rather than pixels to position the gallery. 您可以使用百分比而不是像素来定位画廊。 A better way would be to use css media queries, so as the window changes so does the size and placement of your div. 更好的方法是使用CSS媒体查询，因此随着窗口的更改，div的大小和位置也会更改。
There is not enough info here for me to write any pseudo code, and I couldn't load your site. 这里没有足够的信息供我编写任何伪代码，因此无法加载您的网站。 But the following sites should get you started in the right direction. 但是，以下站点应该帮助您朝正确的方向开始。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.