yujin11
-
Posts
81 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by yujin11
-
-
Добрый день. На принте видно, что основной блок - обвёртка <wrapp> как то странно себя ведет, налазиет на свои дочерние блоки при уменьшении окна, другими словами он не растягивается по высоте дочерних блоков, а вытягивается по высоте экрана. Такого же быть не должно. Как сделать так, что бы у него минимальная высота была не меньше чем суммарная высота его дочерних блоков? Заранее спасибо.
Пример кода HTML
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapp">
<div id="header">
<div id="logo">
</div>
<div id="title_wrapp">
</div>
</div>
<div id="print">
<ul>
<li>
<a href="#">Print</a>
</li>
<li>
<a href="#">Mail</a>
</li>
</ul>
</div>
<div id="content_wrapper">
<div id="left_content">
<div id="global_sidebar_menu">
<ul>
<li>
<a href="#">HOME</a>
</li>
<li>
<a href="#">HOME</a>
</li>
<li>
<a href="#">HOME</a>
</li>
<li>
<a href="#">HOME</a>
</li>
<li>
<a href="#">HOME</a>
</li>
<li>
<a href="#">HOME</a>
</li>
</ul>
</div>
<div id="local_sitebar">
</div>
</div>
<div id="main_content">
<p>
Some Text Some Text Some Text Some Text Some Text Some Text
</p>
<p>
Some Text Some Text Some Text Some Text Some Text Some Text
</p>
<p>
Some Text Some Text Some Text Some Text Some Text Some Text
</p>
<p>
Some Text Some Text Some Text Some Text Some Text Some Text
</p>
<p>
Some Text Some Text Some Text Some Text Some Text Some Text
</p>
<p>
Some Text Some Text Some Text Some Text Some Text Some Text
</p>
<p>
Some Text Some Text Some Text Some Text Some Text Some Text
</p>
<p>
Some Text Some Text Some Text Some Text Some Text Some Text
</p>
</div>
<div class="clear">
</div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>Пример CSS
*{line-height:100%;
}
html{
width:100%;
height:100%;
}
body{
width:100%;
height:100%;
min-width:1000px;
font-family:Arial, Helvetica CY, Nimbus Sans L, Sans-serif;
background:grey;
margin:0;
}
.clear{
width:1px;
height:1px;
clear:both;
}
#wrapp, #footer{
margin:0 auto;
}
a{
text-decoration:none;
color:grey;
}
#print ul, #global_sidebar_menu ul{
list-style-type:none;
margin:0px;
padding:0px;
}
#logo, #title_wrapp, #print ul li, #left_content, #main_content{
float:left;
}
#wrapp{
width:1000px;
height:100%;
background:white;
}
/*—-- header —--*/
#header{
width:100%;
height:400px;
background:yellow;
}
#logo{
width:100px;
height:100px;
background:red;
}
#title_wrapp{
width:900px;
height:400px;
background:cyan;
}
/*—-- EOF header —--*/
/*—-- print —--*/
#print{
width:100%;
height:30px;
background:blue;
}
#print ul{
float:right;
}
/*—-- print —--*/
/*—-- content wrapper —--*/
#content_wrapper{
width:100%;
background:red;
padding-bottom:30px;
}
/*—-- left sidebar —--*/
#left_content{
width:200px;
background:yellow;
}
#local_sitebar{
padding:5px 15px;
width:170px;
background:red;
}
/*—-- EOF left sidebar —--*/
/*—-- main content —--*/
#main_content{
width:600px;
background:cyan;
}
/*—-- EOF main content —--*/
/*—-- footer —--*/
#footer{
margin-top:-40px;
height:40px;
width:1000px;
background:#000;
}
-
Автору. Поставьте overflow:hidden; для wrapper, все заработает.
Спасибо огромное, всё заработало как должно.
-
Добрый день форумчане, нужна помощь.
Есть страница и с ней проблема.
Не получается прибить подвал к низу. Загвостка как я думаю в том, что родительский блок #wrapper не хочет вытягиваться по высоте дочернего блока в данном случае content. Помогите разобраться как это можно исправить.
-
вот так должно быть? http://jsfiddle.net/3xEZv/3/
Да, можно и так.
А что это за сервис, и как с ним работать?
-
Если без списков, наверно как то так
Спасибо помогло. Только в моём случае оно получилось не совсем так как нужно было. Пришлось воспользоваться margin, спасибо и Great Rash за наводку.
-
Доброго времени суток форумчане. Нужна помощь в решении одной задачки.
И так, текст в начале которого стоит маркер (1. 2. 3. 4.)и т.д нужно сделать так, что бы текст полностью обтекал эти маркеры. Т.е что бы вторая и последующие строки не залазели под маркер. Списки не подходят. Заранее спасибо.
-
Про костыли было написано в этой теме.
http://forum.htmlbook.ru/index.php?showtopic=27283&view=findpost&p=205043
Про id и class давний спор, в моей книге он рассмотрен, стр. 76.
Про HTML5 также посмотрите стр. 318, пример 9.4 и 9.5.
Спасибо вам огромное за помощь и подсказки. Очень вам благодарен
-
HTML5 поддерживается всеми браузерами с некоторыми простыми костылями. В реальности это занимает две строки лишних, не такая уж большая плата.
Про селекторы здесь написано.
http://htmlbook.ru/samcss/selektory-atributov
Рекомендую также с другими видами селекторов ознакомиться в самоучителе, чтобы CSS проще писать.
Спасибо за подсказку, и подскажите ещё про костыли под HTML5, я так понимаю их довольно много, какие из них нужно использовать?
И хотел уточнить про классы и ID. Что правильней использовать? Скажем так, пытаться использовать больше классов или не злоупотреблять и лучше использовать ID?
-
И так, попробую подвести итог.
Говорите много дивов, подскажите или покажите где и как правильно решить эту задачу.
За HTML 5 знаю только то, что он не поддерживается всеми браузерами в том числе IE (7-8).
этого я не знал, подскажите где можно поконкретней почитать про этакие возможности.А ведь в стилях легко можно указать input[type=submit]{} и не добавлять id
Про формы буду проходить углублённый курс познания, что бы в дальнейшем не возникало никаких проблем.Сама форма невалидна, нет action и элементы формы не обёрнуты в блочные элементы.Про теги <h> <span> и <p> тоже обязательно почитаю.
И на сколько я понял, то не следует брезговать и классами, но и злоупотреблять ими не следует.
PS. Vlad, спасибо за книгу.
-
С таблицей согласен, не досмотрел когда правил.
Я хотел минимизировать классы и дивы. Как можно меньше классов и ID в коде.
Поэтому
<span>A-</span>
<p>A+</p>
<span>skip to content</span>Потому что размер шрифта А+ на 1px больше чем остальные. Решил проблему таким образом. Можно было бы использовать класс и ID, но хотел минимизировать. На сколько это правильно не знаю.
Information Sheets
Опять же не хотел использовать классы.
Подправил табуляцию и подправил таблицу для ослика.
И если стоит задача как можно меньше ID и классов, то стоит ли так делать вёрстку?
-
Доброго времени суток. Выкладываю для вашей оценки страничку которую сам сверстал. Жду ваших оценок, наставлений ну и замечаний.
-
Могу тебе свою книжку по вёрстке выслать. Нахаляву, лишь бы польза была.
Буду очень признателен
Обязательно прочитаю, т.к азам учился у вас на сайте, вы мне очень помогли. Мыло скину в личку. -
Мда-а-а-а!Я просто в шоке, я ведь делал тоже самое, только у меня чего то не получилось, напутал что-то с background-position или тупонул с флоатами.. Спасибо за наставление. Я ведь по этому и отпирался, что пробовал и не получилось.. Ещё раз спасибо.
Так, во-первых мы договаривались, что если я приведу тебе решение, то ты возьмёшь книжку в зубы и начнёшь учиться. Отлично, тогда вперёд. Далее рекомендую тебе отдельно внимательно изучить, как работают процентные значение в background-position, когда разберёшься, то сразу поймёшь, почему у тебя не получалось и как нужно делать правильно.
В общем давай, удачи тебе, ждём от тебя интересных решений и больших знаний
Обязательно. Посоветуете что нибудь?
-
Мда-а-а-а!Я просто в шоке, я ведь делал тоже самое, только у меня чего то не получилось, напутал что-то с background-position или тупонул с флоатами.. Спасибо за наставление. Я ведь по этому и отпирался, что пробовал и не получилось.. Ещё раз спасибо.
-
1
-
-
На все 100.
А если я тебе сейчас решение покажу, ты тогда наконец-то книжку в руки возьмёшь?
Угу. Правда с условием, если подскажите страницу )
-
На все 100.
-
Доброго времени суток форумчане. Есть задачка, помогите решить. Есть картинка, нужно её частично спрятать в левом углу, да так, что бы при растягивании окна она от туда полностью появлялась. Заранее спасибо.
Пробуй задавать позицию фона с минусом.
Не помогло, задал
position:relative;
left:-Xpx;Где Х к-во пикселей которые прячутся.
Но картинку нужно поместить в блок ширина которого задана в %.
Я тебе про релатив говорил что нибудь? Ты позицию фона релативом задаёшь чтоли?
Фоном это не решить, ну будет обрезан да и всё. А решается это когда блоку с этим фоном задаёш
position:relative;
left:-Xpx;Где Х к-во пикселей которые прячутся.
Но картинку нужно поместить в блок ширина которого задана в %.
Позиционирование фона в этом случае до лампочки )
-
Доброго времени суток форумчане. Есть задачка, помогите решить. Есть картинка, нужно её частично спрятать в левом углу, да так, что бы при растягивании окна она от туда полностью появлялась. Заранее спасибо.
Пробуй задавать позицию фона с минусом.
Не помогло, задал
position:relative;
left:-Xpx;Где Х к-во пикселей которые прячутся.
Но картинку нужно поместить в блок ширина которого задана в %.
-
Доброго времени суток форумчане. Есть задачка, помогите решить. Есть картинка, нужно её частично спрятать в левом углу, да так, что бы при растягивании окна она от туда полностью появлялась. Заранее спасибо.
-
Вот скрины из ФФ и ИЕ7, одинаково всё. http://screencast.com/t/f2RCQMFJuazv
щас исправим, смотрите теперь.
Кажись разобрался, задал <li>
margin:-10px 0;
и всё заработало, правда на сколько правильно или извращенски это я не знаю.
-
1. Скриншот того, как должно быть
2. Скриншот того, как НЕ должно быть.
3. Ссылка на страницу с отдельным мини тест-примером. И рассказ, где и в чём косяки.
Косяк состоит в том, что не могу изменить расстояние по вертикали между лишками. Они должны быть плотней прижаты друг к другу. Зазаор между ними должен быть меньше. А он вообще не регулируется. Задавал высоту лишкам, везде хорошо, высота меняется, а вот в ослике №7 остаётся прежней.
Страница с тест примером
Как должно быть:
Как есть в 7-м ослике.
-
Вот код который можно поюзать для примера.
Суть в том, что бы прижать по высоте лишки друг к дгуру. Бьюсь над этим уже целый день, не получается.
Задаю высоту, везде кроме 7-го ослика всё хорошо, а ослик никак не реагирует. Как был вертикальный отступ между <li> таким и остался.
Я думаю с этим многие сталкивались, подскажите как это решить.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Internet portal</title>
<style type="text/css">
body{
margin:0;
padding:0;
background-color:#FFF;}
#wrap{
margin:0 auto;
border:1px solid red;
width:780px;
height:792px;
position:relative;}
#menu{
width:300px;
height:100px;
background-color:blue;}
#menu ul{
list-style-type:none;
float:left;
margin:0;
padding:0 10px;}
#menu li a{
color:#FFF;
font:12px Tahoma;
height:1px;}
#menu li{
height:1px;}
</style>
</head>
<body>
<div id="wrap">
<div id="menu">
<ul>
<li>
<a hre="#">text</a>
</li>
<li>
<a hre="#">text</a>
</li>
<li>
<a hre="#">text</a>
</li>
<li>
<a hre="#">text</a>
</li>
</ul>
<ul>
<li>
<a hre="#">text</a>
</li>
<li>
<a hre="#">text</a>
</li>
<li>
<a hre="#">text</a>
</li>
<li>
<a hre="#">text</a>
</li>
</ul>
<ul>
<li>
<a hre="#">text</a>
</li>
<li>
<a hre="#">text</a>
</li>
<li>
<a hre="#">text</a>
</li>
<li>
<a hre="#">text</a>
</li>
</ul>
</div>
</div>
</body>
</html> -
Задавайте отдельные стили для ИЕ, он неправильно высчитывает разные величины.
Подскажите пожалуйста как это можно сделать, я с этим ещё не сталкивался.
Дело в списках, не могу изменить высоту лишки и как это решить, пока не знаю..
Подскажите кто знает, кто сталкивался.
Посмотрите ещё в центре блок с ссылками гуляет.
Спасибо, это конечно поможет, но вот как быть с центральным блоком, там вообще белеберда полная.. в ослике не получается прижать лишки друг к другу. задаю и м высоту в 1 пиксель, так везде они сжимаются, а в осле даже и не думают...
-
Задавайте отдельные стили для ИЕ, он неправильно высчитывает разные величины.
Подскажите пожалуйста как это можно сделать, я с этим ещё не сталкивался.
Дело в списках, не могу изменить высоту лишки и как это решить, пока не знаю..
Подскажите кто знает, кто сталкивался.
Посмотрите ещё в центре блок с ссылками гуляет.
Условные комментарии обычно спасают мир
Так в чем дело, в комментариях? Вы меня запутали.
Подскажите как побороться с этими отступами??
закругленные углы
in HTML Coding
Posted
CSS 2.1 такое не сделает, только CSS3 + PIE for IE