Autor Zpráva
roboti006
Profil *
Ahoj. Tentokrát mám problém s pozadím.
Mám stránku na které se vertikálně opakuje široký, nízký obrázek...
Testoval jsem svůj web na svém počítači a tam to vypadalo přesně podle očekávání, ale když jsem zkoušel testovat stránku
na Apple MacBook (s menším oknem prohlížeče) pozadí mi odcestovalo a (asi) protože mám nastaveno pro obsah
position: absolute

obsah zůstal na místě ale pozadí "odcestovalo" úplně pryč zpod obsahu. Když jsem zkoušel spravit to takto:

ani se to nepohnulo z místa (po reloadování) a když jsem manipuloval oknem vesele to tančilo dál...
Poraďte mi prosím, jak to nastavit aby pozadí bylo trvale těch 41px od levého okraje, a obsah na něm díky

Styl je tu tento:
/* styl pro tag body (tělo) */
body {
	background-image: url(img/pozadi.jpg);
	background-repeat: repeat-y;
	background-attachment: scroll;
    background-color: #898755;
	background-position: center top;
        position: absolute;
        Left: 41px ;
} /* styl pro tag p (odstavec) */
p {
margin-left: 15px;
margin-right:300px;
margin-top: 15px;
} 
/* identifikátory ID */
#addthis {position: absolute; Top: 135px; margin-left: 47px;} 
#adright {position: absolute; right: 140px; top: 20px;}
#pocitadlo {position: absolute; left: 934px; top: 152px;}

.obrazky {border: 5px solid blue; margin-left:60px;} 
.nadpis {text-align: center; font-size: 24; font-weight:bold;}
.poznamka {border: 2px double black; text-decoration: none; font-size: 10; text-transform: uppercase; background-color: yellow;}
roboti006
Profil *
Ještě dodávám že v mém počítači jsem zkoušel Firefox (7.0.1) a na MacBooku to byly Safari a Firefox (oba byly rozjeté)
panther
Profil
roboti006:
dodej odkaz na web, kde se problém vyskytuje.
roboti006
Profil *
Takto by to zhruba mělo vypadat (samozřejmě bez pokračování té lišty vpravo) a takhle to vypadat nemá, nebo já si minimálně myslím že nemá.
Kód CSS už jsem uvedl výše, teď přidám html
<div id="menu-box">	
<ul id="menu" class="clearfix">
	<li><a href="domos.php">Úvod</a></li>
	<li><a href="domos.php?pg=main">Domů</a></li>

	<li><a href="domos.php?pg=fotglos">Fotogalerie</a></li>
	<li><a href="domos.php?pg=st_infos">Web Info</a></li>
	<li><a href="domos.php?pg=vtipos">Vtipy</a></li>
	<li><a href="domos.php?pg=aktivitos">Aktivity</a></li>
	<li><a href="domos.php?pg=downos">Ke stažení</a></li>
	<li><a href="domos.php?pg=linkos">Odkazy</a></li>

	<li><a href="domos.php?pg=kontaktos">Kontakt</a></li>
</ul>
</div>   
Han
Profil
Ja mám to zelené v strede a všetko ostatné vľavo... Nechápem ako xceš aby to vyzeralo...
roboti006
Profil *
aha... Problém je v tom, že když máš maximalizované okno prohlížeče, všechno funguje (alespoň u mně) ale když změním velikost okna,
pozadí odjede někam pryč (objeví se posuvník dole) a obsah zůstává na místě. V tagu Body mám CSS nastaveno
background-attachment: fixed;

zkoušel jsem i
background-attachment: scroll;
všude se stejným výsledkem.
Zkratkou: chci aby se všechen obsah (topper, menu, texty) rozprostřel mezi ty dvě černé čáry na zeleném pozadí, i při změně velikosti okna, a ne jen když si to okno uživatel nastaví.
Han
Profil
Ten posuvník sa tam zobrazuje kvôli tomu menu. A inak nemáš vycentrovaný obsah tak nechápem ako ho xceš dostať na stred... celý kód je prasácky mám dobrú náladu a opravím ti to. Oprav si to na všetkých stránkach a oprav si aj background, nech nemáš zelenú viac naľavo... Taktiež som úplne vyhodil štýl stylecek.css.
<html>
<body style="background-image :url(pozadi_vertikal_repeat.jpg); background-repeat: repeat-y; background-position: 50%"0% ;">
<div style="margin-left: auto; margin-right: auto; width: 1025px; ">
<img src="topper.gif">
<div id="menu-box">	
<ul id="menu" class="clearfix">
	/menu/
