모바일웹코딩-이미지정렬시 하단에 여백이 생겨요
연연두
안녕하세요. 모바일 웹 코딩하고 있는데요.
bg가 양쪽으로 깔리고 그 위에 이미지가 3개 올라와야 하는 코딩을 하고 있는데, 이미지를 relative로 잡은게 잘못됬는지
이미지 밑으로 이미지 만큼 여백이 잡힙니다.
html//
div class=dtbox
div class=bg_dtboxl/div !--왼쪽 동그라미bg--
div class=bg_dtboxr/div !--오른쪽 동그라미bg--
div class=cb/div !--clear:both--
div
ul
li class=img1img src=../themes/iphone/img/colorimg_title.png/li
li class=img2img src=../themes/iphone/img/colorimg2.png/li
li class=img3img src=../themes/iphone/img/colorimg2_sh.png/li
/ul
/div
/divcss//
.dtbox{width:100%; position:relative; height:202px; background:#2e2e2e; -webkit-border-bottom-left-radius:5px; -webkit-border-bottom-right-radius:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; }
.bg_dtboxl{float:left; width:88px; height:118px; background:url(img/bg_colorl.png) no-repeat ; }
.bg_dtboxr{float:right; width:97px; height:53px; background:url(img/bg_colorr.png) no-repeat; }
.dtbox .img1{text-align:center; position:relative; top:-107px;}
.dtbox .img2{text-align:center; position:relative; top:-114px;}
.dtbox .img3{text-align:center; position:relative; top:-118px;}보기//
위처럼 풋터 밑으로 미지막 이미지만큼 높이가 생깁니다...
도와주세요..
-
자랑
흠..이런 경우는 정확한 css를 좀 올려주셔야 할듯..벌어지는 푸터소스와 그 윗부분 소스까지
올려주셔야 해결해주시려는 분들이 쉬울거같아요 이걸로는 좀 ;; -
콘라드
저는 포지션값에 마이너스를 주는건 왠만하면 안하는데... 또한 플로우트를 해제하기 위해 쓸데없는 마크업을 하는것도 비추입니다.
-
나샘
이미지 수정해서 다시 올렸습니다. ^^;
-
과꽃
지금 올려주신 html과 css는 여백 생기는 부분하고는 무관해 보입니다.
단순히 이미지만 들어가는거라서 권장하는 형식은 아래와 같습니다.
divimg src=\img1.png\img src=\img2.png\img src=\img3.png\/div
div{position:absolute;left:50%;top:0;width:500px;margin-left:-250px;text-align:center}
width값은 임의로 주었으며, margin-l -
단화한
소스의 이미지가 화면에서 어떤이미지 인가요? 모르겠네요 ㅎ
-
로운
아 제가 설명을 잘 못했나보네요..이미지에 표시한걸로 다시 올렸고요.
li class=\img1\img src=\../themes/iphone/img/colorimg_title.png\/li
li class=\img2\img src=\../themes/iphone/img/colorimg2.png\/li
li class=\img3\img src=\../themes/iphone/img/colorimg2_sh.png\/li
이렇게 넣은 이미지 세개의 위치를 -
난길
어느 부분이 문제라는지 잘 이해가 안되는건 저뿐일까요.
푸터가 어딘지 잘 모르겠고 마지막 이미지 라는게 어느것인지 잘 이해가 안되네요.
position:relative; top:-118px
이런 내용의 css부터 잘못되어 있는걸로 판단이 됩니다. -
좍좍
li class=\img3\img src=\../themes/iphone/img/colorimg2_sh.png\/li
요거를 빼면 위로 붙어요.
position:relative하고 -높이값 준 부분이 안남아있게 하면 될거 같은데... 적용 방법이... -
세리
cssreset 가 되지않아서 그런거 아닐까요??