-
не могу разобраться в верстке сайта на css. первый файл переделал из шаблона: st-miller.narod.ru/1.html, второй сам писал с нуля st-miller.narod.ru/2.html. при открытии второго файла ишаком, все выглядит так, как я хотел, а если фаерфоксом, то блок текста, который должен быть плавающим справа смещается вниз... причем первый документ нормально обрабатывается в обоих браузерах. сам html практически одинаковый, таблица стилей тоже (для удобства я ее встроил в саму страничку, а так она подключается к внешним файлом). очень прошу, помогите разобраться в чем проблема, а то я уже почти сутки сижу за компом...
-
честно говоря, было лень искать ошибку в коде, но суть я понял и сверстал по стандартному двухколоночному макету с текучей версткой + ваше меню, нужно только цвета и размеры поменять.
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
****<title>Untitled</title>
<style type="text/css">
* {
****margin: 0;
****padding: 0;
}
html, body {
****height: 100%;
****width: 100%;
}
body.active #sidebar li.active a {
****background: #A5A5A5;
}
#sidebar {
****width: 16%;
****height: 96%;
****padding: 2%;
****display: block;
****float: left; *
****background: #9AB4D5;
}
#content {
****width: 80%;
****height: 100%;****
****display: block;
****float: left;****
****background: #E188A5;
}
#content p {
****margin: 2%;
}
#sidebar ul {
****display: block;
****list-style: none;
}
#sidebar li a {
****margin: 2%;
****display: block;
****border-right: 20px solid black;
}
#sidebar li a:hover {
****background: #A5A5A5;
****border-right: 20px solid red;
}
</style>
</head>
<body class="active">
<div id="sidebar">
****
</div>
<div id="content">
ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст </p>
</div>
</body>
</html>
-
2 Zigzag: спасибо вам большое за уделенное время.
мне очень важно понять в чем ошибка именно у меня. может еще кто-нибудь помочь?
-
вроде бы нашел проблему.
1. в правиле #navlist единицы измерения указаны отдельно от самих значений, это нарушает спецификацию, т.е. писать нужно, например, 100%, 12pt, 1em и т.д.
только ie позваляет ставить пробел между значением и единицей измерения.
2. в правиле #content те же ошибки, что и выше, кроме того необходимо учитывать то, что ширина контейнера, это width+padding, следовательно, чтобы все ваши блоки влезли в блок #container, размером 700px необходимо чтобы width+padding+margin блока #navlist в сумме с width+padding+margin блока #content не превышали те самые 700px. вот и все.
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-AU">
<head>
<meta http-equiv="content-type" content="application/xhtml; charset=windows-1251" />
<style>
#header{
****height: 100 px;
****padding-left: 20 px;
}
#container {
****width : 700px;
}
body {
****background-color: #0099cc;
****font-size: 14 pt;
****font-weight: none;
}
/*right menu*/
#navlist {
****float: left;
****width: 120 px;
****margin-left: 5 px;
****margin-top: 30 px;
}
#navlist ul{
****list-style : none;
}
#navlist li a{
****width: 100px;
****height: 25px;
****color: black;
****background: inherit;
****text-decoration: none;
****display: block;
****text-align : center;
****font-size: 14pt;
}
#navlist li a:hover{
****color: #f4f4f4;
* *background: #333;
* *border-right: 4px solid #D01A71;
}
/*end of right menu*/
#content{
****float: right;
****width: 508px;
****margin-top: 30 px;
****margin-left: 2px;
}
#content p{
****font-size: 14 pt;
****margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="container">
*
****<div id="navlist">
*- *
- <a href=#>link one</a>
* - <a href=#>link two</a>
* - <a href=#>link three</a>
*
****</div>
****<div id="content">
*
Вот креатифф про тру-шансон, не мой.
Шансон-грайнд. Поцоны набрали полный рот водки и теперь блюют в микрофон, пытаясь рассказать о тяжёлой доле воровской.
Фьюнерал шансон. Мрачные поцоны с чорными цепями трясут подмышечным хаером (головы бритые) на могиле Михаила Круга и поют о том, как им было плохо с утра после похорон известного певца и композитора, так как они выпили очень много водки.
Тру-Блэк Шансон. Поцоны, чтобы избавиться от икоты, становятся на головы и их пудовые кресты переворачиваются. Стоят они так как правило на фоне церкви, потому что это внотуре риальнее.
Прогрессив Шансон. Сидящие в новом Ландкрузере (Ягуаре, Смарте) поцоны поют о мобильных телефонах, карманных компьютерах и блютусе. Тот факт, что они не в курсе, что это такое, не мешает им заливаться о воровской доле этих современных устройста и быть прогрессивными.
Дес Шансон. Вопреки здравому смыслу выжившие после 90ых быки со слезами на глазах рассказывают под музыку, как они завалили на стрелках и разборках по 114 человек каждый.
Экстрим Шансон. Поцоны поют о зоне, засунув метровый самотык себе в анальное отверстие.
Пауэр Шансон. Обладатели самого длинного подмышечного хаера становятся в геройские позы с пистолетами в руках, а самый главный с полуметровой (в толщину) шеей позирует в середине с бейсбольной битой, зажатой в корявках. Петь им необязательно, достаточно поместить такую фотокарточку на обложку диска.
Эйсид Шансон. Поцоны в ярко-зелёных тренировочных костюмах стоят в очереди за дешёвой водкой и поют о воровской доле.
Трэш Шансон. Бомжи с городской свалки вспоминают свои ходки и путешествия по этапу под музыку, которую играет бывший слесарь дядя-коля на ржавых кастрюлях.
Гей шансон. Я даже не могу это описать словами.
Дум Шансон. Грустный поцан плачет в микрофон о том, что случайно по пьяни завалил своего друга шампуром на шашлыках.
Гор Шансон. Отмороженный поцан рассказывает, как он ел друга поцана из пункта 11 на той же вечерине за городом.
Спид Шансон. Поцоны садятся в новый порш (гелендеваген, девятку, Ниву Шевроле) и едут по просёлку с запредельной скоростью, выкрикивая из окон слово “бляяя” под шум мотора.
Некро Шансон. Паталогоанатом вскрывает трупы поцонов из пункта 13 после их всречи с бетонным столбом линии электропередач. Шум циркулярки и лопание внутренних органов складываются в особый шансон.
Глэм Шансон. Поцоны с крашеными лысыми бошками одевают малиновые пиджаки своих отцов и фотографируются с силиконовыми блондинками у казино. На зоне их ждёт дядя Петя по кличке Мама. Он уже дрочит при мысли об их толстых задницах.
Индастриал Шансон. Поцан забивает гвоздь в стенку своего коттеджа. Это самый тяжелый труд за вю его жизнь, поэтому он даже напевает Владимирский Централ от гордости за себя, такого работящего. То что отбиты уже все пальцы, не мешает ему радоваться жизни.
Нойз Шансон. Поцаны хлюпают потными подмышками и звенят золотыми цепями.
Симфо блэк шансон. Поцоны в чорных спортивных костюмчиках настукивают чётками музыку нахлопывая ритм по барсеткам…
Технотрэш шансон. Заморенные поцоны поют о том как тяжко в их цеху на ВАЗе в 2 смены…
Эпик шансон. Реальная ГП (Группа поцонов) поёт об эпическом сражении бестрашной дюжены молодцев с ужасным 13летним Вовой за 10 рублей которых ему дала мама. Растягивают на 2 диска т.к. потом к Вове приходит подкрепление в виде его соседа Серёжи…
</p>
****</div>
</div>
</body>
</html>
-
Вот спасибо Вам большое, Zigzag! Вы даже не представляете как мне помогли, без Вас я бы еще неделю сидел над этой проблемой. Теперь буду постоянным посетителем на вашем сайте! [Only registered and activated users can see links. Click Here To Register...]
-
Цитата:
Originally posted by milo@Oct 9 2006, 11:41
Вот спасибо Вам большое, Zigzag! Вы даже не представляете как мне помогли, без Вас я бы еще неделю сидел над этой проблемой. Теперь буду постоянным посетителем на вашем сайте! [Only registered and activated users can see links. Click Here To Register...]
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
[/quote]
к сожалению, сайт пока еще не мой [Only registered and activated users can see links. Click Here To Register...] но админы берегитесь! :suicide2: :lol2:
а так не за что, всегда пжалста
З.Ы. Но лучше используйте код, который я привел первым, он грамотнее, так скажем
