2009-12-03 2 views
0

У меня есть следующее изображение, расположенное в верхней части страницы.Помощь с оформлением страницы

<body> 
    <form id="form1" runat="server" > 
    <div> 
     <div> 
      <img src="Images/top.png" width="100%" height="115px" alt="top.png" /> 
     </div> 
    </div> 
    </form> 
</body> 

Проблема в том, есть немного обивка, которая появляется на левой, правой верхней, и нижней части изображения. Я не хочу, чтобы там было заполнение. Другими словами, я хочу, чтобы верхняя часть изображения была заподлицо с левой и верхней частью страницы и чтобы она растянулась по ширине страницы. Как я могу достичь этого со стилем?

ответ

1

Некоторые стили по умолчанию для браузеров дают элементу body дополнение, а некоторые дают ему запас. Вам нужно будет удалить оба для того, чтобы изображение было скрыто против окна просмотра во всех браузерах.

body { margin: 0; border: 0 } 
+0

Это сделало трюк. Спасибо за вашу помощь. – Jagd

4

Вам необходимо использовать правила сброса CSS для сброса стилей браузера, а затем построить оттуда. Я использую http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

+0

Вы должны помнить, что при использовании такого сброса будут обнулены все элементы на странице, а не только те, с которыми вы работаете. Если вы начинаете с нового создания, это прекрасно, но если вы работаете с установленным сайтом, это может привести к большему количеству проблем. Используйте осторожно. – Chris

+0

Это означает, что значения * по умолчанию * для всех элементов. Он не очищает CSS, который вы уже написали. Помните - CSS вашего сайта строится на _something_, и если он не построен на сбросе, то он построен на стилях по умолчанию каждого браузера, что приводит к непредсказуемости. – Ben

+0

Мне не нужно его перезагружать. У меня есть только одна ссылка CSS, и сам файл CSS имеет только * body {background-color: #FFFFCC;} * – Jagd

0
<img style="display: block; padding: 0; margin: 0;" ... /> 

Однако, если его образ, который по существу является decoratin из somesort (то есть. Не «содержание» или ссылки на другую страницу) я предпочитаю использовать его в качестве фонового изображения в родительском элементе.

Например

# псевдо-изображений {высота: 100px; ширина: 200 пикселей; фон: прозрачный URL (путь/к/изображения) прокручивать не повторять верхний левый;}

Конечно делать это таким образом вы ограничены отображения изображения в натуральную величину, и вы должны установить DIV в те же размеры или больше.

+0

Фактически использование изображения в качестве фона элемента или даже страницы может быть проще для управления, чем удаление в img tag. – Chris

+0

На самом деле, я попытался использовать его в качестве фонового изображения в теге div, но мне не удалось заставить его растянуться по экрану. Это просто повторится, чего я не могу. Однако, если я использую тег img, он будет растягиваться, как я хочу. – Jagd

+0

Ну, вы должны заставить его не повторять. см., например, пересмотренный ответ выше. – prodigitalson