在 CSS 中对齐容器
不幸的是,我对 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
不知道这是否太明显了,但是 -
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
您可以使用
content here
而不是
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.