帮助2柱ALA风格。 [英] Help with 2 colum ALA style.
问题描述
好的，我的箱子有问题。我目前正在制作一个博客，但是我没有想到我正在正确实施我的博客。
我的网站是 www.ryanfairchild.com 。
目前它看起来很好，因为侧边栏是在右边和现场
但是如果我发布一个长名称的主题，那么
侧边栏的框会显示最近的主题，但如果主题太长然后它将
包裹在主内容框下面并抛弃整个方案。
由于我使用的是MoveableType，因此我提出了一个解决方案。我拿了
标题并修剪了25个字符，这样主题就不那么长了，但是我知道有一种方法用CSS来包装文本框然后
缩进它或什么的。这是我现在的CSS：
身体{
背景：＃000;
保证金：0;
填充：10px 0 14px;
字体：x-small Helvetica，Arial，Verdana，Sans-serif;
text-align：center;
font-size / * * /：/ ** / small;
font-size：/ ** / small;
}
textarea [id =" comment-text"] {
宽度：80％;
}
img {
border：0;
}
/ *
链接
------------------------------------------- --------------- * /
a：link {
font-weight：bold;
颜色：＃E00067;
text-decoration：none;
}
a：已访问{
font-weight：bold;
颜色：＃E00067;
text-decoration：none;
}
a：悬停{
font-weight：bold;
颜色：＃999;
text-decoration：none;
}
/ *
盒子
------------ ---------------------------------------------- * / <无线电通信/>
#container {
背景：＃000;
宽度：700px;
填充：0;
保证金：自动;
text-align：left;
}
＃top-rounding {
背景：＃000
url（" http：//www.ryanfairchild.com/images/top_container.jpg" ）不重复
底部;
填充顶部：50px;
保证金：0 0 0 0;
宽度：100％;
}
#banner {
背景：＃999
url（" http：//www.ryanfairchild.com/images/header_banner3.jpg"）
no-repeat;
宽度：100％;
身高：400px;
}
#main {
背景：#fff;
宽度：100％;
字体大小：85％;
}
#content {
宽度：450px;
浮动：左;
颜色：＃000;
填充：0px 20px 0px 20px;
保证金：0;
}
＃comment-data {
float：left;
宽度：180px;
padding-right：15px;
margin-right：15px;
text-align：left;
border-right：1px点缀#BBB;
}
#sidebar {
float：left;
padding： 0px 20px 0px 20px;
保证金：0;
颜色：＃999;
text-transform：小写;
}
＃bottom-rounding {
背景：＃000
url（" http：// www。 ryanfairchild.com/images/bottom_container.JPG"）
无重复顶部;
填充底部：43px;
保证金：0;
宽度：100％;
}
/ *
课程
----------------------------------------------- ----------- * /
#content blockquote {
line-height：150％;
}
#content li {
line-height：150％;
}
#content h3 {
颜色：＃999 ;
font-family：Helvetica，Arial，Verdana，Sans-serif;
font-size：small;
text-align：left ;
font-weight：bold;
margin-bottom：10px;
}
#content h2 {
颜色：＃999;
text-transform：小写;
}
#content p.posted {
font-family：Helvetica，Arial，Verdana，Sans-serif;
font-size：x-small;
border-top：1px solid＃999999;
text-align：left;
margin-bottom：25px;
line - 高度：正常;
填充：3px;
}
#sidebar h2 {
text-transform：小写;
颜色：＃999;
margin-bottom：5px;
}
#sidebar ul {
margin-bottom：10px;
padding-left：15px;
list-style：none;
}
#siderbar li {
margin-bottom：5px;
}
..photo {
text-align：left;
保证金底部：20px;
}
..link-note {
font-family：Helvetica ，Arial，Verdana，Sans-serif;
font-size：x-small;
line-height：150％;
text- align：left;
padding：0;
margin-bottom：15px;
}
..commenmen-profile img {
vertical-align：middle;
border-width：0;
}
/ *其他
-------------------------------- --------------- * /
..clear {
背景：#fff;
clear：both;
display：block;
margin：0;
padding：0;
font-尺寸：1px;
}
要了解这是如何全部实现它使用Web Developer插件
for Firefox和只显示块ID&课程。
它会告诉你这是怎么设置的。
拜托，我非常感谢有人看这个并给我
a建议。也许告诉我我的CSS同时是多么草率。
这有很多问我知道，但我相信我可以帮助那些在reutrn中的人。
Ok, I have a problem with my boxes. I am making a blog currently but I
don''t think I am implementing my boes correctly.
My website is www.ryanfairchild.com.
Currently it looks fine as the sider bar is to the right and in place
however if I post a topic with a long name then the box where the
sidebar is displays recent topics, but if the topic is too long then it
wraps underneath the main content box and throws off the whole scheme.
I cam up with a solution since I am using MoveableType. I take the
title and trim it 25 characters so that the topic is not so long, but I
know there is a way with CSS to just wrap the text in the box and then
indent it or something. This is my current CSS:
body {
background:#000;
margin:0;
padding:10px 0 14px;
font:x-small Helvetica,Arial,Verdana,Sans-serif;
text-align:center;
font-size/* */:/**/small;
font-size: /**/small;
}
textarea[id="comment-text"] {
width: 80%;
}
img {
border:0;
}
/*
Links
----------------------------------------------------------*/
a:link {
font-weight: bold;
color:#E00067;
text-decoration:none;
}
a:visited {
font-weight: bold;
color:#E00067;
text-decoration:none;
}
a:hover {
font-weight: bold;
color:#999;
text-decoration:none;
}
/*
Boxes
----------------------------------------------------------*/
#container {
background:#000;
width:700px;
padding:0;
margin:auto;
text-align:left;
}
#top-rounding {
background:#000
url("http://www.ryanfairchild.com/images/top_container.jpg") no-repeat
bottom;
padding-top:50px;
margin:0 0 0 0;
width:100%;
}
#banner {
background: #999
url("http://www.ryanfairchild.com/images/header_banner3.jpg")
no-repeat;
width:100%;
height:400px;
}
#main {
background:#fff;
width:100%;
font-size:85%;
}
#content {
width:450px;
float:left;
color:#000;
padding:0px 20px 0px 20px;
margin:0;
}
#comment-data {
float: left;
width: 180px;
padding-right: 15px;
margin-right: 15px;
text-align: left;
border-right: 1px dotted #BBB;
}
#sidebar{
float:left;
padding:0px 20px 0px 20px;
margin: 0;
color:#999;
text-transform:lowercase;
}
#bottom-rounding{
background:#000
url("http://www.ryanfairchild.com/images/bottom_container.JPG")
no-repeat top;
padding-bottom:43px;
margin:0;
width:100%;
}
/*
Classes
----------------------------------------------------------*/
#content blockquote {
line-height: 150%;
}
#content li {
line-height: 150%;
}
#content h3 {
color: #999;
font-family: Helvetica,Arial,Verdana,Sans-serif;
font-size: small;
text-align: left;
font-weight: bold;
margin-bottom: 10px;
}
#content h2 {
color:#999;
text-transform:lowercase;
}
#content p.posted {
font-family: Helvetica,Arial,Verdana,Sans-serif;
font-size: x-small;
border-top: 1px solid #999999;
text-align: left;
margin-bottom: 25px;
line-height: normal;
padding: 3px;
}
#sidebar h2{
text-transform:lowercase;
color:#999;
margin-bottom:5px;
}
#sidebar ul {
margin-bottom:10px;
padding-left:15px;
list-style:none;
}
#siderbar li{
margin-bottom:5px;
}
..photo {
text-align: left;
margin-bottom: 20px;
}
..link-note {
font-family: Helvetica,Arial,Verdana,Sans-serif;
font-size: x-small;
line-height: 150%;
text-align: left;
padding:0;
margin-bottom: 15px;
}
..commenter-profile img {
vertical-align: middle;
border-width: 0;
}
/* Misc
----------------------------------------------- */
..clear {
background:#fff;
clear:both;
display:block;
margin:0;
padding:0;
font-size:1px;
}
To see how this is all implemented it to use the Web Developer plugin
for Firefox and just display block ID & classes.
It will show you how this is all setup.
Please, I would greatly appreciate someone to look at this and give me
a suggestion. And maybe tell me how sloppy my CSS is at the same time.
That''s alot to ask I know but I am sure I can help whoever in reutrn.
推荐答案
bump
bump
" ry ********** **@gmail.com" < RY ************ @ gmail.com>写道：
"ry************@gmail.com" <ry************@gmail.com> wrote:
bump
碰到自己：
http：//www.spartanicus.utvinternet.i...s_help_you.htm
-
Spartanicus
Bump yourself:
http://www.spartanicus.utvinternet.i...s_help_you.htm
--
Spartanicus
自己动手
go fuck yourself
这篇关于帮助2柱ALA风格。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
