Autor Zpráva
joe
Profil
Ahoj!

Tak nějak ve chvíli volna řeším věc, zatím jsem ji nevymyslel.
Mám web, kde je hlavička přes celou šířku okna prohlížeče. Samozřejmě jen pozadí je přes celou šířku, obsah v hlavičce má pevně dané rozměry. Třeba 950px.

Jak to udělat, abych měl v CSS jen jednou 950px a v případě změny to nemusel měnit na více místech?

Snad jediné co mě teď napadlo, je dát pozadí do divu, který by byl absolutně pozicovaný nahoře s šířkou 100% ...

Máte jiný nápad?
Chamurappi
Profil
Reaguji na joa:
Jestli jde opravdu jen o to měnění na jednom místě, tak můžeš mít:
#hlavicka, #obsah { width: 950px; }
… nebo společnou třídu přiřazenou všemu, co má mít stejnou šířku.

Pozicování je trochu krokolomné a nešlo by použít vždy. Vyhnul bych se mu, i kdybych tu šířku musel psát na pět míst — to je přeci jen drobné autorské nepohodlí, které návštěvník nepocítí.
phib
Profil *
nevim jestli to chápu... ale

#hlavickapozadi {width: 100%; background: #000 (.jpg)}
#hlavicka {width: 950px; margin: 0 auto;}

<div id="hlavicka pozadi">
<div id="hlavicka">
</div>
</div>

nebo by slo to pozadi i nastavit pro body (zalezi ale na konkretni strance a pozadi)
Miloš
Profil
1) Pozadí dej body a nenech ho repetovat, zatímco stránku jako takovou obal divem a hlavičku standardně do <h1> – viz http://mfp.php5.cz/ukazky/pruh_na_hlave/
2) Nebo pozadí viz předchozí bod, ale textový obsah hlavičky obal společně se zbytkem stránky blokem s danými rozměry a auto-marginem – viz http://kesolim.sweb.cz/Xsaer/
joe
Profil
Miloš:
Zapomněl jsem napsat, jedná se o jednobarevné pozadí, takže mi stačí barva. A dávat ji jako obrázek se mi nechce. Navíc je to tmavá barva, tzn. že horní pruh je tmavý a text na něm bílý -> pokud bych dal jen jako obrázek, tak bez obrázků bude bílé písmo na bílém podkladu, to není moc dobrý.

K druhému příkladu, pomalu se divím, že se vůbec zobrazuje tak jak má :-)

phib:
To je to, čemu jsem se chtěl vyhnout :-)

Chamurappi:
Trefil jsi to, popravdě mě to v době psaní vůbec nenapadlo, protože nerad používám víc selektorů společně, které spolu moc nesouvisí.

Nakonec jsem to udělal tak, že mám #page s definovanou šířkou, uvnitř toho je #header (ten už tu šířku nemá) a má barvu pozadí a někde kdekoli dole v kódu je stejně vysoký div jako #header se stejnou barvou, která mi udělá nahoře pruh ... a ten je absolutní.

Jinak proč myslíš, že by měl být problém s pozicováním?

Snad jen, že bys myslel to, že když se rozšíří #header v #page, už se nerozšíří ten div, co dělá ten pruh. Ale tady mám stejnou výšku. Takže zas definuju výšku dvakrát jinde. No to je bordel :-))

EDIT: takže bude jednodušší to udělat tak, jak jsi poslal...
habendorf
Profil
joe:
takže bude jednodušší to udělat tak, jak jsi poslal...

Jo, a nejen jednodušší. Je to řešení, které má prostě nějakou vnitřní logiku.

nerad používám víc selektorů společně, které spolu moc nesouvisí
Sice nevím proč, ale i to je řešitelné.

.box { width: 950px; margin:0 auto;}

<div class="box hlavicka">
</div> 
<div class="box obsah">
</div> 


A máš šířku na jednom místě.
joe
Profil
habendorf:
Sice nevím proč, ale i to je řešitelné.

