CSS Problem
8 отговора
635 прегледа
CSS Problem
Здравей те,
полу4авам много странен (д)ефект.
От една страна имам
CSS:
#contentleft ul li a:hover{
background:#efefef;
color: #3a77ba;
margin: 0px;
FILTER: alpha(opacity=60);
-moz-opacity: 0.6;
}
a в съседен DIV ( #contentright ) сложих iframe.
Проблемът е - като мина върху менуто се полу4ава много неприятно трептене - като4е ли iframe-source-a се зарежда наново...
Под ИЕ не се появява този проблем
, само с Firefox, НО най-малкото заради собственото ми само4уствие, вси4ко трабва да работи и с лубимата Firefox !!!
Търсих из гуугал , но нисто не намерих
Някой познава ли проблема??
полу4авам много странен (д)ефект.
От една страна имам
CSS:
#contentleft ul li a:hover{
background:#efefef;
color: #3a77ba;
margin: 0px;
FILTER: alpha(opacity=60);
-moz-opacity: 0.6;
}
a в съседен DIV ( #contentright ) сложих iframe.
Проблемът е - като мина върху менуто се полу4ава много неприятно трептене - като4е ли iframe-source-a се зарежда наново...
Под ИЕ не се появява този проблем
, само с Firefox, НО най-малкото заради собственото ми само4уствие, вси4ко трабва да работи и с лубимата Firefox !!!
Търсих из гуугал , но нисто не намерих
Някой познава ли проблема??
Re: CSS Problem
Здравей,
URL немога да дам, тайкато страни4ката е offline и о6те нямам подходя6т hosting
HTML-source-а минава беz гре6ка W3C XHTML 1.0 Validator-a.
CSS-a има проблеми с Validator-a само 3аради "opacity"-опциите
Дове4ера 6те спретна една dummy-страни4ка и 6те я пусна тук
URL немога да дам, тайкато страни4ката е offline и о6те нямам подходя6т hosting
HTML-source-а минава беz гре6ка W3C XHTML 1.0 Validator-a.
CSS-a има проблеми с Validator-a само 3аради "opacity"-опциите
Дове4ера 6те спретна една dummy-страни4ка и 6те я пусна тук
Re: CSS Problem
Здравей те,
това е примерен код за проблема, който о6те не сам разре6ил
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#frame {
width: 750px;
height: 500px;
margin-right:auto;
margin-left:auto;
margin-top: 0px;
padding:0px;
text-align:center;
background-color:#eee;
margin-bottom: 0px;
padding-bottom: 0px;
}
#contentleft {
width: 200px;
height: 500px;
padding:0px;
margin-left: 0px;
float:left;
background-color: Blue;
text-align:left;
}
#contentleft ul{
margin: 0px;
padding: 0px;
list-style-type:none;
text-indent:0;
width:200px;
padding-top: 50px;
}
#contentleft li{
margin: 0px;
padding: 0px;
list-style-type:none;
text-indent:0;
}
#contentleft ul li a {
text-decoration:none;
display:block;
color: Green;
margin: 0;
padding:0px 0px 0px 10px;
height: 20px;
border-bottom: 1px #FFFFFF dotted;
}
#contentleft ul li a:hover {
background:#efefef;
color: #000000;
border-bottom: 1px dotted #ffffff;
margin: 0px;
FILTER: alpha(opacity = 60);
-moz-opacity: 0.6;
}
#contentcenter {
width: 450px;
height: 470px;
padding:0px;
background: #eee;
padding-left: 10px;
font-size: 12px;
text-align:left;
float:left;
padding-top: 30px;
padding-left: 20px;
}
</style>
</head><body>
<div id="frame">
<div id="contentleft">
<ul>
<li> <a href="#">Home</a></li>
<li> <a href="#">Home</a></li>
</ul>
</div>
<div id="contentcenter">
<!-- Start Content -->
<br/><br/>
<div id="input" style=" width: 470px; height: 350px; overflow: scroll;">
Gordon Brown is continuing his bid to persuade ministers from the G7 group of industrialised nations to back his plan to tackle debt in developing countries.
<br/><br/>
The UK chancellor wants to provide $10bn (£5.38bn) a year over a decade, using G7 backing so the money could be borrowed up front on financial markets.
</div>
<!-- End Content -->
</div>
<br clear="all" />
</div>
</body>
</html>
това е примерен код за проблема, който о6те не сам разре6ил
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#frame {
width: 750px;
height: 500px;
margin-right:auto;
margin-left:auto;
margin-top: 0px;
padding:0px;
text-align:center;
background-color:#eee;
margin-bottom: 0px;
padding-bottom: 0px;
}
#contentleft {
width: 200px;
height: 500px;
padding:0px;
margin-left: 0px;
float:left;
background-color: Blue;
text-align:left;
}
#contentleft ul{
margin: 0px;
padding: 0px;
list-style-type:none;
text-indent:0;
width:200px;
padding-top: 50px;
}
#contentleft li{
margin: 0px;
padding: 0px;
list-style-type:none;
text-indent:0;
}
#contentleft ul li a {
text-decoration:none;
display:block;
color: Green;
margin: 0;
padding:0px 0px 0px 10px;
height: 20px;
border-bottom: 1px #FFFFFF dotted;
}
#contentleft ul li a:hover {
background:#efefef;
color: #000000;
border-bottom: 1px dotted #ffffff;
margin: 0px;
FILTER: alpha(opacity = 60);
-moz-opacity: 0.6;
}
#contentcenter {
width: 450px;
height: 470px;
padding:0px;
background: #eee;
padding-left: 10px;
font-size: 12px;
text-align:left;
float:left;
padding-top: 30px;
padding-left: 20px;
}
</style>
</head><body>
<div id="frame">
<div id="contentleft">
<ul>
<li> <a href="#">Home</a></li>
<li> <a href="#">Home</a></li>
</ul>
</div>
<div id="contentcenter">
<!-- Start Content -->
<br/><br/>
<div id="input" style=" width: 470px; height: 350px; overflow: scroll;">
Gordon Brown is continuing his bid to persuade ministers from the G7 group of industrialised nations to back his plan to tackle debt in developing countries.
<br/><br/>
The UK chancellor wants to provide $10bn (£5.38bn) a year over a decade, using G7 backing so the money could be borrowed up front on financial markets.
</div>
<!-- End Content -->
</div>
<br clear="all" />
</div>
</body>
</html>
Re: CSS Problem
Нещо като подобно?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[линк]">
<html xmlns="[линк]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
/*<![CDATA[*/
<!--
body {
margin: 0;
padding: 0;
background-color: #ccc;
}
#main {
width: 750px;
height: 540px;
margin-right: auto;
margin-left: auto;
background: #eee;
font-size: 12px;
text-align: left;
background-color:#eee;
}
.left {
float: left;
width: 200px;
height: 490px;
margin: 0;
padding: 50px 0 0 0;
background-color: blue;
text-align: left;
}
#menu {
margin: 0 0 0 -30px;
}
#menu ul li {
font: bold 12px/20px Arial, sans-serif;
color #fff;
list-style: none;
margin-top: 1px;
margin-bottom: 1px;
}
#menu a {
width: 100%;
color: #fff;
text-decoration: none;
background: inherit;
text-indent: 10px;
display: block;
border-bottom: 1px dotted #fff;
}
#menu a:hover {
color: #333;
border-bottom: 1px dotted #fff;
text-indent: 10px;
background: #fff;
filter: alpha(opacity=60);
-moz-opacity:0.6;
opacity: 0.6;
}
.content {
font: 12px/20px Arial, sans-serif;
padding: 20px;
width: 490px;
height: 480px;
margin-right: 10px;
float: right;
overflow: scroll;
}
-->
/*]]>*/
</style>
</head>
<body>
<div id="main">
<div class="left">
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>
</div>
<div class="content">
<p>Gordon Brown is continuing his bid to persuade ministers from
the G7 group of industrialised nations to back his plan to tackle
debt in developing countries.</p>
<p>The UK chancellor wants to provide $10bn (£5.38bn) a
year over a decade, using G7 backing so the money could be
borrowed up front on financial markets.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum
>dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
</div>
</body>
</html>
Сори, накоя и друга мярка може да съм затрила, ти ще си ги видиш после. Така поне не премигва.
Дървеничко е въпреки всичко, защо не пробваш да се разровиш из нета има примери за къде по-хубави неща.
Успех!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[линк]">
<html xmlns="[линк]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
/*<![CDATA[*/
<!--
body {
margin: 0;
padding: 0;
background-color: #ccc;
}
#main {
width: 750px;
height: 540px;
margin-right: auto;
margin-left: auto;
background: #eee;
font-size: 12px;
text-align: left;
background-color:#eee;
}
.left {
float: left;
width: 200px;
height: 490px;
margin: 0;
padding: 50px 0 0 0;
background-color: blue;
text-align: left;
}
#menu {
margin: 0 0 0 -30px;
}
#menu ul li {
font: bold 12px/20px Arial, sans-serif;
color #fff;
list-style: none;
margin-top: 1px;
margin-bottom: 1px;
}
#menu a {
width: 100%;
color: #fff;
text-decoration: none;
background: inherit;
text-indent: 10px;
display: block;
border-bottom: 1px dotted #fff;
}
#menu a:hover {
color: #333;
border-bottom: 1px dotted #fff;
text-indent: 10px;
background: #fff;
filter: alpha(opacity=60);
-moz-opacity:0.6;
opacity: 0.6;
}
.content {
font: 12px/20px Arial, sans-serif;
padding: 20px;
width: 490px;
height: 480px;
margin-right: 10px;
float: right;
overflow: scroll;
}
-->
/*]]>*/
</style>
</head>
<body>
<div id="main">
<div class="left">
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>
</div>
<div class="content">
<p>Gordon Brown is continuing his bid to persuade ministers from
the G7 group of industrialised nations to back his plan to tackle
debt in developing countries.</p>
<p>The UK chancellor wants to provide $10bn (£5.38bn) a
year over a decade, using G7 backing so the money could be
borrowed up front on financial markets.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum
>dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
</div>
</body>
</html>
Сори, накоя и друга мярка може да съм затрила, ти ще си ги видиш после. Така поне не премигва.
Дървеничко е въпреки всичко, защо не пробваш да се разровиш из нета има примери за къде по-хубави неща.
Успех!
Re: CSS Problem
Благодаря Ти много flamm!!!
Оказа се, 4е вса6тност проблема е в #contentcenter и float: left;, който с float: right; работи както искам!!!
От твоят отговор вазникна оба4е за мен нов вапрос: за6то използва6 /*<![CDATA[*/ ?? И кое по-то4но не ти хареса в примерат ми - това не е ЦСС , който 6те отиде online, но вапреки това какво те сму6тава??
С уважение
noName
Оказа се, 4е вса6тност проблема е в #contentcenter и float: left;, който с float: right; работи както искам!!!
От твоят отговор вазникна оба4е за мен нов вапрос: за6то използва6 /*<![CDATA[*/ ?? И кое по-то4но не ти хареса в примерат ми - това не е ЦСС , който 6те отиде online, но вапреки това какво те сму6тава??
С уважение
noName
Re: CSS Problem
Смущаващото в примера е липсата на заглавие, което прави вида на документа доста недодялан и хоризонталния скрол на фрейма. Може вместо scroll да се използва auto и да се зададе ширина на текста (напр. на параграф), по-малка от тази на фрейма, обаче пак не е гаранция, че във всички случаи няма да се получи хоризонтален скрол. Ако искаш фиксирани размери на страницата, можеш да видиш един доста добър пример на [линк].
За CDATA виж повече инфо по въпроса - [линк], но така или иначе, по-добре сложи окончателния вариант на ЦСС във външен файл.
За CDATA виж повече инфо по въпроса - [линк], но така или иначе, по-добре сложи окончателния вариант на ЦСС във външен файл.
Re: CSS Problem
Мозилата и FF в частност няма проблем с прозрачността, обаче в Операта има голям - не я показва и познай каква манджа с грозде може да стане ... Може вместо филтри да се използват PNG полу-прозрачни картинки, но тогава ИЕ има проблем. Друго решение е да използваш за фон на а или a:hover предварително подготвена картинка, която да изглежда така, все едно, че е полупрозрачна (да се слее до известна степен със фона). Виж това, много е хитро - [линк].
А в твоя случай, на тия дюс цветове, използването на прозрачност е съвсем излишно, същия ефект се получава като промениш цветовете за текст и фон на a:hover с малко по-бледи или по-тъмни от тези на а.
А в твоя случай, на тия дюс цветове, използването на прозрачност е съвсем излишно, същия ефект се получава като промениш цветовете за текст и фон на a:hover с малко по-бледи или по-тъмни от тези на а.