CSS를 사용하여 모니터 모양으로 웹 사이트를 만드는 데 도움이 필요합니다.

Question

웹 사이트를 만들고 웹 페이지를 ATM 화면처럼 보이게하고 싶습니다. 내가 필요한 모든 그래픽을 만들었고 가장 큰 문제는 <div>입니다. 웹 사이트가 표시되는 경우가 될 것이다

중간 부분 (화면) : 여기에

는 웹 사이트가 어떻게 보일지입니다. 왼쪽과 오른쪽 버튼을 navagation으로 사용합니다.

나는 내 코드 내에서 몇 가지 시도했다. 처음에는 이미지를 브라우저로 판매 할 배경으로 사용하려고 생각했습니다.

마지막으로 div에서 분할하려고합니다. 내 CSS는 오른쪽, 가운데, 왼쪽, 상단 기본적이며, 바닥 :

다음

*{margin: 0; padding: 0;} 

#top {width:100%;} 

#left {float:left; width:20%;} 

#center {float:left;width:60%;} 

#right {float:left; width:20%;} 

#bottom {width: 100%; position:absolute; bottom:0;} 

은 물론 내가 이상 하단 바를 %에 상관없이 내가 할 무엇을 조정 어떤 이유로 <div id="top"><img src="" /></div>

사용하지 중간 부분을 감싸고 바로 오른쪽 바는 아래쪽 바 아래에 놓기를 원합니다. 왼쪽 막대는 이미지의 오른쪽에 공백이있는 것처럼 보입니다. 그것은 좌절감을 느끼고 있습니다. 여기 지역 사회가 내 딜레마를 해결할 수있는 아이디어가 있는지 궁금합니다.

모든 조언을 주시면 매우 감사하겠습니다. 나는 jquery를 사용하는 방법을 내 자신에게 가르쳐 줘야한다.

메모를하기 위해 최근에 3 주 이내에 html과 css를 가르쳤습니다. 아직도 꽤 새로운.

Answer 1

나는 당신의 바이올린을 보면서, 우리가 당신에게 줄 수있는 대답은 좋은 대답이 아닐 것이라고 생각합니다. HTML/CSS에 대해 더 자세히 알고 싶거나 여기있는 사람이이 페이지를 작성할 수 있지만이 항목은 배울 수 없습니다. HTML/CSS의 동작에 대해 자세히 알아보십시오 : float 속성, 절대 위치/상대 위치 지정/정적 위치 지정의 차이점은 더 쉬울 것입니다.

하지만 그 화면을해야한다면 유동적이거나 반응이 좋지 않은 것으로 생각할 것입니다. 그래서 버튼없이 배경과 상대 위치로 전체 이미지로 큰 div를 만들 것입니다. 그런 다음 div를 중심에 배치하고 iframe 또는 Ajax로드 된 콘텐츠로 콘텐츠를 가져옵니다. 그런 다음 각면에 버튼을 배치합니다 (위치 : 절대).

은 다음과 같이 될 수있다 : HTML

<div id="imgContainer"> <!-- Container for your screen img, without buttons --> 
<ul id="buttonsLeft"> 
    <li class="btn"></li> 
    <li class="btn"></li> 
    <li class="btn"></li> 
    <li class="btn"></li> 
</ul> 
<ul id="buttonsRight"> 
    <li class="btn"></li> 
    <li class="btn"></li> 
    <li class="btn"></li> 
    <li class="btn"></li> 
</ul> 
<div id="content">Your content goes here.</div> 

CSS

#imgContainer { 
width: the width of your image; 
height: the height of your image; 
position: relative;  
background: url('yourImage.jpg'); 
} 
#buttonsLeft, #buttonsRight { 
position: absolute; 
} 
#buttonsLeft { 
top: distance from the top of your image; 
left: distance from the left of your image; 
} 
#buttonsRight { 
top: distance from the top of your image; 
right: distance from the right of your image; 
} 
#content { 
width: the width of your content; 
height: the height of your content; 
margin: 100px auto 0; /* to center it and make margin-top, so it will be 100px away  from the top */ 
} 

당신이 자신 :)