To je jednoduchý. Protože když jsou vlastnosti na více řádkách, člověk se pak hned ztrácí. A je určitě rychlejší a daleko přehlednější, když zapnu FireBug a všechno mám u jednoho selektoru, než když musím scrollovat a zjišťovat, jestli ta hodnota není někde jinde, co by mohla dělat problém.

Jasně, třídy znám, myslel jsem nějak jednoduše, abych nemusel nic nového psát do HTML. Jinak plno tříd taky nemam rád :-) i když se tomu u složitějších designů třeba nedá moc vyhnout.
habendorf
Profil
joe:
Jinak plno tříd taky nemam rád :-)

Tak třídu box a pak různá id :o)
Mihh
Profil *
Ahoj ... prosím o pomoc, navazuju na toto vlákno.

V podstatě mám ten samý problém, řeším to už poměrně dlouho a stále si nevím rady, zkoušel jsem to pomocí dvou divů, ale to nakonec udělalo víc škody než užitku.

Tak k věci(vysvětlení prosím polopatě, začínám):
Mám tedy header - nějaká barva, nadpis, pozadí - nějak to nakonec drží pohromadě, i když pořádně nevím jak. Má šírku - 100%.(když okno zmenšuju, stránka se deformuje)
Teďka bych rád aby stránka tedy měla šířku třeba tady uvedených 950px, ale zároven header měl pozadí přes celou šíři. V podstatě jako mají linky od Miloše(krom deformace při zmenšení okna).

Zkoušel jsem to následovně, ale bez úspěchu.
#HEADER             {position: absolute; top: 0px; width: 100%; height: 150px; margin-left: auto; margin-right: auto; margin-top: 0px; background-color:  blue; border-bottom-style: solid; border-color: white;}
#HEADER .styl        {width: 950px, margin: 0 auto}<div id="HEADER">
<div class="styl">
<h1><a href="index.html">MIHHC</a></h1>
<a href="index.html"><img src="obraz.jpg"/></a>
</div>
</div>

Tak prosím rady, děkuju.
jenikkozak
Profil
Mihh:
Asi bude stačit nastavit barvu a obrázek na pozadí prvku <body> Pak by se z HEADERu mohl vyhodit nadbytečný div „styl“, přičemž header by měl nastavenou šířku 950 px, margin a spodní rámeček. Ale záleží na tom, jak ten obrázek na pozadí vlastně vypadá.
Mihh
Profil *
jenikkozak:
Ano, to chápu, ale nechci mít "header" s totožným pozadím jako "body". Pro příklad uvadím: <a href="http://www.hokage.cz/">tuto stránku:hokage.cz</a> ... chci prakticky totéž, tam je to krásně vidět - header = 100%, ale prakticky jen nějakých 800px, a těch 800px(nebo kolik tam je) pak je užitých na celé stránce.
Mihh
Profil *
omluva, nevím jestli tu platí pravidla pro psaní html nebo normální :), zkrátka: http://www.hokage.cz/
Miloš
Profil
A v čem je problém? Nejprve uveď v kódu hlavičku, které nastavíš 100% šířku, pozadí a podobně, a pak teprve uveď obalovací div pro zbytek stránky, kterému nastavíš požadovanou šířku 800px.

<style>
h1 {width: 100%; height: 250px; background: nejaka_barva_nebo_obrazek;}
div#obal_zbytku_stranky {width: 780px;}
</style>

<body>
<h1>Hlavička přes celou šířku</h1>
<div obal_zbytku_stranky>
   tady je zbytek stránky
