2013-11-15 7 views
-2

나는 클라이언트를위한 웹 사이트를 개발하고 있으며 간단한 시작/방문 페이지를 원합니다.모바일 용 HTML + CSS 웹 사이트 만들기

는 난에 있기 때문에 당신이 아래로 인터넷 브라우저를 스크롤 할 때 (그래서 모바일 사용에 대한 반응) 또는 뷰 오히려 큰 http://www.colmanweb.co.nz/websites/turbos-splash/

왼쪽에있는 네 개의 이미지

아래의 웹 사이트 링크가 실제 모바일 이미지는 원하는대로 작아집니다.

왼쪽에있는 이미지/아이콘은 인터넷 브라우저에서 일반적인 웹 사이트 검색에 사용하기에 훨씬 작을뿐 아니라 모바일 용으로 축소 할 수 있지만 모바일 용으로 볼 수 있고 클릭 할 수있는 이미지/아이콘입니다. .

나는

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td width="25%"><div id="icons"><img src="images/myteam-btn.png" align="left" width="20%"/></div></td> 
    <td rowspan="5"><div id="tnation"><img src="images/turbonation.png" align="left" width="35%"/></div></td> 
    </tr> 
    <tr> 
    <td width="25%"><div id="icons"><img src="images/results-btn.png" align="left" width="20%"/></div></td> 
    </tr> 
    <tr> 
    <td width="25%" height="400px">&nbsp;</td> 
    </tr> 
    <tr> 
    <td width="25%"><div id="icons"><img src="images/tickets-btn.png" align="left" width="20%"/></div></td> 
    </tr> 
    <tr> 
    <td width="25%"><div id="icons"><img src="images/shop-btn.png" align="left" width="20%"/></div></td> 
    </tr> 
    <tr> 
    <td width="25%">&nbsp;</td> 
    </tr> 
</table> 

아래의 코드를 부착을 heres CSS를

body { 
background:#009e60; 
    margin-left: 0px; 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
} 
div#container { 
margin:0 auto; 
width:1427px; 
height:500px; 
} 

*{ 
padding:auto; 
margin:auto; 
text-align:center; 
} 

div#tnation {min-width:200%; margin-top:-100px;} 

div#icons {min-width:350%} 

어떤 도움이 좋을 것있다!

감사합니다.

+0

응답 성을 시도 했습니까? 현재 사이트가 아닙니다. 아니면 사용법에 대해 어떻게 대답합니까? – agconti

+1

나는 이것을 위해 테이블을 사용하지 않을 것이다. –

답변

1

감사합니다. 여기에 많은 일이 일어나고 있습니다. 당신은 현명한 방법으로이 일을하지 않을 것입니다.

몇 가지, 당신은 대체 할 수

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<!DOCTYPE html> 
<html lang="en"> 

이 전혀 정말 주요 문제가되지 비록

와 함께, 나는 그것을 말할 줄 알았는데.

또한 테이블은 실제로 레이아웃/디자인 용도로 권장되지 않으며 데이터에 맞게 맞춤 설정되어 있으므로 대신 DIV 컨테이너 (또는 Span)를 사용해야합니다. 이 페이지에는 DIV 컨테이너가 없기 때문에

또 다른 것은, 여기

div#tnation {min-width:200%; margin-top:-100px;} 
div#icons {min-width:350%} 

당신의 CSS는 절대적으로 아무것도하지 않고있다.

'반응 형'으로하려면 CSS 파일에서 미디어 쿼리를 사용해야합니다.

HTML/CSS에 대한 이해가 기껏해야 오래된 것 같아서, 불행히도 기본에 익숙해지기 전까지는 당신을 도울 수 없습니다.

+0

감사합니다 everyones 도움. – Callum

0

모바일 사이트 용으로 다른 웹 응용 프로그램을 만들면됩니다. 사용자 에이전트를 사용하여 사용자가 모바일 장치를 사용하고 있는지 여부를 감지 할 수 있습니다. WURFL이 유용 할 것입니다. 그리고 코드를 확인하십시오. 당신이 할 수있는 많은 개선이 있습니다.

관련 문제