在CSS中对齐容器

时间:2011-08-24 11:15:18

标签: html css xhtml

不幸的是我的CSS知识相当有限,我目前有一个主题,虽然我想要右手标题,例如联系人和即将向右对齐,因此两个标题将始终显示在页面的右侧。

任何帮助都会被贬低,我已经在CSS中找到了容器 - “正确”

模板位于:

http://themeforest.net/item/cleanfolio-dark/22659

CSS代码:

body {
    background: url(../images/bg.png) repeat;
    font: 12px Arial, Helvetica, Sans-Serif;
    padding: 0;
    margin: 0;
}

#container {
    width: 1165px;
}


/* ---- Standard Elements ---- */

a {
    color: #BBBBBB;
    text-decoration: none;
}

a:hover {
    color: #FFFFFF;
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:active {
    color: #FFFFFF;
    text-decoration: none;
}

h1, h2, h3, h4, h5 {
    font-family: Arial, Helvetica, Sans-Serif;
    font-weight: bolder;
    color: #FFFFFF;
    padding: 0;
    margin: 0px 0px 0px 0px;
}

h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }

p {
    line-height: 1.8em;
    padding: 0;
    margin: 0 0 5px 0;
}


/* ---- Header ---- */

#header {
    background: url(../images/blue/header_bg.png) repeat-x;
    height: 130px;
}

.header_title {
    float: left;
    background: url(../images/blue/header_titlebg.png);
    width: 370px;
    height: 110px;
    padding: 20px 0px 0px 30px;
}

.header_title h1 {
    font-size: 47px;
    font-weight: bolder;
    color: #FFFFFF;
    padding: 0;
    margin-bottom: -4px;
}

.header_title span {
    font-size: 10px;
    color: #71b3f0;
}


/* ---- Left Side Elements ---- */

#left {
    float: left;
    width: 840px;
    margin-right: 25px;
}

.portfolio_section-top {
    background: url(../images/topdivider.png) no-repeat;
    width: 790px;
    height: 280px;
    padding: 30px 10px 0px 30px;
}

.portfolio_section {
    background: url(../images/divider.png) no-repeat;
    width: 790px;
    height: 280px;
    padding: 30px 10px 0px 30px;
}

.portfolio_section-top img, .portfolio_section img {
    background: #111111;
    padding: 15px;
    border: 1px solid #222222;
}

.portfolio_section-top h1, .portfolio_section h1 {
    margin-bottom: 5px;
}

.portfolio_section-top small, .portfolio_section small {
    font: 10px Arial, Helvetica, Sans-Serif;
    color: #666666;
    text-transform: uppercase;
    line-height: 2em;
}

.portfolio_section-top p, .portfolio_section p {
    font: 12px Arial, Helvetica, Sans-Serif;
    color: #999999;
    margin-top: 10px;
    line-height: 1.8em;
}

.button_bg {
    background: url(../images/blue/button_bg.png) repeat-x;
    height: 14px;
    font: 10px Arial, Helvetica, Sans-Serif;
    color: #FFFFFF;
    text-transform: uppercase;
    padding: 5px 10px 5px 10px;
}

.tdmarginright td {
    padding-right: 30px;
}

.tdmarginright2 td {
    padding: 10px 17px 0px 0px;
}

.footer {
    margin-left: 30px;
    color: #666666;
}


/* ---- Right Side Elements ---- */

#right {
    float: right;
    width: 300px;
    margin-top: 30px;
}

.sidebar_title {
    background: url(../images/sidebar_titlebg.png);
    width: 283px;
    height: 38px;
    padding: 12px 0px 0px 17px;
}

.sidebar_bg {
    background: url(../images/sidebar_bg.png) repeat-y;
    width: 268px;
    color: #666666;
    padding: 0px 15px 15px 17px;
}

.sidebar_bottom {
    background: url(../images/sidebar_bottom.png) no-repeat;
    width: 300px;
    height: 1px;
    margin-bottom: 30px;
}

2 个答案:

答案 0 :(得分:0)

不知道这是否太明显,但是 -

CSS看起来不错, 请注意它是#right - 而不是.right - 所以很明显在你的html中你将使用div id而不是div class

答案 1 :(得分:0)

你会用

<div id="right">content here</div>

<div class="right">content here</div>

希望这会有所帮助。

如果您仍然遇到问题,请与购买模板的供应商联系。