Jump to content
  • 0

Оптимизация логотипа форума


sunrec
 Share

Question

Здравствуйте! Возможно где-то такая тема уже есть, но я не нашёл и создал новую. Помогите разобраться в коде CSS

#logodesc {

margin-bottom: 15px;
padding: 0px 5px;
background: #FFB3CC;
border: 2px solid #D7E4E4;
background :url(images/header.jpg) no-repeat;
width:1480px;
height:150px;
}

Почему-то в разных браузерах логотип отображается по разному, например, в IE, опере - он не до конца доходит, а в мазиле через-чур уезжает за границы и появляется прокрутка. Код как мог набросал, понимаю, что многое может быть и не правильно, недавно совсем начал разбираться с ними. Мне очень надо понять что не так-то

Edited by sunrec
Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

Тут, кончено бы хорошо ссылоку на сам сайт или пример.

А в какую сторону уезжает. Горизонталь или вертикаль?

Если проблемы с высотой, то проблема скорее всего в этом:

margin-bottom: 15px;
height:150px;

IE6 не правильно работает с шириной. Он считает, что поля и отступы (margin и padding) входят в понятие ширины. Поэтому нужно margin переложить на другой контейнер, или вообще от него избавится.

Если у вас проблема и в других IE, и даже в Opera, то скорее всего у вас не проставлен Doctype, а из-за этого браузеры переходят в режим совместимости и работаю кое-как.

Если проблема с шириной, то это из-за указания ширины. У вас получается ширина 1480px и еще оступы 10px, итого 1490 рублейpx. Не в каждый монитор такое поместится.

Edited by Serlutin
Link to comment
Share on other sites

  • 0

Даю ссылку для наглядности http://www.moya-lyalyas.ru/forum/

Уезжает он по горизонтале, даже если убираю все отступы, то всё остаётся по прежнему

Если проблема с шириной, то это из-за указания ширины. У вас получается ширина 1480px и еще оступы 10px, итого 1490px. Не в каждый монитор такое поместится.

А как же тогда в опере помещается и в IE8?

Edited by sunrec
Link to comment
Share on other sites

  • 0

#logodesc {

margin-bottom: 15px;
padding: 0px;
background :url(images/header.jpg) no-repeat;
height:150px;
}

Сделал все варианты, которые посоветовали, но в опере и в IE очень большой отступ справа остаётся.

Нихрена себе логотипчик в 1500пк)

А что, размер логотипа слишком большой? Объясните пожалуйста, что не так

Edited by sunrec
Link to comment
Share on other sites

  • 0

Может быть я не правильно объясняю, давайте заново попробую. Вот смотрите, есть такой шаблон

http://styles.bb3x.ru/demostyle.php?mystyle=Chrimbo

с исходным кодом в логотипе вот таким

#logodesc {
margin-bottom: 15px;
padding: 0px 5px;
background: #FFB3CC;
border: 2px solid #D7E4E4;
background-image: url('./images/header.gif');
}

Как видите в исходнике прописан код фона, этот код на всю шапку, мне за место этого фона нужно поставить картинку такой же примерно ширины

Вот как я попытался это сделать с помощью ваших подсказок

#logodesc {

margin-bottom: 15px;
padding: 0px;
background :url(images/header.jpg) no-repeat;
height:150px;
}

Но, результат в опере и IE меня не устраивает. Напротив, в мазиле вроде нормально всё

Link to comment
Share on other sites

  • 0

Проблема решена, спасибо.

Что было сделано:

Это в HTML

<tr>

<td width="100%"><a href="./index.php?sid=e6bf4c19e39e14cbaf8d27fc6b4151f1"><img src="./styles/ggvalentine/imageset/header.jpg" width=100% alt="" title="" /></a></td>

/tr>

В CSS

#logodesc {
margin-bottom: 15px;
padding: 0px;5px;

оставил только эти 2 строчки, остальные удалил

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy