为中心的网页内容

Question

我知道这听起来很奇怪，但我正在尝试用非常少的CSS知识编写一个网站代码。它只是一个测试网站，所以我可以更多地进入语言，但我遇到了一些麻烦。我无法在任何地方找到答案。如有必要，我会在底部包含HTML和CSS文件。

1。中心机构

我想知道如何集中我网站的主体？我知道这看起来很简单，但我查看了每个Google链接，但我找不到解决方案。当我放大测试我的网站175％变焦增加，因为这是大多数显示器至少有，我注意到我的浏览器滚动到网站的左侧，而不是中心。我希望网站的元素位于中心位置，这样它就不会像YouTube那样在大型显示器上显示空白区域。但是，我不知道是否有办法让网站缩放到中心？

2。多个图像

当我切割我制作的网站布局时，我从一个“圆角矩形”形状中拍摄了三张图像。我的目标是让它变得可以扩展，这意味着它对于小数字来说它将是一个小盒子[]，但如果数字有更多的数字，那么盒子可以扩展而不会破坏网站。因此，我将内容框的左侧和右侧切片，以及我希望扩展的1px内侧。我不知道在哪里寻找教程，但是，如何使它们一起工作。如果有人能指出我正确的方向，我将非常感激。

第3。以下

已解决 - 非常感谢帮助我的Nicole Bieber！： - ）

非常感谢。

HTML：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> .. </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<a href="#" id="logo"> .. </a>
<div id="header"></div>
<div id="navigation">
<div class="founders2">
<div id="left_content">
<div class="news">Latest News &amp; Information</div>
<div id="right_content"></div>
</div>
<div id="footer"></div>

</body>
</html>

CSS：

#logo {
    background:url(images/main/logo.png) top left no-repeat;
    width:391px;
    height:148px;
    font-size:0px;
    margin:-10px 0 0 0;
    float:left
}

body {
    margin:0px;
    padding:0px;
    background:url(images/main/bg.gif) repeat;
    #31
}

#header {
    margin:0 auto;
    width:100%;
    height:147px;
    background:url(images/main/header_bg.gif) repeat-x;
}

#navigation {
    width:100%;
    height:500px;
    background:url(images/siteSlice_13.gif) repeat-x;   
}

#founders1 {}


#left_content {
    float:left;
    width:910px;
    height:100%;
}

#right_content {
    float:right;
    width:490px;
    height:100%;
}

#footer {
    margin:0 auto;
    clear:both;
    width:100%;
    height:77px;
    background:url(images/siteSlice_96.gif) repeat-x;
}

/**
 * Needs to be aligned vertically.. no idea how.
 **/

.news {
    font-family:ubuntu;
    font-size:25px;
    color:#FFFFFF;
    text-shadow: 2px 2px #000000 12;
    text-align:left;
    text-indent:15px;
    width:100%;
    height:100%;
    background:url(images/main/news_header.gif) no-repeat;
    margin:100px;
}

.founders2 {
    background:url(images/main/founders_navbar.gif) no-repeat;
    width:265px;
    height:52px;
    margin:0 0 0 600px;
}

尚未在/ main / image文件夹中的任何内容尚未被我自己重新编辑，但仍然是一个基本图像，应该像新图像替换它时一样。

Answer 1

为中心的网页内容

可以使用自动边距完成固定宽度页面布局的主体居中的一种方式，我将在以下示例中显示

这是一个基本示例，只有一个div元素，它将成为我们的网站容器。您可以将固定应用于容器或主体，并将自动边距应用于容器本身......

<强> HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Website</title>
<link href="center.css" rel="stylesheet" type="text/css">
<!---
    other header and meta stuff ...
--->

</head>

<body>
 <div id="box_content">
    <p>
     My Content Area.
    </p>
 </div>
</body>
</html>

以及上面的CSS： 使用中心主体的中心对齐内容的CSS

在上面HTML代码的CSS示例中，我们通过对 Body 元素应用固定宽度并将自动边距分配给我们来容纳容器（div）元素。相同的元素。边距将在两侧均匀扩展，以保留固定的800px，从而使页面居中：

@charset "utf-8";
/* CSS Document */


body{
    /*
        Applying a fixed width with automatic margins will center the page:
    */
    width: 800px;
    margin-left:auto;
    margin-right:auto;

    /*
        and whatever...
    */
    margin-top: 5px;
    margin-bottom: 0px;
    /*
        Here we have a gray background so we can see the centered content area
    */
    background-color:#CCC;
}

/*
    Our content area will be white  so we can see it centered over the gray background. 
*/
#box_content{
    background-color:#FFF;
    overflow:auto;
    padding:5px;
}

