| Autor | Zpráva | ||
|---|---|---|---|
| war maniac Profil |
#1 · Zasláno: 2. 12. 2010, 18:37:37 · Upravil/a: war maniac
Ahoj, mám takvový problém týkající se patičky... Udělal jsem si layout pomocí absolutního/relativního pozicování, hlavní div má relativní pozici je vycentrován a ostatní divy s obsahem jsou do něj zanořené s apsolutní pozicí. Pak mám samostatné divy hlavicku a patičku. Hlavička je absolutní a má top a left na nule, ale co právě potřebuji a nedaří se mi to je ta patička která je též samostatný div. Potřebuju jí zobrazovat pod obsahem na konci dokumentu ať je jak chce dlouhý (proto nemůžu použít absolutní pozici) zkoušel jsem taky float a clear ale bez většího úspěchu... kdyby někdo věděl jak na to budu mu vděčný když napíše Díky
Web: ZDE (ta patička je to co je překryté přes hlavičku) Stylopis: body {text-align: center; font-size: 12pt; font-family: "Trebuchet MS", "Geneva CE", lucida, sans-serif; background: #ededed; }
#cela_stranka {width: 801px; position: relative; text-align: left; margin: auto;}
#header {height: 261px; width: 100%; background-image: url('header.png'); position: absolute; left: 0px; top: 0px;}
#logo {visibility: hidden; position: absolute; left: 0px; top: 10px; }
#menu {visibility: hidden; position: absolute; left: 15px; top: 195px;}
#main {position: absolute; height: 801px; top: 0px; left: 0px;}
#title {position: absolute; top: 250px; left: 15px; background-image: url('main_top.png'); height: 25px; width: 801px;}
#content {position: absolute; top: 275px; left: 15px; background-image: url('main_content.png'); width: 801px;}
#bottom_small {position: absolute; background-image: url('main_bottom.png'); height: 5px; width: 801px;}
#bottom {position: relative; background-image: url('bottom.png'); height: 87px; width: 100%; left: 0px;}
#hack {margin: 17px;}
#hack2 {margin: 3px;}
#uvodni_stranka a {width: 155px; height: 39px; background: url("uvodni_stranka_double.png") 0 0 no-repeat; position: absolute; left: 0px;}
#uvodni_stranka a:hover {background-position: -155px 0;}
#o_mne a { width: 75px; height: 39px; background: url("o_mne_double.png") 0 0 no-repeat; position: absolute; left: 155px;}
#o_mne a:hover {background-position: -75px 0;}
#reference a { width: 110px; height: 39px; background: url("reference_double.png") 0 0 no-repeat; position: absolute; left: 230px;}
#reference a:hover {background-position: -110px 0;}
#sluzby a { width: 79px; height: 39px; background: url("sluzby_double.png") 0 0 no-repeat; position: absolute; left: 340px;}
#sluzby a:hover {background-position: -79px 0;}
#kontakt a { width: 90px; height: 39px; background: url("kontakt_double.png") 0 0 no-repeat; position: absolute; left: 419px;}
#kontakt a:hover {background-position: -90px 0;}
.title_text {font-family: "Trebuchet MS", "Geneva CE", lucida, sans-serif; font-size: 11pt; font-weight: normal; font-style: normal; text-align: left; color: white; padding-left: 7px;}
|
||
| TomasJ Profil |
#2 · Zasláno: 2. 12. 2010, 18:44:11 · Upravil/a: TomasJ
#bottom {position: relative; background-image: url('bottom.png'); height: 87px; width: 100%; left: 0;bottom: 0;}
a kdyby ten první nešel, pak tento:
#bottom {position: relative; background-image: url('bottom.png'); height: 87px; width: 100%; left: 0;top: 100%;}
|
||
| panther Profil |
#3 · Zasláno: 2. 12. 2010, 19:08:51
TomasJ:
ne. war maniac: nepozicuj, v tomto případě je to úplně zbytečné. Veškeré pozicování vymaž, pak budeš mít hlavičku, pod ní obsah a pod ním patičku. |
||
| war maniac Profil |
#4 · Zasláno: 2. 12. 2010, 19:19:26 · Upravil/a: war maniac
panther:
Hm. Takže to mám udělat přes float? jak to potom vycentruji? |
||
| TomasJ Profil |
#5 · Zasláno: 2. 12. 2010, 19:28:56 · Upravil/a: TomasJ
panther:
> ne. Proč myslíš, že ne? Není to snad řešení? |
||
| panther Profil |
#6 · Zasláno: 2. 12. 2010, 20:12:13
war maniac:
o floatu jsem primárně nic nepsal. Začni tím, že vyhážeš veškeré pozicování. „jak to potom vycentruji?“ centrování na tom máš, jako jediné, správně. TomasJ: „Proč myslíš, že ne? Není to snad řešení?“ ne, řešení to opravdu není. Už podruhé během hodiny tě žádám, aby sis svá tvrzení nejprve ověřil a vyzkoušel. |
||
| TomasJ Profil |
#7 · Zasláno: 2. 12. 2010, 22:41:26 · Upravil/a: TomasJ
panther:
„...aby sis svá tvrzení nejprve ověřil a vyzkoušel.“ Ale já si bottom: 0; i top:100%; vyzkoušel a šlo mi to víš? Dokonce to mám i na svém webu, patičku dole a pomocí top:100%; By mě zajímalo, jestli si všechna svá tvrzení zkoušíš i ty... A že jsem se předtím zmýlil, no a? Jsem jen člověk. Taky se ti to může stát. |
||
| panther Profil |
#8 · Zasláno: 2. 12. 2010, 23:08:13
TomasJ:
„Ale já si bottom: 0; i top:100%; vyzkoušel a šlo mi to víš?“ v tomto případě ti nevěřím. S takto udělaným absolutně pozicovaným layoutem to nemohlo fungovat. Tedy, ono to funguje, ale vzhledem k tomu, že #content má nulovou výšku, nefunguje to tak, jak si myslíš.
„Dokonce to mám i na svém webu, patičku dole a pomocí top:100%;“ tvůj a odkázaný web jsou dva různé - mícháš jablka s hruškami. „By mě zajímalo, jestli si všechna svá tvrzení zkoušíš i ty…“ poslední dobou už moc ne, přeci jen už trochu vím, jak se v dané situaci budou prohlížeče chovat. Když si nejsem jistý, pak ano, své tvrzení si ověřím, než jej vypustím do světa. „A že jsem se předtím zmýlil, no a?“ nejen předtím, i teď. A děje se jen to, že až na vlákno s bludem narazí začátečník, bude zmaten. |
||
| TomasJ Profil |
#9 · Zasláno: 3. 12. 2010, 00:40:52
panther:
Hele nemám náladu se tady dohadovat o blbostech. Máš pravdu. Jsi nej. |
||
|
Časová prodleva: 8 dní
|
|||
| cz_tryit Profil * |
#10 · Zasláno: 10. 12. 2010, 18:44:22
Ahoj, trpím stejným problémem a mám patičku pozicovanou jak přes bottom: 0px; tak i přes top: 100%;
 - Tohle mi to děláA tohle je kus stylopisu s pozicovanými objekty:
#body {
width: 800px;
margin-top: 15px;
margin-bottom: 15px;
margin-left: auto;
margin-right: auto;
position: relative;
}
#head {
width: 800px;
height: 100px;
left: 0px;
top: 0px;
position: absolute;
}
#menu {
top: 100px;
position: absolute;
width: 200px;
float: left;
}
#main {
top: 100px;
left: 200px;
bottom: 32px;
position: absolute;
width: 600px;
background-color: maroon;
}
#foot {
position: absolute;
top: 100%;
bottom: 0px;
left: 0px;
width: 800px;
height: 32px;
text-align: center;
line-height: 32px;
font-size: 8pt;
background-color: navy;
}
|
||
| panther Profil |
#11 · Zasláno: 10. 12. 2010, 18:51:45
cz_tryit:
dodej odkaz na web. Z obrázku se těžko věští, kde máš chybu. |
||
| cz_tryit Profil * |
#12 · Zasláno: 10. 12. 2010, 20:29:22
panther:
Myslím, že z obrázku je snad poznat, o to dělá, prostě mi to posouvá patičku na nesprávné místo, což je vidět, když na ten obrázek klikneš. |
||
| cz_tryit Profil * |
#13 · Zasláno: 10. 12. 2010, 20:42:14
panther:
#foot {
position: absolute;
top: 100%;
bottom: 0px;
left: 0px;
width: 800px;
height: 32px;
text-align: center;
line-height: 32px;
font-size: 8pt;
background-color: navy;
}
Zkusím to dát na nějaký pokusný freeserver. |
||
| cz_tryit Profil * |
#14 · Zasláno: 10. 12. 2010, 21:00:09
|
||
| cz_tryit Profil * |
#15 · Zasláno: 10. 12. 2010, 21:01:43
A má to u tlačítka po kliknutí na Homepage nechat svítit to zelené světýlko (vyhrál jsem si v grafickém editoru).
|
||
| panther Profil |
#16 · Zasláno: 10. 12. 2010, 21:04:55
cz_tryit:
kromě toho, že bych ti pozicování nedoporučoval, chová se to tak, jak máš zapsáno. Pozicuje se to absolutně ke spodní hraně nadřazeného bloku, tedy div#body. Ten má ale nulovou výšku, neboť veškerý jeho obsah je pozicovaný = vyjmutý z toku dokumentu.
Strukturu HTML z obrázku nevykoukám, příště přikládej, prosím, odkaz na web rovnou s položením prvního dotazu. Zároveň, chceš-li něco napsat, nejprve si rozmysli, co všechno nám chceš sdělit a pak to napiš do jednoho příspěvku. Nejsme na chatu. |
||
| cz_tryit Profil * |
#17 · Zasláno: 11. 12. 2010, 13:09:12
panther:
OK, příště to zkusím. Jinak to měla být hlavní strana mého freewebu o Quake III Aréně, jsem totiž vášnivý hráč této populární střílečky a rád bych taky přispěl do komunity. |
||
| cz_tryit Profil * |
Hmm, vyřešil jsem to vyházením vlastnosti
position: absolute; Moderátor Davex: Odtud byly vytrženy další příspěvky od Katie do samostatného tématu Patička pod obsahem v absolutně pozicovaném rozložení
|
||
|
Časová prodleva: 13 let
|
|||
0