Autor Zpráva
jany
Profil
mam stranku, ktora ma sirku 845px, pozadie mam sive nacitane cez css ako obrazok, ktory ma velkost 1x1px. Chcel by som pozadie nechat sive, ale po bokoch stranky, kde uz nic nieje, len sive pozadie, tak som sa rozgodol, ze bude to krajsie, aby tam bol gradient od tej sivej az k bielej. Tak som si spravil ako pozadie obrazok s rozmermy 1280x1px s gradientmy po bokoch, ale ked som pozrel na stranku, tak to nebolo ono. Ako by sa to dalo spravit, ako velky obrazok mam spravit, aby to bolo OK. (myslim, ze na inom monitore, co bude mat ine rozlisenie to bude zase inak ....)
jany
Profil
ak som sa zle vyjadril, tak tu je obrazok, ako by som to chcel mat
http://jany.wz.cz/obrazky/a.jpg
Anika
Profil *
No možná že by šlo nechat pozad bílé, a ten gradient přidat jako pozadí stránky (gradienty po stranách a uprostřed šedá), která by se musela nechat o tu šířku gradientu na obou stranách širší, například o 150+150px, nebo radši míň, a do stránky pak vložit na střed div o šířce 845 s obsahem. Doufám, že to nepíšu moc zmateně. Možná, že ti někdo poradí líp.
Anika
Profil *
Těch 845 se mi zdá moc, stačilo by nějakých 700 - 750. Ale to záleží na tobě, vím, že na to se neptáš. Ale jsou i menší monitory.
jany
Profil
Hmm celkom presne ti nerozumiem, teraz moje ccs vyzera takto
html, body{ 
 margin:0; 
 padding:0; 
 text-align:center; 
 background-image: URL('background.bmp'); /* tu je ten obrazok o dlzke 1280x1px */
} 
 
#pagewidth{ 
 width:845px; 
 text-align:left;  
margin-left:auto; 
 margin-right:auto;  
} 
 
#header{
 position:relative; 
 height: 216px; 
 background-color: #A8B5B9;
 width:100%;
 border-bottom: 2px solid #ff0000;
} 
 
#leftcol{
 width:180px; 
 float:left; 
 position:relative; 
background-color: #A8B5B9;
 }
 
#maincol{
 background-color: #A8B5B9;
 float: right; 
 display:inline; 
 position: relative; 
 width:650px; 
 }
 
#footer{
 height:20px; 
 font-family:Tahoma;line-height:16px; font-size:12px;
 clear:both;
border-top: 2px solid #ff0000;
 } 
Anika
Profil *
Nevím, jestli jsem správně pochopila, o co ti jde, chápu to tak, že když zmenšíš okno, (jako třeba když je menší monitor), tak se ty gradienty vůči stránce posunou špatně? Jestli ano, dalo by se to vyřešit tak, že ty gradienty nejsou na pozadí, ale na okrajích stránky s obsahem což je předpokládám ve tvém css "pagewidth" . ten o brázek by nebyl na pozadí body, ale na pozadí "pagewidth", to by se muselo udělat široké jako ten obrázek, a dovnitř dát ještě jeden div (třeba pagewidth2), taky na střed, už bez pozadí, který by měl tu šířku 845px a do něj to ostatní. Prostě tu stránku obalit ještě jedním divem, který by byl na středu a měl na pozadí ten obrázek s gradientem a v něm stránku zase na střed. Pak se ten gradient nebude posunovat. Ty jo už se v tom sama skoro nevyznám.
Obrázek vypadal takhle: 100px bílá-šedá, 840px šedá,100px šedá-bílá (100px je příklad).
To pagewidth2 by nemuselo být centrované, kdyby mělo levý margin 100px.

html, body{
margin:0;
padding:0;
text-align:center;
}

#pagewidth{
width:1045px;
text-align:left;
margin-left:auto;
margin-right:auto;
background-image: URL('background.bmp'); /* tu je ten obrazok o dlzke 1280x1px */ (změň šířku obrázku na 1045; 845 šedá + 2x 100px gradienty)
}

#pagewidth2 {
width 840px;
margin:left:100px /* uvnitř všechno ostatní*/
}

