CharlieCruz
-
Posts
10 -
Joined
-
Last visited
CharlieCruz's Achievements
Explorer (1/14)
0
Reputation
-
У вас элементы навигации используют float:left; и поток после навигации не очищается, поэтому галерея уезжает под последний пункт меню. После float элементов нужно очищать поток. Это можно сделать следующим образом (это один из возможных вариантов): #menu:after { content:""; display:block; clear:both; } Ну и по поводу неправильной вложенности тега <nav> уже написали выше.
-
You are welcome )) Чтобы растянуть слайдер на всю высоту можно всем элементам начиная с html задать height:100%. Но в таком случае если в слайдах контента будет больше чем высота окна браузера - контент будет обрезаться. В общем нужно смотреть на конкретный случай. Может это и подойдет. Можно высоту слайдов проставлять и через js. <style type="text/css"> html {height:100%;} body { height:100%; margin:0; } .slideshow { position:relative; width:100%; height:100%; overflow:hidden; } .gallery { width:10000%; height:100%; margin:0; padding:0; list-style:none; overflow:hidden; } .gallery li { float:left; height:100%; width:1%; font:60px/500px Arial, Helvetica, sans-serif; text-align:center; background:#fff; } .gallery .color-1 {background:#0f0;} .gallery .color-2 {background:#0ff;} .gallery .color-3 {background:#09c;} .gallery .color-4 {background:#00f;} .gallery .color-5 {background:#90f;} </style>
-
Чтобы сдвигать слайды нужно менять значение margin-left <ul class="gallery" style="margin-left:-100%;"> margin-left:-200% - даст нам 3-й слайд, margin-left:-700% - 8-й слайд и т.д. В данном примере может быть не больше 100 слайдов. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Project title</title> <style type="text/css"> body { margin:0; } .slideshow { position:relative; width:100%; margin:100px 0; border:solid #000; border-width:10px 0; overflow:hidden; } .gallery { width:10000%; margin:0; padding:0; list-style:none; overflow:hidden; } .gallery li { float:left; width:1%; height:300px; font:60px/300px Arial, Helvetica, sans-serif; text-align:center; background:#fff; } .gallery .color-1 {background:#0f0;} .gallery .color-2 {background:#0ff;} .gallery .color-3 {background:#09c;} .gallery .color-4 {background:#00f;} .gallery .color-5 {background:#90f;} </style> </head> <body> <div class="slideshow"> <ul class="gallery" style="margin-left:-100%;"> <li class="color-1">slide 1</li> <li class="color-2">slide 2</li> <li class="color-3">slide 3</li> <li class="color-4">slide 4</li> <li class="color-5">slide 5</li> <li class="color-1">slide 6</li> <li class="color-2">slide 7</li> <li class="color-3">slide 8</li> <li class="color-4">slide 9</li> <li class="color-5">slide 10</li> </ul> </div> </body> </html>
-
Нужно в конце url (в атрибуте src="") для видео добавить ?wmode=transparent Например есть код для iframe в котором указан следующий url src="http://www.youtube.com/embed/Dv9rQjEUYxo" после добавления ?wmode=transparent получим src="http://www.youtube.com/embed/Dv9rQjEUYxo?wmode=transparent"
-
Странный косяк( при увеличении или уменьшении сайта)
CharlieCruz replied to doox911's question in HTML Coding
На сколько я понял проблема которая тут описана появляется при зуме/масштабирование страницы. То есть когда мы меняем масштаб при помощи Ctrl+(колесико мыши)? Если я все правильно понял, то это не баг! Точнее это не имеет никакого отношения к css или стандартам w3c. Это такая фича самого браузера. И при уменьшении масштаба браузеру нужно как то поместить/сжать страницу, которая по ширине скажем 1000px (которая указаны в css) в физические 930px (пример) и при этом нужно это сделать аккуратно, нужно сохранить пропорции всех элементов. Но алгоритмы реализации такого функционала в разных браузерах могут быть разные. Возможно в Chrome другой алгоритм округления дробных значений и поэтому появляются отступы. Лично я не считаю это багом. Ну если этот отступ очень мешает - сделайте навигацию через {position:absolute; left:0; bottom:0;} и уберите margin:30px 0; -
Chrome: position:relative/absolute и border-radius
CharlieCruz replied to gibigate's question in HTML Coding
Ну на сколько я вижу проблема только с первым пунктом навигации (на ховер) #slider .nav ul li a:hover Продублируйте левый нижний border-radius для первого пункта навигации #slider .nav a:first-child {border-radius: 0 0 0 10px;} -
Рендеринг шрифта зависит от ОС и от конкретного браузера. Поэтому в разных браузерах и в разных ОС ширина пунктов навигации будет отличатся. Если надпись «о компании» в Firefox будет шириной в 73 px то в ie9 возможно ширина будет 74px. Если каждый пункт меню будет шире хотя бы на 1px то навигация из 7 пунктов получится на 7px шире. Об этом можно почитать тут Type rendering on the web. Это цикл из 7 статей и в самом начале поста есть навигация по всем частям: "This is our first post in an ongoing series about type rendering on the web. Read the second, third, fourth, fifth, sixth, and final posts." P.S. С вероятностью 99.9% такая навигация на Mac OS в safari, chrome и firefox тоже б расползлась.
-
Привет. css3 transitions не работает со свойством display. Вот список свойств для которых могут применяться transitions Попробуйте вместо display:none; -> display:block; использовать height:0; height:100px;
-
Если нужна поддержка разрешения < 800x600 поменяйте значение min-width на нужное (например 600px) или min-width можно убрать совсем и тогда горизонтальный скролл не появится при любом разрешении. Принцип работы моего примера такой же как и в примере который дали вы. "Например способом, уведённым у самизнаетекого:" честно говоря не знаю чей это способ но сделан он как то задом наперед. В вашем примере проблема заключается в позиционировании справа налево #main_toleft {position:relative; right:50%; float:right;} просто в ie6-7 такой блок будет позиционироватся не от правой границы блока #main, а от условной границы где заканчивается блок #main_toleft ширина которого в вашем случае 1600px. Возможно это не совсем понятное и правильное объяснение но на словах сложно пояснить почему не работает в ie. Я же предложил вариант где блок позиционируется слева направо. При этом идея в обоих примерах одинаковая.
-
Немного переделал ваш код: <!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>Project title</title> <style type="text/css"> body { margin:0; min-width:900px; } #main { position:relative; width:100%; overflow:hidden; } #main_toleft { position:relative; left:50%; } #main_toright { position:relative; width:1600px; margin-left:-800px; } </style> </head> <body> <div id="main"> <div id="main_toleft"> <div id="main_toright"> <img src="http://static.tumblr.com/hhsii55/5XQlqjada/nature7.jpg" width="1600" height="600" alt="" /> </div> </div> </div> </body> </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>Project title</title> <style type="text/css"> body { margin:0; min-width:900px; } #main { position:relative; width:100%; overflow:hidden; } .main-holder { position:relative; left:50%; width:1600px; margin-left:-800px; } </style> </head> <body> <div id="main"> <div class="main-holder"> <img src="http://static.tumblr.com/hhsii55/5XQlqjada/nature7.jpg" width="1600" height="600" alt="" /> </div> </div> </body> </html>