질문/조언질답게시판
Extra Form
PHP PHP 7.2
CMS Rhymix

안녕하세요!

 

스위트모바일(Sweetmoblie)이라는 무료 스킨을 잘 사용하고 있는데요!

 

https://coinbest.tv/

메인페이지 꾸미는 와중에 위젯끼리 레이어가 겹치는 현상이 발생되고 있어서 문의드려봅니다

 

목록형 위젯끼리는 아래처럼 겹치는 현상이 없는데

썸네일 또는 이미지가 위젯에 들어가면 저렇게 겹치네요 ㅜㅜ

 

noname-side.png.jpg

 

2017년에 저와 같은 현상으로 도움을 요청하신분이 계신데 그분도 답을 못찾은거 같아서 저도 글 한번 남겨보아요 ㅜ

스위트모바일 레이아웃 참 매력적이고 좋은데 ㅜㅜ; 생각지도 못한 부분에서 막히니까 하.... ㅜㅜ

 

도움 요청 드립니다ㅜㅜ

 

 

p.s 레이아웃 원 제작자분께 문의드려 볼려고해도 ㅜㅜ 사이트가 없어진것 같아서 물어볼곳이 없네요 

 

  • profile
    현재는 메인에는 이미지상의 위젯이 없네요.

    이미지만 보고 css문제를 해결할수는 없으니 그 위젯을 아무대나 띄워서 링크 걸어주시면 찾아볼수는 있겠죠.
  • profile profile
    메인에 위젯 그대로 있어요 ㅜ
    새로고침 하다보면 나와요
    저는 안드로이드인데 혹시 아이폰쓰세요??
  • profile
    모바일이었군요.. 모바일은 개발자모드가 없고, pc에서 띄워놓으면 증상이 안나타나구요.
  • profile profile
    네 모바일이에요 ㅜ
    스위트모바일 레이아웃 참 좋은데
    관련 문제 해결했다는 글이 구글링 해봐도 없네요 ㅜㅜ
    위젯 스타일쪽 문제 같기도한데
    내공이 딸린지라...
  • ?
    css 처리값을 보면 달리 높이를 정한게 아니라 공백이 타고 내려올 일은 없는거 같고 sweetMobileWrap 이라는 div에 position:absolute;와 top값이 있는거 보니
    js를 높이조절을 하면서 가변처리를 하는 소스인거 같은데 이걸 버리거나 해당 부분의 높이값을 css에서 최소값을 미리 정해줘 버리면 어느정도 문제가 해결될겁니다.
  • ?
    저런 경우가 생길려면 js가 이미지보다 먼저 불러와서 높이값을 잡아버리는 경우인데 가변형을 유지하면서 지금처럼 사용하려는 최선책은 이미지 사이즈와 동일한 사이즈의 이미지를 불러오면서 썸내일은 position:absolute 처리로 동일 사이즈 이미지 위로 올라타게 만들면 이미지를 좀 늦게 불러오더라도 자리는 잡혀있을겁니다.
  • ? profile

      function setFrame(){

        var height = jQuery('#tsM > div > div:nth-child(' + ( index + 1 ) + ')').height();
        container.style.height = ( height + 20 ) + 'px';
        if(nowSlide != index){
            jQuery('body').animate({ scrollTop:0 }, 0);
            nowSlide = index;
        }

      }

     

    swipe.js 파일에 위 빨간색 코드가 있는데 저게 상단 고정 px 같은데 저걸 조정하면 되려나요?

  • profile ?
    이건 다른 공간에도 영향을 미치기에 사용하면 안될겁니다.
  • profile
    모바일의 요소(위젯 박스)가 브라우저 크기에 따라서 변화가 되는 라이브러리를 사용하나보네요.
    position:absolute, top:xxxpx로 되어있어요.
    포지션이 relative가 아니니 위쪽에 해당하는 요소들의 크기를 컨텐츠가 모두 불러와진 상태에서 측정해서 top을 지정해야 하는데 모든 요소가 불러오기 전에 top에 넣을 px을 계산하니 낮은 높이로 계산되서 가려지는 것이네요.

    해당 동작을 html 및 이미지를 모두 불러온 상태에서 동작하게 하거나(인터넷(회선, 단말기 모두 가능함) 느리면 엉망으로 보이다가 한참후에 제대로 보이겠네요.)
    absolute에 top을 넣는 것 말고 relative로 위치를 잡게 하면 되겠죠.
  • profile profile


    .sweetMobileWrap { padding:5px; }
    .sweetMobileWrap .sweetMobile { background:#fff; box-shadow: 0 0 2px rgba(0,0,0,0.1); border-radius:3px; overflow:hidden; }
    .sweetMobileWrap .sweetMobile .smTitle { height:34px; border-bottom:1px solid #f2f2f2; position:relative; }
    .sweetMobileWrap .sweetMobile .smTitle h3 { line-height:34px; padding:0 40px 0 10px; margin:0; font-size: 1.2em; letter-spacing:0; }
    .sweetMobileWrap .sweetMobile .smTitle a { position:absolute; display:block; color:transparent; font-size:1px; width:24px; height:24px; background:url(more.png) no-repeat 0 0; background-size:24px; top:5px; right:5px; }

    @media screen and (max-width:639px){
        .sweetMobileWrap { width: 100%; box-sizing:border-box; }

    }
      @media screen and (min-width: 640px){
        .sweetMobileWrap { width: 50%; box-sizing:border-box; }

    }

     

    위젯 스타일쪽 css에 위 빨간색을 position:relative;로 바꿔 봤는데 불러오기는 position:absolute; 로 불러오네요 ㅜ

    class명 .sweetMobileWrap <--- 이걸쓰는곳은 위젯 스타일에 있는 css에서만 사용하거든요 ㅜ

  • ?

    html로 표현하면

    <div class="list_thumb">

    <img style="width:100%;vertical-align:middle;" src="섬내일과 같은 비율의 단색 이미지를 불러옴(가볍게) 넓이 250에 높이 200이면 될듯" alt="">

    <img style="position:absolute;top:0;bottom:0;left:0;right:0;" src="https://coinbest.tv/files/thumbnails/112/017/250x200.crop.jpg?20200224143131" alt="미국 애니메이션 심슨가족 &amp;quot;암호화폐는 미래의 돈&amp;quot;">

    </div>

     

    이렇게 처리하면 될겁니다.

  • ? profile
    갤러리형 위젯에 알려주신 코드를 강제 삽입하라는 말씀이시죠?
  • profile ?
    넵 해결방식은 간단합니다.
    먼저 이미지를 불러오기 전에 js가 해당 블럭의 높이값을 설정해 버려서 그 하위 블럭들의 top값을 정해버렸다고 판단했습니다.

    그럼 해결책은 js가 높이를 파악하기 전에 공간확보를 하면 될거라고 봤고 가장 쉬운 해결책이 가변운 단일색 gif 파일도 되고 하여튼 가벼운 이미지파일 하나를 모든 갤러리에서 불러오게 만듭니다.
    그럼 js가 충분히 해당 공간의 높이를 인지할겁니다.

    그 다음 불러와야할 썸내일은 position:absolute처리 한 다음에 그 이미지 위로 오게 하는거죠.
  • ? profile
    네 말씀해주신대로 한번 해봐야겠네요!
  • ? profile
    알려주신대로 해보니까 갤러리 위젯 상단에 전부 공백이 생겨버리네요 ㅜ
    페이지 첫 로딩(캐쉬삭제 후 처음로딩 컨트롤+F5)할때만 위치가 틀어지고 이후 그냥 일반 F5 새로고침 하면 정상적으로 출력이 되는거라 그런가봐요
    ㅜㅜ 아이고야