Search the Community

Ребят, помогите плиз! У меня при изменении масштаба(или просто за компом с другим расширением экрана), всё куда то сползает, то куда то вверх, то вниз, ну В общем куда угодно тока не фиксируется там где нужно! Что мне делать?

ищу наставника, чтобы выучить html и css. Так то я могу сам учить, но все таки если кто нибудь будет пинать под зад, думаю выучу быстрее и лучше Так что, если кто заинтересован, пишите: suret.get@gmail.com , буду вам очень благодарен либо пишите прямо здесь в комментариях свои e-mail, я вам сам напишу

привет всем ! есть дерево вложенных списков вложенных списков есть определённый предел после которого надо вложенный список поровнять с главным самым верхним <родительский список> <дочерний список 1> <дочерний список 2> <дочерний список 3> а надо чтоб было <родительский список> <дочерний список 1> <дочерний список 2> <дочерний список 3> предел после которого происходит это действие может изменяться теперь сам вопрос возможно реализовать это только CSS Если есть идеи поделитесь пожалуйста.

Всех приветствую. Сразу скажу, я программист, но в веб-программировании новичок. Я хочу сделать просмотровщик картинок (скриншотов) на CSS без Javascript и jQuery. Перелопатил интернет на эту тему и большую часть подчерпнул из этого блога, а конкретно, из этой темы. Вот, что у меня получилось: Не устраивает режим просмотра. Что требуется: 1). Идеальный вариант. 1.1). Картинка меняет размеры (сохраняя пропорции), чтобы полностью входить на страницу по ширине и высоте. Картинка не растягивается более оригинального размера. 1.2). По клику на картинке, она принимает исходный размер, а на экране появляются горизонтальная и вертикальная полосы прокрутки. 1.3). В п 1.1 и 1.2 картинка не может прижаться к краю экрана, то есть отступы должны быть не менее установленного. 2). Приемлемый вариант. 2.1). Картинка меняет размеры (сохраняя пропорции), чтобы полностью входить на страницу по ширине. Если картинка не входит по высоте, появляется вертикальная полоса прокрутки. Желательно, чтобы картинка не растягивалась более оригинального размера. 2.2). По клику на картинке, она принимает исходный размер, а на экране появляются горизонтальная и вертикальная полосы прокрутки. 2.3). В п 2.1 и 2.2 картинка не может прижаться к краю экрана, то есть отступы должны быть не менее установленного. 3). Фиговенький вариант. 3.1). Картинка имеет исходный размер и полосы прокрутки. Картинка не прижимается к краю экрана, и имеет отступы. P.S. Пробовал сделать то же самое на таблицах, но тоже не получилось... Пинать можно, даже нужно )

<script type="text/javascript"> $(".arrow").click(function(){ var visota, needvisota; needvisota = '198px'; visota = $('#mini_profile').css('height'); if (visota == needVisota) { $('#mini_profile').css('height','70px'); $('#arrow').css('background','url("images/arrow.png") 0px 9px;'); } else { $('#mini_profile').css('height','198px'); $('#arrow').css('background','url("images/arrow.png") 0px 18px;'); } )}; </script> вот код JS, но нивкакую не хочет работать! на onclick в объекте рабоатет, но если писать по-драугому. в хедере прописал - <script src="http://code.jquery.com/jquery-latest.js"></script> если знаете, помогите!!! а вот кусок html с этими объектами: <div id="mini_profile"> <div class="profile_main_bg"> <table style="margin:15px 8px 8px 15px;" border="0" cellspacing="0" cellpadding="0"> <tr> <td rowspan="2"><div class="ava"><img src="images/ava.png"></div></td> <td valign="bottom"><div class="nick">Sn0wBreeze</div></td> <td width="100%" rowspan="2"><div class="arrow"></div></td> </tr> <tr> <td valign="top"><div class="group">Администратор</div></td> </tr> </table> </div> <div class="profile_nav"> <ul> <li><a>Моя страница</a></li> <li><a>Изменить данные</a></li> <li><a>Добавить пост</a></li> <li><a>Выход</a></li> </ul> </div> </div>

Здравствуйте, такая проблема: В контенте сайта у меня находится два изображения, которые нужно выравнять по левому и по правому краям. Я делаю это с помощью float:left и float:right. Все в принципе работает, но возникает проблема с подвалом, который начинает вести себя неадекватно. При выравнивании изображений по левому и по правому краям с помощью float рамка от подвала становиться над изображениями, а текст прилипает к ним снизу. Если же сделать clear: both (или left) — получается как надо, кроме того, что невозможно регулировать отступ от контента. Как можно решить проблему?

