Syndicate221
-
Posts
8 -
Joined
-
Last visited
Syndicate221's Achievements
Explorer (1/14)
0
Reputation
-
Подскажите, как корректно отобразить вкладку в Фейсбуке
Syndicate221 posted a question in HTML Coding
Здравствуйте! Помогите пожалуйста понять, что я делаю не так. Есть приложение называется Static HTML, в которое можно вставлять HTML код. Есть шаблон, который специально предназначен для такой вкладки, т.к. размеры подогнаны под 520 на 800 пикселей. Style.css и изображения храняться на гугл сайтс (т.к. в фейсбуке требуется HTTPS соединение) вставляю в приложение, HTML код файла index.html в котором прописаны ссылки на стайл ксс и ссылки на изображение. Нажимаю просмотреть и...в файрфоксе отображается корректно, а в опере, хроме, ослике все расползается. Не знаю в чем причина. подскажите. Это же участь постигла и слайдер, который я пытаюсь вставить здесь Вот ссылка на вкладку которая отображает шаблон. вот сам код: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Business Group | We Care About Your Business</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link rel="stylesheet" href="https://sites.google.com/site/biznesshablon/style.css" type="text/css" media="screen"/> <script type="text/javascript" src="https://sites.google.com/site/biznesshablon/jquery.min.js"></script> </head> <body> <div id="wrap"> <div id="top_wrap"> <div id="logo"><a href="index.html"><img src="https://sites.google.com/site/biznesshablon/logo.png" width="224" height="46" border="0" alt="" /></a></div> <div id="like"><img src="https://sites.google.com/site/biznesshablon/like.png" width="58" height="37" border="0" alt="" /></div> <div class="clear"></div> </div> <div id="cc_menu" class="cc_menu"> <div class="cc_item" style="z-index:4;"> <img src="https://sites.google.com/site/biznesshablon/1.jpg" alt="image" style="top:0px" /> <span class="cc_title">About Us</span> <div class="cc_submenu"> <ul style="height:151px"> <li class="cc_content_1">About Us</li> </ul> </div> </div> <div class="cc_item service" style="z-index:3"> <img src="https://sites.google.com/site/biznesshablon/2.jpg" alt="image" /> <span class="cc_title">Services</span> <div class="cc_submenu"> <ul> <li class="cc_content_2">Services</li> </ul> </div> </div> <div class="cc_item products" style="z-index:2;"> <img src="https://sites.google.com/site/biznesshablon/3.jpg" alt="image" /> <span class="cc_title">Products</span> <div class="cc_submenu"> <ul> <li class="cc_content_3">Products</li> </ul> </div> </div> <div class="cc_item contacts" style="z-index:1;"> <img src="https://sites.google.com/site/biznesshablon/4.jpg" alt="image" /> <span class="cc_title">Contacts</span> <div class="cc_submenu"> <ul> <li class="cc_content_4">Contacts</li> </ul> </div> </div> <div id="cc_content" class="cc_content"> <span id="cc_back" class="cc_back"><< Go back</span> <div class="cc_content_1"> <h1>About Us</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet nisi. Maecenas augue metus, vestibulum sed tristique vel, ullamcorper quis quam. Suspendisse ligula nulla, adipiscing eu vestibulum sit amet, tristique sit amet nisi.</p> <p>Curabitur gravida imperdiet facilisis. Vestibulum ullamcorper bibendum orci nec tempus. Curabitur suscipit, orci at interdum vehicula, sem felis ultricies orci, vel fermentum quam tortor ac nibh. Nunc felis leo, pharetra vitae porta ac, volutpat a mauris. Curabitur aliquam feugiat ligula non ornare.</p> <p>Curabitur metus metus, mollis ac sollicitudin sed, hendrerit ut augue. Phasellus mi leo, lobortis et malesuada sit amet, tempor vitae est.</p> <p>Maecenas augue metus, vestibulum sed tristique vel, ullamcorper quis quam. Suspendisse ligula nulla, adipiscing eu vestibulum sit amet, tristique sit amet nisi.</p> <p>Gravida imperdiet facilisis. Vestibulum ullamcorper bibendum orci nec tempus. Curabitur suscipit, orci at interdum vehCurabitur aliquam feugiat ligula non ornare. Curabitur metus metus, mollis ac sollicitudin sed, hendrerit ut augue. Phasellus mi leo, lobortis et malesuada sit amet, tempor vitae est</p> </div> <div class="cc_content_2"> <h1 style="border-bottom:1px #bced21 solid">services</h1> <p>Consectetur adipiscing elit. Fusce sit amet laoreet nisi. Maecenas augue metus, vestibulum sed tristique vel, ullamcorper quis quam. Suspendisse ligula nulla, adipiscing eu vestibulum sit amet, tristique sit amet nisi. </p> <ul style="padding:14px 0 24px 0"> <li>>> Curabitur gravida imperdiet facilisis</li> <li>>> Vestibulum ullamcorper bibendum orci nec</li> <li>>> Tempusorci at interdum vehicula</li> <li>>> Sem felis ultricies orci, vel fermentum quam</li> <li>>> Tortor ac nibpharetra vitae porta acolutpat</li> <li>>> Maurisurabitur aliquam feugiat ligula non ornare</li> </ul> <p>Curabitur metus metus, mollis ac sollicitudin sed, hendrerit ut augue. Phasellus mi leo, lobortis et malesuada sit amet, tempor vitae est. Maecenas augue metus, vestibulum sed tristique vel, ullamcorper quis quam. Suspendisse ligula nulla, adipiscing eu vestibulum sit amet, tristique sit amet nisi.</p> <p>Gravida imperdiet facilisis. Vestibulum ullamcorper bibendum orci nec tempus. Curabitur suscipit, orci at interdum vehCurabitur aliquam feugiat ligula non ornare. Curabitur metus metus, mollis ac sollicitudin sed, hendrerit ut augue. Phasellus mi leo, lobortis et malesuada sit amet, tempor vitae est.</p> </div> <div class="cc_content_3"> <h1 style="border-bottom:1px #ffaa13 solid">products</h1> <p>Consectetur adipiscing elit. Fusce sit amet laoreet nisi. Maecenas augue metus, vestibulum sed tristique vel, ullamcorper quis quam. Suspendisse ligula nulla, adipiscing eu vestibulum sit amet, tristique sit amet nisi.</p> <ul style="padding-bottom:9px; color:#ffaa13"> <li>>> Sem felis ultricies orci, vel fermentum quam</li> <li>>> Tortor ac nibpharetra vitae porta acolutpat</li> <li>>> Maurisurabitur aliquam feugiat ligula non ornare</li> </ul> <p>Curabitur metus metus, mollis ac sollicitudin sed, hendrerit ut augue. Phasellus mi leo, lobortis et malesuada sit amet, tempor vitae est. Maecenas augue metus, vestibulum sed tristique vel, ullamcorper quis quam. Suspendisse ligula nulla, adipiscing eu vestibulum sit amet, tristique sit amet nisi. Gravida imperdiet facilisis. Vestibulum ullamcorper bibendum orci nec tempus. Curabitur suscipit, orci at interdum vehCurabitur aliquam feugiat ligula non ornare. Curabitur metus metus, mollis ac sollicitudin sed, hendrerit ut augue. Phasellus mi leo, lobortis et malesuada sit amet, tempor vitae est. Suspendisse ligula nulla, adipiscing eu vestibulum sit amet, tristique sit amet nisi.</p> <ul style="color:#ffaa13"> <li>>> Felis ultricies orci, vel fermentum quam</li> <li>>> Tortor ac nibpharetra vitae porta acolutpat </li> <li>>> Maurisurabitur aliquam feugiat ligula non</li> </ul> </div> <div class="cc_content_4" style="padding-right:10px"> <h1 style="border-bottom:1px #e71e1e solid">Contacts</h1> <p>Fusce sit amet laoreet nisi. Maecenas augue metus, vestibulum sed tristique vel, ullamcorper quis quam. Suspendisse ligula.</p> <img src="https://sites.google.com/site/biznesshablon/map.jpg" width="349" height="172" alt="" style="padding:5px; background:#FFFFFF; border:1px #d4d4d4 solid" /> <div id="contacts_info" style="display:block"> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td height="122" width="169"> 9087 Marmora Road,<br /> Glasgow, D04 89GR.<br /> Tel.: +1 989 585 5895<br /> FAX: +1 533 566 8763<br /> <a href="mailto:mail@demolink.org">mail@demolink.org</a> </td> <td> 9087 Marmora Road,<br /> Glasgow, D04 89GR.<br /> Tel.: +1 989 585 5895<br /> FAX: +1 533 566 8763<br /> <a href="mailto:mail@demolink.org">mail@demolink.org</a> </td> </tr> </table> </div> <p style="padding-right:15px">Vestibulum ullamcorper bibendum orci nec tempus. Curabitur suscipit, orci at interdum vehCurabitur aliquam feugiat ligula non ornare. Curabitur metus metus, mollis ac sollicitudin sed, hendrerit ut augue. Phasellus mi leo, lobortis et malesuada sit amet, </p> </div> </div> </div> <div id="footer_text">© 2011 Business Group<span>Design by <a href="http://www.facebooktemplates2u.com/" target="_blank">Facebook Templates</a></span></div> <div id="social"> <ul> <li><a href="#"><img src="https://sites.google.com/site/biznesshablon/icon1.png" width="22" height="22" alt="" /></a></li> <li><a href="#"><img src="https://sites.google.com/site/biznesshablon/icon2.png" width="22" height="22" alt="" /></a></li> <li><a href="#"><img src="https://sites.google.com/site/biznesshablon/icon3.png" width="22" height="22" alt="" /></a></li> <li><a href="#"><img src="https://sites.google.com/site/biznesshablon/icon4.png" width="22" height="22" alt="" /></a></li> </ul> </div> <div class="clear"></div> <script type="text/javascript"> $(function() { //all the menu items var $items = $('#cc_menu .cc_item'); //number of menu items var cnt_items = $items.length; //if menu is expanded then folded is true var folded = false; //timeout to trigger the mouseenter event on the menu items var menu_time; /** bind the mouseenter, mouseleave to each item: - shows / hides image and submenu bind the click event to the list elements (submenu): - hides all items except the clicked one, and shows the content for that item */ $items.unbind('mouseenter') .bind('mouseenter',m_enter) .unbind('mouseleave') .bind('mouseleave',m_leave) .find('.cc_submenu > ul > li') .bind('click',function(){ var $li_e = $(this); //if the menu is already folded, //just replace the content if(folded){ hideContent(); showContent($li_e.attr('class')); } else //fold and show the content fold($li_e); }); /** mouseenter function for the items the timeout is used to prevent this event to trigger if the user moves the mouse with a considerable speed through the menu items */ function m_enter(){ var $this = $(this); clearTimeout(menu_time); menu_time = setTimeout(function(){ //img $this.find('img').stop().animate({'top':'0px'},400); //cc_submenu ul $this.find('.cc_submenu > ul').stop().animate({'height':'151px'},400); },200); } //mouseleave function for the items function m_leave(){ var $this = $(this); clearTimeout(menu_time); //img $this.find('img').stop().animate({'top':'-700px'},400); //cc_submenu ul $this.find('.cc_submenu > ul').stop().animate({'height':'0px'},400); } //back to menu button - unfolds the menu $('#cc_back').bind('click',unfold); /** hides all the menu items except the clicked one after that, the content is shown */ function fold($li_e){ var $item = $li_e.closest('.cc_item'); var d = 100; var step = 0; $items.unbind('mouseenter mouseleave'); $items.not($item).each(function(){ var $item = $(this); $item.stop().animate({ 'marginLeft':'-130px' },d += 200,function(){ ++step; if(step == cnt_items-1){ folded = true; showContent($li_e.attr('class')); } }); }); } /** shows all the menu items also hides any item's image / submenu that might be displayed */ function unfold(){ $('#cc_content').stop().animate({'left':'-140px'},600,function(){ var d = 100; var step = 0; $items.each(function(){ var $item = $(this); $item.find('img') .stop() .animate({'top':'-700px'},200) .andSelf() .find('.cc_submenu > ul') .stop() .animate({'height':'0px'},200); $item.stop().animate({ 'marginLeft':'0px' },d += 200,function(){ ++step; if(step == cnt_items-1){ folded = false; $items.unbind('mouseenter') .bind('mouseenter',m_enter) .unbind('mouseleave') .bind('mouseleave',m_leave); hideContent(); } }); }); }); } //function to show the content function showContent(idx){ $('#cc_content').stop().animate({'left':'130px'},200,function(){ $(this).find('.'+idx).fadeIn(); }); } //function to hide the content function hideContent(){ $('#cc_content').find('div').hide(); } }); </script> </div> </div> </body> </html> -
Спасибо большое за помощь. Я сделал с помощью таблиц. Получилосьвот так
-
Может нужно какую то другую конструкцию в начале прописать? Чтобы для всех браузеров правильно отображалось?
-
Спасибо еще раз! Неоценимая помощь. У меня получилось вот так: https://www.facebook.com/pages/TEST/106825712762336 Но единственное, что в опере и интернет эксплорере все равно они в один ряд лезут. Не пойму в чем дело, уже и так и так делал. Весь день уже торчу за компом. . В файрфоксе все отлично.
-
Спасибо большое!! Очень рад, что есть такие добрые люди. Только вот никак не могу разобраться со стилями. В ссылке, которую Вы мне скинули я скопировал стили и создав отдельный файл Style.css залил на хостинг. создал Хтмл файл, скопировал туда див блоки и соединил с файлом стиля методом: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="https://sites.google.com/site/dimkrivov/styles.css"> </head> Но только все блоки выстроились в один ряд один под другим. В том редакторе, ссылку на который Вы мне дали, если убрать галочку с Normalized CSS, то картина такая же. Если поставить, то все отлично отображается.
-
Получается, что так. Верстка это же создание шаблона страницы? Вы могли бы помочь? Я был бы очень благодарен. И в двойне, если бы Вы рассказали, что к чему. В принципе основы я знаю, мне главное немного подсказать.
-
Да какой там)Там никакого реферала нет, простая ссылка на приложение. Вы всегда можете нажать больше не нравится. Просто это особенность такая. Я создавать буду такую же вкладку как и у ред булла, но на другой странице. У ред була мне оно очень понравилось (взял как пример), вот только не знаю как сделать такую вот страничку. очень нужна помощь. Пожалуйста.
-
Здравствуйте! Я не очень разбираюсь в ХТМЛ, но очень хочется. Чтоб можно было сделать вот такую вот страничку размером 520 на 570: Я не знаю как сделать такой 8-ми блочный макет + чтобы при нажатии на картинку всплывал окошко с ютубовским плеером. Полная ссылка на страницу с примером: https://www.facebook.com/redbull?ref=ts&sk=app_113185218710496 Помогите пожалуйста. Буду ну очень благодарен.Мне очень интересно, как это сделать.