Проблема с оформлением логотипа - HTML и CSS

Animex · 14.08.2009, 15:55

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

PHP код:


			
.TDOF {

 margin: 0; 

padding: 0;

}

PHP код:


			
<table class="TABOF" style="text-align: left; width: 100%;">

  <tbody>

    <tr>

      <td class=TDOF> <img style="width: 100%; height: 112px;" alt="logo.gif" src="images/logo.gif"></td>

    </tr>

wall66 · 14.08.2009, 16:03

отступы из за ненулевого атрибута cellspacing у таблицы
через css он обнуляется с помощью border-collapse

white[43] · 14.08.2009, 16:38

Стоит посмотреть ещё на отступы body.
А border-spacing лучше не использовать, толко один IE его не признаёт.

Код:

<style>
body { margin: 0px; padding: 0px; }
</style>

<table cellspacing="0" cellpadding="0" style="text-align: left; width: 100%;"> 
  <tbody> 
    <tr> 
      <td><img style="width: 100%; height: 112px;" alt="logo.gif" src="images/logo.gif"></td> 
    </tr> 
  </tbody>
</table>

Animex · 14.08.2009, 17:37

white[43], спасибо большое, ваш совет помог.

Animex · 16.08.2009, 13:50

столкнулся с ещё одной проблемой, когда привязал к логотипу ссылку в фаерфоксе лого стало некорректно отображаться. в опере и ие все как по задумке. Помогите разобраться.

Код:

.header {
margin: 0; 
padding: 0;
background-image: url(2.gif);
width:100%;
height:52px;
}

Код:

<div class="header"> <a href="http://www.google.ru/"> <img class="logo" src="1.gif" align="left" src="logo"> </a> </div>

wall66 · 16.08.2009, 15:26

скорей всего необходимо указать display:block ссылке и картинке
но из предоставленной информации невозможно сделать точные выводы

Animex · 16.08.2009, 16:26

Код:

<html>
<head>
   
    <style>
  
.header {
margin: 0; 
padding: 0;
background-image: url(2.gif);
width:100%;
height:52px;
}

body { 
margin: 0px; 
padding: 0px; 
}