</ul>
</div>  
<!-- AddThis Button BEGIN -->
<div id="addthis" class="addthis_toolbox addthis_default_style ">
/ Nezmyselné tlačítka /
</div> 
<!-- AddThis Button END -->
<p>
/ Klamlivý text /
</p> 
</div>

<body>                                                                                                                                                                                                                                                                                                     
</html>

Výsledok, až si opravíš ten obrázok pozadia, tak bude pod textom (ak z toho obrázku vymažeš bielu časť vľavo aj vpravo). A mohol by si sa prestať spoliehať že ti tu niekto stále bude opravovať ten tvoj spraskaný kód.
roboti006
Profil *
Nečekám opravený "prasácký" kód, ale drobnou radu, která by mě nasmělorvala ke správnému výsledku.
Ten obrázek je cíleně tak trochu nakřivo, protože jsem chtěl udržet větší část pravé strany bílou a na levo ji zmenšit, a do toho dát obsah. Ale to podle tebe nejde, takže tady asi skončím a jdu to centrovat, jako to bylo původně...
A teď otázka:
Když omezím působnost tagu <body> v CSS
body {position: absolute;
Left: 41px ;
Right: ?px}
Mohlo by to fungovat dle mých požadavků, popř. šlo by do bílého prostoru vpravo něco přidat?
Han
Profil
nepochopil som o čo ti ide, prepáč ;) nechápem čo máš s absolútnym pozicovaním a už vôbec nechápem prečo xceš pozicovať body. Ak xceš obsah (ten môj div) dať doľava tak mu len daj margin-left: 41px nie? Nechápem čo vlastne xceš.
roboti006
Profil *
Chci aby pozadí bylo tak ve dvou třetinách stránky, a taktéž na něm i obsah vtěsnaný MEZI ty dvě černé čáry, a v BÍLÉ části vpravo bude takový čtverec ve kterém bude výpis novinek, asi zase includovaný (zatím žádné nejsou)
Dixie
Profil *
Možná by jsi měl definovat jeden hlavní div s relativní pozicí a vycentrovat a do něj teprve vkládat obsah. Tím se celá stránka vycentruje a bude mít stálou šířku, čímž se nebude deformovat v jiných prohlížečích.

CSS:
body { 
text-align:center;
}
.main {
margin: 0px auto;
text-align: left;
width: 1000px;
}
.head {
width: 1000px;
float: left;
}
.left {
width: 350px;
float: left;
}
.right {
width: 650px;
float: left;
}
.clear-left {
clear:left;
}


HTML:
<body>
<div class="main">
<div class="head">
  Hlavička
</div>
<div class="left">
  Levý Sloupec
</div>
<div class="right">
  Pravý Sloupec
</div>

<div class="clear-left"></div>
</div>
</body>
Han
Profil
Dixie, predbehol si ma :/ Len dodám že divu .left daj to zelené pozadie (bez bielej) a uprav si šírky ;)
Dixie
Profil *
No samozřejmě.
Tohle je jen příklad, jak by to mohlo vypadat.

Nejsem zrovna doma, takže tu nenmám editor a si to nemůžu pořádně vyzkoušet :)
Ani jsem si nebyl jistý, jestli to bude fungovat a čekal jsem na nějaký feedback :)

