Помогите найти ошибку в CSS

luluandra · November 14, 2008

Есть HTML код:

<head>

</head>

<div id="logo">

<div class="logo1">

<a href="index.php" style="font-size: 25px; float: right;">Юридическая фирма

<br/>

<b style="font-size: 35px;">"Империя права"</b></a>

</div>

<div class="logo2"/>

</div>

</div>

</div>

</center>

</body>

</html>

и описание стилей "шапки" (вся шапка <div id="logo">),

}

#logo {

margin:0 auto;

width: 100%;

padding:0px;

height:200px;

}

.logo1{

background: transparent url(../images/bg1.jpg) no-repeat top left;

margin:0 auto;

width: 20%;

padding:0px;

height:200px;

float:left;

}

.logo2 {

background: transparent url(../images/bg2.jpg) no-repeat top right;

margin:0 auto;

width: 80%;

padding:0px;

height:200px;

float:right;

}

#logo div a {

width: 350px;

color:rgb(163,14,22);

position:relative;

right:-100px;

top:60px;

#logo div a:hover {color:rgb(73,73,73);}

у меня задача такая, сделать шапку из двух картинок (картинки в тегах <div class="logo1"> и <div class="logo2">), и поверх название фирмы, обязательно в две строчки и в определенном месте (реализовала как смогла: т.е. часть стилей прописала в НТМЛ коде).

Это все правильно отображается в IE7 и Опере9,24, а выот например IE6, картинки отображаются в два уровня (можно посмотреть скриншот здесь www.advocate-office.spb.ru/1.jpg),а в Опере 9,62 название прижимается влево и на свойство #logo div a {right:-100px;} никак не реагирует. Помогите справиться с проблемой, подскажите в чем может быть решение. Очень очень нужно.

rome.ro · November 14, 2008

Привет!

У тебя, как я понял, проблема кроссбраузерности - т.е. твой код не работает во всех браузерх одинаково.

Твоя ошибка в том, что ты делаешь простые вещи сложными путями.

Если тебе нужно сделать такой логотип как здесь - http://www.advocate-office.spb.ru/1.jpg , то попробуй использовать простую таблицу:

<table>
 <tr>
   <td>ТУТ ПОМЕЩАЕШЬ СВОЙ ЛОГОТИПЧИК</td>
   <td align="center"><h2>Юридическая фирма</h2><h1>"Империя права"</h1></td>
  </tr>
</table>

Ну и, вроде, должно получиться. Естественно заголовки <H1> и <H2> тебе прийдется через таблицу стилей подправить - типа, цвет и гранитура шрифта, отступы и.т.п.

Надеюсь, я правильно понял твою проблему.

luluandra · November 14, 2008

Мне надо через дивы сделать, т.е. обязательно все должно заключатся в <div class=logo> <div>. К тому же логотип из двух картинок состоит, т.е их нужно разместить (опять же в дивах), чтобы в IE6, они не уходили на два уровня.

А вот до тегов <H1><H2> не додумалась, попробую вставить. Спасибо!

Edited November 14, 2008 by luluandra

Searcher · November 14, 2008

используйте параметры float:left или абсолютное позиционирование. И тут слэш не нужен: <div class="logo2"/>

Edited November 14, 2008 by Searcher

rome.ro · November 14, 2008

Мне надо через дивы сделать, т.е. обязательно все должно заключатся в <div class=logo> <div>.

А почему именно через DIV'ы это делать, если правильнее сделать через таблицу? Или это предрассудок о "устарелости табличной верстки"? Если да - то, в данном случае таблица, имхо - одно из самых удобных решений. Согласен, что таблицу потом можно заключить в тег <DIV> с параметром float:left, как сказал уважаемый Searcher.

А вообще, советую почитать вот эту статью о правильной блочной верстке - очень мне помогла одно время - думаю, и тебе поможет. Хоть я и сам не мега-дизайнер, но посмею сказать, что с блочной версткой ты не очень хорошо знакома. Поэтому читай - http://www.freeartists.ru/articles/make-up/div-vs-table/ - авось поможет.

luluandra · November 14, 2008

Спасибо!!!!! Почитаю.

Ялекс · November 14, 2008

@rome.ro, табличная верстка действительно морально устарела.

Sign In

Помогите найти ошибку в CSS

Question

luluandra

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

rome.ro

Link to comment

Share on other sites

luluandra

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

rome.ro

Link to comment

Share on other sites

luluandra

Link to comment

Share on other sites

Ялекс

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information