Snad je to tak dobře
jany
Profil
Tak som to nejak spravil, ale teraz sa to tak blbo ukoncuje, ak je stranka dlhsia, tak je to OK, ale ak jekratsia, tak vid http://jany.wz.cz/obrazky/b.jpg neda sa to nejak nastavit, aby sa to tiahlo vzdy az na koniec brovsera ?
Anika
Profil *
Na stránkách, které jsou kratší, zkus nastavit height (u toho divu s obrázkem na pozadí), nebo dej divu s obsahem nějaký větší margin-bottom, tak aby to přesáhlo konec okna. Jen tam, kde je to potřeba.
Ještě poznámka: určitě se slovensky píše "výtam" s tvrdým ý? Slovenskou gramatiku neznám, ale bije mě to do očí.
Anika
Profil *
Nebo ještě jestli chceš mít patičku až dole a nad ní volné místo, tak té patičce dej margin-top.
jany
Profil
Takze, ak dam height, tak to sice natahne, ale len o tolko, kolko tam zadam px, v opere to vyzera inak v mozile tiez a IE ani nemam nainstalovany.... margin-top pre paticku robi to iste. Ja by som potreboval, aby sa to stale tiahlo az dole.
Pise sa Vítam, ale to sa bude este opravovat, to robim pre kamosa a on si tam da svoje texty
Anika
Profil *
Když zadáš třeba 1000px, aby to přesáhlo spodek obrazovky? Nic lepšího už nevím. Aby se to tahlo donekonečna, to nejde.
blizz_boz
Profil
Anika
Těch 845 se mi zdá moc, stačilo by nějakých 700 - 750. Ale to záleží na tobě, vím, že na to se neptáš. Ale jsou i menší monitory.

haha ja som pri svojom poslednom projekte použil šírku 990 px a hlavička má výšku 550px :o)
jany
Profil
Nahodou sa mi podarilo najst tuto stranku http://www.pmagency.wbl.sk/ (gradient je sice vertikalny) tak asi tak by som chcel aby sa to zobrazovalo aj u mna (zatial som ale neskumal kod, ako to ma napisane)
Anika
Profil *
No tohle je jednoduché, ten obrázek na pozadí je svislý gradient o délce třeba 1000px. To by šlo tak, jak jsi to měl původně. U téhle stránky se to roluje, tak by ten gradient musel být dlouhý jako nejdelší stránka, kdybys dal background-attachment: fixed, aby pozadí stálo na místě, stačilo by těch 1000 px, i méně.

blizz_boz
Nechci nikoho poučovat, to vůbec ne, ale když jsem měla ještě malý monitor, tak jsem stránky, u kterých jse musela každou řádku rolovat, protože se text nevešel na monitor, prostě nečetla :o).
jany
Profil
vsimni si na stranke napr http://www.pmagency.wbl.sk/Uvod.html ja osobne tam skroolovaciu listu mam monitor mam nastaveny na 1280x1024 ale ked otvorim napr kontakt tak text na stranke je asi na 10 riadkov ale pozadie ide pekne az dole a toto chcem dosiahnut
Anika
Profil *
Myslíš to bílé pozadí stránky nebo pozadí body, kde je ten gradient? Asi si nerozumíme.
Anika
Profil *
Jestli jde o to, aby se stránky táhla od shora až dolů bez těch proužků nahoře a dole, tak teď jsem zkoušela tohle a funguje to mozzile, jinde jsem to nezkoušela: Tomu hlavnímu divu zadat margin-top a margin-bottom: -10px. (to znamená záporný).
Jestli nepomůže tohle, tak se omlouvám, ale víc asi nevymyslím.
Plaváček
Profil
jany

To, co požaduješ, lze vydumat lehkou úpravou následujícího řešení: http://css-tricks.com/how-to-resizeable-background-image/ . Doporučit to ale nemohu a osobně bych se takto řešenému gradientu vyhnul, protože kromě tvého dobrého pocitu nemá pro potenciálního návštěvníka tvé stránky prakticky žádný užitek.
Anika
Profil *
Nevím ještě jestli o to budeš ještě stát, ale zkus tohle - pozor na doctype.


<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">;
<title></title>
<style>
.pozadi {width:1045px; margin-left:auto; margin-right:auto; margin-top:-8px;
margin-bottom:-10px; background-image:url("tvůj obrázek"); position:relative}
.stranka {width:845px;margin-left:100px; height:800px}
</style>
</head>
<body>
<div style="text-align:center">
<div class="pozadi">
<div class="stranka">
<div style="border:1px solid">Sem patří všechen obsah, pro lepší představu jsem to orámovala</div>
</div>
</div>
</div>
</body>
</html>

height:800px jenom tam, kde je stránka kratší než okno prohlížeče, neboji natahnout pomocí margin.
jany
Profil
Dik za snahu Anika, ale stale to nema ten efekt, ktory chcem dosiahnut. Height sa da zadat len fixne, to by fungovalo, keby mal kazdy to iste rozlisenie a prehliadac.
skusim este nieco ine vymysliet
Plaváček
Profil
jany

Vypadá to, že ignoruješ mou radu. Věz, že nic nového a lepšího nevymyslíš. Mé doporučení zní - vykašlat se na to a udělat layout tak, abys podobné harakiri nemusel páchat.
jany
Profil
Plaváček
Nieze by som to ignoroval, ale neovladam moc anglictinu, ale google to prelozil no aj tak z toho niesom mudry :) Najlepsi by podla autora mala byt tretia moznost, ale ako to pouzit u mna ?? co mam vo svojom css zmenit ??

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: