Проблема с CSS - SEO форум MaulTalk.com

Проблема с CSS

Опции

tro9an

Topic Starter сообщение

22.10.2012, 1:17; Ответить: tro9an

Сообщение #1

Новичок

Группа: User
Сообщений: 34
Регистрация: 21.9.2010
Поблагодарили: 0 раз
Репутация:

0

[img]http://s017.radikal.ru/i405/1210/bd/bb4ab911dc58.gif[/img]

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

  </body>
</html>

[img]http://s53.radikal.ru/i139/1210/6b/001d3872f5b4.gif[/img]

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

</body>
</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 id="nav_k">
    <ul>
     <li><a href="index.html">[u][b]Главная[/b][/u]</a></li>
    </ul>
   </div>
    <p class="main_content">Содержание блокаСодержание блокаСодержаниеСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блока
     </p>
    </div></div></div></div></div>

  </body>
</html>

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: -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 для закругления углов использовать не хочу.

Прикрепленные файлы

sait.rar ( 81,89 килобайт ) Кол-во скачиваний: 189

0

Ответить с цитированием данного сообщения

Алия_mw Алия_mw 25.10.2012, 22:38; Сообщений: 42 Поблагодарили: 0 раз Репутация: 10 Просмотр профиля	25.10.2012, 22:38; Ответить: Алия_mw Сообщение #2
Новичок Группа: User Сообщений: 42 Регистрация: 27.6.2012 Поблагодарили: 0 раз Репутация: 10	Чтобы картинка перестала вылезать, попробуйте изменить этот кусок кода: <div id="content"><div><div><div><div> <div id="nav_k"> <ul> <li><a href="index.html">[u][b]Главная[/b][/u]</a></li> </ul> </div> переместив два блока <div><div> (в которых эти вылезающие картинки нижних углов и лежат) немного ниже, сразу после </ul>, то есть: <div id="content"><div><div> <div id="nav_k"> <ul> <li><a href="index.html">[u][b]Главная[/b][/u]</a></li> </ul> <div><div> </div> Сам принцип организации меню мне показался странным, думаю, вы с ним ещё помучаетесь

tro9an Topic Starter tro9anTopic Starter 26.10.2012, 0:23; Сообщений: 34 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	Topic Starter 26.10.2012, 0:23; Ответить: tro9an Сообщение #3
Новичок Группа: User Сообщений: 34 Регистрация: 21.9.2010 Поблагодарили: 0 раз Репутация: 0	Спасибо, помогло. Чем именно Вам показался странным способ организации меню? Мне как начинающему верстальщику необходимо знать все ошибки и недочёты, чтобы не допускать их в дальнейшем.

Алия_mw

28.10.2012, 1:36; Ответить: Алия_mw

Сообщение #4

Новичок

Группа: User
Сообщений: 42
Регистрация: 27.6.2012
Поблагодарили: 0 раз
Репутация:

10

Я переместила блоки методом "тыка", и, хотя картинка улучшилась, не факт, что потом не вылезут другие проблемы, поскольку блоки встали криво относительно друг друга. Возможно, стоит поискать в интернете готовых решений проблемы со скруглёнными углами. В общем, мне не понравилась привязка меню к текстовому блоку, но что с этим делать в данном случае, я не знаю.
Должно быть, Ваше меню пока в черновом варианте, поскольку код css ещё не прописан до конца. Я попробовала вставить несколько пунктов меню, и там явно не хватает позиционирования текста. Мне также показалось неудобным подгонять содержание меню под фиксированные размеры тёмно-синих кнопок.
Также хотелось бы посмотреть, как поведёт себя заполненное меню при масштабировании и на маленьких экранах.
Ещё возник вопрос: зачем такие широкие поля? Обилие фона с шумом мне кажется утомительным для глаз.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой

или обратитесь к любому из модераторов.

« Предыдущая тема · Программная часть · Следующая тема »

1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)

Пользователей: 0

Похожие темы

Тема	Ответов	Автор	Просмотров	Последний ответ
Разработка/доработка сайтов Wordpress, HTML/CSS/JS Вёрстка, перенос на WP, правки	9	malamut	3455	25.1.2024, 14:36 автор: malamut
СОЗДАНИЕ : / САЙтЫ / ЛЕНДЫ / БОТЫ ТГ / ВАЙТЫ / КРЕО / СОФТЫ / ДИЗАЙН [PHP, JS, HTML/CSS] и другое	5	CULA	3395	19.12.2023, 18:55 автор: CULA
Веб-разработка (HTML, CSS)	1	ViktoriaFE	6459	5.5.2021, 5:22 автор: bekett
Разработка адаптивных вебсайтов. HTML/CSS/WordPress(сайты-визитки, лендинги, корпоративные сайты, интернет-магазины).	0	kozak199110	1667	3.3.2021, 12:22 автор: kozak199110
Продам адаптивный шаблон (css/html/js) под cj/tube сайт	2	zaiko	1434	29.12.2020, 23:49 автор: zaiko