.MenuBlock {
float: left;
width: 150px;
height: 100%;
border-right: 2px dotted #479bea;
background-image: url(navig.gif);
background-repeat: no-repeat;
background-color: #ededed;
}
.AuthBlock {
float: right;
width: 150px;
height: 100%;
border-left: 2px dotted #479bea;
background-image: url(auth.gif);
background-repeat: no-repeat;
background-color: #ededed;

.logo {
margin: 0; 
padding: 0;
display:block;
}
.db {
display:block;
}
  </style>
  
  
  <title>text</title>
</head>


<body>

<div class="header"> <a class="db" href="http://www.google.ru/"> <img class="logo" src="1.gif" align="left" src="logo"> </a> </div>
<img  src="polosa.gif" width="100%" height="20px">

<div class="MenuBlock"><br><br>текст</div>

<div class="AuthBlock"><br><br>текст</div>




</body>
</html>

вот весь код. попробовал указать display:block ссылке и картинке, но результатов не получил.

sa_t_an · 16.08.2009, 16:39

Вообще сперва пропущена скобочка

Код:

.AuthBlock {
float: right;
width: 150px;
height: 100%;
border-left: 2px dotted #479bea;
background-image: url(auth.gif);
background-repeat: no-repeat;
background-color: #ededed;
}/* Вот тут */
.logo {
margin: 0;
padding: 0;
display:block;
}

во вторых попробуйте добавить следующий селектор после .header

Код:

.header img { border: 0;}

что бы убрать рамку от ссылки

И в третьих задайте явно размеры лого, иначе FF считает высоту картинки 100% от контейнера приемника

Код:

<div class="header">
  <a class="db" href="http://www.google.ru/">
    <img class="logo" src="1.gif" align="left" src="logo" width="100" height="20">
  </a>
</div>

Как то вот так примерно

Animex · 16.08.2009, 17:42

sa_t_an, спасибо за советы, только что-то со вторым пунктом не сообразил, нужно в .header границы убрать или же создать новый стиль, .header img, тогда где его применить?

sa_t_an · 16.08.2009, 18:29

Новый стиль

Код:

.header {
margin: 0; 
padding: 0;
background-image: url(2.gif);
width:100%;
height:52px;
}

.header img { border: 0; } /*Этот стиль для IMG вложенный в .header*/

body { 
margin: 0px; 
padding: 0px; 
}

14.08.2009, 15:55	#1
Animex Регистрация: 14.08.2009 Сообщений: 9	Проблема с оформлением логотипа Доброго времени суток. Пытаюсь оформить шапку сайта и столкнулся с определенными трудностями. Создал таблицу, куда поместил изображения логотипа, но при этом получились нежелательные отступы, которые видны на скриншоте PHP код: `.TDOF { margin: 0; padding: 0; }` PHP код: `<table class="TABOF" style="text-align: left; width: 100%;"> <tbody> <tr> <td class=TDOF> <img style="width: 100%; height: 112px;" alt="logo.gif" src="images/logo.gif"></td> </tr>`

14.08.2009, 16:03	#2
wall66 Участник клуба Регистрация: 04.10.2008 Сообщений: 1,485	отступы из за ненулевого атрибута cellspacing у таблицы через css он обнуляется с помощью border-collapse Notepad2 *свободен...*

14.08.2009, 16:38	#3
white[43] Регистрация: 14.08.2009 Сообщений: 8	Стоит посмотреть ещё на отступы body. А border-spacing лучше не использовать, толко один IE его не признаёт. Код: `<style> body { margin: 0px; padding: 0px; } </style> <table cellspacing="0" cellpadding="0" style="text-align: left; width: 100%;"> <tbody> <tr> <td><img style="width: 100%; height: 112px;" alt="logo.gif" src="images/logo.gif"></td> </tr> </tbody> </table>`

16.08.2009, 13:50	#5
Animex Регистрация: 14.08.2009 Сообщений: 9	столкнулся с ещё одной проблемой, когда привязал к логотипу ссылку в фаерфоксе лого стало некорректно отображаться. в опере и ие все как по задумке. Помогите разобраться. Код: `.header { margin: 0; padding: 0; background-image: url(2.gif); width:100%; height:52px; }` Код: `<div class="header"> <a href="http://www.google.ru/"> <img class="logo" src="1.gif" align="left" src="logo"> </a> </div>`

16.08.2009, 15:26	#6
wall66 Участник клуба Регистрация: 04.10.2008 Сообщений: 1,485	скорей всего необходимо указать display:block ссылке и картинке но из предоставленной информации невозможно сделать точные выводы Notepad2 *свободен...*

14.08.2009, 17:37	#4
Animex Регистрация: 14.08.2009 Сообщений: 9	white[43], спасибо большое, ваш совет помог.

16.08.2009, 16:39	#8
sa_t_an Пользователь Регистрация: 27.04.2008 Сообщений: 38	Вообще сперва пропущена скобочка Код: `.AuthBlock { float: right; width: 150px; height: 100%; border-left: 2px dotted #479bea; background-image: url(auth.gif); background-repeat: no-repeat; background-color: #ededed; }/* Вот тут */ .logo { margin: 0; padding: 0; display:block; }` во вторых попробуйте добавить следующий селектор после .header Код: `.header img { border: 0;}` что бы убрать рамку от ссылки И в третьих задайте явно размеры лого, иначе FF считает высоту картинки 100% от контейнера приемника Код: `<div class="header"> <a class="db" href="http://www.google.ru/"> <img class="logo" src="1.gif" align="left" src="logo" width="100" height="20"> </a> </div>` Как то вот так примерно

16.08.2009, 17:42	#9
Animex Регистрация: 14.08.2009 Сообщений: 9	sa_t_an, спасибо за советы, только что-то со вторым пунктом не сообразил, нужно в .header границы убрать или же создать новый стиль, .header img, тогда где его применить?

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Законна ли вставка логотипа на фотографиях в одноклассниках?	Snoopy	Свободное общение	12	12.08.2009 10:38
Прошу помочь с оформлением программы на Делфи.	stasig	Помощь студентам	4	26.03.2009 16:52
Проблема с рамами/Проблема с ЖД	DRAGGER	Компьютерное железо	6	04.01.2009 23:37
Помогите с оформлением процедуры	Absent	Помощь студентам	2	01.12.2007 18:33