Forum » Izdelava spletišč » CSS tezava z ozadji
CSS tezava z ozadji
tadejp81 ::
Pozdravljeni.
Vprašal sem že na enem izmed tujih forumov a očitno ne znajo.
Da ne bom dologovezil vam prilagam sliko.
Zanima me, če zna kdo rešit problem:
Skratka gre se za prikaz tekstovne vsebine ke se nahaja v div-u, v njenem ozadju sta dve polprosojni sliki. Prva slika je postavljena zgoraj z fiksno višino, druga pa se ponavlja od njenega spodnjega roba, pa vse do konca vsebine.
Stvar znam rešit tako, da se ponavljajoča se slika ponavlja čez celotno ozadje na njo pa se postavi neponavljajoča slika in se jo pripne v zgornjem delu div-a. Vendar ta rešitev v slednjem primeru odpade, ker se slike polprosojne in se svetlost barv pri prekrivanju obeh podlog zveča.
Upam, da se najde kak CSS frik tukaj.
Hvala za vaš čas.
LP, Tadej P
Vprašal sem že na enem izmed tujih forumov a očitno ne znajo.
Da ne bom dologovezil vam prilagam sliko.
Zanima me, če zna kdo rešit problem:
prikaz tezave
Skratka gre se za prikaz tekstovne vsebine ke se nahaja v div-u, v njenem ozadju sta dve polprosojni sliki. Prva slika je postavljena zgoraj z fiksno višino, druga pa se ponavlja od njenega spodnjega roba, pa vse do konca vsebine.
Stvar znam rešit tako, da se ponavljajoča se slika ponavlja čez celotno ozadje na njo pa se postavi neponavljajoča slika in se jo pripne v zgornjem delu div-a. Vendar ta rešitev v slednjem primeru odpade, ker se slike polprosojne in se svetlost barv pri prekrivanju obeh podlog zveča.
Upam, da se najde kak CSS frik tukaj.
Hvala za vaš čas.
LP, Tadej P
steev ::
Dva diva za ozadja (position:absolute;). Čez en div za tekst (z index?). Vse skupej zapakiraš v en div (position relative). :D
Ah, samo vidim da želiš met poljubno višino.
Ah, samo vidim da želiš met poljubno višino.
:|
Zgodovina sprememb…
- spremenil: steev ()
tadejp81 ::
Evo to s poljubno višino pa se zakomplicira ne:)
Še vedno aktualno nagradno vprašanje za 6pack!
Še vedno aktualno nagradno vprašanje za 6pack!
Zgodovina sprememb…
- spremenil: tadejp81 ()
skye28 ::
če je višina zgornje slike 100px
<div class="prvi"><div class="drugi">tekst</div></div>
.prvi {
background: spodnja slika;
}
.drugi {
background: <zgornja slika> repeat-x;
position: relative;
top: -100px;
}
Nisem testiral, ugibam.
<div class="prvi"><div class="drugi">tekst</div></div>
.prvi {
background: spodnja slika;
}
.drugi {
background: <zgornja slika> repeat-x;
position: relative;
top: -100px;
}
Nisem testiral, ugibam.
CodePsd ::
Probaj tako:
http://dabblet.com/gist/1694992
Zgornji ima fiksno višino. Spodnjemu pa se sama dodaja.
Z uporabo min-height pa imaš lahko samo 1 div http://dabblet.com/gist/1695000
Dela pa v vseh zdajšnih brskalnikih. Torej IE7+
http://dabblet.com/gist/1694992
Zgornji ima fiksno višino. Spodnjemu pa se sama dodaja.
Z uporabo min-height pa imaš lahko samo 1 div http://dabblet.com/gist/1695000
Dela pa v vseh zdajšnih brskalnikih. Torej IE7+
Razrez spletnih predlog(PSD v HTML) --> http://codepsd.si
Zgodovina sprememb…
- spremenil: CodePsd ()
skye28 ::
@CodePsd, fora je ravno v tem, da teksta ne razbijaš v več divov. Kaj je fora drugega primera, niti ne razumem.
Stvar se reši, kot sem napisal. Nardiš 2 okvirja, zunanji je zadaj, notranji je spredaj, notranjega potegneš gor toliko, kolikor je v njem visoka slika.
Stvar se reši, kot sem napisal. Nardiš 2 okvirja, zunanji je zadaj, notranji je spredaj, notranjega potegneš gor toliko, kolikor je v njem visoka slika.
tadejp81 ::
Na vrhnjem delu mora bit slika, ki je fiksna in se ne ponavlja, spodaj pa tista, ki se ponavlja vendar po vertikali,ne po horizontali.
Odmik sliki, ki se ponavlja se lahko nastavlja vendar na žalost ne v osi ponavljanja slike.
Tudi padding v negativno smer ne dela.
Odmik sliki, ki se ponavlja se lahko nastavlja vendar na žalost ne v osi ponavljanja slike.
Tudi padding v negativno smer ne dela.
CodePsd ::
V tem mojem drugem primeru nastaviš divu neko fiksno višino, ki bo vidna vedno, če bo kaj teksta noter ali ne. Če pa bo teksta več kot je višina diva pa se bo div avtomatsko povečal.
Primer z malo texta -> http://dabblet.com/gist/1695239
Primer ko dodaš teks -> http://dabblet.com/gist/1695000
Primer z malo texta -> http://dabblet.com/gist/1695239
Primer ko dodaš teks -> http://dabblet.com/gist/1695000
Razrez spletnih predlog(PSD v HTML) --> http://codepsd.si
Zgodovina sprememb…
- spremenil: CodePsd ()
tadejp81 ::
CodePsd - Nikakor ne morem dostopat do tvojih primerov v dabbletu.
A lahko prepišeš kodo sem prosim?
Drugače iščem to varianto ja. Da maš prvi fiksen div kjer bi dal za ozadje prvo sliko, v drugemu pa se dodaja višina odvisno od količine teksta, kjer daš za ozadje ponavljajočo sliko.
Prepiši sem ali pa na tadej.poberaj@gmail.com.
Hvala...
A lahko prepišeš kodo sem prosim?
Drugače iščem to varianto ja. Da maš prvi fiksen div kjer bi dal za ozadje prvo sliko, v drugemu pa se dodaja višina odvisno od količine teksta, kjer daš za ozadje ponavljajočo sliko.
Prepiši sem ali pa na tadej.poberaj@gmail.com.
Hvala...
tadejp81 ::
CodePsd, dobil sem tvoje primere takod da sem dodal v povezave "result" http://dabblet.com/result/gist/1694992, drugače mi jih ni prokazalo.
V glavnem sem pogledal kako si predlagal. Pri tvoji zadevi se tekst deli na zgornji-div in spodnji-div, tako da je treba tekst vpisovati razcepljeno (ločeno), ker pa postane neuporabno v mojem primeru.
Vsebina se mora vpisovati samo v zgornji-div, ki ostaja fiksen, it čez spodnji rob zgornjega diva in preiti v spodnji-div. Spodnji div pa naj bi se širil z to vsebino zapisano v zgornjem div-u.
Malo zakomlicirano to skupaj s temi transparentnimi ozadji! Bom preštudiral še predlog od skye28, ki je predlagal parent->child varianto.
Ima še kdo kak predlog?
V glavnem sem pogledal kako si predlagal. Pri tvoji zadevi se tekst deli na zgornji-div in spodnji-div, tako da je treba tekst vpisovati razcepljeno (ločeno), ker pa postane neuporabno v mojem primeru.
Vsebina se mora vpisovati samo v zgornji-div, ki ostaja fiksen, it čez spodnji rob zgornjega diva in preiti v spodnji-div. Spodnji div pa naj bi se širil z to vsebino zapisano v zgornjem div-u.
Malo zakomlicirano to skupaj s temi transparentnimi ozadji! Bom preštudiral še predlog od skye28, ki je predlagal parent->child varianto.
Ima še kdo kak predlog?
Macketina ::
Ce delas za moderne browserje, si oglej: http://caniuse.com/#search=multiple%20b... ce ti kej pomaga.
para! ::
Kaj pa CSS3? Ne razumem zakaj rabiš dva diva, če nočeš ločenega teksta. Recimo:
HTML
CSS
Verjetno se boš moral mal igrat, da dela v vseh browserjih, ampak če lahko uporabiš css3, potem bi se to moralo dati brez dodatnih divov.
lp
HTML
<html>
<head>
<title></title>
</head>
<body>
<div id="test">
</div>
</body>
</html>
CSS
div#test{
/* določiš ozadja */
background-image:
url('http://fc05.deviantart.net/fs71/f/2010/011/e/3/Abstract_C4Ds_by_s0geek.png'),
url('http://www.designedtoat.com/backgrounds/blue12.jpg');
/* pozicioniraš tako, da je prva slika vedno na vrhu, druga pod njo */
background-position: left top, left center;
/* prva slika se ne ponavlja, druga se ponavlja po x osi */
background-repeat: no-repeat, repeat-x;
/* določiš barvo ozadja, ker je div variabilne višine in hočeš blendat konec vertikalnega preliva */
background-color: #6ab4db;
}
Verjetno se boš moral mal igrat, da dela v vseh browserjih, ampak če lahko uporabiš css3, potem bi se to moralo dati brez dodatnih divov.
lp
Death before dishonor!
Zgodovina sprememb…
- spremenil: para! ()
tadejp81 ::
Macketina: havala za link
para!: poskušal sem tudi z dvojnimi ozadji v enem divu vendar tega ie7 ne podpira. Po forumih predlagajo rešitev z sub-divi tako, da daš en div v drugega. V zunanjega daš ponavljajoče ozadej, v notranjega pa fiksno ozadje, vendar če imaš transparentna ozadja kot v mojem primeru je opazno da je zadaj čez celo še eno ozadje v zunanjem divu tam kjer se sliki prekrivata.
Drugače pa CSS3 ne morem uporabljati, ker mora biti stran združljiva vsaj do IE7
para!: poskušal sem tudi z dvojnimi ozadji v enem divu vendar tega ie7 ne podpira. Po forumih predlagajo rešitev z sub-divi tako, da daš en div v drugega. V zunanjega daš ponavljajoče ozadej, v notranjega pa fiksno ozadje, vendar če imaš transparentna ozadja kot v mojem primeru je opazno da je zadaj čez celo še eno ozadje v zunanjem divu tam kjer se sliki prekrivata.
Drugače pa CSS3 ne morem uporabljati, ker mora biti stran združljiva vsaj do IE7
Vredno ogleda ...
| Tema | Ogledi | Zadnje sporočilo | |
|---|---|---|---|
| Tema | Ogledi | Zadnje sporočilo | |
| ! | Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 4 … 23 24 25 26 )Oddelek: Izdelava spletišč | 346104 (5241) | sunniegoldie |
| » | [CSS] HTML5, CSS3 + IE8Oddelek: Izdelava spletišč | 2781 (2567) | nuclear |
| » | dve slike za ozadje hoverjaOddelek: Izdelava spletišč | 1499 (1364) | tec |
| » | Avtomatsko podaljševanje straniOddelek: Izdelava spletišč | 1269 (1138) | alum |
| » | [CSS] položaj div-ovOddelek: Izdelava spletišč | 2249 (1900) | njok |