Лента этого топика

Проблемы с CSS

(Ответов: 11, Просмотров: 1103)
Страница 1 из 2 12 Последняя
  1. 20.10.2012 22:23
    #1
    na9ort вне форума
    na9ort
    Новичок
    • Регистрация: 13.02.2012
    • Сообщений: 20
    • Репутация: 0
    Код к первой картинке:

    Развернуть текст


    Код HTML: 
    <div id="content"><div><div><div>
   одержание блокаСодержание блокаСодержаниеСодержание блокаСодержание блокаСодержание блокаСодержание блока
	 Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
	 Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
	 Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
	 Содержание блокаСодержание блокаСодержание блок
  </div></div></div></div>
    [свернуть]

    Нажмите на изображение для увеличения.  Название: on.jpg  Просмотров: 10  Размер: 19.0 Кб  ID: 6341

    Код ко второй картинке:

    Развернуть текст


    Код HTML: 
    <div id="content"><div><div><div> <p>одержание блокаСодержание блокаСодержаниеСодержание блокаСодержание блокаСодержание блокаСодержание блока
	 Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
	 Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
	 Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
	 Содержание блокаСодержание блокаСодержание блок</p> </div></div></div></div>
    [свернуть]

    Нажмите на изображение для увеличения.  Название: off.jpg  Просмотров: 10  Размер: 19.2 Кб  ID: 6340

    CSS:

    Развернуть текст


    Код HTML: 
    #content {
width: 70%;
background-color: #ffffff;
position: absolute;
z-index: 2;
margin-top: 25%;
margin-left: 15%;
margin-right: 15%;
background-image: url("top_left.gif");
background-repeat: no-repeat;
}

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

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

#content div div div {
background-image: url("bottom_right.gif");
background-position: bottom right;
background-repeat: no-repeat;
}
    [свернуть]


    Из первой картинки видно что когда нету тега <p> закруглённые углы отображаются нормально.
    Но когда я добавляю тег <p> они "сходят" со своих мест.
    Как я понял тег <p> берёт в себя три картинки ( кроме верхней левой).
    Как сделать так чтобы при теге <p> углы отображались нормально?
    • 0
  2. Значок / Очков: 5 Значок / Очков: 5
    20.10.2012 23:08
    #2
    Dolmatov вне форума
    Dolmatov
    А компот??!!
    • Регистрация: 28.11.2011
    • Сообщений: 2,067
    • Репутация: 720
    • Webmoney BL: ?
    Может быть лучше использововать border-radius: 5px;
    Если хотите закруглённые кроя

    ---------- Сообщение добавлено 22:08 ---------- Предыдущее 22:07 ----------

    #content {
    width: 70%;
    background-color: #ffffff;
    position: absolute;
    z-index: 2;
    margin-top: 25%;
    margin-left: 15%;
    margin-right: 15%;
    background-image: url("top_left.gif");
    background-repeat: no-repeat;
    }

    #content div {border-radius: 5px;}




    <div id="content">
    <div>
    <p>одержание блокаСодержание блокаСодержаниеСодержание блокаСодержание блокаСодержание блокаСодержание блока
    Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
    Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
    Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
    Содержание блокаСодержание блокаСодержание блок</p>
    </div></div>
    Вёрстка HTML+ CSS, установка модулей DLE
    Installpay.pro - монетизация файлового трафика
    • 0
  3. 20.10.2012 23:15
    #3
    na9ort вне форума
    na9ort
    Новичок
    • Регистрация: 13.02.2012
    • Сообщений: 20
    • Репутация: 0
    Может лучше найти источник проблемы, чтобы в будущем не повторять тех же ошибок?
    border-radius использовать не хочу
    • 0
  4. Значок / Очков: 5 Значок / Очков: 5
    20.10.2012 23:19
    #4
    Dolmatov вне форума
    Dolmatov
    А компот??!!
    • Регистрация: 28.11.2011
    • Сообщений: 2,067
    • Репутация: 720
    • Webmoney BL: ?
    na9ort, скинь ссылку на сайт
    Вёрстка HTML+ CSS, установка модулей DLE
    Installpay.pro - монетизация файлового трафика
    • 0
  5. 20.10.2012 23:28
    #5
    na9ort вне форума
    na9ort
    Новичок
    • Регистрация: 13.02.2012
    • Сообщений: 20
    • Репутация: 0
    Сайт состоит из одной страницы ( находится у меня на компе ), вот всё что содержит страница.

    HTML:

    Развернуть текст


    Код: 
    <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>
   <p>одержание блокаСодержание блокаСодержаниеСодержание блокаСодержание блокаСодержание блокаСодержание блока
	 Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
	 Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
	 Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
	 Содержание блокаСодержание блокаСодержание блок</p>
  </div></div></div></div>
  
  
 </body>
