Помогите сделать макет

[igmar]

Расскажите, кто знает - как работает броузер с кэшем по изображениям?

 

Если есть тег img в html, то броузер сохраняет изображение в кэш. Как он его определяет, по src (url) ? И если потом встречается img с таким src, то броузер просматривает кэш и если находит такой src, то загружает это изображение из кэша ?

 

1. А если без тега img в html, а вот так создается и загружается в память изображение, оно будет сохранено в кэш ?

 

var imgtmp = new Image(); 

imgtmp.src = my_url;

 

2. А если без тега img в html картинка задается как бэкграунд блока, будет она искаться в кэше по url ?

 

.class1 {background:url("http://igmar.hop.ru/tab2left.gif")no-repeat left top;}

[igmar]

Помогите пожалуйста. Никак не могу сам справиться.

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

 

http://codepen.io/anon/pen/pggKxw

 

Если убрать из стилей все, что касается списка, то будет как надо. Но тогда не будет скобок. Можно сделать, чтобы и скобки были, и текст чтобы не вылезал?

Edited December 16, 2015 by igmar

[Great Rash]

http://codepen.io/GreatRash/pen/YwwjYq

[igmar]

Great Rash,

спасибо большое. Я бы не додумался сам. Получается, что li состоит из 2-х элементов, но через li им можно задавать стили только совместно. До тех пор, пока одному элементу не задать position: absolute - тогда он становится сам по себе, как и любой элемент с абсолютным позиционированием. Т.е. before || after - это другой самостоятельный элемент внутри родителя, им можно управлять в какой-то мере.

[Great Rash]

Да, before и after - это элементы которые генерирует CSS (так называемые псевдоэлементы). Есть открыть инспектор (например в Хроме F12), то их даже видно в DOM-дереве. С ними можно делать всё что угодно. Даже такие браузеры как Хром вроде позволяют создавать псевдоэлемент для псевдоэлемента. Т.е. можно зафигачить .class::before::before по идее

[igmar]

Я везде там пощелкал по F12, но не понял где что можно смотреть и зачем это может понадобиться. Мне это пока не нужно.

 

Мне уже нужно учиться работать с сервером. Объясните кто-нибудь, что означает вход пользователя на сайт с технической точки зрения. Пользователь ввел данные, их отослали на сервер, проверили, результат оказался false. Ответ с результатом пришел обратно. Что дальше? Этот результат записывается в глобальную переменную и потом, при кликах по некоторым объектам эта переменная каждый раз проверяется и при false соответствующие функции не запускаются? А если true то запустятся. Но переменные действуют в пределах страницы (документа, окна). А если будет открыто новое окно с новым документом, то значит нужно будет передать туда эту переменную. А как? 

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

 

Могу реально написать на php "Hello World". С этим уже можно начинать.

[Q4Dizzy]

Почитайте про сессии, куки.. Посмотрите примеры авторизации. Их полно в инете.

[igmar]

 Q4Dizzy,

благодарю. Теперь знаю что искать. Ухожу на неделю осваивать.

[igmar]

Все плохо. Как в том советском анекдоте, когда наука достигла невиданных высот и оживили Ленина. Ленин походил, посмотрел и велел оживить Дзержинского, оставил ему записку: "Феликс, начинаем все сначала. Явки по прежним адресам".

 

Снова двухколоночный макет.

 

У display:flex подтвердился глюк, который заподозрил еще раньше, но не знал как проверить.

Собственно, вот беда:

http://codepen.io/anon/pen/XmQbBq

 

Задаем правой колонке ширину 300рх, а она меньше. Это видно по красному абсолютному блоку, у которого 300рх. Думаю, там пропорциональное уменьшение. Ширина левой задана 100%, чтобы она заняла все. Она же реально по отношению к родителю не 100%, а меньше на величину правой колонки. И правая колонка тоже пропорционально уменьшилась на такой же %. Как-то так.

 

А блоками все хорошо.

 

http://codepen.io/anon/pen/dYLMEx

 

И с тех пор научился делать высоту 100%. Придется переделать макет блоками для соблюдения абсолютных размеров.