Здравствуйте! Возникла такая проблема. У меня в шапке сайта несколько блоков: лого, затем автарка, затем Имя+Баллы, кнопка "Моя страница", кнопка "Мой профиль" и ссылка "Контакты". При минимальном разрешении (меняю ширину браузера) кнопки "Моя страница" и "Мой профиль" съезжают вниз. То есть получается 2 строки. Вот как сделать, чтобы запретить перенос на новую строку? Код ниже: <div class="row"> <div style="padding-top:3em; padding-bottom: 4em;"> <div class="threecol"> <a href="/"><div class="logo"></div></a> </div> <div class="sevencol"> <div style="margin-left: 18px; float: left;"> <div style="width:36px; height:36px; float: left; margin-top: 3px;"><a href="/?act=lc"><img src="<?print user_pic($u_id);?>" style="width:36px; height:36px;"></a> </div> <div style="margin-left: 18px; float: left;"> <a href="/?act=lc"><?print $u_login;?></a><p> Баллы: <a href="/?act=ball" style="text-decoration: none;"><?print $u_ball;?> б.</a> </p> </div> </div> <div style="margin-left: 18px; float: left;"> <div style="margin-left: 18px; float:left"><button type="button" class="orng_button" style="width:auto" onclick="document.location.href='/?act=lc';">Моя страница</button> </div> <div style="display:inline; margin-left: 18px; float:left"><button type="button" class="main_detail_button" style="width:auto" onclick="document.location.href='/?act=profile';">Мой профиль</button></div> </div> </div> <div class="twocol last"> <a href="/contact">Контакты</a><br><a href="/help">FAQ</a> </div> </div> </div> CSS-код: .container { padding-left: 3em; padding-right: 3em; } .row { max-width: 1600px; width: 100%; overflow: hidden; margin: 0 auto; } .onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol { margin-right: 3.8%; float: left; } .onecol { width: 4.85%; } .twocol { width: 13.5%; } .threecol { width: 22.15%; } .fourcol { width: 30.8%; } .fivecol { width: 39.45%; } .sixcol { width: 48.1%; } .sevencol { width: 56.75%; } .eightcol { width: 65.4%; } .ninecol { width: 74.05%; } .tencol { width: 82.7%; } .elevencol { width: 91.35%; } .twelvecol { width: 100%; float: left; } .last { margin-right: 0px; }

Подскажите, пожалуйста, как исправить вот этот глюк? (см. рисунок) http://clip2net.com/s/2Umh5 В Мозилле и Опере все отображается нормально, в Хроме показывает вот эту ненужную рамку, а в IE (как всегда) вообще кошмар. На IE мне вообще пофиг, но вот как сделать так, чтобы в Google Crome рисунок-ссылка тоже отображался нормально, без вот этой дурацкой серой обрамляющей рамки? Перерыл уже весь Интернет - везде один и тот же совет - в свойствах рисунка поставить border=0px Поставил этот border = 0 везде, где только можно и в свойствах DIV и в свойствах ссылок, и в свойствах рисунка - не помогает. Видимо это делается как-то иначе. Как? Ведь, теоретически это сделать как-то возможно! Вот на этой гугловской странице полно таких вот рисунков ссылок, без таких вот серых обрамляющик рамок вокруг картинок-ссылок. Вот так тоже уже пробовал - не помогло...

Привет всем. Заметил, что в firefox выравнивание текста по baseline происходит отлично от других браузеров. Baseline не совпадает на 1px. Вот что я имею ввиду: Кто как с этим борется? Исходник на jsfiddle: http://jsfiddle.net/KtbDU/

Проблема вот в чем - не могу понять каким образом в style.css изменить(в данном случае увеличить) ширину текста. На первой картинке - скриншот сайта, на второй - применена одна из бесплатных тем(сайт на wordpress). Хорошо видно, что на втором скриншоте текст заметно шире, хотя шрифт тот же. Подробное изучение этого вопроса результатов не дали, прошу помочь. Скриншот номер два:

Здравствуйте. Возникла такая проблема... <ul> <li>Слово1</li> <li>Слово2</li> <li>Слово3</li> <li>Слово4</li> </ul> Как сделать чтобы в ul li шло чередование фонов. Допустим, нечётные (<li>Слово1</li>, <li>Слово3</li>, ...) - backgroun-color:#f4f4f4; чётные (<li>Слово2</li>, <li>Слово4</li>, ...) - backgroun-color:#cccccc; Помогите, пожалуйста, кто знает...

