Валидное расположение блоков

#css #bootstrap #div

Подскажите как грамотно расположить блоки как на данном рисунке(блок 3 немного заезжает
на блок 1,), что б они сохранили при этом адаптивность свою(при изменении ширины экрана
не проваливались ни куда). Можно и на бутстрапе, просто интересен грамотный подход,
да бы минимизировать использование лишних тегов и стилей.Заранее спасибо
    

Ответы

Ответ 1

css - calc()

browser support calc



.block-1 {
  height: 200px;
  background: #ccc;
}

.block-2,
.block-3 {
  height: 100px;
  background: #ddd;
}

.block-3 {
  height: 100px;
  background: #999;
  margin-left: -50px;
  width: calc(100% + 50px)!important;
}


@media screen and (max-width: 767px) {
  .block-3 {
    margin-left: 0;
    width: 100%!important;
  }
}


  

    
1
    

      

        
2
        
3
      
    
  



Ответ 2

Поскольку вопрос про минимизацию кода, предлагаю ещё один вариант.

Строил то же, что и soledar10. Отличия в деталях:


Второй и третий блоки не надо заворачивать в отдельную строку.
Вместо calc можно использовать проценты от ширины экрана.
Поскольку бутстрап рабоает в логике "mobile first", органичнее использовать @media
(min-width: 768px). Это позволяет задать width и margin-left для третьего блока только
один раз, когда они отличаются от значений по умолчанию.
col-sm- действует для всех экранов шириной от 768 пикселей. Если при большей ширине
экрана поведение не меняется, то другие классы добавлять не нужно.




.block-red {
  background-color: red;
  height: 400px;
}
.block-green {
  background-color: green;
  height: 200px;
}
.block-yellow {
  background-color: yellow;
  height: 200px;
}
@media (min-width: 768px) {
  .block-yellow {
    margin-left: -10%;
    width: 85% !important;
  }
}



  

    

    

    

  

<div></div> и <div/> в чем разница?

#html #div

Есть два примера. Почему в первом примере показует 3 блока, в то время как во втором
примере показует один?


 1. 







	



	

	

	









 2. 







	



	

	

	







    

Ответы

Ответ 1

div относится к тэгам-контейнерам и требует парного закрывающего тэга. В вашем примере
во втором случае, закрывающие тэги отсутствуют, поэтому блоки просто вложены один в другой.

приведу пару цитат 


  Теги бывают двух типов — одиночные и парные (контейнеры). Одиночный
  тег используется самостоятельно, а парный может включать внутри себя
  другие теги или текст
  
  Парные теги, называемые по-другому контейнеры, состоят из двух частей
  — открывающий и закрывающий тег. Открывающий тег обозначается как и
  одиночный — <тег>, а в закрывающем используется слэш — .
  Допускается вкладывать в контейнер другие теги, однако следует
  соблюдать их порядок. 
  
  Не все контейнеры требуют обязательно закрывающего тега, иногда его
  можно и опустить. 


что касается закрытия /> то это не валидный HTML-синтаксис.  Данная конструкция относится
к XML, так что браузеры попросту игнорируют этот слэш в конце. В HTML-тэги либо не
закрываются, либо закрываются парным закрывающим 



.my {
  height: 100px;
  width: 200px;
  margin: 10px;      
}
    
.red {background-color: red;}
.green {background-color: green;}
.blue {background-color: blue;}





Ответ 2

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

Плавное раскрытие div-а

#div #javascript #html

Добрый день! Есть такой скрипт, который скрывает форму-блок, а при клике на ссылку
показывает её, вопрос в том как сделать показ скрытого блока плавным, чтобы после клика
форма-блок плавно разъезжалась, нужно желательно то что есть модифицировать, без привлечения
библиотек. Вот то, что есть сейчас:
function toggleInformer()   
{       
// ищем нужный нам тег информера
var elm = document.getElementById("informer");

    // если тег найден, обрабатываем его
if(elm)
{
    // меняем видимость элемента на противоположную
    if(elm.style.display == "block")
    {
        elm.style.display = "none";
        document.getElementById("button").innerHTML= '+ развернуть ↓';
    }
    else
    {
        elm.style.display = "block";
        document.getElementById("button").innerHTML= '- спрятать ↑';

    }

}

}
и html 

 Регистрация
 

  тут форма
 