Все благополучно решилось заданием min-width Оно работает.

Edited December 17, 2015 by igmar

[Igor Schnaider]

flex-shrink?

[igmar]

shrink - наверное, это сжимает или усекает.

 

Работает min-width: 300px Ширина колонки устанавливается правильно и держится. А вот просто width: 300px; не работает, если другая колонка резиновая. Т.е. для flex это обязательное условие, чтобы задать ширину столбца в px. Для высоты, наверное, работает так же, позже мне придется это проверить.

[Igor Schnaider]

Определяет степень сжатия.

Т. е. с flex-shrink: 0 не будет сжиматься.

Можно, конечно и min-width оставить, ну или так:

flex: 0 0 300px; // flex-grow = 0, flex-shrink = 0, flex-basis = 300px

[igmar]

А вы можете подсказать, как сделать хоть что-нибудь на php чтобы страница не перезагружалась?

 

Я сделал у себя локально форму с кнопкой по адресу (там моя главная страница):

http://test2.ru/photo

<form  id="loginbox" action="login.php" method=post>  <input id="logname" onfocus="logfocus('logname')" type="text" name="logname1" value="имя"><br>  <input id="logpass" onfocus="logfocus('logpass')" type="text" name="logpass1" value="пароль"><br>  <input type="button" onclick="closelogin()" value="Отмена">  <input type="submit" name="submit" value="Войти"></form>

Сделал файл login.php который лежит там же.

<?phpecho "Hello World";echo "<script>alert(\"Вы вошли на сайт, \");</script>"; ?>

Когда жму на кнопку, то страница перезагружается. Что бы ни было внутри скрипта, хоть просто присваивание $a=1; все равно вместо моей открывается чистая страница. На ней уже выводится результат Hello World или ничего не выводится, если нет вывода.

Причем ее адрес длинный

http://test2.ru/photo/login.php?logname=12345&logpass=%D0%BF%D0%B0%D1%80%D0%BE%D0%BB%D1%8C&submit=%D0%92%D0%BE%D0%B9%D1%82%D0%B8

Как сделать, чтобы адрес оставался прежним и оставалась прежняя страница, если я ничего никуда не вывожу? Если в скрипте нет ни одной строчки, все равно появляется новая пустая страница.

Edited December 17, 2015 by igmar

[Q4Dizzy]

Так это аяксом делается на стороне клиента.. 

 

длинная строка, потому что запрос типа GET..

Edited December 17, 2015 by Q4Dizzy

[igmar]

Понял. Нужно читать Аякс.

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

[igmar]

Всем привет!

Зачем нужно проверять логин и пароль? Что там может быть недопустимого? Какие символы неприемлемые в логине и пароле и почему?

Даже если пароль пустой, разве это не личное дело пользователя?

[abrahadabra]

вы задаёте глубоко философские вопросы

С одной стороны это и впрямь личное дело пользователя.

С другой стороны часто бывает, что пользователь ставит пароль 123, у него аккаунт уводят, и он начинает проедать мозг владельцу сервиса, который не обеспечил безопасность.

Вот и как быть?

[igmar]

На самом деле это практический вопрос. После некоторого перерыва я снова взялся пилить свой сайт. Теперь задача разобраться с авторизацией.

 

1. Может ли пользователь, введя какие-то особенные символы в поля логин и пароль, что-то сломать мне на сайте?

2. И почему обычно все это должно быть на латинице? Ведь базе без разницы какие символы сохранять, например, в utf8.

[abrahadabra]

насчёт латиницы — это в большей степени дань традиции. Практический смысл тут разве что в том, чтобы не путать символыиз разных алфавитов, схожие по написанию. Если какие-то символы в имени пользователя приводят к краху системы, возникает масса вопросов к такой системе.
Как в том анекдоте:

— Вы действительно назвали своего сына Роберт'); DROP TABLE Students;-- ?

[igmar]

Отлично. Спасибо.

 

А как сделать окошко авторизации как на этом форуме?