Добрый всем денек! Пересмотрел кучу вариантов по созданию слайдеров для контента, все они сильно запутанные, особенно для новичков, и вот решил собрать его самостоятельно и разобраться в этой штуке. Пока получается такой вариант, все переключается но контент стоит на месте: <body> <div id="slider"> <div id="content"> <div id="slide01"> <div id="slide02"> <div id="slide03"> <div id="slide-inner"> <div class="page" id="page1"><img src="img/exclusive_yachts_00.png"></div> <div class="page" id="page2"><img src="img/exclusive_yachts_01.png"></div> <div class="page" id="page3"><img src="img/exclusive_yachts_02.png"></div> </div> </div> </div> </div> </div> <ul id="nav"> <li class="button" id="button1"><a href="#content-inner-1">1</a></li> <li class="button" id="button2"><a href="#content-inner-2">2</a></li> <li class="button" id="button3"><a href="#content-inner-3">3</a></li> </ul> </div> </body> ol, ul { list-style: none; } #slider { width: 900px; } #content { background-color: #3CC; width: 900px; overflow: hidden; height: 400px; } #slide-inner { width: 2700px; height: 400px; } #slide-inner img { width: 900px; height: auto; } #slide01:target #slider-inner{ -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; margin-left: 0px; } #slide02:target #slider-inner{ -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; margin-left: -900px; } #slide03:target #slider-inner{ -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; margin-left: -1800px; } .page { } #nav { } #nav li{ float: left; margin-right: 10px; background-color: #66F; } #nav li a{ display: block; padding: 5px; color: #FFF; text-decoration: none; font-family: AG_Helvetica, sans-serif, "trebuchet MS"; } #nav li a:hover{ } но почему то оно не пашет... может кто то сможет помочь?

Всем привет! На ровном месте возникла проблема. Хочу использовать http://www.google.com/webfonts Там всё просто и доходчиво описано как из подключать. С английскими шрифтами проблем нет вообще. Но кириллические (беру естественно из раздела кирилик) не подключаются ни в какую, ни так как ниже по простому, ни @import, ни яваскрипт. Пример ниже <h1> Bad Script отображается как дефолтый таймс, а <h2> как и задумывалось Exo. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href='http://fonts.googleapis.com/css?family=Bad+Script|PT+Serif' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Exo:400,700|Open+Sans' rel='stylesheet'> <style> h1{ font-family: 'Bad Script', cursive; } h2{ font-family: exo;} </style> </head> <body> <h1>В чащах юга жил бы цитрус? Да, но фальшивый экземпляр!</h1> <h2>Grumpy wizards make toxic brew for the evil Queen and Jack.</h2> </body> </html> Есть идеи в чем может быть дело?

С помощью чего человек расположил список "One, two, three, four" в строку? http://jsfiddle.net/kKUZq/

Люди. Помогите Должно быть так: Вот что получается. Почему номера не отображаются в строчку? http://jsfiddle.net/fmpPe/

Добрый вечер. Имеется картинка (треугольник), как мне повторять ей по всей длине экрана, чтобы получился зиг-заг. Собираюсь наложить на картинку, чтобы между шапкой и телом сайта был какой-нибудь переход. Заранее спасибо! P.S.: Само места стыка шапки и тела сайта.