A dodatečně se omlouvám za předbíhání teda :D
roboti006
Profil *
A jak mám nastavit divu pozadí? Zkoušel jsem
background-image src(...)
ale to nijak zvlášť nefungovalo
jenikkozak
Profil
roboti006:
A jak mám nastavit divu pozadí?
A co kdyby ses podíval na jakpsatweb.cz?
roboti006
Profil *
Ale ne, jestli to mám dělat přes CSS nebo přímo v tagu.
Han
Profil
Odporúčam všetok design robiť v CSS a to preto že je na to primárne určené a navyše, raz budeš xcieť niečo zmeniť a nebudeš môcť nájsť chybu až kým ti nedôjde že to máš v HTML a naopak. Takže odoprúčam celý výzor stránky robiť v CSS ;)
Dixie
Profil *
To je v podstatě jedno. Já radši používám kód v CSS, jelikož to mám radši pohromadě.
V HTML to zbytečně zabírá místo podle mého názoru.
roboti006
Profil *
Souhlasím s Vámi a děkuji :) Našel jsem chybu, a to velmi skromnou:
Chybu v cestě k souboru, protože jsem měl CSS ve složce /styly/ a ta byla na stejné úrovni jako /img/, a já jsem zapoměl že CSS se bere od umístění stylu (../img/pozadi_vertikal_repeat.jpg), a protože jsem to měl zadané v CSS i v Body, tak jsem nemohl najít které to vlastně bere vážně. Takovou titěrnost jsem opravdu nečekal (myslel jsem že se ta adresa bere od .php souboru, a hle, Karkulka je vlk :D
Ale furt mám potíže: Teď například vůbec nefunguje scrollování... myslím že to je někde v CSS ale nevím to jistě budu zkoušet, a pořád mi to mění pozici ten obsah.
roboti006
Profil *
Tak jsem to zkoušel, je to dost dobrý (ta vaše verze). Bohužel po úpravě mi to hodilo další sloupec pod ten první... nevím, asi to udělám od začátku...
jo tak znovu jsem to od základů udělal tak jak jste říkali, a je to dost dobrý. Funguje to, zatím ve fázi vývoje, ale rýsuje se to...
Velmi děkuji :)
Dixie
Profil *
Můžu vidět progress?
Tím myslím link, nebo tak podobně :)
roboti006
Profil *
OK http://sjiaphoto.euweb.cz/ - je to primitivní, moc nezajímavé ale já se u vývoje docela bavil... ;)
Ještě bych potřeboval poraditt s těmi "nezmyslnymy" tlacitky, a počítadlem. Jak je mám umístit na topper (je tam position), taky skáče s oknem jak se mu zachce, popřípadě jestli to tam vůbec mám dávat, nebo si mám udělat na to <div class="paticka"> a dát to dolů jako patičku...
jenikkozak
Profil
roboti006:
popřípadě jestli to tam vůbec mám dávat
Ne.

Porušuješ podmínky Webzdarma.
roboti006
Profil *
Čím?
Tím že tam mám lištu Addthis?
Nebo vlastním počítadlem?
Moderátor Chamurappi: Nedávkuj svá sdělení do kupy příspěvků!
jenikkozak
Profil
roboti006:
Čím?
Podmínky zobrazování reklamy: V případě, že si přejete mít na svých stránkách pouze jeden námi vkládaný reklamní banner, je podmínkou, aby byl umístěn na úvodní stránce nahoře. [...] Stránky které kromě banneru nemají žádný další obsah a slouží pouze jako vstupní stránky (obsahují víceméně pouze: "Vstupte", "Pokračujte zde", atp.), nejsou úvodní stránkou.
roboti006
Profil *
No... Problém je v tom že ta stránka je dělána s include. Určitě nechcu mít reklamu nahoře to je logické, ale kdybych dal na všech stránkách dolů, to by tam ta reklama byla dvakrát nebo dokonce čtyřikrát, a PORUŠOVALA pravidla google AdSence, pročež by mohl být webzdarma vyloučen. Odmítá to jakýkoli kompromis, vždy když přesunu reklamu v php, okamžitě se zase smaže a přemístí zpět, a přitom by ta reklama byla na všech stránkách nahoře, no řekni není to blbost?
roboti006
Profil *
Asi půjdu vyjednávat se správci abych se dostal ke kloudnému řešení.
roboti006
Profil *
Tak jsem to vyřešíl, s podporou se pobavil na toto téma a zjistil že řešení mnou vymyšlené je podle všech pravidel legální:
Když dám na jednu stránku reklamu nahoru a vyberu ji jako speciální soubor a potom naincluduji do spod všech stránek je to plně legální řešení a nikdo s tím nebude mít problém takže odpoledne to dodělám...

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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

0