создание веб-сайта HTML + CSS для мобильного использования

-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>

и Херес 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%}

любая помощь будет здорово!

Thanks

источник

2013-11-15 Callum

Вы пытались сделать его отзывчивым? Текущий сайт - нет. Или вы спрашиваете, как сделать его отзывчивым? – agconti

Я бы не использовал таблицы для этого. –

Oh no lol. Здесь многое происходит, вы не идете об этом в разумной манере.

Немного вещей, вы можете заменить:

<!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).

Другое дело, ваш CSS здесь

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

не делает абсолютно ничего, потому что у вас нет DIV контейнеров на этой странице.

Чтобы что-то было «отзывчивым», вам, вероятно, потребуется использовать Media Queries, где-то в вашем файле CSS.

Кажется, что ваше понимание HTML/CSS в лучшем случае устарело, поэтому вам будет сложно помочь вам, пока вы, к сожалению, не узнаете об основных принципах.

источник

2013-11-15 02:18:02 GSimon

Спасибо за помощь всем. – Callum

просто создайте еще один веб-сайт для своего мобильного сайта. вы можете использовать пользовательский агент для определения того, использует ли пользователь мобильное устройство или нет. WURFL будет полезен. И, пожалуйста, проверьте свои коды. Есть много улучшений, которые вы можете сделать.

источник

2013-11-15 14:13:50 rhandom

создание веб-сайта HTML + CSS для мобильного использования

ответ

Смежные вопросы