Я думаю, что нужно что-то тут elm.style.display указывать время нужное на раздвижение
и т.д. 
Подскажите, пожалуйста:)    

Ответы

Ответ 1

Т.к. сейчас уже 2013 год, большинство браузеров поддерживают CSS3 Transition, поэтому
используйте их: http://jsfiddle.net/FtL6G/

2 div в ряд: один резиновый, другой фиксированный

#html #css #div

Необходимо на страничке сделать 2 блока, которые бы в сумме занимали всю возможную
ширину. Правый блок узкий и не должен изменять своего размера при растяжении или сжатии
страницы, а левый должен занимать всю оставшуюся ширину. Попробовал своими силами,
но либо левый блок занимает не всё пространство, либо выдавливает правый на новую строку,
а такого быть не должно.



.div3 {
  max-width: 700px;
}

.div1 {
  height: 50px;
  max-width: 550px;
  background: #f99;
  width:100%;
  text-align:center;
  display: inline-block;
  float:left;
}

.div2 {
  height: 50px;
  background: #99f;
  display: inline-block;	
  float: right;
}

  
Резиновый блок
  
Фиксированный




    

Ответы

Ответ 1

Я знаю, что Flexbox так может. Его, правда, стоит применять с осторожностью, в IE
он багованный:



.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  height: 200px;
  border: 5px solid black;
}
.fixed {
  flex: 0 0 200px;
  background-color: #FF9999;
}
.rubbery {
  flex: 1 1 25%;
  background-color: #9999FF;
}

  

  




Ответ 2

Посмотрите внимательно, у вас .div2 сейчас никак не фиксирован. Задайте ему width явно.

Для вашей задачи display: inline-block не нужно, уберите его.
Уберите из .div1 параметр max-width.

Поставьте для .div1 свойство float: right, если блоки пшменяютмя местами, исправил
их положение в html-коде.

Должно помочь.


Ответ 3

Подобный вопрос уже обсуждался.

В вашем коде нужно применять либо float, либо inline-block.
и вычислять размер резинового блока с помощью функции calc.
Если использовать float, то не забывайте про clear, при использовании inline-block
необходимо у элемента родителя убить размер шрифта, для того чтобы убить пробелы между
блоками,которые возникнут так как блоки приобретут все свойства строчных элементов.
vertical-align: top в данном случае задается для того,что-бы блоки не съезжали вниз
при добавлении текста  в них.
Пробуйте эксперементируйте....... Однако разметка наfloat уже устарела и все чаще
используют именно inline-block. Более продвинутые технологии позволяют использовать
Flex, но его поддерживают только современные браузеры... и если ваш проект не нацелен
на кроссбраузерность, то лучше конечно использовать его.

Вот пример:



.a {
  height: 400px;
  background: red;
  font-size: 0; /*для отображения текста в блоках не забудьте задать размер шрифта им.*/
}
.b, .c {
  display: inline-block; /* можно использовать свойство float */
  vertical-align: top; 
}
.b {
  width: 200px;
  outline: 3px solid green;
  height: 400px;
  font-size: 14px;
}

.c {
  width: calc(100% - 200px); /* расчет ширины */
  outline: 3px solid blue;
  height: 400px;
  font-size: 14px;
}

  
фиксированный
  
резиновый



Ответ 4

Знать современные возможности flexbox и calc хорошо, но вот знать основы - куда важнее:



* {
  box-sizing: border-box;
}

.divMain:after {
  content: '';
  display: block;
  clear: both;
}
.divA {
  float: right;
  width: 200px;
  background: #99f;
}
.divB {
  overflow: hidden;
  background: #f99;
}

  

    Фиксированный блок
  
  

    Резиновый блок
  





