Как правильно задать размер блока с картинкой ( CSS ) ?

na9ort · October 24, 2012

HTML к первой картинке:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
 </head>
  <body>
   <div id="logo">
   </div>

   <div id="content"><div><div><div><div>
   <div class="nav_k">
    <ul>
     <li><a href="index.html"></a></li>
    </ul>
   </div>
    <p class="main_content">Содержание блокаСодержание блокаСодержаниеСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блока
     </p>
    </div></div></div></div></div>

  </body>
</html>

HTML ко второй картинке:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
 </head>
  <body>
   <div id="logo">
   </div>

   <div id="content"><div><div><div><div>
   <div class="nav_k">
    <ul>
     <li><a href="index.html">Главная</a></li>
    </ul>
   </div>
    <p class="main_content">Содержание блокаСодержание блокаСодержаниеСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блока
     </p>
    </div></div></div></div></div>

  </body>
</html>

CSS:


/*CSS document*/

body {
background-image: url("bd3.gif");
}

#logo {
width: 400px;
height: 400px;
background-image: url("logo.gif");
background-repeat: no-repeat;
margin-left: 18%;
margin-bottom: -200px;
}

#content{
width: 70%;
margin-left: 15%;
margin-right: 15%;
background: #fff;
background-image: url("nav_fon.gif");
background-repeat: repeat-x;
}

#content div{
background: url("nav_right.gif");
background-position: top right;
background-repeat: no-repeat;
}

#content div div{
background: url("nav_left1.gif");
background-position: top left;
background-repeat: no-repeat;
}

#content div div div{
background: url("bottom_left.gif");
background-position: bottom left;
background-repeat: no-repeat;
}

#content div div div div{
background: url("bottom_right.gif");
background-position: bottom right;
background-repeat: no-repeat;
}

.main_content {
padding-top: 30px;
}

.nav_k {
}

.nav_k ul {
list-style: none;
text-align: center;
}

.nav_k a {
background-image: url("nav_k.gif");
}

1. Как видно из картинок, когда в навигации ( синия полоса ) ничего нету, то её правый угол отображается нормально, а как только там что-то появляется то из ниоткуда появляется картинка. Вся загвоздка в том что это правый нижний угол основной ( белой )таблицы.

Как это убрать?

Почему появляется картинка?

2. Как видно из второй картинки, когда я вставляю текст в навигация то вместе с ней вставляется картинка, но не полностью. Картинка обрезается по длине текста.

Как сделать чтобы не картинка подстраивалась под текст, а текст под картинку ( картинка отображалась полностью, а я в свою очередь задам стиль тексту)?

Прикрепил страницу.

border-radius для закругления углов использовать не хочу.

Sign In

Как правильно задать размер блока с картинкой ( CSS ) ?

Question

na9ort

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information