在 CSS 中对齐容器

发布于 2024-12-01 04:27:43 字数 3438 浏览 0 评论 0原文

不幸的是,我对 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;
}

Unfortunately my knowledge of CSS is fairly limited, I currently have a theme, although I would like the right hand captions e.g. Contact and About to be aligned to the right so the two captions will always appear on the right hand side of the page.

Any help would be appreicated, I have identified the container in CSS - "right"

The template is located here:

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

CSS Code:

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;
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

吾家有女初长成 2024-12-08 04:27:43

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

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

Don't know if this is too obvious, but--

The CSS looks alright,
Just note that it's #right -- not .right -- so obviously in your html you'll be using div id not div class

千年*琉璃梦 2024-12-08 04:27:43

您可以使用

而不是

content here

希望这有帮助。

如果仍有问题,您应该联系您购买模板的供应商。

You would use

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

not

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

hope this helps.

If you're still having problems, you should contact the vendor from where you purchased the template.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文