Я пока сделал  на одной странице скрытый div с полями ввода display:none; position:absolute. При щелчке по ссылке Войти, делаю ему display: block - можно вводить текст в поля.

Но хочу, чтобы со всех страниц была возможность авторизоваться. Вот так как на форуме сделано. Как это сделать, чтобы всегда появлялось окошко авторизации поверх текущей страницы ? Для этого нужно на каждой странице делать такой div или можно сделать один для всех страниц ?

[abrahadabra]

Это уже речь о шаблонизаторах. В cms и фреймворках страницы собираются из шаблонов. Есть один общий, в котором и сделана форма авторизации. А остальные, контентные, уже наследуются от этого одного общего. В итоге получается на всех страницах такая форма.

[igmar]

ОК! Это для меня слишком сложно.

 

Может кто-то подсказать, почему у меня криво работают методы GET и POST ?

Везде написано, что пары данных разделяются амперсандом, а значения отделяются от имени знаком =

 Т.е. я отсылаю запрос (хоть GET хоть POST) не из формы, а запросом Ajax

s=user1&pass=pass1

oAjax.open('GET', 'testlog.php?name='+s, true);

oAjax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

oAjax.setRequestHeader("X-Requested-With", "XMLHttpRequest");

oAjax.send();

В серверной части (login.php) в переменной $_GET или $_POST, все то что до первого знака '=' является незначащим именем поля, а все остальное значением.

 

Т.е. $_GET['name']=='user1&pass=pass1'

и $_GET['pass']=='user1&pass=pass1'

и $_GET['чоугодно']=='user1&pass=pass1'

 

Я могу обработать строку и разделить это все, но по-моему здесь что-то не то. Во всех найденных примерах по другому.

Может прпоисходит из-за этого oAjax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');?? Сервер считает, что идет один кусок данных и не разделяет их на поля.

Я пробовал вначале oAjax.setRequestHeader('Content-Type', 'text/plain'); но что-то совсем не получалось.

Мне бы проще было, чтобы в переменной были пары полей, которые можно вытащить по имени.

[igmar]

Все заработало.

Слишком много раз использовал encodeURIComponent()

соответственно знак & преобразовывался и не был опознан.

[igmar]

Подскажите, а как можно индентифицировать документ (страницу)?

Мне нужно по окончании загрузки страницы запустить функцию. Я это делаю

function ready() {

alert("загрузилось");

boxwidth=document.getElementById('box1').offsetWidth;

boxheight=document.getElementById('box1').offsetHeight; 

}

document.addEventListener("DOMContentLoaded", ready);

 

Но этот файл со скриптами .js я подключил и к другим страницам, хотя из него почти ничего не используется. Соответственно, проблема в том, что при загрузке любой страницы срабатывает эта функция. А мне нужно, чтобы срабатывала только на одной странице. Эту страницу можно как-то определить? Например, задать ей какой-то идентификатор в заголовке?

Второй вариант, как я понимаю, скрипты, которые используются на других страницах, записать в отдельные файлы .js и эти файлы подключить к тем страницам, таким образом разделив области действия скриптов.

[iBars]

 

Подскажите, а как можно индентифицировать документ (страницу)?

Мне нужно по окончании загрузки страницы запустить функцию. Я это делаю

function ready() {

alert("загрузилось");

boxwidth=document.getElementById('box1').offsetWidth;

boxheight=document.getElementById('box1').offsetHeight; 

}

document.addEventListener("DOMContentLoaded", ready);

 

Но этот файл со скриптами .js я подключил и к другим страницам, хотя из него почти ничего не используется. Соответственно, проблема в том, что при загрузке любой страницы срабатывает эта функция. А мне нужно, чтобы срабатывала только на одной странице. Эту страницу можно как-то определить? Например, задать ей какой-то идентификатор в заголовке?

Второй вариант, как я понимаю, скрипты, которые используются на других страницах, записать в отдельные файлы .js и эти файлы подключить к тем страницам, таким образом разделив области действия скриптов.

 

 

Поработайте с window.location.href - эта переменная отдаёт URL страницы из адресной строки браузера