| Autor | Zpráva | ||
|---|---|---|---|
| mencik Profil |
#1 · Zasláno: 1. 1. 2014, 14:30:39
Fakt se můžu zeptat i na blbost? Hraju si s tím už 2 hodiny a furt marně - chci mít obrázek "Logo2" ve středu stránky.
Povel: "text-align: center" ale na to nemá žádný vliv, obrázek je furt vlevo na kraji :-((( Jedině povel: "left: 175px;" mně ho dostane od kraje - jenže já ho chci mít ve středu - což použitím toho povelu pro různé monitory pochopitelně nedosáhnu. Celý kod v CSS mám napsaný takto: #logo2 {
width: 350px;
height: 72px;
display: block;
background: url("img/logo2.jpg") no-repeat;
position: absolute;
top: 25px;
z-index: 5;
text-align: center;
}Poradíte mně - co tam mám napsat jinak? Pouhé smazání toho "left" nepomůže :-( Díky za radu :-) |
||
| Joker Profil |
#2 · Zasláno: 1. 1. 2014, 14:47:11
mencik:
S position:absolute bude hrozně těžké to zarovnat na střed. (Hlavně na střed vzhledem k čemu, když prvek s position:absolute je vyjmutý z toku stránky a není ovlivněný ostatními prvky.) |
||
| anonymníí Profil * |
#3 · Zasláno: 1. 1. 2014, 14:57:52
Joker:
„S position:absolute bude hrozně těžké to zarovnat na střed.“ pozicování je sice nesmysl, ale centrování s jeho pomocí složité nebude. left: 50%; margin-left: -175px
|
||
| mencik Profil |
#4 · Zasláno: 1. 1. 2014, 15:04:20
Děkuji anonymnííííímu - funguje to tak :-)
Jen nevím, proč je pozicování obrázku loga nesmysl, když v hlavičce stránky chci mít obrázek ve středu hlavičky? |
||
| petr 6 Profil |
#5 · Zasláno: 1. 1. 2014, 17:33:01
mencik:
Protoze se toho da dosahnout i bez position:absolute |
||
| Joker Profil |
#6 · Zasláno: 1. 1. 2014, 22:51:12
anonymníí:
„pozicování je sice nesmysl, ale centrování s jeho pomocí složité nebude.“ Jak jsem psal, záleží vzhledem k čemu, nebo lépe řečeno na střed čeho. Nevím, jestli mencik ve skutečnosti ten prvek chce umístit na střed okna, resp. nějakého prvku s position:relative, bez ohledu na rozmístění ostatních prvků. Jelikož se to jmenuje „logo“, dost možná to ve skutečnosti má být jen ve středu hlavičky, nebo nějakého kontejneru. To je podle mě typický problém absolutního pozicování: Autor všemu dá position:absolute a pak ty pozice nastaví tak, aby se prvky „správně“ překrývaly, navazovaly a podobně. Jenže to sice u něj vizuálně tak vypadá, ale jinak ty prvky jsou nezávislé na sobě navzájem, takže někde jinde se to může úplně rozsypat. |
||
| mencik Profil |
#7 · Zasláno: 2. 1. 2014, 18:08:42
Ano - má to být ve středu hlavičky - píšu to už v prvním dotazu. A ta hlavička je na celou šířku obrazovky "html, body {width: 100%;"
Pokud se to ale někde "rozsype" - tak je to dost blbý!! :-( Pochopitelně, že na "absolutním" pozicování netrvám, tak bych uvítal konkrétní informaci lepšího řešení - co do toho kodu css - (jak ho mám uveden nahoře) - mám teda napsat jinýho - aby to logo2.jpg bylo opravdu uprostřed hlavičky, včetně "top: 25px;" Mám tam ještě jenom další 2 stejně vysoké obrázky - jeden "float: left" a druhý "float: right;" Kolem nich je plno místa - takže tam žádné "obtékání " nehrozí. Děkuji za konkrétní radu. |
||
| Trejpa Profil |
#8 · Zasláno: 2. 1. 2014, 18:33:25
mencik:
„Děkuji za konkrétní radu.“ Konkrétní radu dostaneš ke konkrétní stránce. Problémem začátečníků je, že pozicují vše, pozicují každou maličkost zvlášť a nedomýšlí vytržení z obsahu, výšky elementů a různé velikosti okna. Takže doporučuji ze začátku vůbec nepozicovat. „má to být ve středu hlavičky“ Jednořádkové texty svisle vystředíš pomocí výšky řádku (line-height) nastaveným na výšku elementu. Obrázek můžeš do takto vysokého řádku zarovnat pomocí svislého zarovnání objektu vertical-align: middle. |
||
| mencik Profil |
Hmmm - tak vertikal align middle nepomohl - když jsem oddělal radu anonymnííího (left 50%) tak obě loga mám přilepený v levým horním rohu.
Mám v hlavičce 3 prvky - vlevo logo.jpg, uprostřed logo2.jpg a vpravo "hotline" - a mám to v css nyní ošéfovaný takto (blbě): #header {
background: #963 url("img/tapeta.jpg") repeat-x;
width: 100%;
height: 120px;
border-bottom: 1px solid black;
z-index: 1;
position: relative;
}
#logo {
width: 138px;
height: 117px;
display: block;
background: url("img/logo.gif") right bottom no-repeat;
float: left;
}
#logo2 {
line-height: 72px;
width: 700px;
height: 72px;
display: block;
background: url("img/logo2.jpg") no-repeat;
vertical-align: middle;
/*
position: absolute;
top: 15px;
z-index: 25;
left: 50%;
margin-left: -390px; */
}
#hotline {
float: right;
padding: 5px 15px 0 0;
font: bold 100%/1.2 Tahoma, sans-serif;
}Tak - co tam teda mám blbě? |
||
| Trejpa Profil |
#10 · Zasláno: 2. 1. 2014, 20:54:16
mencik:
„tak vertikal align middle nepomohl“ No jo, ale psal jsem, že se vertical-align používá na obrázky (inline bloky), aby se srovnaly k výšce řádku. „co tam teda mám blbě“ Celý ten koncept hlavičky je divný. Když budu mít stránku širokou 640 px, tak se budou prvky v ní překrývat. A když 2400 px, tak budou zase strašně daleko od sebe. Na tohle bych doporučil pevnou šířku celé stránky. Ale co už, jde to udělat jednoduše pro dva stejně široké bloky po stranách se zadanou minimální šířkou. Pro konkrétní stránku bych možná vymyslel něco vhodnějšího, teď vycházím jen z toho kousku CSS. Příklad. |
||
| mencik Profil |
#11 · Zasláno: 3. 1. 2014, 15:06:55
Děkuji za konkrétní příklad - opravdu to krásně funguje. :-)
Jenže: původní pozicování skutečně způsobí, že při zúžení okna se prvky vzájemně překrývají - což není pěkné - ale v případě překrytí loga není funkčně podstatné Při navrženém Trejpově řešení a zúžení okna ten obrázek logo2 skočí dolů - (na další řádek textu) - čímž už ale překryje menu - čímž můj web znefunkční :-( Takže asi? mně nezbyde než zůstat u absolutního pozicování a doufat - že umístění 3 prvků - asi takové velikosti jako je v Trejpově "Příkladu" nezpůsobí - že se to někde "rozsype". Takže možná to absolutní pozicování přece jen k něčemu je? Nebo - máte snad někdo jiný názor? Každopádně děkuji všem, co se o můj "problém" zajímali a radili mně tu. |
||
| Trejpa Profil |
#12 · Zasláno: 3. 1. 2014, 16:07:35
mencik:
„Při navrženém Trejpově řešení a zúžení okna ten obrázek logo2 skočí dolů“ Neskočí. Pokud máš standardní vykreslovací mód (závisí na doctype), tak tomu odskočení zabrání zadaná nebo maximální šířka vnořených bloků, minimální šířka obalujícího bloku a ořez pomocí overflow nebo vlastnost word-wrap. Vše je tam nastavené pro použité rozměry. Další variantou je nepozicovat střed, ale pozicovat krajní bloky. Doplnil jsem příklad. |
||
| mencik Profil |
#13 · Zasláno: 3. 1. 2014, 17:20:25
Trejpa děkuju moc - zvolil jsem to Tvoje řešení "Pozicováním".
A plně mne uspokojuje, nic neodskakuje, v nejužším okně se překrývá logo - což nevadí. Nyní už mám tedy hlavičku webu skoro profesionální :-) Ted se dám do levého menu - su zvědav, zda si s tím poradím - nebo zda tady zase založím další vlákno ;-) |
||
| mencik Profil |
Ach jo - včera su nadšený - jak se to pěkně zobrazuje - a nyní jsem si všiml - že to logo2 mně přestalo odkazovat.
Zase tam mám něco blbě. CSS mám podle Trejpova příkladu pozicování (to snad na odkazování nemá vliv??) a v <body> to mám takto: <div id="header">
<div id="hotline">
<div id="quick-contact">
Mail: <a href="mailto:menci@art-atelier.eu">menci@art-atelier.eu</a><br />
Tel . : +420 / 732 115 439<br />
</div>
</div>
<div id="logo">
<a href="./" id="logo" title="Návrat na úvodní stranu"></a>
</div>
<div id="logo2">
<a href="./" id="logo2" title="Návrat na úvodní stranu"></a>
</div>
</div> <!-- KONEC #header -->Poradí mně někdo - co tam mám zase blbě, že obrázek logo.gif - odkazuje normálně, ale obrázek uprostřed logo2.jpg neodkazuje vůbec. Hotline funguje normálně. Už se s tím zase pár hodin marně mořím :-((( Díky!! Poznámka: zkoušel jsem i tu variantu "plaváním" - při ní mně ale stále při zúžení stránky skáče to logo2 dolů ... a klikací stejně není :-( |
||
| Trejpa Profil |
#15 · Zasláno: 4. 1. 2014, 15:41:43
mencik:
A co jsi udělal pro to, aby se prázdný odkaz bez obsahu textu nebo obrázku zvětšil na plochu, ve které má býti klikací? Nepoužil jsi náhodou stejné ID pro dva prvky ve stránce ( id="logo2"), že ne?
V CSS stačí odkazu nastavit display: block; a třeba height: 117px; a tím prostor v rámečku vyplní, ale pro tento případ je vhodnější použít jako logo a název (nadpis) stránky normální obrázek (<IMG>) v odkaze, ne prázdný odkaz s pozadím. Obrázek nese informaci pro návštěvníka a může být i vyhledatelný vyhledávači na obsah atributu ALT. Pak ještě narazíš na problém s mezerou pod obrázkem. |
||
| mencik Profil |
#16 · Zasláno: 4. 1. 2014, 18:16:58
Trejpa:
„A co jsi udělal pro to, aby se prázdný odkaz bez obsahu textu nebo obrázku zvětšil na plochu, ve které má býti klikací?“ Mám "logo2" nastavený v CSS stejně, jako to "logo" #logo2 {
margin: 14px auto 0;
width: 580px;
line-height: 72px;
background: url("img/logo2.jpg") no-repeat;
position: relative;
z-index: 1;
}tedy pomocí backgroundu. A v případě "logo" to tak stačí a funguje. ----------------------------- Ale moc Ti děkuji za radu - zatím to jede. Pomohl ten "display: block;" (ten tam předtím nebyl a u "logo" stále není). Obrázek v odkazu pomůže sice taky, jenže - i když jsem mu nastavil border=0, tak byl furt v rámečku!! - což se mně tam nehodilo. Zaráží mě hlavně to, jak to - že při mém prvním hloupém řešení při "position=absolute" to vše fungovalo i bez "blocku" a s tím Trejpovým řešením fungovalo to "logo" správně (i bez blocku), ale to logo2 - tak, jak ve (viz. výše) nastaveno, tak neklikalo. Nyní jsem musel navíc oddělat i ten <div id="logo2"> . Když tam byl - tak tam to logo2 bylo 2x nad sebou - mírně posunutý - 1x klikaci + 1x neklikací :-D
No - těch záhad je pro mne v HTML daleko víc - řeším to metodou "pokus >> chyba" ;-) Hlavičku webu už mám snad jakž-takž podle mé představy - a to je hlavní - tak díky :-) |
||
| Trejpa Profil |
mencik:
A proč to klikací musí být v blocích? Vyhoď je a použij jen odkazy s display: block;. „Když tam byl - tak tam to logo2 bylo 2x nad sebou - mírně posunutý“ A proč jsem asi psal, zda jsi nepoužil dvě stejné ID? Asi proto, že je to zakázané a může to způsobovat problémy. Ale na to už jsi přišel. |
||
| mencik Profil |
#18 · Zasláno: 4. 1. 2014, 20:07:00
Trejpa:
> mencik: > A proč to klikací musí být v blocích? Vyhoď je a použij jen odkazy s display: block;. Vyhodil jsem je - a vidím, že v <div>u být nemusí. Dal jsem je do nich proto - že jsi to tak napsal ve svém „Doplnil jsem příklad.“ Tak o tom nediskutuju, nepřemýšlím a překopíruju!! Pak čučím - co to se stránkou udělalo :-D |
||
|
Časová prodleva: 10 let
|
|||
0