これは私の最初の投稿です (私はこれらすべてに非常に慣れていません) が、正しく尋ねていることを願っています。
修士論文の Web ページを作成しています。このテンプレートのように、互いに独立してスクロールするテキストの 3 つの並列列が必要です。
このテンプレートから CSS を Web サイトで動作させることができないようです。何が間違っているのか、またはこの効果を達成するためのより良い方法があるかどうか疑問に思っています。
助けてくれてどうもありがとう!
ここに私のウェブサイトのCSSがあります
body {
padding:0;
width:100%;
height: 100%;
max-height: 100%;
overflow; hidden;
margin: 0;
border: 0;
background:#FFFFFF;
}
#title {
margin-bottom: 5px;
background: #fff;
width:100%
z-index: 20;
width: 100%;
padding-top: 30px;
}
#title h1 {
font-family: Sorts Mill Goudy, Garamound, serif;
font-size: 50px;
text-align: center;
font-weight: 100;
color: 696969;
line-height: 1px;
letter-spacing: 10px;
margin-top: 20px;
}
#title h2 {
font-size: 16px;
font-family: Sorts Mill Goudy, serif;
text-align: center;
font-weight: 100;
color: #999;
line-height: 20px;
letter-spacing: 0px;
}
#title ul {text-align:center;
padding-left, padding-right: 10px;
padding-top: 30px;
}
#title ul li {
display:inline;
font-family: "gill sans mt", "sans-serif";
text-align: center;
list-style:none;
margin-left:0px;
padding-left: 30px;
padding-right: 30px;
}
#title p{
font-family: Sorts Mill Goudy Italic, Garamound, serif;
size: 14px;
font-weight: 300;
background: #eee;
padding: 10px;
margin-left: 80px;
margin-right: 80px;
margin-top: 20px;
margin-bottom: 15px;
text-decoration: none;
color: #000;
}
#title a {
color:#000;
text-decoration: none;
text-decoration: underline;
}
#title a:hover {
color: #A9A9A9;
text-decoration: underline;
}
/* column settings */
#allcol {
position: relative;
}
#allcol h4{
text-align: center;
}
#col1 {
font-family: Sorts Mill Goudy, Garamound, serif;
text-align: left;
float:left;
background:#DCDCDC;
padding-bottom:10px;
padding-top: 10px;
padding-left:1.5%;
padding-right:1.5%;
margin-left: 0px;
width:30%;
overflow: scroll;
}
#col2 { font-family: Sorts Mill Goudy, Garamound, serif;
text-align: left;
background: #fff;
float:left;
padding-bottom:10px;
padding-top: 10px;
padding-left:1.5%;
padding-right:1.5%;
width:30%;
overflow: scroll;
}
#col3 { font-family: Sorts Mill Goudy, Garamound, serif;
text-align: left;
float:left;
background:#DCDCDC;
padding-left:1.5%;
padding-right:1.5%;
padding-bottom:10px;
padding-top: 10px;
width:30%;
overflow: scroll;
}
#footer {
clear:both;
float:left;
width:100%;
border-top:1px solid #000;
}