aqua.77
-
Posts
170 -
Joined
-
Last visited
-
Days Won
2
Content Type
Profiles
Forums
Calendar
Store
Everything posted by aqua.77
-
<p class="q1">123333hjk</p> <p class="q2">333hjk<br>333hjk<br>333hjk<br>333hjk<br></p> *{ margin:0; padding:0; } .q1{ border:1px black solid; display:inline-block; height:70px; line-height:50px; } .q2{ border:1px black solid; display:inline-block; height:70px; line-height:10px; } Высота строки у q1 больше чем у q2 Но почему тогда самый высокий инлайн-бокс у q2, и базовая линия подтягиватся к нему?
-
Ок спасибо! можете подсказать хорошую статью про работу базовой линии.
-
Вот поэтому я и использую overflow: hidden чтобы скрыть часть контента. Но помимо скрытия overflow: hidden выводит на показ базовую линию блока. Как избавиться от этой линии? <ul> <li><a href="#">123<div class="qc"></div></a></li> </ul> ul{ border:1px black solid; } ul li{ display:inline; } ul a{ display:inline-block; width:100px; position:relative; overflow:hidden; border:1px black solid; } .qc{ position:absolute; top:0; left:0; width:300px; height:100%; background:red; }
-
Всё всё дошло) только отзовитесь чтоб утвердиться. Свойство overflow:hidden; включает в себя базовую линию. Оно провоцирует контейнер расширяться и вмещать обтекаемые элементы и базовую линию.
-
Всё получилось! Но почему данная проблема вытекает только после применения overflow:hidden; ?
-
Не понимаю почему в данном случае li занимает всю высоту а ссылка нет. Хотя оба элемента блочно-строчные и занимают 100% высоты ul{ border:1px black solid; } ul li{ display:inline-block; vertical-align:top; } ul a{ display:inline-block; width:100px; height:100%; position:relative; overflow:hidden; } .qc{ position:absolute; top:0; left:0; width:300px; height:100%; background:red; opacity:.5; }
-
Нужно убрать интервал у li ? ul{ border:1px black solid; height:20px; } ul li{ display:inline; background-color: green; line-height:0px; } ul a{ display:inline-block; width:200px; height:100%; position:relative; overflow:hidden; } .qc{ position:absolute; top:0; left:0; width:100px; height:100%; background:red; } Ах да и ещё сделать li строчно-блочным чтобы высоту задавать
-
Получается что .qc занял всю высоту ul? Так как не нашел высоту ul a
-
Откуда возникает нижний отступ в элементе ul? Я выделил его границей чтобы было понятно. Появляется именно после добавления свойства overflow:hidden; <ul> <li><a href="#">123<div class="qc"></div></a></li> </ul> ul{ border:1px black solid; } ul li{ display:inline; } ul a{ display:inline-block; width:100px; position:relative; overflow:hidden; } .qc{ position:absolute; top:0; left:0; width:300px; height:100%; background:red; }
-
<ul> <li><a href="#">123<div class="qc"></div></a></li> </ul> ul{ border:1px black solid; } ul li{ display:inline; } ul a{ display:inline-block; width:100px; position:relative; overflow:hidden; } .qc{ position:absolute; top:0; left:0; width:300px; height:100%; background:red; } Откуда возникает нижний отступ в элементе ul? Я выделил его границей чтобы было понятно. Появляется именно после добавления свойства overflow:hidden;
-
Пытаюсь понять принцип работы свойства vertical-align...
-
Как в строчно-блочном блоке выровнить строчный элемент по низу? Я сделал так div{ height:500px; border:1px black solid; display:inline-block; vertical-align:bottom; } p{ border:1px black solid; display:inline-block; vertical-align:bottom; } <body> <div> <p>hkjhkj hjgjh ghjkg</p> </div> </body> vertical-align: Ведь выравнивает только строчные или строчно-блочные элементы, почему тут не сработало?
-
Селектор тегов = 1 еденица. Класс = 10 едениц. значит при условии <body > <div class="content"> <div2> <div3> <div4> <div5> <div6> <div7> <div8> <div9> <div10> <p><em>pppp</em></p> </div10> </div9> </div8> </div7> </div6> </div5> </div4> </div3> </div2> </div> </body> .content em{color: blue;} div div2 div3 div4 div5 div6 div7 div8 div9 div10 p em{ color: red;} Должен быть применён красный цвет т.к. у него 12 тегов =12едениц. А у первого 10ед. за класс + 1 за тег =11едениц.
-
Как сделать чтобы меню и таблица сжимались отдельно. То есть Сжималась таблица, а когда граница браузера дойдёт до меню, сжималось меню. header.top nav{ position: absolute; top: 361px; height: 50px; background-color: #FBFBFB; display: table; border-spacing: 7px 5px; margin: 0px 0px 0px 476px; padding: 0px 265px 0px 50px; } header.top nav ul{ font-size: 10pt; display: table-row; } header.top nav ul li{ display: table-cell; width: 10%; text-align: center; } header.top nav li a{ font-family: arial; color: #2D2D3D; text-decoration: none; padding: 12.5px 0px 12.5px 0px; display: block; Сейчас они сжимаются одновременно...
-
Cпасибо!! то что надо. Вот где можно все эти элементы узнать? в справочниках? может книга какая?
-
Элемент списка 10% ширину имеет. li{ display: table-cell; width: 10%; //Вот } Нужно чтобы ссылка в этом элементе имела отступ как ширина элемента, чтобы заполнять ширину элемента a{ text-decoration: none; padding: 0px 10% 0px 10%; //Пробовал сделать такой же отступ, но ширине не соотведствует. }
-
Имеется таблица со списком ссылок. Список имеет ширину 10%. Как сделать чтобы отступы ссылок совпадали с шириной списка? <nav> <ul> <li><a href="uslugi.html">Услуги</a></li> <li><a href="klienti.html">Клиенты</a></li> <li><a href="projekt.html">Проекты</a></li> <li><a href="kontact.html">Контакт</a></li> </ul> </nav> nav{ display: table; border-spacing: 10px; } ul{ display: table-row; } li{ display: table-cell; background: red; width: 10%; //Нужно чтобы отступы были точно такими text-align: center; } a{ text-decoration: none; padding: 0px 10% 0px 10%; //Пробовал сделать такой же отступ, но ширине не соотведствует. }
-
Она и стоит фоном, там поверх фона ещё картинка и она уже абсалют
-
Просто нужно чтобы меню поверх картинки наложилось
-
Нужно чтобы меню сохраняло целостность когда окно браузера сжимают т.е. чтобы ссылки из меню максимально сжимались прежде чем переносились на другую строку. http://plitka20x20-ru.1gb.ru/site/ Вот как обстоят дела, при сжатии как видно всё разрушается <nav> <ul> <li><a href="uslugi.html">Услуги</a></li> <li><a href="klienti.html">Клиенты</a></li> <li><a href="projekt.html">Проекты</a></li> <li><a href="kontact.html">Контакт</a></li> </ul> </nav> header.top nav{ position: absolute; top: 361px; left: 476px; height: 50px; width: auto; background-color: #FBFBFB; } header.top nav ul{ margin: 0px; padding: 17.5px 280px 17.5px 0px; font-size: 10pt; } header.top nav ul li{ display: inline; } header.top #navi a{ position: absolute; top: 3px; left: 50px; } header.top nav li a, #navi a{ font-family: arial; color: #2D2D3D; text-decoration: none; padding: 12.5px 50px 12.5px 50px; }