</div>
</body>
Mihh
Profil *
Miloš:
Obávám se, že to není přesně ono.
Já bych chtěl sice aby pozadí header bylo width: 100%, ale aby šlo psát(vkládat obrázky, atp.) jen těch 780px - mám v header i menu, takže by to vypadalo děsně.
A pak pro zbytek stránky těch samých 780px, ale to už je mi jasné.
Opravdu na stránce: http://www.hokage.cz/ ... je krásně vidět ten header(width: 100%, ale ty obrázky jsou nějak pevně určeny a ne na procenta, a když se okno zmenšuje tak se to krásně zasekne na oné šířce) ... přesně o to usiluji, bohužel nejsem schopen to z jejich zdroje vyčíst.
jenikkozak
Profil
Mihh:
Na stránce, kam jsi odkázal, to mají řešené taky obrázkem na pozadí <body>, jak jsem psal výše. Obrázek je vysoký 240 px a opakuje se po horizontální ose. Zbytek webu je (i když necelý, ale to nemusíš řešit) v divu „site“, který má nastavenou pevnou šířku (881 px) a je zarovnán na střed stránky. V tomto divu je i hlavička webu, která tedy není široká 100 % obrazovky, to je klam, který způsobuje ten obrázek na pozadí <body>.
Mihh
Profil *
jenikkozak:
Aha, moc díky. Jak to čtu - tak jste měl pravdu už od začátku.
Vyzkoušel jsem si to chápu, mě nenapadlo, že to celé je 1 pozadí - neuměl jsem si představit, jak by měl být ten obr. veliký, to tedy přesně pořád nechápu(nemusíte vysvětlovat), ale určitě stylem pokus omyl na to přijdu a pochopím.

Další dotazy trochu opouštějí téma.
Evokuje to ve mě další dotaz: Neexistuje asi nějaký zápis pro pozadí hlavičky<divu>, které už leží jako pozadí<body>(že by to pozadí(divu) bylo prakticky průhledné)? Asi na tom webu, který jsi mi tak krásně rozebral, mají ten obrázek trochu ořízlý a daný znovu jako background jejich hlavičky(tomu rozumím).
Ještě 1 dotaz: Jak si udělat normální průhledný obrázek? Já ho udělám ve Photoshopu, něco "napatlám" na zvolené průhledné pozadí. Ovšem po vložení do internetových stránek se pozadí vždy objeví jako bílé.
jenikkozak
Profil
Mihh:
Neexistuje asi nějaký zápis pro pozadí hlavičky<divu>, které už leží jako pozadí<body>(že by to pozadí(divu) bylo prakticky průhledné)?
Ve spodní vrstvě leží pozadí body, přes něj by se zobrazila vrstva s pozadím divu. Má-li být pozadí divu průhledné, aby pod ním bylo vidět pozadí patičky, stačí u divu žádné pozadí nenastavovat.

Asi na tom webu, který jsi mi tak krásně rozebral, mají ten obrázek trochu ořízlý a daný znovu jako background jejich hlavičky(tomu rozumím).
Ne. Na pozadí <body> je ten 240 px vysoký obrázek se šířkou 1 px, ale je roztažený přes celou šířku stránky. Hlavička jejich webu nemá pozadí žádné. Proto je přes ni vidět pozadí stránky.
V té hlavičce jsou dva obrázky (v tomto případě vložené přes <img>) - levý a pravý. Oba tyto obrázky jsou obalené dvěma odkazy na úvodní stránku. (U toho druhého obrázku mají JavaScriptem nastaveno, aby se tam zobrazoval náhodně vybraný z určité množiny obrázků. Na tom ale nyní nezáleží.)

Ovšem po vložení do internetových stránek se pozadí vždy objeví jako bílé.
Je nutno ukládat obrázek ve formátu, který průhlednost podporuje - v gifu nebo png. Pokud budeš vědět, co se pod obrázkem bude zobrazovat za pozadí (jako je tomu v případě té stránky, na kterou jsi odkázal), můžeš toto pozadí do obrázku přidat už před uložením a pak nemusíš dumat nad průhledností.
Mihh
Profil *
jenikkozak:
Moc díky, všechno jsem ozkoušel a rozumím. Příště tedy budu spamovat v jiném tématu :).
Tato metoda je dokonalá, na netu jsem pak našel ještě o něco složitější: http://www.webdesign.org/html-and-css/tutorials/css-large-background.16479.html

Jen čistě teoreticky, proč nefungoval ten můj zápis s tou třídou: #HEADER .styl {width: 950px, margin: 0 auto} [#9] Mihh

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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