但是，您也可以将固定宽度应用于容器本身。以下示例适用于上述HTML代码。

带有居中div元素的CSS示例

@charset "utf-8";
/* CSS Document */


body{

    /*
        Here we have a gray background so we can see the centered content area
    */
    background-color:#CCC;
}

/*
    Our content area will be white  so we can see it centered over the gray background. 
*/
#box_content{
    /*
        Applying a fixed width with automatic margins will center the page, 
        will also work on the container itself:
    */
    width: 800px;
    margin-left:auto;
    margin-right:auto;

    /*
        and whatever...
    */
    margin-top: 5px;
    margin-bottom: 0px;
    background-color:#FFF;
    overflow:auto;
    padding:5px;
}

上述两个CSS示例看起来完全相同。（在所有现代网络浏览器上看起来都一样）。

还有其他各种方法可以使用CSS进行集中处理（包括将位置设置为50％，边距为-400，但这会影响某些渲染器）。

我演示的方法只是我简单但我首选的中心固定宽度布局方法。

另外，我删除了不需要它们的嵌套元素上的100％宽度值（无论如何div元素默认为100％宽度）

100％高度不起作用，div元素不会垂直扩展到其容器，除非您使用绝对定位（但将扩展到页面大小，而不是父容器大小）。 DynamicDrive has examples on how to do this.

同时查看您的来源，我建议更改以下内容：

font-family:ubuntu;

由于它不是所有操作系统都能识别的字体系列，因此您网页的访问者很可能看不到您在自己的系统上看到的相同字体。除非您使用ServerSide Fonts。

如果您不希望使用服务器端字体it would be best to stick to common fonts and font families that (usually) exist on all major operating systems，如果您希望所有主要操作系统上的所有用户都能看到相同的字体，无论他们使用哪种网络浏览器。

3个切片按钮

再一次 - 有不止一种方法可以做到这一点。其中一种更简单的方法是将3个div分层并对每个图层应用切片。以下示例来自我自己的模板设计中的一个简单的可调整大小按钮，一个简单的盒子模型按钮，至少可以说。

注意：我认为将div元素嵌套在＆lt;＆lt; a＆gt;＆gt;超链接被认为是一种不良做法？虽然我无论如何都这样做......我可能是错的。

<强> HTML

    <a href="contact.php" style="float:right">
        <div class="b_1"><div class="b_2"><div class="b_3">
        Contact
        </div></div></div>
    </a>

上述按钮的CSS：

/*
    Contains the left slice of the button:
*/
.box_nav a          .b_1{
    float: left;
    margin-top: 3px;
    background-image: url(ui/ui_19.png);
    background-repeat: no-repeat;
}

/*
    Contains the Right slice of my button:
*/
.box_nav a          .b_2{
    background-image: url(ui/ui_23.png);
    background-repeat: no-repeat;
    background-position: right;
}

/*
    COntains the tiled center slice of the button
*/
.box_nav a          .b_3{
    background-image: url(ui/ui_21.png);
    height: 43px;
    margin-right: 10px; /* This margin is the same width as the RIGHT slice */
    margin-left: 10px;  /* This margin is the same width as the LEFT  slice */
    line-height: 40px;  /* my way of centering text vertically in the button */
    text-align: center;
    /*
        prevents buttons with more than one word ( has spaces ) from breaking into two lines 
    */
    white-space: nowrap; 
}

.box_nav a:hover    .b_1{
    background-image: url(ui/ui_24.png);
}
.box_nav a:hover    .b_2{
    background-image: url(ui/ui_28.png);
}
.box_nav a:hover    .b_3{
    background-image: url(ui/ui_26.png);
}

如上所示，这是一个盒子模型结构。但是box_nav本身需要“overflow：auto;”或“溢出：隐藏;”但是如果未明确设置高度。

我实际示例中的上述按钮如下所示： 3Slice Button

最后一节

关于你的第3个问题，我实际上并不明白你在问什么，当我复制你的代码时，我的浏览器中的html / css组合会中断。（我也不能正确地看到它，因为我也没有你的图像。我不确定你在那里尝试了什么，但我看起来你正在尝试3列布局？

这部分的html在我的浏览器中（以及在Dreamweaver中）完全崩溃了

更新：

根据您的要求，这里有两种流体布局方式：

在此示例中，您可以使用具有此流体宽度的相同automargins（只需将固定的800PX宽度修改为流体宽度，例如 80％

width: 80%;
margin-left:auto;
margin-right:auto;

如果您想要带有流畅布局的固定边距，您只需设置边距，但不要设置宽度：

width: auto;
margin-left:100px;
margin-right:100px;

中心身体＆amp;多个图像？

1 个答案:

为中心的网页内容

3个切片按钮

最后一节

更新：