Шаблон и Разрешение экрана

[LADYX 90]

Здравствуйте всем!

Прошу прощения за, может быть, глупую тему, однако интересует следующее:

Очень часто встречаются сайты, где шаблон в стиле (.css) по минимальной ширине указывается 980px (min-width: 980px;). Не могу понять, почему именно 980, а не, скажем, 1000 или же все 1024, ведь размер экрана 1024х768.

И еще такой вопрос:

Обычно тексты новостей заключают в параграф (<p>). Между параграфами конечно же есть отступы (отбивка). Да, я читал всевозможные учебники по HTML, и тем не менее интересует, как же все таки более правильно прописать стиль (и как вы это делаете) - отступы по вертикали между параграфами.

[Lomot 134]

Очень часто встречаются сайты, где шаблон в стиле (.css) по минимальной ширине указывается 980px (min-width: 980px;). Не могу понять, почему именно 980, а не, скажем, 1000 или же все 1024, ведь размер экрана 1024х768.

1024 это размер всего окна, поэтому вычитаем границу окна браузера и скролл и получаем что то вроде 980

Обычно тексты новостей заключают в параграф (

). Между параграфами конечно же есть отступы (отбивка). Да, я читал всевозможные учебники по HTML, и тем не менее интересует, как же все таки более правильно прописать стиль (и как вы это делаете) - отступы по вертикали между параграфами.

p{margin: 10px 0;}

Вертикальные отступы "схлопываются" поэтому получим 10px между параграфами.

[Critical Error 155]

Прошу прощения за, может быть, глупую тему, однако интересует следующее:

Почему вы извенятесь? Это как в анекдоте:

Профессор на паре к студентам:

- Товарищи, не тесняйтесь, задавайте вопросы, если не понятно. Не бывает глупых вопросов, бывают глупые ответы.

Кто-то с последних парт:

- Профессор, если я одну ногу поставлю на одну рельсу, а вторую - на другую рельсу, то я поеду как трамвай?

...

У вас есть полное право задавать вопросы, ни к чему занижать свою самооценку. Вы здесь, Вы клиент, а это значит что у Вас уже уровень IQ не ниже значения комнатной температуры!

По теме: Указать полное разрешение экрана можно, но тогда будет появляться горизонтальный скролл, прокрутка по горизонтали, так как ширина сайта будет превышать ширину окна. Это если Вы будете указывать фиксированную ширину под ширину экрана.

Обычно это убивают так

html, body { overflow-x: hidden; }

тогда скролл, горизонтальный, вообще появлятсья не будет. А куда проще можно указать контенеру, выводящему дизайн ширину в 100%, а макс. размер можно указать в пикселах.

.wrapper { width: 100%; max-width: 1400px; }[/code]

Если у человека, просматривающего сайт, монитор шириной менее 1440 пикселей (по стандартам), то дизайн сайта будет растягивать по всей ширине окна браузера. Если 1440 и более то он растянется до максимально заданной ширины в 1400 пикселей.

И еще такой вопрос: Обычно тексты новостей заключают в параграф (

). Между параграфами конечно же есть отступы (отбивка). Да, я читал всевозможные учебники по HTML, и тем не менее интересует, как же все таки более правильно прописать стиль (и как вы это делаете) - отступы по вертикали между параграфами.

[b]Lomot[/b] Вам написал

Изменено 4 октября 2011 пользователем Critical Error

[LADYX 90]

1024 это размер всего окна, поэтому вычитаем границу окна браузера и скролл и получаем что то вроде 980

p{margin: 10px 0;} Вертикальные отступы "схлопываются" поэтому получим 10px между параграфами.

Теперь все понятно, спасибо.

Почему вы извенятесь? Это как в анекдоте:

Ну да, получается анекдот, это правда. Просто я занимаюсь сайтостроением с 2003 года, а до сих пор есть моменты, и причем самые простые, не понимаю. А друзей или просто знакомых, кто также занимается созданием сайтов, у меня нет, чтобы как-то поделиться опытом или что-то узнать. Поэтому я самоучка и беру все исключительно из интернета. Вот и приходится задавать такие глупые вопросы, имея уже такой опыт за плечами.

По теме: Указать полное разрешение экрана можно, но тогда будет появляться горизонтальный скролл, прокрутка по горизонтали, так как ширина сайта будет превышать ширину окна. Это если Вы будете указывать фиксированную ширину под ширину экрана. Обычно это убивают так html, body { overflow-x: hidden; } тогда скролл, горизонтальный, вообще появлятсья не будет. А куда проще можно указать контенеру, выводящему дизайн ширину в 100%, а макс. размер можно указать в пикселах. .wrapper { width: 100%; max-width: 1400px; } Если у человека, просматривающего сайт, монитор шириной менее 1440 пикселей (по стандартам), то дизайн сайта будет растягивать по всей ширине окна браузера. Если 1440 и более то он растянется до максимально заданной ширины в 1400 пикселей.

Теперь все ясно.

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

[LADYX 90]

Здравствуйте!

С вашего позволения задам еще один вопрос, меня он последнее время очень интересует.

Очень интересно, как осуществляется такое чудо. Обратите внимание на пример woman.ru - там общий фон просто белый (на других сайтах бывает и другой, не только bg, но и background). А вот сверху наложен другой фон (рекламный) - картинка. Как же все это осуществляется? И какова размера должна быть картинка? И вот так вот бывает смотришь, когда этой рекламы на сайте нет, то весь контент вместе с главным меню поднят к верху экрана, а когда появляется реклама (рекламная картинка) то сразу весь контент вместе с верхним меню сразу же спускается ниже, чтобы хорошо было видно эту рекламную картинку над всем контентом. Как же все это осуществляется?

Да, кстати, и эта рекламная картинка еще каким-то образом кликабельна. Вообще не пойму, как это получается, что этот общий фон может быть кликабельным?

[Critical Error 155]

Это не фон, а просто в блок вставлен код рекламы.

Код блока:

<noindex>

<div class="banner">

<!--  AdRiver code START. Type:poster Site: Woman PZ: 0 BN: 0 -->

<script language="javascript" type="text/javascript">  

function adriverPoster(L){

	if(typeof(ar_cn)=="undefined")ar_cn=1;

	var W=window,D=document,E=D.documentElement,T=0,N=ar_cn,P=0,C=D.compatMode=="CSS1Compat",

		X='<scr'+'ipt type="text/javascript">var ar_bnum='+N+';setTimeout(function(e){if(!self.CgiHref){document.close();e=parent.document.getElementById("ar_container_"+ar_bnum);e.parentNode.removeChild(e)}},3000);',

		Y='<\/sc'+'ript><sc'+'ript type="text/javascript" src="'+L+'&tail256='+escape(D.referrer||'unknown')+'&rnd='+Math.round(Math.random()*999999999)+'"><\/sc'+'ript>';

	function G(){if(T++<100){var o=D.getElementById('ar_container_'+N);if(o){try{var d=o.contentDocument||(W.ActiveXObject&&W.frames['ar_container_'+N].document);if(d){d.write(X+Y)}else setTimeout(arguments.callee,100)}catch(e){try{o.src = "javascript:{document.write('"+X+'document.domain="'+D.domain+'";'+Y+"')}";return}catch(E){}}}else setTimeout(arguments.callee,100)}}

	function A(e,t,f){if(e.addEventListener)e.addEventListener(t,f,false);else if(e.attachEvent)e.attachEvent('on'+t,f)}

	function R(e,t,f){if(e.removeEventListener)e.removeEventListener(t,f,false);else if(e.detachEvent)e.detachEvent('on'+t,f)}

	function S(){var ch=self.innerHeight||C&&E.clientHeight||D.body.clientHeight,st=self.pageYOffset||C&&E.scrollTop||D.body.scrollTop;if(P>=st&&st+ch>=P){R(W,'scroll',S);G()}}

	A(W,'load',function(){var o=D.getElementById('ad_ph_'+N);if(o){while(o.offsetParent){P+=o.offsetTop;o=o.offsetParent}A(W,'scroll',S);S()}});

	D.write('<div style="position:absolute;visibility:hidden;height:0px;"><iframe id="ar_container_'+N+'" width=1 height=1 marginwidth=0 marginheight=0 scrolling=no frameborder=0><\/iframe><\/div><div id="ad_ph_'+N+'"><\/div>');

	ar_cn++;

}

adriverPoster("http://ad.adriver.ru/cgi-bin/erle.cgi?sid=90407&target=blank&bt=49&pz=0");

//--></script>

<div style="position:absolute;visibility:hidden;height:0px;">

<iframe id="ar_container_1" width="1" height="1" marginwidth="0" marginheight="0" scrolling="no" frameborder="0"/>

</div>

<div id="ad_ph_1"/>

<!--  AdRiver code END  -->

<script language="JavaScript">  

var N = 2;

var ar_bn1= Math.floor(Math.random()*N+1);

//-->

</script>

<div id="adriver_banner_top" title="">

<div style="position: relative; width: 980px; height: 145px">

<embed type="application/x-shockwave-flash" width="100%" height="100%" quality="best" wmode="opaque" play="true" loop="true" menu="false" allowscriptaccess="always" src="http://colo1.adriver.ru/images/0001347/0001347585/0/1.swf" flashvars="link1=http%3A//ad.adriver.ru/cgi-bin/click.cgi%3Fsid%3D90407%26ad%3D294021%26bid%3D1347585%26bt%3D52%26bn%3D2%26pz%3D0%26ref%3Dhttp%3A%252f%252fwww.woman.ru%252f%26custom%3D%26rleurl%3D&ar_ph=adriver_banner_top&target=_blank&ar_comppath=http%3A//colo1.adriver.ru/images/0001347/0001347585/0/&ar_pass=&ar_bid=1347585&ar_bt=52&ar_ad=294021&ar_nid=0&ar_rnd=7504617&ar_ntype=0&ar_sliceid=885651&ar_sid=90407"/>

</div>

</div>

</div>

</noindex>

[LADYX 90]

Critical Error, т.е. этот код можно использовать, чтобы у себя на сайте сделать такую красоту?

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

[- Den - 32]

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

Если да, то вот пример

<a href=""><div class="класс с фоном для блока">содержание блока, если нужно</div></a>

[Critical Error 155]

- Den -,

Тег A - строчный элемент, а DIV - блочный. Будет нарушена вложенность тегов. Это даже, просто напросто, не эстетично смотрится.

Хотя для тега A можно прописать class="class" и добавить свойство display: block; в css. Но все равно, это не смотрится. Я такую вложенность не делал бы.

К тому же есть location.href, который можно использовать для DIV через обработчик onClick

<div onclick="location.href='http://google.com/'">содержимое блока</div>[/CODE]

Изменено 7 октября 2011 пользователем Critical Error

[LADYX 90]

Ребята, что-то я совсем ничего не понял, как мне это осуществить, что называется темный лес.

[Critical Error 155]

Достаточно сделать код

<div id="ny_banner">


  <a class="banner_link" href="ссылка на категорию">

  Сюда код вашей "красоты"

  </a>

</div>

css стили

a.banner_link { display: block; height: 250px; width: 900px; }[/code]

высота и ширина как пример.

[LADYX 90]

Critical Error, я так понимаю, этот код необходимо вставить сразу после <body>, до начала всего контента, верно? Или же после дива, отвечающего за общий фон сайта (background)?

А в css прописать еще и нашу картинку, т.е. так:

a.banner_link { display: block; height: 250px; width: 900px; background: url("../images/bg.jpg") }

правильно я понимаю?

[LADYX 90]

Здравствуйте всем!

Интересен такой вопрос. Часто замечаешь, что на сайтах затемняют кнопки-счетчики, и при наведении на любую кнопку, она приобретает свой естественный цвет. Как это делается, я знаю. А вот что интересно, как сделать, чтобы кнопки не просто затемнялись, а все кнопки были одного, скажем, серого цвета? Пример можно увидеть здесь http://smart-links.ru/page/sitelist/

Буду благодарен за разгадку этой тайны, по крайней мере для меня.

[WWW.ZEOS.IN 1 161]

До наведения мыши отображается чёрно-белая картинка, а при наведении мыши отображается цветная

Пример:

1) http://smart-links.ru/static/logos/KM_wb.jpg

2) http://smart-links.ru/static/logos/KM.jpg

[LADYX 90]

До наведения мыши отображается чёрно-белая картинка, а при наведении мыши отображается цветная Пример: 1) http://smart-links.r...logos/KM_wb.jpg 2) http://smart-links.r...ic/logos/KM.jpg

WWW.ZEOS.IN, ах, вот оно что, теперь все понятно, спасибо.