Перейти к содержимому

Реферальная программа Мегаплана


Проблема с CSS

#1 tro9an

tro9an
  • Пользователь
  • 34 сообщений
  • Репутация: 0
0

Отправлено 22 Октябрь 2012 - 00:17

Изображение

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>


Изображение

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К   Количество загрузок: 150

 

 

  • 0

#2 Алия

Алия
  • Пользователь
  • 42 сообщений
  • Репутация: 10

Отправлено 25 Октябрь 2012 - 21:38

Чтобы картинка перестала вылезать, попробуйте изменить этот кусок кода:
<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>


Сам принцип организации меню мне показался странным, думаю, вы с ним ещё помучаетесь :)
  • 1

#3 tro9an

tro9an
    Topic Starter
  • Пользователь
  • 34 сообщений
  • Репутация: 0

Отправлено 25 Октябрь 2012 - 23:23

Спасибо, помогло.
Чем именно Вам показался странным способ организации меню?
Мне как начинающему верстальщику необходимо знать все ошибки и недочёты, чтобы не допускать их в дальнейшем.
  • 0

#4 Алия

Алия
  • Пользователь
  • 42 сообщений
  • Репутация: 10

Отправлено 28 Октябрь 2012 - 00:36

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


Оформление форума – IPBSkins.ru