</html>
    [свернуть]


    Развернуть текст


    Код: 
    /*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%;
position: absolute;
z-index: 1;
}

#content {
width: 70%;
background-color: #ffffff;
position: absolute;
z-index: 2;
margin-top: 25%;
margin-left: 15%;
margin-right: 15%;
background-image: url("top_left.gif");
background-repeat: no-repeat;
}

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

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

#content div div div {
background-image: url("bottom_right.gif");
background-position: bottom right;
background-repeat: no-repeat;
}
    [свернуть]
    Последний раз редактировалось na9ort; 20.10.2012 в 23:54.
    • 0
  6. 21.10.2012 00:14
    #6
    krupni вне форума
    krupni
    Студент
    • Регистрация: 28.07.2012
    • Сообщений: 59
    • Репутация: 20
    У вас похоже картинка увеличивается, а картинки скругления остаются вокруг content. Можно попробовать поставить так:

    css

    #content {
    width: 70%;
    background-color: #eee;
    position: absolute;
    z-index: 2;
    margin-top: 25%;
    margin-left: 15%;
    margin-right: 15%;
    border: 10px solid #0c91b0; /*вот тут поставить границы вокруг контента*/
    background-image: url("top_left.gif");
    background-repeat: no-repeat;
    }
    [свернуть]

    или можно сделать двумя картинками
    Нажмите на изображение для увеличения.  Название: 1.jpg  Просмотров: 2  Размер: 6.2 Кб  ID: 6343
    так же и нижняя.
    Последний раз редактировалось krupni; 21.10.2012 в 00:16.
    • 0
  7. 21.10.2012 00:26
    #7
    na9ort вне форума
    na9ort
    Новичок
    • Регистрация: 13.02.2012
    • Сообщений: 20
    • Репутация: 0
    border: 10px solid #0c91b0; /*вот тут поставить границы вокруг контента*/
    Не помогло. Всё тоже самое ( картинки скачут ) только ещё добавилась рамка.
    • 0
  8. 21.10.2012 01:23
    #8
    krupni вне форума
    krupni
    Студент
    • Регистрация: 28.07.2012
    • Сообщений: 59
    • Репутация: 20

    css

    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: -180px; /*тут поправишь по высоте сколько нужно*/
    }

    #content{
    width: 70%;
    margin-left: 15%;
    margin-right: 15%;
    background: #fff;

    }

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

    #content div div{
    background: url("top_left.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;
    }
    [свернуть]



    html

    <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>
    <p>Содержание блокаСодержание блокаСодержаниеСодержание блокаСодержание блокаСодержание блокаСодержание блока
    Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
    Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
    Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
    Содержание блокаСодержание блокаСодержание блока
    Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
    Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
    Содержание блокаСодержание блокаСодержание блока
    Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
    Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
    Содержание блокаСодержание блокаСодержание блока
    Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
    Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
    Содержание блокаСодержание блокаСодержание блока
    Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
    Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
    Содержание блокаСодержание блокаСодержание блока
    </p>
    </div></div></div></div></div>


    </body>
    </html>

    [свернуть]
    • 1

    Спасибо сказали:
    na9ort(21.10.2012),
  9. 21.10.2012 01:38
    #9
    na9ort вне форума
    na9ort
    Новичок
    • Регистрация: 13.02.2012
    • Сообщений: 20
    • Репутация: 0
    Спасибо, всё работает. Только объясните пожалуйста, зачем нужно использовать отрицательное значение margin?
    • 0
  10. 21.10.2012 01:56
    #10
    krupni вне форума
    krupni
    Студент
    • Регистрация: 28.07.2012
    • Сообщений: 59
    • Репутация: 20
    Что бы отступ между лого и контентом был меньше. Там конечно можно и по другому сделать.
    • 0
Страница 1 из 2 12 Последняя

Тэги топика:

« Отправка sms на телефоны через php | Какой код базовой цены в базе данных БИТРИКС »

Похожие темы

Темы Раздел Ответов Последний пост
проблемы с RDS-bar
 Прочее 6 05.05.2012 22:55
Проблемы по PHP
 Web программирование 9 30.04.2012 20:17
Проблемы с шаблоном.
 DLE 5 11.04.2012 00:37
Проблемы с webeffector
 Автопродвижение в агрегаторах 7 09.04.2012 20:14
Проблемы с блогом на WP
 Софт, скрипты, сервисы 6 27.08.2010 22:32
(добавить баннер)

Баннеры



(добавить ссылку)

Витрина ссылок

У нас проходит

У кого попросить инвайт?

Вы можете попросить инвайт у любого модератора:

Или перенести аккаунт с других форумов

Золотые темы форума

Все золотые темы

Популярные темы

Информеры