Question

从基本的电子商务网站开始，我有一个漂亮的标题设计，带有徽标和一些导航。我注意到当我在页面上放大和缩小 ctrl + scrolling 时，网站上的内容会四处移动，当我使用右上角的调整大小按钮调整网页窗口大小时这也适用浏览器的一角并拖动浏览器的边框。

当我这样做时，我的网站的设计和内容变得非常错误和扭曲。 Div和文本重叠等......

无论如何我可以让内容根本不移动，所以它是静态的吗？我更想要的是，当你调整浏览器大小时，网页内容会被隐藏在浏览器窗口调整大小的地方。

这是我的HTML / CSS：

#cartlist {
    	float: right;
    	margin-right: 353px;
    	margin-top: -50px;
    	padding-left: 300px;
    	
    }

    #carttext {
    	font-family: arial;
    	margin-left: 50px;
    	margin-top: -51px;
    }

    #text {
    	font-size: 14px;
    }

    #count {
    	font-size: 12px;
    	margin-top: -28px; 
    }

    #img a:hover {
    	background-color: e3e3e3;
    }

    #img a {
    	padding-top: 25px;
    	padding-right: 150px;
    	padding-left: 5px;
    	padding-bottom: 5px;
    }

    #headerbackground {
    	background-image: url(bit.jpg);
    	background-repeat: repeat-x;
    	margin-top: -10px;
    	margin-left: -10px;
    	margin-right: -10px;
    	padding-bottom: 1px;
    	
    }

    #headernav {
    	margin-left: 244px;
    	padding-top: 5px;
    	margin-bottom: 10px;
    	margin-right: 250px;
    }

    #headernav li {
    	display: inline;
    	font-family: arial;
    	font-size: 11px;
    	padding-left: 0px;
    	padding-right: 32px;
    }

    #headernav li a {
        text-decoration: none;
     	color:black;
    }

    #headernav li a:hover {
    	color:adadad;
    }

    #headerlogo {
        margin-left: 280px;
        margin-right: 680px;
        margin-top: 10px;
    }


    #nav {
    	margin-left: 240px;
    	margin-right: 675px;
    	margin-top: 24px;
    }

    #nav li {
    	display:inline;
    	font-size: 12px;
    	font-family: arial black;
    	padding-left: 0px;
    	padding-right: 0px;
    }


    #nav li a{
    	text-decoration: none;
    	color:white;
    	background-color: 0f0f0f;
    	padding:8px 19px;

    }

    #nav li a:hover{ 
    	background-color: 333232;
    }

<html>
    <head lang = "sv-se">
    <meta charset="utf-8">
    <title>SSDKUNGEN</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >
    <meta name="viewport" content="width=device-width"/>
    <link rel="stylesheet" href="header.css">
    </head>

    <body id = "body">

    <div id ="header">
    <div id ="headerbackground">
    <ul id ="headernav">
    <li><a href ="">HEM</a></li>
    <li><a href ="">LOGGA IN / REGISTRERA DIG</a></li>
    <li><a href ="">INFOCENTER</a></li>
    <li><a href ="">OM OSS</a></li>
    </ul> 

    <div id ="headerlogo">
    <img src="ssdkungen.png" style="width 410px;height:41px;">
    </div>


    <div id = "cartlist">
    <p id = "img"><a href = ""><img id = "cart" src ="cart.png";></a></p>
    	<div id = "carttext">
    	<p id = "text">Din kundvagn</p><br>
    	<p id = "count">kundvagnen är tom</p>
    	</div>
    </div>

    <ul id ="nav">
    <li><a href ="product_list.php">PRODUKTER</a></li>
    <li><a href ="installation_guide.php">INSTALLATIONSGUIDE</a></li>
    <li><a href ="ssd_info.php">OM SSD</a></li>
    </ul> 

    </div>
    </div>

    </body>
    </html>

代码很乱，但我只是想就我的问题提出一些建议。

Answer 1

一种可能的方法是为页面设置最小宽度。但是，这可以并且将阻止页面响应。

html, body {
    min-width: 1000px;
}

您还可以使用模板系统，如Bootstrap，它允许您以网格系统为中心的方式设计页面。这使您可以优雅地折叠布局以获得更小的屏幕和分辨率。

Answer 2

我还没有测试过您的代码，但这听起来像响应性问题。如上所述，您可以使用Twitter Bootstrap等框架轻松完成此操作，也可以使用百分比而不是px设置容器div的大小。您应该使用媒体查询为特定屏幕尺寸设置特定样式，例如：

@media screen and (min-width: 768px) {
   ...write your styles here
}

如果要隐藏内容使用显示：隐藏; 在窗口达到特定屏幕大小时，在媒体查询内部隐藏该元素。你也应该将所有的身体内容都包裹在一个div中。此div应使用像素作为其宽度/高度，因为其余元素的百分比将基于div的相对大小。

使网页上的设计保持静态

2 个答案: