Ru-Board.club
← Вернуться в раздел «Web-программирование»

» Вопросы по CSS

Автор: Djeak
Дата сообщения: 30.10.2010 20:52
Интересная мысль. Для сужения бразузера тогда применить свойства min-height и min-widht?
Еще один вопросик:
Есть такая конструкция:

Код: <div id="bottom">
<div id="bot_left">
</div>
<div id="bot_right">
</div>
<div id="bot_cen">CENTER
</div>
</div>
Автор: The_S
Дата сообщения: 31.10.2010 02:34
Djeak
1. http://www.tinyfluidgrid.com/
2. Должен заливаться.
Автор: Djeak
Дата сообщения: 31.10.2010 17:43
Не заливается, если я нечего не вставляю в див. А если вставляю только, например, "Надпись", то заливается по ее ширине.

Добавлено:
evoroz


Цитата:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>test</title>
<style type="text/css">
img {
height: 100%;
width: 100%;
}
#bgn {
z-index: 1;
}
#up {
z-index: 3;
position: absolute;
width: 300px;
}
body {
background-color: #FFF;
margin: 0px;
}
</style>
</head>
<body>
<div id="up">
Hello
</div>
<div id="bgn">
<img src="99116058.jpg" width="1000" height="1107" />
</div>
</body>


А как сделать, чтобы появлялась вертикальная полоса прокрутки при сужение браузера?
Автор: The_S
Дата сообщения: 01.11.2010 15:42
Djeak
Какого размера картинка images/bot_cen.png по высоте? если она менее 200px то естественно весь футер она не заполнит, т.к. у тебя там указано #bottom {height:200px;}
Автор: Djeak
Дата сообщения: 02.11.2010 10:07
The_S
С этим разобрался, спасибо, а вот возможно ли такое:

Код: <body>
<div id="body">
<div id="wrapper">
<div id="top">
<div id="top_left"></div>
<div id="top_right"></div>
<div id="topcen"></div>
</div>
<div id="center">
CENTER
</div>
</div>
<div id="bottom">
<div id="bot_left"></div>
<div id="bot_right"></div>
<div id="botcen"></div>

</div>
</div>
</body>
Автор: klimusu
Дата сообщения: 08.11.2010 20:35
как у <input type="file"> изменить текст на кнопке, не используя картинки?
Автор: evoroz
Дата сообщения: 08.11.2010 21:58
<input type="file" value="Текст на кнопке">
Автор: Djeak
Дата сообщения: 10.11.2010 14:26
Здравствуйте.
Есть ли возможность в CSS поворачивать картинку на определенный угол?
Или лучше вырезать из фотошопа уже повернутую картинку?
Вот о чем речь:
Автор: poyt
Дата сообщения: 10.11.2010 14:39
Djeak

Цитата:
Есть ли возможность в CSS поворачивать картинку на определенный угол?
Или лучше вырезать из фотошопа уже повернутую картинку?

Вырезать.

Поворот не будет поддерживаться вплоть до ИЕ8 включительно. Будет ли поворачиваться в 9-ом - неизвестно.
А так, сейчас поворот реализуется на веб-кит и хтмл5.
Только у Оперы, Фаерфокса, Хрома и Сафари, достаточно разное представление о том, как это сделать. В результате делают по-своему.
Автор: Saloed88
Дата сообщения: 10.11.2010 17:48

Приветствую народ у меян аткой вопрос решил сайт сверстать на div-ах резиновый всё норм , но когда сайс сварачиваеш в квадратик или уменьшаеш в опере его (ctrl+ scroll) то он начинает рушится, я вычетал что вёс надо в процентах делать но он у меня опять тупо рушится даже при развёрнутом состоянии(на весь экран) у меня ширина выходит норм а вот высота вообще не получается и не знаю что делать. помогите мне с этой проблеммой подскажите где я туплю вот код КСС:
.body{
width:100%; height:800px; margin:0 auto;
}
.head{ background:#000000;
width:100%; height:90px; margin:0 auto;
}
.logo {
width:13%; height:30%; margin-left:10px; float:left; margin-top:1%;
}
.top_logo{background: #0000FF;
width:100%; height:100%; margin-left:10px;
}
.bottom_logo{
background: #FFFF00; width:100%; height:100%; margin-left:10px;
}
.name{width:30%; height:40%; margin-left:2%;float:left; margin-top:2%; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:36px; font-weight:bold; background-color:#000000; text-align:center; color: #FFFFFF;
}
.navigations{ background: #40FF40;
width:100%; height:3%; text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif; padding:18px; border:#000000 solid 1px;
}
.center{ background:#F3F3F3;
width:100%; height:900px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px;
}
.left_block{
width:15%; height:100%; text-align:center; float:left;
}
.left_nav{
width:95%; height:60%; border:#000000 solid 1px;
}

.left_rek{
width:95%; height:40%; border:#000000 solid 1px; float:left;
}
.center_block{
width:70%; height:745px; float:left;
}
.center_top{
background:#FF8000; width:97%; height:15%; border:#000000 solid 2px; text-align:left; padding:10px;
}
.center_text{
background:#CFCFCF;text-align:left; padding:10px; width:95%; height:100%; border:#000000 solid 1px; margin-left:10px;
}
.right_block{
width:14%; height:100%; float:left; margin-left:2px; border-left:#000000 solid 1px;
}
.chasi{
width:100%; height:30%;
}
.right_rek{
background-image: url(img/rec.png); width:100%; height:30%; border:#000000 solid 1px; margin-left:20px; background-repeat:no-repeat;
}
.footer{background:#000000; text-align:center; color:#FFFFFF; padding:4px;
width:100%; height:8%;
}

.plans{ background: url(img/knop.png); width:149px; height:24px; float:left; margin-left:18%; margin-bottom:4%; color: #80FFFF; text-decoration:none; }
.plans:link{color:#66FFFF;}
.plans:hover{ color:#FF0000;}
.plans:active{ color: #FFFF80;}
.plans:visidet{color:#008000;}
.nav{ background-image:url(img/knop.png); width:143px; height:24px; color:#0080FF; padding:3px; float:left; text-align:center; margin-left:3%; text-decoration:none;}
.nav:link{color:#66FFFF;}
.nav:hover{ color:#FF0000;}
.nav:active{ color: #FFFF80;}
.nav:visidet{color:#008000;}
Автор: poyt
Дата сообщения: 10.11.2010 17:54

Цитата:
Приветствую народ у меян аткой вопрос решил сайт сверстать на div-ах резиновый всё норм , но когда сайс сварачиваеш в квадратик или уменьшаеш в опере его (ctrl+ scroll) то он начинает рушится, я вычетал что вёс надо в процентах делать но он у меня опять тупо рушится даже при развёрнутом состоянии(на весь экран) у меня ширина выходит норм а вот высота вообще не получается и не знаю что делать.

Гадание по CSS, как рушиться сайт...
При том, что ни картинке ни привели, ни того кода, которой собственно и держит Ваш CSS...

--
Скрин можно в 2 счёта разместить на http://imageshack.us/, оттуда взять простую миниатюру для пользователя форума и добавить сюда на форум, просто вставив текст.

Да и сам код страницы будет тут в самый раз, чтобы понять, как оно работает.
Автор: Saloed88
Дата сообщения: 10.11.2010 18:16
так а что там писать создаёш клас и прикручеваеш его в стилям - вот код:
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="body">    
    <div class="head">
    <div class="logo">
    <div class="top_logo">
     </div>
<div class="bottom_logo">
    </div>

</div>
<div class="name"> Хочу свой бизнес
</div>
</div>
<div class="navigations">
<a class="nav" href="#">Главная</a>
<a class="nav" href="#">Бизнес идеи</a>
<a class="nav" href="#">Своё дело</a>
<a class="nav" href="#">Готовый бизнес</a>
<a class="nav" href="#">Интернет бизнес</a>
<a class="nav" href="#">Оценка бизнеса</a>
</div>

<div class="center">
    <div class="left_block">
    <div class="left_nav">
<p><a class="plans" href="#">Бизнес идеи</a></p>
<p><a class="plans" href="#">План бизнеса</a></p>
     <p><a class="plans" href="#">Интернет бизнес</a></p>
<p><a class="plans" href="#">Новости бизнеса</a></p>
<p><a class="plans" href="#">Домашний бизнес</a></p>
<p><a class="plans" href="#">Готовый бизнес</a></p>
<p><a class="plans" href="#">Франчайзинг</a></p>
<p><a class="plans" href="#">Инвестиции</a></p>
<p><a class="plans" href="#">Бизнес каталог</a></p>
<p><a class="plans" href="#">Оценка бизнеса</a></p>
</div>
<div class="left_rek"> Партнёрские сылки
<a href="#"> hbuyhuyhuihuyh</a>
</div>
</div>
<div class="center_block">
    <div class="center_top">В этом разделе нашего сайта мы собрали для Вас лучшие бизнес идеи, идеи для бизнеса и бизнес-предложения в сфере идей для бизнеса. Здесь Вы найдете для себя: бизнес идеи в авиаперевозках, бизнес идеи в автотранспорте, бизнес на генетике, бизнес идеи в финансовой сфере, идеи бизнеса в моде, Бизнес идеи в производстве потребительских товаров, идеи бизнеса на развлечениях, новые виды рекламы, бизнес идеи для розничной торговли, бизнес идеи в сфере связи и коммуникаций, бизнес идеи для сельского хозяйства, бизнес идеи в СМИ, бизнес идеи в спорте, бизнес идеи в туризме, бизнес идеи в сфере услуг. Мы надеемся что информация собраная нами здесь окажется Вам полезной.
</div>
<div class="center_text"> Всем известно; что видеокассеты VHS давно уже морально устарели. На смену им пришел стандарт DVD, преимуществ которого здесь перечислять не буду, ибо всем они и так хорошо известны. С каждым годом все больше и больше старых добрых видеомагнитофонов уступают место на полке своим более современным потомкам.

Однако, нет, наверное, такой семьи в России, которая бы не хранила в заветном шкафчике с десяток дорогих для сердца кассет: записи свадеб, рождения детей, детских утренников, дней рождения, путешествий да и просто семейных видео-архивов. Для многих расставание с видеомагнитофоном мучительно просто потому, что не на чем будет все это смотреть.

Думаю, смысл моей идеи уже ясен. Перенос видео с кассет на DVD или mpeg-4 (для любителей компьютеров) в наше время может стать весьма успешным, хоть и не вечным бизнесом.

Для работы необходимы: достаточно мощный компьютер, видеомагнитофон, аналого-цифровой преобразователь (например, цифровая видеокамера со сквозной оцифровкой), пишущий DVD и свободное время. Ради примера приведу расчет с учетом моего полутора миллионного города. Итак: стоимость оцифровки 1 часа видео - 300 руб. без стоимости диска, на DVD диск входит 1,5 часа видео, то есть запись 1 диска обойдется заказчику в 450 руб. Для записи одного такого диска уходит 2 часа времени.

Итак, при полной загруженности заказами мы имеем 450 руб. за два часа работы, что равняется 1800 руб. за стандартный рабочий день или порядка 40 тыс. руб. за средний рабочий месяц. Учитывая, что большинство этого времени компьютер работает без вашего участия, из 8 рабочих часов вы можете заниматься своими делами часов 6-7. Даже не имея такого количества заказов, не лишний будет кусок хлеба при работе несколько часов в неделю.

Самое сложное в этом деле - поиск клиентов, которых на самом деле не так уж и мало. По личному опыту знаю, что подача объявлений в пару газет раз в неделю обеспечит вас работой на эту самую неделю. Кроме того, не поленитесь обойти пункты продаж видеокассет, дисков и т.д. и предложить работающим там девушкам и юношам побыть вашим приемным пунктом за определенный процент. Уверяю, никто не откажется, даже сами объявление напишут и повесят на видном месте. Если же первые десятки клиентов останутся

</div>
</div>
<div class="right_block">
    <div class="chasi">
            <script src="http://www.clocklink.com/embed.js"></script><script type="text/javascript" language="JavaScript">obj=new Object;obj.clockfile="0010-red.swf";obj.TimeZone=                "R1T";obj.width=250;obj.height=250;obj.wmode="transparent";showClock(obj);</script>
</div>
<div class="right_rek">
</div>
</div>
</div>
<div class="footer"> © 2010 Хочу свой бизнес. Все о бизнесе.
</div>
</div>
</body>
</html>
Автор: Djeak
Дата сообщения: 17.11.2010 19:43
Всем привет.
Запутался с каскадностью.
К index.html присоединены два css файла: один глобальный, другой для вывода на печать.

Код: <!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=ISO-8859-1" />
<title>CosmoFarmer</title>
<link href="global.css" rel="stylesheet" type="text/css" />
<link href="print.css" rel="stylesheet" type="text/css" media="print" />
</head>
Автор: Djeak
Дата сообщения: 24.11.2010 00:11
Здравствуйте. Ни как не могу футер прилепить к низу. В FireFox, так как много панелек вверху, то сайт выглядит даже с полосой прокрутки. Открыл в хроме и опере, от футера до конца экрана еще есть расстояние, а хотелось бы, чтобы футер был внизу. Расширение экрана 1280х1024. Прочитал разные статьи, попробовал разные версии, не помогает, в опере и хроме нормально, в лисе футер наплывает на предыдущей блок.
Вот такой код:

Код: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="mainwrap">
<div id="maincontainer">
<duv id="menu"></div>
<div id="header></div>
<div id="contentbg>
<div id="leaftpanel"></div>
<div id="rightpanel"></div>
</div>
<div id="footer"></div>
</div>
</div>
</body>
</html>
Автор: Scorpion71
Дата сообщения: 06.02.2011 10:09
Здравствуйте,помогите пожалуйста,какое значение надо поменять чтоб сделать отступ навигации от картинок:
Автор: Jokerjar79
Дата сообщения: 06.02.2011 10:26
Scorpion71, margin
Автор: Scorpion71
Дата сообщения: 06.02.2011 11:49
Jokerjar79, в каком файле искать это значение? Знаю что в стиле navigation...
Автор: S0ldier
Дата сообщения: 06.02.2011 17:21
Scorpion71
Приведите HTML-код фрагмента.
Автор: Scorpion71
Дата сообщения: 06.02.2011 19:02
S0ldier, дело в том,что в примечании к блоку,который на скрине, написано:
По-умолчанию используется стиль: navigation
Примечание. Если блок заменяет вывод контента, то код навигации берется из Вашего шаблона и этот параметр игнорируется.
Вот я и не знаю где в шаблоне искать этот стиль навигации.
Автор: CoolCmd
Дата сообщения: 06.02.2011 19:21

Цитата:
1. http://www.tinyfluidgrid.com/

Интересный сайт. Но есть один косяк.
Столбцы должны изменять ширину пропорционально изменению ширины окна браузера (Firefox 3.6.13). И они это делают, но если уменьшить ширину браузера примерно на треть, то столбцы перестают уменьшаться и появляется горизонтальная полоса прокрутки. Как от нее избавиться???
Автор: S0ldier
Дата сообщения: 06.02.2011 19:27
Scorpion71
К сожалению, это не клуб телепатов. Мы тоже не знаем, где искать какой-то стиль навигации в каком-то шаблоне.

CoolCmd

Цитата:
Но есть один косяк.

Это фича

Код: .container{
min-width: 800px;
max-width: 1200px;
margin: auto;
}
Автор: Scorpion71
Дата сообщения: 06.02.2011 21:32
S0ldier,вот всё что нашёл:

Это в base.css:
/*разбиение на страницы*/
.navigation {
    color:#666;
    border:0px;
    padding: 2px;
}

.navigation a:link,
.navigation a:visited,
.navigation a:hover,
.navigation a:active {
    text-decoration: none;
    color: #636363;
    background-color: #F9F9F9;
    border: 1px solid #E6E6E6;
    padding: 3px 6px;
}

.navigation a:hover {
    background: #61a5cf;
    color: #fff;
    border-color: #61a5cf;
}

.navigation span {
    text-decoration: none;
    background-color: #fff;
    padding: 3px 6px;
    border: 1px solid #E6E6E6;
    color: #ccc;
}

Это в blocks.css:

/*left navigation*/
.leftside .bvnav .dtop,
.leftside .bpartn .dtop { height: 45px; }
.leftside .bvnav .dcont,
.leftside .bpartn .dcont {
    padding-top: 0;
    padding-bottom: 16px;
    margin: 3 8px;
    width: 200px;
}

.bvnav ul, .bvnav ul li,
.bpartn ul, .bpartn ul li { list-style: none; margin: 0; padding: 0; display: block; }

/*НАВИГАЦИЯ РАЗДЕЛОВ*/
.bvnav li a {
    text-decoration: none !important;
}

.bvnav li {
    display: block;
    cursor: pointer;
    text-decoration: none !important;
    background: #ffffff url("../images/bvnav_link.png") no-repeat 0px -24px;
    width: 100%;
}

.bvnav li:hover {
    background: #e6f2f9 url("../images/bvnav_link.png") no-repeat 0px 0px;
    color: #ea5c24;
}

ul.sample-menu { padding:0;margin:10px 15px; }
ul.sample-menu li { padding: 0;margin: 1px 0 0 0;list-style:none;}
ul.sample-menu li ul { padding:0;margin:0; text-indent:20px; font-weight:normal;}
ul.sample-menu li ul li ul { padding:0;margin:0; text-indent:40px; font-weight:normal; font-style:italic;}
ul#my-menu a { padding-left:20px; }
ul#my-menu .parent a.collapsed { background:url('../images/arrow_col.png') 2px 5px no-repeat; display:block;}
ul#my-menu .parent a.expanded { background:url('../images/arrow_exp.png') 2px 5px no-repeat; display:block;}

/*НАВИГАЦИЯ ПАРТНЕРОВ SAPE*/
.bpartn li { display: block; line-height: 14px; }
.bpartn li {
    background: #f2f8fb url("../images/bpartn_links.png") no-repeat 0 0;
    width: 100%;
}
.bpartn li:hover { background: #fff url("../images/bpartn_links.png") no-repeat 0 -100px; }
.bpartn li div { padding: 5px 8px 5px 12px; }
.bpartn li div { background: url("../images/bpartn_links_btm.png") no-repeat 0 100%; }
.bpartn li:hover div { background: url("../images/bpartn_links_btm.png") no-repeat 100% 100%; }
Автор: S0ldier
Дата сообщения: 06.02.2011 21:43
Scorpion71
Пробуйте:

Код: .navigation {
margin-top: 1em;
...
}
Автор: evoroz
Дата сообщения: 06.02.2011 22:06
Scorpion71
Если совет S0ldier не поможет, лучше адрес сайта. Обычно стиль ставится на блок.
В коде его можно найти.
Автор: miranon
Дата сообщения: 06.02.2011 22:30
Помогите пожалуйста решить такую проблему:

Сайт: http://new.illusiy.net
В Firefox меню слева отображается нормально, в Internet Explorer ( 7, 8 ) буквы не сглаживаются. Проблема в css параметре display:block; В IE он почему то неправильно работает. Если параметр убираю, буквы нормальные но меню соответственно всё улетает влево. Также почему то в IE не работает seperator.png

Вот код:


Код: .side_links a {
    display:block;
    padding:8px 0px;
    margin-right:4px;
    text-align:right;
    background:url(Images/seperator.png) no-repeat top right;
    font-size:1.5em;
    font-weight:lighter;
    text-transform:uppercase;
    outline:none;
}
Автор: Scorpion71
Дата сообщения: 06.02.2011 22:38
S0ldier,спасибо большое за помощь,работает
Автор: S0ldier
Дата сообщения: 06.02.2011 23:08
Scorpion71


miranon
Оберните каждую ссылку меню в дополнительный div.

Код: div.linkouter {
display:block;
padding: 8px 0px;
margin-right: 4px;
text-align: right;
background: url(Images/seperator.png) no-repeat top right;
}

.side_links a {
font-size: 1.5em;
font-weight: lighter;
text-transform: uppercase;
outline: none;
}
Автор: CoolCmd
Дата сообщения: 06.02.2011 23:31
S0ldier

Цитата:
Это фича
О спасибо, пропустил этот кусок!

Более сложный вопрос по резиновым колонкам с сайта http://www.tinyfluidgrid.com/
Сделал "табличку" по такому же принципу. Вот скрин:
http://savepic.ru/2232084.png
Ширина первой "строки" и нижней рамки (это div-ы) не совпадает с шириной строк в середине. (на скрине обведено красным) Причем разница в 1-2 пиксела плавает в зависимости от ширины браузера.
Косяк в Хроме 8, в лисе все четко!
Можете на сайте http://www.tinyfluidgrid.com/ создать колонки, их правые бордюры тоже будут в Хроме плавать. В лисе опять же все четко.
Либо косяк в Хроме, который где-то в расчетах чета округляет и точность падает, либо нужно как-то подправить css. Но как? Единственный способ сделать одинаковый размер в Хроме - это что бы количество div-ов и их размеры (которые в процентах) совпадали.
Автор: miranon
Дата сообщения: 07.02.2011 00:27
S0ldier

Спасибо, заработало, но к сожалению с этим вариантом перестал работать эффект меню fade in / fade out ( когда тушатся неактивные ссылки в меню ). Опять же, в Firefox эффект работает, в IE нет. :/
Есть какие то еще варианты кроме дополнительного div?
Автор: S0ldier
Дата сообщения: 07.02.2011 00:34
CoolCmd
Нецелые значения размеров, заданных в процентах, разные браузеры могут обрабатывать, то есть переводить в пиксели, по-разному. Издержки округления. Обратите внимание, что в Опере происходит.

Интересно, что IE показывает правильно.

Добавлено:
miranon
Как и предполагал, дело в jQuery.

Пробуйте: http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/

Страницы: 12345678910111213141516171819202122232425262728293031

Предыдущая тема: Вопрос к знатокам CSS


Форум Ru-Board.club — поднят 15-09-2016 числа. Цель - сохранить наследие старого Ru-Board, истории становления российского интернета. Сделано для людей.