P.S. Порядок блоков в разметке важен.


Ответ 5

Еще как вариант:



*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;  
}
.container {
  display: table;
  width: 100%;
  height: 200px;
  border: 5px solid black;
}
.fixed,
.rubbery{
  display: table-cell;
  vertical-align: top;
  padding: 25px;
}
.fixed {
  width: 150px;
  background-color: #FF9999;
}
.rubbery {  
  background-color: #9999FF;
}

  
text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text 
  
 text text text text text text text text text text text text
text text text text 

jQuery не обрабатывает созданный элемент.

#jquery #div #html

Добрый день. Создаю Div с помощью jQuery:
$("#main").append("
Тест
");

Однако если вызвать функцию
 $('#one a').click(function() { 
    alert('1');
 });

Алерт не срабатывает. Подскажите пожалуйста в чем ошибка?    

Ответы

Ответ 1

Дело в том, что .click() навешывает обработчики только на существующие элементы DOM,
чтобы навесить обработчик на тот элемент, которой возможно будет создан динамически,
используйте .on() или ему подобные, делегирующие методы: .bind(), .delegate(), .live().
$("#one a").on("click", function(event){
    alert('1');
});

или
$(document).on("click", "#one a", function(event){
    alert('1');
});


Ответ 2

Пример из вопроса не работает из-за синтаксической ошибки. Там неправильная
комбинация кавычек. Их нужно либо экранировать с помощью обратной косой черты
(\"), либо заменить на одинарные без ущерба для HTML.



$("#main").append("
Тест
");
$('#one a').click(function() { 
    console.log('1');
});






В остальном код работоспособен. Вызов метода .click(c) абсолютно идентичен
вызову .on("click", c), и замена ни на что не влияет.

Если поменять последовательность создания тега со ссылкой и навешивание
обработчика щелчка, код, естественно, работать не будет т.к. $("#one a")
вернёт пустую коллекцию, и метод будет не к чему применять. Если логика работы
требует вначале создавать обработчик, а затем ссылки, можно его навешивать на
корневой элемент и перехватывать всплывающие события от ссылок,
отфильтровыывая их. Для такой фильтрации надо вызывать метод
.on("click", "#one a", c). Тогда каждое нажатие в пределах веб-страницы
будет обрабатываться, и если оно было по ссылке с родителем чей id="one",
вызовется c.

Подробности про обработку событий — в учебнике JavaScript, список методов
для обработки событий можно найти в документации jQuery.

Как создать блок дугой? (с картинкой - примером) [дубликат]

#javascript #css #wordpress #div #clip_path

        
             
                
                    
                        
                            This question already has an answer here:
                            
                        
                    
                
                        
                            Как нарисовать через css clip-path (или другим способом)
ровную дугу внутрь блока?
                                
                                    (1 ответ)
                                
                        
                                Закрыт 1 год назад.
            
                    
Как создать блок дугой (внутрь блока) (потратил 5 часов на решение задачи и не нашел
ответа).

Пользуюсь WordPress/css.

Пример 


    

Ответы

Ответ 1

Как один из вариантов:



div {
  margin: 50px;
  width: 100px;
  height: 50px;
  border: 2px solid red;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border-bottom: 0;
  transform: rotate(30deg);
}



Ответ 2

Это можно сделать на SVG:






Ответ 3

Самое первое что нужно это некий блок который перекроет изображение, для этого воспользуемся
приблудой из css3 border-radius:16em/1em; смотрим сниппет



img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.img {
  width: 640px;
  margin: 50px auto;
  position: relative;
}

.img:after {
  content: "";
  display: block;
  width: 100%;
  height: 50px;
  background: #fff;
  border-radius: 16em/1em;
  position: absolute;
  bottom: -25px;
}

.img:before {
  content: "";
  display: block;
  width: 100%;
  height: 50px;
  background: #fff;
  border-radius: 16em/1em;
  position: absolute;
  top: -25px;
}

.bullet {
  margin: 50px;
  width: 100px;
  height: 50px;
  border: 2px solid red;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border-bottom: 0;
  transform: rotate(30deg);
  position: absolute;
  top: 30px;
  left: 50%;
}

.bullet:before {
  content: "";
  border-left: 10px solid transparent;
  border-right: 10px solid red;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  position: absolute;
  left: -12px;
  top: 50px;
  transform: rotate(-80deg);
}

  
  






и как видно я вставил изображение в блок который родитель для псевдо элементов, вот
псевдо элмементами я задал скругление

5 блоков в ряд с плавающей шириной

#html #css #вёрстка #div

У меня есть div с width:100% и высотой 200px

Как в него поставить 5 блоков div так, чтобы они занимали весь экран (растягивались,
сужались)?
- я это решил width:20% каждому блоку, но из нюанса у меня все равно не получилось

Нюанс таков, мне надо, чтобы после первых четырех внутренних дивов был отступ справа
пикселя на 3. Из-за этого у меня пятый блок съезжает.

Скрин чего нужно: http://imgur.com/a/XYDLX


    

Ответы

Ответ 1

Например flex:



.col {
  background: #36a9e0;
  height: 200px;
  width: 20%;
}

.col+.col {
  margin-left: 3px;
}

.row {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

  

  

  

  

  






Либо можно учесть размер ширины блоков с учетом отступа:



.col {
  background: #36a9e0;
  height: 200px;
  width: 19.8%;
  float: left;
}

.col+.col {
  margin-left: .25%;
}

.row {
  overflow: hidden;
}

  

  

  

  

  




Ответ 2

Можно при помощи вычисляемой ширины и селектора +.



article {
  overflow: hidden;
}

div {
  width: calc((100% - 4*3px) / 5);
  height: 100px;
  background: #ccc;
  float: left;
}

div + div {
  margin-left: 3px;
}

  

  

  

  

  






Или при помощи флексбокса и вычисляемой ширины:


article {
  display: flex;
  justify-content: space-between;
}

div {
  width: calc((100% - 4*3px) / 5);
  height: 100px;
  background: #ccc;
}

  

  

  

  

  




Ответ 3

Вариант с display: table;



*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.blocks{
  display: table;
  width: 100%;
  height: 100px;
  border-spacing: 3px 0;
  table-layout: fixed;
}
.blocks > div{
  display: table-cell;
  vertical-align: top;
  background: royalblue;
}
.blocks > div:nth-of-type(even){
  background: tomato;
}

  

  

  

  

  

Отключить автоматический перенос блока на новую строку. CSS

#div #css

Здравствуйте. Необходимо чтобы при нехватке места в родительском блоке, дочерние
не переносились на новую строку, а скрывались за правым краем и можно было их скроллить

Подскажите каким образом можно это сделать.

http://jsfiddle.net/M8een/



#container {
  border: 2px solid red;
  width: 350px;
  height: 120px;
  overflow-x: auto;
  overflow-y: hidden;
}
.image {
  float: left;
  margin: 2px;
}

  
  
  
  




    

Ответы

Ответ 1

Для текста есть такая штука white-space: nowrap;
Она делает именно то, что вам надо - текст в одну строку!
А чтобы работать с другими объектами как с текстом, надо делать их строчными (inline),
или строчно-блочными (inline-block). Тогда один объект будет вести себя как одно слово.
inline-block - еще и гораздо более лучший способ выстроить элементы друг за другом
Короче говоря, вот ваше решение: http://jsfiddle.net/M8een/1/
У этого способа есть и свои особенности. На инлайны и на инлайн-блоки (как и на текст)
влияет вертикальное выравнивание, которое по умолчанию baseline. Сделав плиточную структуру
или, скажем, колонки при помощи инлайн-блока хочешь, чтобы они были выравнены по вертикали
по верху и надо дополнительно указывать vertical-align: top;
Еще одна особенность в том, что все текстовые разделители (пробелы, табуляции, переносы
строк) преобразуются в один пробел между инлайнами и инлайн-блоками. Подобно пробелам
между словами. Лечится это многими способами. Вот хорошая статья и дополненое решение:
http://jsfiddle.net/M8een/2/

Растянуть содержимое div по всей странице

#div #css

Здравствуйте, уважаемые, появилась следующая задача:
растянуть содержимое div блока на всю высоту экрана, иными словами — Если у пользователя
широкий экран, то всё содержимое блока < div > растягивается по всей ширине его экрана.
Если у пользователя узкий экран, то всё содержимое блока < div > сжимается, так,
чтобы не вылезать за пределы экрана.



      



    

        Мы работаем.

        

        Правда-правда...   
    



Приведенный мною код, к сожалению, работает неверно...
Изображение выходит за рамки экрана при этом ещё и перекрывая собою нижний текст.
Подскажите, что сделать?    

Ответы

Ответ 1

Сделайте следующее:


Немедленно избавьтесь от тегов font, вместо них используйте span, p, div и т.д.
Стили пишите в отдельном CSS файле, или, на худой конец, в head.
В стилях для body, html пропишите:

body, html { 
    width: 100%;
    height: 100%;
}

В стилях для div:

.div {
    min-width: 100%;
    min-height: 100%;
    position: relative;
}

В стилях для img:

.div img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



Хотя, на мой взгляд, картинку лучше задать background'ом для .div и прописать для
него background-size: cover;

Надписи так же позиционируются абсолютно.



P.S. А вообще, почитайте лучше по адаптивной верстке, например здесь. А также, и
это главное, очень внимательно читайте и я бы даже сказал учите html & css - думаю,
что вот этот ресурс Вам подойдет.


Ответ 2

С развитием нашего любимого языка CSS, появились величины vw и vh
Эти величины определяют процент от размера окна, т.е. если вы блоку укажите 100vw,
то это будет означать, что блок должен быть на всю ширину окна. Так и с vh - по высоте



.object {
  width: 100vw;
  height: 100vh;
  background-color: red;
}





Стоит учитывать, что оно учитывает размер вместе со скроллом и по-этому следует делать
более точные расчёты :)


Ответ 3

Мне кажется с помощью jquery можно решить это вообще легко, к примеру так:
$(document).ready(function(){

var heightR = $(window).height();// высота экрана
var widthR = $(window).width();// ширина экрана

$('body .div').css({'width':widthR,'height':heightR}); 
});


Ответ 4

.container {
    width: 100%;
    max-width: 1260px;
    min-width: 780px;

    margin: 0 auto;
}
Примерно так.


Ответ 5

var heightR = $(window).height();// высота экрана
var widthR = $(window).width();// ширина экрана


Если страницы загружаются с помощью ajax и нужно обновление (как для чата, например),
то возникают проблемы на мобильных устройствах при растяжении или увеличении... Да
и вообще на resize экрана если что-то вешается, то проблемы неминуемы


Ответ 6

width:100%

Разве нет?

Центрирование div по центру родительского div

Вопрос избитый, но справиться не могу. Есть внешний div c внутренним дивом и картинкой во всю ширину
Не могу отцентрировать текст поверх картинки

Text

css
.one { background-color: #ccc;
} .two { width: 40%; height: 40%; margin: 0px auto; text-align: center; }
.full { width:100%; height: auto; }

Ответ

Применяем абсолютное позиционирование+margin:auto;
* { margin: 0; padding: 0; } .one { background-color: #ccc; position: relative; } .two { width: 40%; height: 40%; margin: 0px auto; text-align: center; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; background: #ccc; } .full { width: 100%; height: auto; }

Text

Как сделать так чтобы при разворачиваемости div блок на все строку?

У меня такая проблема, допустим вот пример
$('.header').click(function(){ if($(this).hasClass('expand')){ $(this).closest('table').find('.header').addClass('expand'); $(this).closest('table').find('.child').remove(); $(this).removeClass('expand').after('

blahblahblahblahblahblahblahblah

Привет мир

'); } else { $(this).addClass('expand').parent().find('.child').remove(); } }); table, tr, td, th { border: 1px solid black; border-collapse:collapse; } .header:hover{ cursor: pointer } .header .sign:after{ content: '-' } .header.expand .sign:after{ content: '+' }

Класс	Код	Город	Дата создание	Дата редактирование
Мебель	1	Казань	2017-03-10 10:00:00	2017-03-10 10:30:00
Электроника	2	Москва	2017-03-15 09:15:00	2017-03-15 10:30:00
Бытовая химия	3	Санк-Петербург	2017-03-10 10:00:00	2017-03-10 10:30:00

Когда разворачиваешь строку. то весь div блок равняется под столбец, а мне нужно чтобы она шла под всю строку. А то как-то некрасиво получается и если там будут 3 колонки в блоке, то таблица 1 столбец будет вообще громадная. А мне бы хотелось, чтобы таблица сохраняла свои пропорции

Ответ

Добавляйте в таблицу строку с одной ячейкой, перекрывающей пять существующих.
$(this).removeClass('expand') .after('

blahblahblahblahblahblahblahblah

Привет мир

');
Там только есть минус, в том, что если подключить bootstrp и использовать класс col-xs-, то не совсем удобно выходит. https://jsfiddle.net/hollanditkzn/x2bcukw7/12/
Поставьте не два col-xs-4, а два col-xs-6 - общее количество бутстраповских колонок должно равняться 12-ти.

Валидное расположение блоков

Подскажите как грамотно расположить блоки как на данном рисунке(блок 3 немного заезжает на блок 1,), что б они сохранили при этом адаптивность свою(при изменении ширины экрана не проваливались ни куда). Можно и на бутстрапе, просто интересен грамотный подход, да бы минимизировать использование лишних тегов и стилей.Заранее спасибо

Ответ

css - calc()
browser support calc
.block-1 { height: 200px; background: #ccc; } .block-2, .block-3 { height: 100px; background: #ddd; } .block-3 { height: 100px; background: #999; margin-left: -50px; width: calc(100% + 50px)!important; } @media screen and (max-width: 767px) { .block-3 { margin-left: 0; width: 100%!important; } }

1

2

3

Мгновенный вывод текста из инпута в див

Как мгновенно вывести текст из инпута в див У нас есть обычный инпут и див Когда мы пишем любой текст в инпут, он автоматически появляеться в диве

Ответ

Для решения задачи можно использовать событие oninput
function onInput() { var input = document.getElementById("input"); var div = document.getElementById("div"); if (div != null && input != null) div.innerHTML = input.value; }

Возникает вопрос: а почему не onkeyup? По двум причинам.
Во-первых, при зажатой кнопке ввод в input будет продолжаться, а в div изменения попадут только при отпускании кнопки.
А во-вторых, ввод возможен и без помощи клавиатуры, например, вставка щелчком мыши по контекстному меню. В этом случае обработчик onkeyup вообще не будет вызван.

P.S. Возможны проблемы с IE9 и более старыми (https://learn.javascript.ru/events-change#%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D0%B5-input).

jQuery не обрабатывает созданный элемент.

Добрый день. Создаю Div с помощью jQuery: $("#main").append("

Тест

"); Однако если вызвать функцию $('#one a').click(function() { alert('1'); }); Алерт не срабатывает. Подскажите пожалуйста в чем ошибка?

Ответ

Дело в том, что .click() навешывает обработчики только на существующие элементы DOM, чтобы навесить обработчик на тот элемент, которой возможно будет создан динамически, используйте .on() или ему подобные, делегирующие методы: .bind(), .delegate(), .live(). $("#one a").on("click", function(event){ alert('1'); }); или $(document).on("click", "#one a", function(event){ alert('1'); });

Плавное раскрытие div-а

Добрый день! Есть такой скрипт, который скрывает форму-блок, а при клике на ссылку показывает её, вопрос в том как сделать показ скрытого блока плавным, чтобы после клика форма-блок плавно разъезжалась, нужно желательно то что есть модифицировать, без привлечения библиотек. Вот то, что есть сейчас: function toggleInformer() { // ищем нужный нам тег информера var elm = document.getElementById("informer");
// если тег найден, обрабатываем его if(elm) { // меняем видимость элемента на противоположную if(elm.style.display == "block") { elm.style.display = "none"; document.getElementById("button").innerHTML= '+ развернуть ↓'; } else { elm.style.display = "block"; document.getElementById("button").innerHTML= '- спрятать ↑';
}
} } и html

Регистрация

тут форма

Я думаю, что нужно что-то тут elm.style.display указывать время нужное на раздвижение и т.д. Подскажите, пожалуйста:)

Ответ

Т.к. сейчас уже 2013 год, большинство браузеров поддерживают CSS3 Transition, поэтому используйте их: http://jsfiddle.net/FtL6G/

Отключить автоматический перенос блока на новую строку. CSS

Здравствуйте. Необходимо чтобы при нехватке места в родительском блоке, дочерние не переносились на новую строку, а скрывались за правым краем и можно было их скроллить
Подскажите каким образом можно это сделать.
http://jsfiddle.net/M8een/
#container { border: 2px solid red; width: 350px; height: 120px; overflow-x: auto; overflow-y: hidden; } .image { float: left; margin: 2px; }

Ответ

Для текста есть такая штука white-space: nowrap; Она делает именно то, что вам надо - текст в одну строку! А чтобы работать с другими объектами как с текстом, надо делать их строчными (inline), или строчно-блочными (inline-block). Тогда один объект будет вести себя как одно слово. inline-block - еще и гораздо более лучший способ выстроить элементы друг за другом Короче говоря, вот ваше решение: http://jsfiddle.net/M8een/1/ У этого способа есть и свои особенности. На инлайны и на инлайн-блоки (как и на текст) влияет вертикальное выравнивание, которое по умолчанию baseline. Сделав плиточную структуру или, скажем, колонки при помощи инлайн-блока хочешь, чтобы они были выравнены по вертикали по верху и надо дополнительно указывать vertical-align: top; Еще одна особенность в том, что все текстовые разделители (пробелы, табуляции, переносы строк) преобразуются в один пробел между инлайнами и инлайн-блоками. Подобно пробелам между словами. Лечится это многими способами. Вот хорошая статья и дополненое решение: http://jsfiddle.net/M8een/2/

Растянуть содержимое div по всей странице

Здравствуйте, уважаемые, появилась следующая задача: растянуть содержимое div блока на всю высоту экрана, иными словами — Если у пользователя широкий экран, то всё содержимое блока < div > растягивается по всей ширине его экрана. Если у пользователя узкий экран, то всё содержимое блока < div > сжимается, так, чтобы не вылезать за пределы экрана.

Мы работаем.

Правда-правда...

Приведенный мною код, к сожалению, работает неверно... Изображение выходит за рамки экрана при этом ещё и перекрывая собою нижний текст. Подскажите, что сделать?

Ответ

Сделайте следующее:
Немедленно избавьтесь от тегов font, вместо них используйте span, p, div и т.д. Стили пишите в отдельном CSS файле, или, на худой конец, в head В стилях для body, html пропишите:
body, html { width: 100%; height: 100%; } В стилях для div
.div { min-width: 100%; min-height: 100%; position: relative; } В стилях для img:
.div img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Хотя, на мой взгляд, картинку лучше задать background'ом для .div и прописать для него background-size: cover;
Надписи так же позиционируются абсолютно.

P.S. А вообще, почитайте лучше по адаптивной верстке, например здесь. А также, и это главное, очень внимательно читайте и я бы даже сказал учите html & css - думаю, что вот этот ресурс Вам подойдет.