2016-08-28 11 views
2

DIVでスクロールできるウェブサイトをプログラミングしました。しかし、実際には、スクロールするとタイトルと最初の段落がその位置を保持しますが、その下にある残りのテキストが表示されます。DIVのスクロール?

は、私は私のHTMLに次のように持っている:私のCSSで

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="UnCo.css"> 
<title>21Webb | Under Construction</title> 
</head> 

<body> 
    <div class="updateSoMe blok alBeMe" style="overflow:scroll; height:100px;"> 
    <h1>Updates & social media</h1> 
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
</div> 
</body> 
</html> 

そして、これを:

.updateSoMe { 
display: inline-block; 
float: right; 
} 

.updateSoMe h1 { 
text-align: center; 
} 

.alBeMe { 
width: 49%; 
} 

.alBeMe h1 { 
background-color: #F6A22C; 
margin: 0px; 
border-radius: 8px; 
border-bottom-right-radius: 0px; 
border-bottom-left-radius: 0px; 
} 

EDIT:CODE NEW !! - > HTMLコードを文書に貼り付けてフォルダーに配置する場合は、CSSで同じ操作を行い、同じフォルダーに配置してから、IE、GC、FFなどでHTMLを開きます。 :)

は今、私はあなたがdiv要素にスクロールダウン先頭に固執するH1と第一<のp >タグをしたい、と第二<のp >タグがダウンしてスクロールします。

これが可能ですか?その場合はどうすればよろしいですか?

ありがとうございました!
ブレント

+1

何をお手伝いしますか?私たちはあなたのためにコードを書くべきでしょうか?あなたはCSSプロパティ 'position:fixed;'を見たことがありますか? –

+0

@ロコC. Buljanもしあなたがそれを行うことができれば、はい! –

+1

[尋ねる]、[ツアー]、そして次回に問題の[mcve]を作成してください。 –

答えて

3

これはあなたが、多分私は間違っている、独自のコードを送信didntのため、あなたが本当にしたいが、あなたはタイトルやスクロールdivの外側の第1段落を持っていないことができるものであれば、私は知らないのですか?

この例では、jsfiddleのコンテンツをスクロールダウンできますが、スクロール可能なdivの上に固定されたヘッダーがあります。これはあなたが使うことができるものですか?

編集:あなたのコードを今投稿しました。

+0

いいえ、jsfiddleは私が探しているものではありません。私はサイト全体がdivに基づいているので、h1と段落をdivの外に持つことはできません。それはうまくいきません。お試しいただきありがとうございます:) –

+1

これはあなたがやりたいことですか? https://jsfiddle.net/gtemkvv9/ –

+1

元のdivに2 divを作った –

0
<div class="scroll">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div> 


div.scroll { 
background-color: #00FFFF; 
width: 300px; 
height: 200px; 
overflow: scroll; 
margin:10px; 
} 
関連する問題