Diego
-
Posts
21 -
Joined
-
Last visited
Diego's Achievements
Explorer (1/14)
0
Reputation
-
Здравствуйте! 2 вопроса.. 1: Как убрать отступ между правым и левым контентом(на картинке проблема указана под номером 1) Пробовал и маржины обнулять и паддинги и бордеры.. Не фурычет...((( 2: Как сделать так, чтобы правый контент изменял свою height одновременно с левым... Может как-то наследованием?! ставил height:inherit - не помогло... (на картинке под номером 2) Картинка и код прилагаются: body { margin: 0 auto; padding: 0 1.6em; background: url('12.jpg'); overflow: auto; } /* все для меню */ #menu{ width:766px; margin:15px; position: absolute; } ul{ list-style:none; } #menu li{ list-style:none; display:block; float:left; margin:65px 0 0 0; } #menu li a{ display:block; float:left; height:34px; width:122px; color:#fff; text-transform:uppercase; font-size:11px; font-weight:bold; background:url(buttongrey.jpg) no-repeat; line-height:34px; padding:0 0 0 9px; text-decoration:none; } #menu li a span{ display:block; height:34px; color:#d2eeff; line-height:34px; padding-right:15px; text-align:center; } #menu li a:hover{ display:block; float:left; background:url(buttonblue.jpg) no-repeat; height:34px; } /*————-*/ .wrapper{ width: 766px; margin: 0 auto; } .header-area img{ margin: 0 .1em; padding: 0; display: block; } .bar { position: absolute; margin:150px 35px 0; } /*контент*/ .content{ background: white; margin: 0 .1em; width: 616px; padding: 6em .6em .6em .6em; float:left; border:0; } div#rightcontent { width:127px; margin-top:0; margin-left: 0; float:right; background: white; } div#rightcontent ul { text-align: left; padding: 6em 10px;} /*энд контент*/ p { text-align: justify; font-family: verdana, tahoma, monospace; font-size: 9pt; } .footer{ width:766px; height:94px; float:left; } .footer img { padding: 0; display: block; } <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Test page</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <link href="styles.css" type="text/css" rel="stylesheet"> </head> <body> <div class="wrapper"> <!-- место для меню --> <div id="menu"> <ul> <li><a href="rtet.htm"><span>home</span></a></li> <li><a href="rtet.htm"><span>portfolio</span></a></li> <li><a href="rtet.htm"><span>services</span></a></li> <li><a href="rtet.htm"><span>solutions</span></a></li> <li><a href="rtet.htm"><span>about us</span></a></li> </ul> </div> <!--бар и хедер--> <div class="bar"><img src="bar.png"></div> <div class="header-area"><img src="header.jpg"></div> <!-- контент --> <div class="content"> <p>Lorem ipsum dolor set amir tolos and tacos for plenty to see. jack is the orange sub marine, by any means I found my plans. </p> <p>Lorem ipsum dolor set amir tolos and tacos for plenty to see. jack is the orange sub marine, by any means I found my plans. </p> <p>Lorem ipsum dolor set amir tolos and tacos for plenty to see. jack is the orange sub marine, by any means I found my plans. </p> <p>Lorem ipsum dolor set amir tolos and tacos for plenty to see. jack is the orange sub marine, by any means I found my plans. </p> <p>Lorem ipsum dolor set amir tolos and tacos for plenty to see. jack is the orange sub marine, by any means I found my plans. </p> <p>Lorem ipsum dolor set amir tolos and tacos for plenty to see. jack is the orange sub marine, by any means I found my plans. </p> </div> <div id="rightcontent"> <ul> <li><a href="#">это интересно</a></li> <li><a href="#">это интересно1</a></li> <li><a href="#">это интересно2</a></li> <li><a href="#">это интересно3</a></li> </ul> </div> <!-- футер --> <div class="footer"><img src="footer.jpg"></div> </div> </body> </html> ЗАРАНЕЕ ВСЕМ БОЛЬШОЕ СПАСИБО!!!
-
что-то я не пойму своей ошибки... но это я понял, что если,например, задаешь элементу(див1) float:left, то он выравнивается по левой стороне а следующий за ним(див2) обтекает его по правой, а если float:right-то наоборот... ведь так? По идее всё тогда должно быть в шоколаде, но в моем случае всё немного в другом веществе..
-
Спасибо за разъяснения!))) С шрифтом всё получилось!))) .bar - это большая синяя штука посередине))))) Не получилось со списком-rightcontent такое ощущение, что float вообще побарабану...
-
вот весь архив моего так сказать сайта)))))(с картинками и тп) скачать мой сайт со всей лабудой для удобного ковыряния))
-
тоже бесполезно... тыкал куда мог этот текст-алайн.... теперь появился другой вопрос: делаю вторую колонку, а она ни на какие команды не реагирует... будто падинги, маржины... бэкграунд даже не ставит....
-
не помогло...
-
Всё решилось! Спасибо Вам!)) Нашел похожий пример на css горизонтального меню)) И немного подогнал под себя... вроде получилось, но всё еще разбираюсь в коде...)))) вдогонку: как расположить текст по центру(в кнопках меню), если на команду text-align нет никакой реакции?? html </p><p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Test page</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <link href="styles.css" type="text/css" rel="stylesheet"> </head> <body> <div class="wrapper"> <!-- место для меню --> <div id="menu"> <ul> <li><a href="rtet.htm"><span>home</span></a></li> <li><a href="rtet.htm"><span>portfolio</span></a></li> <li><a href="rtet.htm"><span>services</span></a></li> <li><a href="rtet.htm"><span>solutions</span></a></li> <li><a href="rtet.htm"><span>about us</span></a></li> </ul> </div> <!--бар и хедер--> <div class="bar"><img src="bar.png"></div> <div class="header-area"><img src="header.jpg"></div> <!-- контент --> <div class="content"> <p>1) Hammer on. Вы его уже изучали, а сейчас закрепим. Прижмите 1ю струну указательным пальцем левой руки на 4м ладу. Дёрните её указательным пальцем правой руки. После этого средним пальцем левой руки сделайте быстро удар по струне по 5му ладу, сразу же отпустив средний палец. Получились 2 приёма: «хаммер он» и «пулл офф». На табулатуре этот элемент выглядит так: 4h5p4.</p> <p>2) Вибрато. Выполняется этот приём так. Вы прижимаете струну на каком-либо ладу, дёргаете её, а пальцем левой руки, который прижимает струну, не поднимая его с лада, водите им вдоль струны в пределах лада (но не перепендикулярно струне). Водить сильно не надо – буквально десятые доли миллиметра.</p> <p>Чтобы более углубленно подойти к разработке скриптов и понять принцип их работы, необходимо установить сервер, подобный тому, что используется на хостингах, но в более упрощенной форме. Установка локального сервера потребует от вас немного внимания и примерно 30 минут времени. Причем установка сервера заключается не в том, чтобы установить apache, но и ещё правильно прикрутить обработчик скриптов, а именно php интерпретатор. Я знаю что в интернете есть куча подобных руководств, но многие руководства либо устарели, либо тупо копированы у друг друга. Зачастую даже все что там изложено - не работает. Поэтому эту статью я подготовил сам, все шаги я сопровождал скриншотами, чтобы даже новичку было достаточно понятно.</p> <p>Далее нас просят ввести информацию сервера, в первые два поля вводим значение localhost. В третьем поле нас просят указать e-mail администратора, обычно он отображается если возникает какая нибудь внутренняя ошибка сервера, поэтому для локального использования мы используем адрес почты любой, например admin@localhost:</p> <p>Нажимаем на файл установки и по традиции нас встретит окно приветствия установки. На самом деле процесс установки MySQL самый долгий =). Чтобы не делать ошибок внимательно смотрте на скриншоты и у вас все получиться.</p> <p>Поздравляю, вы установили веб сервер. Т.к. мы хотим использовать apache в связке с PHP, нам необходимо настроить файл конфигурации httpd.conf, но этим мы займемся позже, нам ещё необходимо установить php.</p> </div> <div id="rightcontent"> <ul> <li><a href="rew.htm">это интересно</a></li> <li><a href="rew.htm">это интересно1</a></li> <li><a href="rew.htm">это интересно2</a></li> <li><a href="rew.htm">это интересно3</a></li> </ul> </div> <!-- футер --> <div class="footer"><img src="footer.jpg"></div> </div> </body> </p><p> css </p><p>body { margin: 0 auto; padding: 0 1.6em; background: url('12.jpg'); overflow: auto; } /* все для меню */ #menu { width:100%; margin:15px; position: absolute; } ul { list-style:none; } #menu li { list-style:none; display:block; float:left; margin:65px 0 0 0; } #menu li a{ display:block; float:left; height:34px; width:122px; color:#fff; text-transform:uppercase; font-size:11px; font-weight:bold; background:url(buttongrey.jpg) no-repeat; line-height:34px; padding:0 0 0 9px; text-decoration:none; } #menu li a span{ display:block; float:left; height:34px; color:#d2eeff; line-height:34px; padding:0 0 0 0; } #menu li a:hover{ display:block; float:left; background:url(buttonblue.jpg) no-repeat; height:34px; } /*————-*/ .wrapper { width: 766px; margin: 0 auto; } .header-area img { margin: 0 .1em; padding: 0; display: block; } .bar { position: absolute; margin: 2.3em 2.3em; padding: 7.3em 0; } .content { background: white; margin: 0 .1em; width: 616px; padding: 6em .6em .6em .6em; float:left; } div.rightcontent { width: 130px; margin: 0; } p { text-align: justify; font-family: verdana, tahoma, monospace; font-size: 9pt; } .footer img { margin: 0 0.1em; padding: 0; display: block; }</p><p> теперь появился другой вопрос: делаю вторую колонку, а она ни на какие команды не реагирует... будто падинги, маржины... бэкграунд даже не ставит....
-
Спасибо, но вот еще одна проблема: как сделать, чтобы картинки(бэкграунд) отображались полностью? и как сделать отступы от "кнопок" побольше? Вот мой код после редактирования: /* все для меню */ .menu { position: absolute; margin: 40px 40px 40 50px; /* необязательно именно такие значения */ } ol { list-style-type: none; } li { background: url('buttongrey.jpg'); float: left; } a:hover { background: url('buttonblue.jpg'); } /*————-*/ Заранее всем большое спасибо!
-
Здравствуйте! У меня проблема с горизонтальным меню, а именно ничего не получается.... по задумке должно всё выглядеть так: а получилось у мну так: я в отчаянии... HTML </p><p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Test page</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <link href="styles.css" type="text/css" rel="stylesheet"> </head> <body> <div class="wrapper"> <!-- место для меню --> <div class="menu"> <ol> <li><a href="rtet.htm">dgfdg</a></li> <li><a href="rtet.htm">fdddf</a></li> <li><a href="rtet.htm">xcvxcv</a></li> <li><a href="rtet.htm">kjljkl</a></li> <li><a href="rtet.htm">zcxzcz</a></li> </ol> </div> <!--бар и хедер--> <div class="bar"><img src="bar.png"></div> <div class="header-area"><img src="header.jpg"></div> <!-- контент --> <div class="content"> <p>1) Hammer on. Вы его уже изучали, а сейчас закрепим. Прижмите 1ю струну указательным пальцем левой руки на 4м ладу. Дёрните её указательным пальцем правой руки. После этого средним пальцем левой руки сделайте быстро удар по струне по 5му ладу, сразу же отпустив средний палец. Получились 2 приёма: «хаммер он» и «пулл офф». На табулатуре этот элемент выглядит так: 4h5p4.</p> <p>2) Вибрато. Выполняется этот приём так. Вы прижимаете струну на каком-либо ладу, дёргаете её, а пальцем левой руки, который прижимает струну, не поднимая его с лада, водите им вдоль струны в пределах лада (но не перепендикулярно струне). Водить сильно не надо – буквально десятые доли миллиметра.</p> <p>Чтобы более углубленно подойти к разработке скриптов и понять принцип их работы, необходимо установить сервер, подобный тому, что используется на хостингах, но в более упрощенной форме. Установка локального сервера потребует от вас немного внимания и примерно 30 минут времени. Причем установка сервера заключается не в том, чтобы установить apache, но и ещё правильно прикрутить обработчик скриптов, а именно php интерпретатор. Я знаю что в интернете есть куча подобных руководств, но многие руководства либо устарели, либо тупо копированы у друг друга. Зачастую даже все что там изложено - не работает. Поэтому эту статью я подготовил сам, все шаги я сопровождал скриншотами, чтобы даже новичку было достаточно понятно.</p> <p>Далее нас просят ввести информацию сервера, в первые два поля вводим значение localhost. В третьем поле нас просят указать e-mail администратора, обычно он отображается если возникает какая нибудь внутренняя ошибка сервера, поэтому для локального использования мы используем адрес почты любой, например admin@localhost:</p> <p>Нажимаем на файл установки и по традиции нас встретит окно приветствия установки. На самом деле процесс установки MySQL самый долгий =). Чтобы не делать ошибок внимательно смотрте на скриншоты и у вас все получиться.</p> <p>Поздравляю, вы установили веб сервер. Т.к. мы хотим использовать apache в связке с PHP, нам необходимо настроить файл конфигурации httpd.conf, но этим мы займемся позже, нам ещё необходимо установить php.</p> </div> <!-- футер --> <div class="footer"><img src="footer.jpg"></div> </div> </body> </html> </p><p> CSS </p><p>body { margin: 0 auto; padding: 0 1.6em; background: url('12.jpg'); overflow: auto; } /* все для меню */ .menu { position: absolute; margin: 40px 40px 40 50px; /* необязательно именно такие значения */ } ol {list-style-type: none; display: inline; } li { background: url('buttonblue.jpg'); width:100%; } a:hover { background: url('buttonblue.jpg'); } /*————-*/ .wrapper { width: 766px; margin: 0 auto; } .header-area img { margin: 0 .1em; padding: 0; display: block; } .bar { position: absolute; margin: 2.3em 2.3em; padding: 7.3em 0; } .content { background: white; margin: 0 .1em; width: 746px; padding: 6em .6em .6em .6em; } p { text-align: justify; font-family: verdana, tahoma, monospace; font-size: 9pt; } .footer img { margin: 0 0.1em; padding: 0; display: block; } </p><p>
-
это опечатка просто... при копи-пасте кода получилась...))
-
Спасибо Вам, Sigma77!!!))) Раскрыли мне глаза!!!)))) Всё получилось! на данном этапе я доволен))) Но верстка ещё не закончилась..))
-
Оба... Сначала исправил вот это: body { margin: 0 auto; padding: 0 1.6em; [u]background: #354 url('12.jpg');[/u] overflow: auto; } на это: body { margin: 0 auto; padding: 0 1.6em; [u]background: url('12.jpg');[/u] overflow: auto; } .. произведенные манипуляции не избавили от отступов в опере и мозиле, но вот в осле пропали.. а потом я еще добавил к этому : body { margin: 0 auto; padding: 0 1.6em; [u]background: url('12.jpg');[/u] overflow: auto [u]display: block;[/u] } к сожалению, безуспешно... ((
-
Спасибо большое!! Сделал, всё работает.. теперь по центру))) Но вот это, к сожалению, не помогло...
-
Здравствуйте! У меня собсно, такая проблема: верстаю сайт(так, для отработки навыков) и не получается убрать отступы (выделено красным на картинке) и еще вопрос? как сделать так, чтобы сайт отцентрировался в опере, осле и мозиле? сколько делал.. что-то в голову не прихолит решения... Помогите пожалуйста... По возможности объясните технологию..))) КОД: html </p><p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Test page</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <link href="styles.css" type="text/css" rel="stylesheet"> </head> <body> <div class="bar"><img src="bar.png"></div> <div class="header-area"><img src="header.jpg"></div> <div class="content"> <p>1) Hammer on. Вы его уже изучали, а сейчас закрепим. Прижмите 1ю струну указательным пальцем левой руки на 4м ладу. Дёрните её указательным пальцем правой руки. После этого средним пальцем левой руки сделайте быстро удар по струне по 5му ладу, сразу же отпустив средний палец. Получились 2 приёма: «хаммер он» и «пулл офф». На табулатуре этот элемент выглядит так: 4h5p4.</p> <p>2) Вибрато. Выполняется этот приём так. Вы прижимаете струну на каком-либо ладу, дёргаете её, а пальцем левой руки, который прижимает струну, не поднимая его с лада, водите им вдоль струны в пределах лада (но не перепендикулярно струне). Водить сильно не надо – буквально десятые доли миллиметра.</p> <p>Чтобы более углубленно подойти к разработке скриптов и понять принцип их работы, необходимо установить сервер, подобный тому, что используется на хостингах, но в более упрощенной форме. Установка локального сервера потребует от вас немного внимания и примерно 30 минут времени. Причем установка сервера заключается не в том, чтобы установить apache, но и ещё правильно прикрутить обработчик скриптов, а именно php интерпретатор. Я знаю что в интернете есть куча подобных руководств, но многие руководства либо устарели, либо тупо копированы у друг друга. Зачастую даже все что там изложено - не работает. Поэтому эту статью я подготовил сам, все шаги я сопровождал скриншотами, чтобы даже новичку было достаточно понятно.</p> <p>Далее нас просят ввести информацию сервера, в первые два поля вводим значение localhost. В третьем поле нас просят указать e-mail администратора, обычно он отображается если возникает какая нибудь внутренняя ошибка сервера, поэтому для локального использования мы используем адрес почты любой, например admin@localhost:</p> <p>Нажимаем на файл установки и по традиции нас встретит окно приветствия установки. На самом деле процесс установки MySQL самый долгий =). Чтобы не делать ошибок внимательно смотрте на скриншоты и у вас все получиться.</p> <p>Поздравляю, вы установили веб сервер. Т.к. мы хотим использовать apache в связке с PHP, нам необходимо настроить файл конфигурации httpd.conf, но этим мы займемся позже, нам ещё необходимо установить php.</p> </div> <div class="footer"><img src="footer.jpg"></div> </body> </html> </p><p> CSS: </p><p>body { margin: 0 auto; padding: 0 1.6em; background: #354 url('12.jpg'); overflow: auto; } .header-area { margin: 0 6.1em; padding: 0; } .bar { position: absolute; margin: 2.3em 8.3em; padding: 7.3em 0; } .content { background: white; margin: 0 6.1em; width: 746px; padding: 6em .6em .6em .6em; } p { text-align: justify; font-family: verdana, tahoma, monospace; font-size: 9pt; } .footer img { margin: 0 6.1em; padding: 0; } </p><p> Если кому-то нужно, то вот мой сайт полностью: мой сайт
-
Честно, я ничего не понял.... ВОТ МОЙ КОД ЕЩЁ РАЗ! CSS div.fon {position: absolute; top: 0%; width: 100%; height: 100%; } div.content {margin-top: 100px; margin-left: 17%; color: white;} body { overflow: auto; margin: 0%; background-image: url('12.jpg'); } HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Test page</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <link href="styles.css" type="text/css" rel="stylesheet"> </head> <body> <div class="fon"><img src="f.gif"></div> <div class="content"> asasasassasasas </div> </body> </html> Можно ли поподробнее... пожалуйста..