Здравствуйте! Сразу прошу прощения если данная тема уже обсуждалось на форуме. Поиском пользовался не нашел ответа. И честно говоря даже не представляю как задать вопрос правильно. Проблема в следующем, есть следующие css конструкции: .my_class [color=#ff0000]>[/color] a { различные свойства}[/indent] [indent=1]#my_id:cheked [color=#ff0000]~[/color] .my_class_2{ свойства}[/indent] [indent=1]#my_id: [color=#ff0000]+[/color] a { свойства} скажите что делают ">" "~" "+" данные символы в этих конструкциях или направте где про них можно почитать.

Как с помощью CSS запретить перенос строки. Допустим, у нас имеется блок, в нём запись, которая своей шириной больше ширины блока, она начинает переходить на вторую строку. Нужно это действие как то отвенить, так как получается не очень красиво.

Сделал фон градиентом, но вот незадача - градиент ползает при масштабировании страницы и горизонтальной прокрутке. Решения вижу два, но не знаю как реализовать ни одно из них. Необходимо решение как спрятать скролл вызываемый нажатием на колесико мыши (у меня так) или как фиксировать градиент после масштабирования страницы, чтобы тот не ерзал.

Доброго времени суток! Раньше делал статичные сайты и не заморачивался, а вот тут вдруг решил освоить верстку на wp, и вдруг возникла проблема. Как можно сделать выделение пункта меню. Например как на apple.com. Когда переходишь например; на страницу "contact" и пункт меню conact как либо выделяется. В статичном сайте я бы просто на каждую страницу присвоил другой класс из пункта этой страницы, а тут как?

Ребят, делаю задание http://htmlbook.ru/practical/numeratsiya-stranits Получается херня. http://s1.ipicture.ru/uploads/20130204/ptH4cFzT.png <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Секс</title> <style> *{ margin:0; } DIV{ background: #EDEDED; width: 100%; height: 35px; border-bottom: 4px solid #CCCCCC; position: fixed; top: 80%; } Li { font-size: 130%; color: #910303; position: absolute; top: 30px; } </style> </head> <body> <div> <ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ol> </div> </body> </html> В чем проблема?

Смотрел старые вопросы , ничего не нашел , спрошу здесь . Существуют нормы стилей которым необходимо следовать стилизуя сайт ? Порядок свойств и их значений , есть раздница ... div{ width: 500px; height: 200px; color: # colornumb; } и div{ color:#colornumb; height: 200px; width:500px; } Это только я так заморачиваюсь а браузеру всеравно , или он делает одолжение принимая неверно расставленные свойства ?

День добрый) У кого есть желание, посмотрите на сайт http://kombinatorika.p.ht/ Собственно, тема: Известный японский писатель Харуки Мураками. Критика приветствуется любого рода, особое внимание уделить верстке и дизайну) Сайт еще до конца контентом не наполнен, решил пока есть время выложу сюда, посмотрю что скажут люди, а там и с инфой закончу Вдруг какие проблемы будут критические? Лучше раньше исправлю Замечания и вопросы 1. По клику на любой картинке из средней колонки, будет в дальнейшем появляться инфа, пока, повторяюсь, не дописал 2. Интересует ваше мнение по поводу а) Кнопка переключения среднего меню, никак не могу найти или нарисовать подходящую, мб подскажите что нибудь? б) Подчеркивание li оставить как есть? или у списка изменить на точечную, а у подсписков на сплошную? в) Цвет шрифта и сам шрифт - оставлять как есть, или искать дальше и пробовать? Довольно много времени на это убил... г) Скорости разных анимацией - делать быстрее, медленнее? Вот собственно и все) Спасибо за внимание PS Не обращайте внимание на название линка

Помогите разобраться с менюшкой сайта (я только учусь). Меню качал с сайта какого то не помню от куда. Вот решил что нибудь под себя сделать так сказать набраться опыта. Но есть проблема меню фиксированное и если "position" поменять с "fixed" на любой другой то пропадает оформление меню, и улетает куда то.

Доброго времени суток! Никак не могу скрыть блок выпадающего меню... Помогите плиз!!! Вот код CSS, тут просто какая-то мелочь, но я этого не могу увидеть: /*—————-menu tab———————-*/ .menu { font-size:14px; padding:0; float:left; width:890px; } /* remove all the bullets, borders and padding from the default list styling */ .menu ul { padding:0; margin:0; list-style-type:none; height:35px; } /* style the sub-level lists */ .menu ul ul { width:auto; } /* float the top list items to make it horizontal and a relative positon so that you can control the dropdown menu positon */ .menu ul li { float:left; height:35px; line-height:35px; list-style-type:none; } /* style the sub level list items */ .menu ul ul li { display:block; width:auto; height:auto; position:relative; line-height:1em; } /* style the links for the top level */ .menu a, .menu a:visited { display:block; float:left; height:15px; font-size:14px; text-decoration:none; color:#5a5a5a; padding:0 3px 0 3px; margin:0 30px 0 0; } .menu a.current { background-color:#FFFFFF; } /* style the sub level links */ .menu ul ul a, .menu ul ul a:visited { display:block; font-size:13px; text-align:left; color:#545554; width:200px; height:15px; line-height:1em; padding:5px 0 5px 5px; border-bottom:1px #ebebeb solid; background-color:#fff; } .menu ul table ul a, .menu ul table ul a:visited { width:14em; w\idth:12em; } /* style the table so that it takes no part in the layout - required for IE to work */ .menu table { position:absolute; left:0; top:0; font-size:1em; z-index:-1; } .menu ul ul table { lef\t:-1px; } .menu ul ul table ul.left { margin-lef\t:2px; } .menu li:hover { position:relative; } * html .menu a:hover { position:relative; } /* style the sub level 1 background */ .menu ul :hover a.sub1 { background:#fff; } /* style the sub level 2 background */ .menu ul ul :hover a.sub2 { background:#fff; } /* style the level hovers */ /* first */ .menu a:hover { color:#de462a; } .menu :hover > a { color:#de462a; } /* second */ .menu ul ul a:hover { background-color:#de462a; color:#FFFFFF; } .menu ul ul :hover > a { background-color:#de462a; } /* hide the sub levels and give them a positon absolute so that they take up no room */ .menu ul ul { visibility:hidden; position:absolute; height:0; top:35px; left:0; width:14em; border:none; z-index:9999; background-color:#FFFFFF; } /* position the third level flyout menu */ .menu ul ul ul { left:15em; top:0; width:14em; } /* position the third level flyout menu for a left flyout */ .menu ul ul ul.left { left:-14em; } /* make the second level visible when hover on first level list OR link */ .menu ul li:hover ul, .menu ul a:hover ul { visibility:visible; height:auto; padding-bottom:3em; background:transparent; }