Sziasztok!
http://www.fm3.hu oldalaom ebben a témában valamiért összecsúsznak a widgetek oldalt, de frissítés után, illetve az aloldalakon rendben megjelenek. Más kinézetekkel nincs ilyen gond. Mi lehet a probléma? A segítséget előre is köszönöm.
Szerkesztőben a sablonod css-ében megkeresed ezt:
#sidebar .widget {
background: url(“images/sep-bg.png”) repeat-x scroll center bottom transparent;
margin-bottom: 20px;
overflow: hidden;
padding-bottom: 20px;
width: 280px;
}
~1170ik sor környéke
Majd egészítsd ki ezzel, hogy így nézzen ki
#sidebar .widget {
background: url(“images/sep-bg.png”) repeat-x scroll center bottom transparent;
margin-bottom: 20px;
overflow: hidden;
padding-bottom: 20px;
width: 280px;
clear: both;
}
#sidebar .widget {
background: url(“images/sep-bg.png”) repeat-x scroll center bottom transparent;
margin-bottom: 20px;
overflow: hidden;
padding-bottom: 20px;
width: 280px;
}
~1170ik sor környéke
Majd egészítsd ki ezzel, hogy így nézzen ki
#sidebar .widget {
background: url(“images/sep-bg.png”) repeat-x scroll center bottom transparent;
margin-bottom: 20px;
overflow: hidden;
padding-bottom: 20px;
width: 280px;
clear: both;
}
#sidebar .widget {
background: url(“images/sep-bg.png”) repeat-x scroll center bottom transparent;
margin-bottom: 20px;
overflow: hidden;
padding-bottom: 20px;
width: 280px;
clear: both;
}
Ott, az oldalsó elemeknél ilyenek vannak (inline formázásként):
style="position: absolute; top: 0px; left: 0px; "
Minden doboznak más más top van megadva úgy, hogy egymásba csússzanak. Nem szoktak/szabad absolute -t használni így, ebben a formában. Rossz.
Ki kell szedni azt a részt, ami így szurkálja be ezeket a style-okat.
(Fura, hogy ennek ellenére néha meg jó, nem is értem.)
style="position: absolute; top: 0px; left: 0px; "
Minden doboznak más más top van megadva úgy, hogy egymásba csússzanak. Nem szoktak/szabad absolute -t használni így, ebben a formában. Rossz.
Ki kell szedni azt a részt, ami így szurkálja be ezeket a style-okat.
(Fura, hogy ennek ellenére néha meg jó, nem is értem.)
A css file-ban kijavítottam, ettől függetlenül még mindig összecsúsznák, és frissítés után állnak helyre…
'Lőrincz wrote:
Ott, az oldalsó elemeknél ilyenek vannak (inline formázásként):
style="position: absolute; top: 0px; left: 0px; "
Minden doboznak más más top van megadva úgy, hogy egymásba csússzanak. Nem szoktak/szabad absolute -t használni így, ebben a formában. Rossz.
Ki kell szedni azt a részt, ami így szurkálja be ezeket a style-okat.
(Fura, hogy ennek ellenére néha meg jó, nem is értem.)
[/quote]
Ezt honnan szedjem ki?
style="position: absolute; top: 0px; left: 0px; "
Minden doboznak más más top van megadva úgy, hogy egymásba csússzanak. Nem szoktak/szabad absolute -t használni így, ebben a formában. Rossz.
Ki kell szedni azt a részt, ami így szurkálja be ezeket a style-okat.
(Fura, hogy ennek ellenére néha meg jó, nem is értem.)
Ezt honnan szedjem ki?
'Andrew5' wrote:
Ezt honnan szedjem ki?
Kiszedtem a css filebol az összes ilyet de még mindig összecsúszik ;-(
Ha kiszedted az összesből, és nem absolute-val vannak, hanem position: relative -al, és nincs negatív margin vagy padding, akkor nem csúszhatnak össze! (pont, mert relativ, aminek ez a lényege, hogy a div ek, nem csúszhatnak egymásba, nem fedhetik egymást, nem lehet metszetük stb ott nem! Mert ha ez így volna, akkor az összes oldal összecsúszna).
Úgyhogy, ott van még (kell lennie) valami rossz css-nek, továbbra is, de nem tudom mi, mert mást látok.
/* 6. MAIN CONTENT
- ================================================ /
/– Slider –/
#slider{
margin-bottom:20px;
}
#slider .lof-slidecontent{
width:630px;
height:300px;
}
#slider .lof-slidecontent .slider-image{
width:630px;
height:300px;
}
#slider .main-slider-content{
width:630px;
height:300px;
}
#slider .lof-slidecontent {
position:relative;
overflow:hidden;
border:1px solid #F4F4F4;
}
#slider .lof-slidecontent .preload{
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
z-index:100000;
text-align:center;
background:#ffffff;
}
#slider .lof-slidecontent .preload div{
height:100%;
width:100%;
background:transparent url(images/s-load-indicator.gif) no-repeat scroll 50% 50%;
}
#slider .lof-slidecontent .sliders-wrapper{
position:relative;
height:100%;
width:900px;
z-index:3px;
overflow:hidden;
}
#slider .lof-slidecontent ul.sliders-wrap-inner{
overflow:hidden;
background:transparent url(images/s-load-indicator.gif) no-repeat scroll 50% 50%;
padding:0px;
margin:0;
position:absolute;
overflow:hidden;
}
#slider .lof-slidecontent ul.sliders-wrap-inner li{
overflow:hidden;
padding:0px;
margin:0px;
float:left;
position:relative;
}
#slider .lof-slidecontent .lof-opacity li{
position:absolute;
top:0;
left:0;
float:inherit;
}
#slider .lof-slidecontent .navigator-content {
position:absolute;
bottom:10px;
right:10px;
background:url(images/s-tr-bg.png) repeat;
padding:5px 0px;
}
#slider .lof-slidecontent .navigator-wrapper{
position:relative;
z-index:10;
height:180px;
width:310px;
overflow:hidden;
color:#FFF;
float:left
}
#slider .lof-slidecontent ul.navigator-wrap-inner{
top:0;
padding:0;
margin:0;
position:absolute;
width:100%;
}
#slider .lof-slidecontent ul.navigator-wrap-inner li{
cursor:hand;
cursor:pointer;
list-style:none;
padding:0;
margin-left:0px;
overflow:hidden;
float:left;
display:block;
text-align:center;
}
#slider ul.sliders-wrap-inner li img{
padding:0px;
}
#slider .lof-main-item-desc{
z-index:100px;
position:absolute;
bottom:70px;
left:0px;
width:350px;
background:url(images/s-bg-trans.png);
height:100px;
padding:10px;
color:#cccccc;
}
#slider .lof-main-item-desc h3 a{
color: #e8e8e8;
}
#slider .lof-main-item-desc .date{
font-size:12px;
}
#slider .lof-slidecontent .attachment-small-thumb{
width:70px;
height:25px;
}
#slider .lof-slidecontent ul.navigator-wrap-inner li img{
border:#666 solid 3px;
}
#slider .lof-slidecontent ul.navigator-wrap-inner li.active img,
#slider .lof-slidecontent ul.navigator-wrap-inner li:hover img {
border:#A8A8A8 solid 3px;
-moz-transition:border-color ease-in-out 0.4s
}
#slider .lof-slidecontent .navigator-content .button-next,
#slider .lof-slidecontent .navigator-content .button-previous{
display:block;
width:22px;
height:30px;
color:#FFF;
cursor:pointer;
}
#slider .lof-slidecontent .navigator-content .button-next {
float:left;
text-indent:-999px;
margin-right:5px;
background:url(images/s-arrow-l.png) no-repeat right center;
}
#slider .lof-slidecontent .navigator-content .button-previous {
float:left;
text-indent:-999px;
margin-left:5px;
background:url(images/s-arrow-r.png) no-repeat left center;
}
#slider .lof-slidecontent .button-control {
position:absolute;
top:10px;
right:10px;
height: 20px;
width: 20px;
cursor:hand; cursor:pointer;
background:url(images/s-tr-bg.png) repeat;
}
#slider .lof-slidecontent .button-control span {
display:block;
width:100%;
height:100%;
}
#slider .lof-slidecontent .action-start span {
background:url(images/s-play.png) no-repeat center center;
}
#slider .lof-slidecontent .action-stop span {
background:url(images/s-pause.png) no-repeat center center;
}
Noh így néz ki most ez a rész mit vegyek még ki hogy jó legyen?/6. MAIN CONTENT
- ================================================ /
/– Slider --*/
#slider{
margin-bottom:20px;
}
#slider .lof-slidecontent{
width:630px;
height:300px;
}
#slider .lof-slidecontent .slider-image{
width:630px;
height:300px;
}
#slider .main-slider-content{
width:630px;
height:300px;
}
#slider .lof-slidecontent {
position:relative;
overflow:hidden;
border:1px solid #F4F4F4;
}
#slider .lof-slidecontent .preload{
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
z-index:100000;
text-align:center;
background:#ffffff;
}
#slider .lof-slidecontent .preload div{
height:100%;
width:100%;
background:transparent url(images/s-load-indicator.gif) no-repeat scroll 50% 50%;
}
#slider .lof-slidecontent .sliders-wrapper{
position:relative;
height:100%;
width:900px;
z-index:3px;
overflow:hidden;
}
#slider .lof-slidecontent ul.sliders-wrap-inner{
overflow:hidden;
background:transparent url(images/s-load-indicator.gif) no-repeat scroll 50% 50%;
padding:0px;
margin:0;
position:absolute;
overflow:hidden;
}
#slider .lof-slidecontent ul.sliders-wrap-inner li{
overflow:hidden;
padding:0px;
margin:0px;
float:left;
position:relative;
}
#slider .lof-slidecontent .lof-opacity li{
position:absolute;
top:0;
left:0;
float:inherit;
}
#slider .lof-slidecontent .navigator-content {
position:absolute;
bottom:10px;
right:10px;
background:url(images/s-tr-bg.png) repeat;
padding:5px 0px;
}
#slider .lof-slidecontent .navigator-wrapper{
position:relative;
z-index:10;
height:180px;
width:310px;
overflow:hidden;
color:#FFF;
float:left
}
#slider .lof-slidecontent ul.navigator-wrap-inner{
top:0;
padding:0;
margin:0;
position:absolute;
width:100%;
}
#slider .lof-slidecontent ul.navigator-wrap-inner li{
cursor:hand;
cursor:pointer;
list-style:none;
padding:0;
margin-left:0px;
overflow:hidden;
float:left;
display:block;
text-align:center;
}
#slider ul.sliders-wrap-inner li img{
padding:0px;
}
#slider .lof-main-item-desc{
z-index:100px;
position:absolute;
bottom:70px;
left:0px;
width:350px;
background:url(images/s-bg-trans.png);
height:100px;
padding:10px;
color:#cccccc;
}
#slider .lof-main-item-desc h3 a{
color: #e8e8e8;
}
#slider .lof-main-item-desc .date{
font-size:12px;
}
#slider .lof-slidecontent .attachment-small-thumb{
width:70px;
height:25px;
}
#slider .lof-slidecontent ul.navigator-wrap-inner li img{
border:#666 solid 3px;
}
#slider .lof-slidecontent ul.navigator-wrap-inner li.active img,
#slider .lof-slidecontent ul.navigator-wrap-inner li:hover img {
border:#A8A8A8 solid 3px;
-moz-transition:border-color ease-in-out 0.4s
}
#slider .lof-slidecontent .navigator-content .button-next,
#slider .lof-slidecontent .navigator-content .button-previous{
display:block;
width:22px;
height:30px;
color:#FFF;
cursor:pointer;
}
#slider .lof-slidecontent .navigator-content .button-next {
float:left;
text-indent:-999px;
margin-right:5px;
background:url(images/s-arrow-l.png) no-repeat right center;
}
#slider .lof-slidecontent .navigator-content .button-previous {
float:left;
text-indent:-999px;
margin-left:5px;
background:url(images/s-arrow-r.png) no-repeat left center;
}
#slider .lof-slidecontent .button-control {
position:absolute;
top:10px;
right:10px;
height: 20px;
width: 20px;
cursor:hand; cursor:pointer;
background:url(images/s-tr-bg.png) repeat;
}
#slider .lof-slidecontent .button-control span {
display:block;
width:100%;
height:100%;
}
#slider .lof-slidecontent .action-start span {
background:url(images/s-play.png) no-repeat center center;
}
#slider .lof-slidecontent .action-stop span {
background:url(images/s-pause.png) no-repeat center center;
}
Noh így néz ki most ez a rész mit vegyek még ki hogy jó legyen?
Te kitettél egy linket, az oldaladról. Azt írtad, elcsúsztak a widgetek. Megírtam, hogy miért.
Utána megváltoztatod a sablont, majd bemásolsz egy nem tudom honnét jövő css részletet és megkérdezed, mit kell kiszedni. Úgy, hogy az új sablon van fent most.
Az oldalad még benne van a google cache-ban, az elcsúszott widget-el.
Ãgy nézett ki az oldalad az elcsúszással:
http://kepgep.hu/2012/09/21/main/fszkivn1.jpg
Ott lehet látni, hogy a “keresse az FM3” -at van felfelé elcsúszva. Ki is jelöltem, alul pedig a html kód látható, benne ilyen pozicionálással: (sajnos a kepgep elrontotta a minőséget, valszeg mert túl nagy volt, de mindegy, azért látszódik)
style="position: absolute; top: 987px; left: 0px; "
Itt van kinagyítva:
http://kepgep.hu/2012/09/21/main/fszkvnwidget.jpg
Én erre írtam, hogy ez rossz! Emiatt lehet elcsúszva.
Online lehet szerkeszteni egy oldal kimenetét, amit ugye csak én látok itt a böngészőmön, mert a letöltött forrást lehet módisítani, pont hibakeresésre is használható.
Tehát ha kitörlöm ezeket az style="position: absolute; top: 987px; left: 0px; " a belső css formázásokat, akkro lehet látni, hogy a widget elcsúszás is megszűnik:
http://kepgep.hu/2012/09/21/main/fszkvn2.jpg
A fenti képen, kitöröltem a legfelső widgetek style-jait, és a kijelölt és rácsúszott div lejjebb is került.
Nem tudom, hogy amit most bemásoltál, az hogyan került ide, vagy honnét.
style="position: absolute; top: 987px; left: 0px; "
Itt van kinagyítva:
http://kepgep.hu/2012/09/21/main/fszkvnwidget.jpg
Én erre írtam, hogy ez rossz! Emiatt lehet elcsúszva.
Online lehet szerkeszteni egy oldal kimenetét, amit ugye csak én látok itt a böngészőmön, mert a letöltött forrást lehet módisítani, pont hibakeresésre is használható.
Tehát ha kitörlöm ezeket az style="position: absolute; top: 987px; left: 0px; " a belső css formázásokat, akkro lehet látni, hogy a widget elcsúszás is megszűnik:
http://kepgep.hu/2012/09/21/main/fszkvn2.jpg
A fenti képen, kitöröltem a legfelső widgetek style-jait, és a kijelölt és rácsúszott div lejjebb is került.
Nem tudom, hogy amit most bemásoltál, az hogyan került ide, vagy honnét.
