Jump to content

maxsnw

Newbie
  • Posts

    19
  • Joined

  • Last visited

Everything posted by maxsnw

  1. не помогло Хотя у меня такая проблема возникла, работаю пока на 13 дюймах и вот решил проверить поведение сайта при большем разрешении...Маштабирование к нему относится или же нет?
  2. Здравствуйте такая проблемка при верстке возникла, что при изменении маштаба хедер и контент выравниваются по центру, а футер прикреплен к левому краю, в css указан margin: 0 auto; для wrapper. Плюс весь текст остается так же у левого края. Как зацепить его к элементам? пример ниже, сорри если криво вставил. За нижнюю часть не надо говорить пока ибо не доделал, наткнувшись вот на эту дрянь, да и на чистоту кода пока не грешите В общих чертах <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link href='http://fonts.googleapis.com/css?family=Roboto:300&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="styles/normalize.css"> <link rel="stylesheet" type="text/css" href="styles/style.css"> <link rel="shortcut icon" type="image/png" href="img/favicon.png"> <title>Portfolio site</title></head><body><div id="wrapper"><header class="header"> <div class="header-img"> <img src="img/headerbg.jpg"> </div> <div class="clearfix"></div> <div class="nav"> <span class="head">Ali Sayed’s <br /> <b>Web Designing</b> <br /> Project</span> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore. <p> quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dol. </div></header><div class="clearfix"></div><div class="content"> <div class="vertical"> <img src="img/contentbg.jpg"> <div class="content-text"> <h2>Drawing Scketch</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidu.</p> <h2>Making Design</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidu. </p> <h2>Developing Product</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidu. </p> </div> <div class="best-strating"> <h2>Best Strarting</h2> <p>Lorem ipsum dolor sit amet, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea.</p> <input type="button" value="View Our History"> </div> <div class="Verified"> <h2>Verified Dummy</h2> <p>Lorem ipsum dolor sit amet, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea.</p> <input type="button" value="Go To The Page"> </div> </div> </div> </div><div class="clearfix"></div><footer class="footer"><image src="img/footerbg.jpg"><div class="vert-footer"> <span class="head-footer">This Webpage Is <br /> <b>Designed By</b></span> <img src="img/logo.jpg"> <p> <span class="name">Ali Sayed</span><br/> <span class="graphic">Graphic Designer</span></div><div class="form"> <h2>Say ‘Hello’</h2> <input type="name" value="Your Name"> <input type="email" value="Your Email"> <input type="comment" value="Your Message Here..."></div> <div class="social"> <h4>Stay Connnected With Us...</h4> <ul> <li class="facebook"><a href="facebook.com"><img src="img/facebook.jpg"></a></li> <li class="dribble"><a href="dribble.com"><img src="img/dribble.jpg"></a></li> <li class="twitter"><a href="twitter.com"><img src="img/twitter.jpg"></a></li> </ul> <p>Please Feel Free To Contat With me For Any Kind of Prject.</p> </div></footer></div> </body></html>#wrapper { margin: 0 auto; min-width: 240px; max-width: 1370px; font-family: 'Roboto', sans-serif;}.clearfix { clear: both;}.header { margin-bottom: -4px;}.header img { display: inline-block; position: relative; width: 1370px; height: auto; }.nav { display: inline-block; position: absolute; color: #000; top: 135px; left: 950px; width: 321px; height: 450px;}p { padding-bottom: 25px; line-height: 25px; }.head { display: inline-block; padding-bottom: 35px; text-decoration: none; line-height: 55px; font-size: 40px;}.vertical img { display: inline-block; position: relative; margin-bottom: -4px;}.content-text { position: absolute; top: 800px; left: 90px; width: 450px; height: 700px; color: white;}.best-strating { position: absolute; top: 800px; width: 530px; height: 280px; color: #000; left: 700px;}.Verified { position: absolute; width: 530px; height: 280px; top: 1200px; left: 700px; color: #fff;}.vert-footer { position: absolute; top:1650px; left: 50px; height: 560px; width: 340px; color: #fff;}.vert-footer .head-footer { display: inline-block; padding-bottom: 70px; font-size: 45px; line-height: 80px;}.vert-footer img { display: inline-block; padding-top: 162px; padding-bottom: 30px;}.name { display: inline-block; font-size: 42px; margin-bottom: 0px; }.graphic { display: inline-block; font-size: 16px; margin-top: 10px;}
  3. В любом случае, давайте возьмем для примера фронтэнд. Какой список и порядок изучения вы предложите? То есть, по вашему порядок изучения не имеет важности? Спасибо всем, кто ответил Но все же, если не затруднит, сделайте порядок языков, мне не важно будет почему и какой язык изучать первым, я буду следовать по нему, ориентируясь на ваш опыт.
  4. Добрый день. Вопрос скорее относится к тем, кто уже достиг определенных высот в изучении веба. Предыстория. Первый раз с HTML я столкнулся когда сестра училась в универе на первых курсах(разница 6 лет), я лазил по столу и обнаружил зеленую книженцию, это была методичка по HTML. Полистав ее, я смотрел словно в пустоту, но код и картинки под ним, подсказывали что написав это, мы получаем то, что показано на картинке. Мне показалось это интересным и я спросил у сестры что это. Она объяснила и даже показала что они делают по этой методички. Интернета тогда в доме еще не было, так что я не сильно понимал, что вообще происходит на страничке, но смотрелось все забавно и меня с тех пор это зацепило и не отпускает по сей день. Даже сам пробовал переписывать код с методички в блокнот и запускать, впечатляло, тем более в таком возрасте, несмотря на то что тупо переписал с методички все, казалось что я сам это сделал. Потом все как то поугасло и я в 2007 (16 лет мне) году поступил на факультет информатики с уклоном в веб. К 2007 году я понял что свяжусь с компьютерами уже пожизненно и особо даже не выбирал факультеты из юристов/экономистов. И тут, в первые же дни учебы, я попал на пару(лекция), по изучению веб-технологий. Я слушал лектора, смотрел что он пишет/чертит на доске и в моей голове это все казалось до боли знакомым, что я даже продолжал некоторые записи в тетради сам, поднимал голову на доску и оказывался прав, с точностью до символа. К 3 курсу я уже помогал всей группе с практикой, но что я знал к третьему курсу? Базовые основы HTML и CSS и только. Впереди шла небольшая практика по Javascript, но как она началась, так и закончилась сдачей лабы и освоением функции (или свойство) alert. Я после этого был даже немного подавлен, что оно все стоит на одном месте и обучение заключается в том, что бы писать одно и то же по сто раз, не давай ничего нового на протяжении последних двух курсов. Никаких упоминаний о том, как это в жизни применить, что с этим можно сделать вообще за пределами университета. То есть по сути, для других это была одна из обычных серых лекций, которую нужно отсидеть, сдать лабы и получить свою оценку в зачетку, но для меня это было внутри словно радостью, я охотно помогал сокурсникам, мне нравилось объяснять и показывать. Но по сути, я просто хорошо скушал и принял данный материал и все. Дома по выходным я сидел и шерстил интернет, как применить эти знания, где вообще работают такие люди и тд и тп. Постепенно оброс книжками по HTML и CSS, хотя оброс это громко сказано, это были две книги издательства O'Reilly, топовых, судя по отзывам и советам с форумов(один из них ваш). Что ж, я читал, воплощал, повторял что было в книгах, но когда прошел второй круг по их изучению, я сел и что я увидел? А увидел я то, что куда я могу засунуть эти знания? Да, я знаю HTML и CSS, да, я могу впринципе написать вам что вашей душе угодно и что? Поэтому я сел и начал искать дальше, не может быть такого, что такая вещь, началась и закончилась двумя книгами, когда ежедневно шерстя по интернету, я встречал незнакомые фичи и даже не подозревал, как они делаются, значит я что-то пропустил или просто не дошел до этого. В итоге я нашерстил то, что веб это просто жесть какой огромный мир языков, и меня сразу сковали в наручники мои сомнения. Куда идти дальше и что учить, что бы быть действительно интересным работодателю, и что бы я выбирал работу, а не она меня. Суть в общем этой истории в том, что я не знаю куда идти дальше и как не промахнуться в выборе дальнейшего направления. Их очень много я набрал и в какой из них мне окунаться, я даже не имею представления. Javascript, Ajax, jQuery, Python, PHP, RoR. В общем мне нужен так сказать план, который предоставит мне направления изучения и направления куда двигаться, и на что стоит делать упор. HTML и CSS, а куда дальше? Дело в том, что я сейчас в армии и пока есть время обдумать, добыть материал и сидеть изучать, благо к компьютеру есть доступ свободный пока Живу я на Камчатке (в ближайшие два года переезд в Краснодар) и меня огорчили новостью то, что единственная студия которая занимается разработкой сайтов, закрылась и все. Хотя я подумывал пойти туда хоть стажером, лишь бы найти тот самый путь. Но увы, прийдется все разведывать самому, в этом тоже есть свои плюсы я считаю Собственно вот моя такая история. Жду наставлений, направлений, планов Спасибо за внимание
  5. спасибо за помощь...проглядел
  6. в общем по уроку клепаю блоки и началась тема позиционирования, при приклеплении картинки она просто висит внутри блока, хотя при смене параметров top и left она должна применять их свойства, но ничерта не происходит и при создании div контейнера, задав ему параметры и цвет, блок не создается, даже не знаю в чем проблема, помогите разобраться. Интересующие элементы #new и #container <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link href="css/style_p.css" type="text/css" rel="stylesheet" /> <title>Позиционирование</title> </head> <body> <div id="wrapper"> <div id="header"></div> [color="#FF0000"]<div id="content"> <img src="images/new.png" width="104" height="104" id="new"> <div id="container"> </div>[/color] <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas mole</p> <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." Абзац 1.10.32 "de Finibus Bonorum et Malorum", написанный Цицероном в 45 году н.э.</p> <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p> <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p> </div> </div> </body> </html> вот стиль body { background-color: #d2d2d2; font: 11px Verdana; color: #696969; } #wrapper { width: 650px; margin: 30px auto; background-color: #f4f4f4; } #header { height: 75px; background-image: url(../images/redHeader.png); background-repeat: no-repeat; #content { padding: 20px 30px; } #new { position: absolute; top: 0px; left: 0px; } #container { position: absolute; width: 300px; height: 240px; background-color: #FADEC9; right: 0; top: 0; }
  7. нашлась ошибка в присоединении стиля. должно быть так: <link href="" /> а было вот так: <link href=" /">
  8. проблема оказывается не в путях, а в чем-то другом. дело в том что я пишу css в веб-девелопер тул, который в ФФ устанавливается. когда пишу и указывают пути, все справа в ФФ корректно отображается, но как только я сохраняю style.css и пытаюсь открыть в ФФ или в опере, то передо мной предстает страница без картинок.
  9. какой еще http, картинка находится на локальном диске. написали бы как правильно указать.
  10. в общем занимаюсь версткой по видео Джефри Вэя, первый раз делал, все картинки объявленные в цсс отображались корректно. но теперь когда делаю опять, картинки только отображаются объявленные в хтмл, которые относятся к контенту. картинки в бразуерах включены, форматы указаны правильно, пути тоже, даже не знаю в чем проблема может быть. вот пример кода: #header h1 { background: url(img/logo.png) no-repeat; width: 169px; height: 71px; text-indent: -9999px; float: left;
  11. да плагины я установил, но использовать их, не могу допереть как. вот и нуен совет по настройке и использованию плагинов.
  12. В общем поставил себе нотпад++ и пока кроме подстветки синтаксиса, покопался в настройках загрузил плагины для хтмл и текстFX. В настройках текстFX выставил автоматически закрывать скобки и теги, но что-то не пойму как это действует, пишу тег и что дальше делать в душе не парю. На счет сниппетов тоже проблема в использовании. Горячие клавиши основные не мешало бы тоже узнать. Подскажите пожалуйста кто уже действительно парит в нем. и кто использует E-texteditor? говорят что альтернатива маковскому текстмейту, но что-то я поставил, там даже плагины подключить, испытать гемора надо на пару кг.
  13. приведу цитату одного человека: Design is not just what it looks like and feels like. Design is how it works. отстутствие дизайна - тоже дизайн. так что если ты дизайном не занимаешься, можешь просто голый хтмл закинуть на сервер и все, тебе ли не пофик как он выглядит, если у тебя другая цель? Кирсанов в книге, тоже приводит ссылку на сайт норвежского прогера:тык
  14. еще на стадии создания макета уткнулся в то, что не могу понять какое разрешение должно быть у макета? для любой верстки, какая резиновой, какая для фиксированой.
  15. а почему слева находится? opera 11.10
  16. как это не тот? раздел новичковый, и вопрос вполне себе новичковый.
  17. подскажите пожалуйста по каким принципам производится резка psd-шаблона? какие части необходимо вырезать и желательно объяснить почему. потому что сколько не искал, везде уроками показано КАК резать, но принципа, почему мы режем это, нигде нет, вот и интересуюсь.
  18. maxsnw

    код+псд=?

    это мне и нужно было узнать только теперь вопрос, составляющие шаблона должны быть каждый по отдельности или же просто каждый элемент на отдельном слое?
  19. maxsnw

    код+псд=?

    до меня все никак не может дойти, сколько я не старался донести до себя следующую информацию: как происходит совмещение кода страницы и непосредственно шаблона ( псдшка ), с помощью каких программ, и как это называется в общем ? тухлые помидоры оставьте при себе, сами такими были
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy