| Autor | Zpráva | ||
|---|---|---|---|
| Shadowek Profil |
#1 · Zasláno: 18. 10. 2009, 17:05:44
Omlouvám se za název topicku asi zní trochu zvláštně ;). Kódoval jsem jeden webdesing ale potřeboval jsem tam text začít už v předchozím divu.Tak jsem ho napozicoval se zápornou hodnotou top.Bohužel jsem zjistil že když jsem pozici tohoto divu zvolil -150px tak na místě kde by měl web už končit protože tam není žádný text přebývá oněch 150 px.Nenapadlo mě žádné řešení jak to změnit.Ono to není zas tak velký problém ale někdy se to pozná ...
|
||
| Zechy Profil |
#2 · Zasláno: 18. 10. 2009, 17:07:32
A živá ukázka či aspon kod?
|
||
| Shadowek Profil |
#3 · Zasláno: 18. 10. 2009, 17:15:52
CSS:
#page {
width: 843px;
}
#logo {
width: 843px;
height: 520px;
background-image: URL('page1.jpg');
background-repeat: no-repeat;
}
#stred {
width: 843px;
background-image: URL('page2.jpg');
background-repeat: repeat-y;
min-height: 400px;
}
#text {
float: left;
width: 495px;
position:relative;
top: -167px;
margin-left: 55px;
}
#menu {
float: right;
width: 215px;
position:relative;
top: -167px;
margin-right: 50px;
}
#paticka{
float: left;
margin-left: 55px;
width: 495px;
height: 28px;
background-image: URL('paticka.jpg');
color:black;
font-size: 75%;
padding: 7px 5px 7px 5px;
overflow: hidden;
}index.php <html> <head> <link rel="stylesheet" href="design.css" type="text/css"> </head> <body> <div id="page"> <div id="text"> </div> <div id="logo"> </div> <div id="stred"> <div id="text"> <p>Lorem ipsum dolor sit amet consectetuer ante pede at velit pede. Vestibulum semper consectetuer at condimentum urna laoreet ut penatibus auctor consectetuer. Interdum congue vitae diam ligula Proin leo Quisque condimentum justo cursus. Cursus auctor sed felis consequat sollicitudin Pellentesque adipiscing vel nec Vestibulum. A pede tellus quis eget cursus mus lacinia lorem adipiscing Sed. Eget Vestibulum nunc nulla.</p> <p>Quis elit Nam dui dui felis libero Vestibulum turpis et tincidunt. Id tincidunt dolor quis sodales auctor ornare pharetra eros non leo. Nunc a quam Sed laoreet molestie ullamcorper Vestibulum enim accumsan laoreet. Quis eu tellus consectetuer neque est pellentesque Lorem Duis Sed sagittis. Nec vel Aenean magnis Nullam lorem libero Cras ut Nulla consectetuer. Ac ullamcorper pretium justo nibh interdum id.</p> <p>Pede Curabitur convallis Quisque id Morbi turpis felis id molestie vitae. Et laoreet laoreet condimentum urna lorem Maecenas elit leo magna id. Wisi Aliquam auctor id dolor eros quis cursus dui nibh lorem. Tellus commodo tellus Nunc pede tempus interdum justo ornare lacus vel. Orci eros non dignissim Vivamus nec id.</p> <p>Dui In Quisque sociis quam dolor turpis Aliquam semper malesuada tempor. Habitant felis interdum Nam id ut nibh wisi In eleifend elit. Ipsum pellentesque Vivamus ante Vestibulum vitae in tortor faucibus ac mauris. Dolor Mauris Pellentesque Vestibulum nunc faucibus ornare Aenean Donec in Curabitur. Vivamus morbi Curabitur Sed tristique wisi.</p> </div> <div id="menu"> <p>Lorem ipsum dolor sit amet consectetuer orci lacinia Aenean consequat dui. Nam neque felis et venenatis congue massa adipiscing felis pede nibh. Pellentesque metus urna suscipit risus ante mauris felis porttitor justo nunc. Ridiculus magnis Curabitur id eros ante dignissim tellus et odio massa. Consequat tortor leo habitasse tristique felis lacinia mauris netus congue fringilla. Quam vitae sed laoreet.</p> </div> <div id="paticka"> <p>Lorem ipsum dolor sit amet consectetuer ligula sollicitudin urna vitae Morbi. Et nec id Suspendisse eget leo condimentum Phasellus et consectetuer nec. Lorem Sed Aenean est suscipit lacus tempor in Nunc aliquam Nullam. Tempor interdum nunc ligula semper mauris porttitor vel facilisis leo nibh. Nam vitae Nam malesuada Suspendisse nibh amet lacus interdum nisl nunc. Auctor elit Quisque magna pulvinar ac massa Aenean sagittis.</p> </div> </div> </div> </body> </html> |
||
| Shadowek Profil |
#4 · Zasláno: 18. 10. 2009, 17:53:22
no tak tu máte i živou ukázku
Odkaz |
||
| Zechy Profil |
#5 · Zasláno: 18. 10. 2009, 17:58:17
Myslíš to jak tam je zastřihlý ten kus a zbytek bílá? Budto tam přidělej ještě div s obrázkem toho konce. A nebo si udělej div kde bude pozadí ten okrouhlej kus :).
|
||
| Shadowek Profil |
#6 · Zasláno: 18. 10. 2009, 18:01:00
ehm no to nemyslím ... teda to co říkáš ani nevidím.
Prostě jak zkončí text ... ten obsah stránky tak je tam pak takových 200 px ještě místo a pak až patička... |
||
| Shadowek Profil |
#7 · Zasláno: 18. 10. 2009, 18:02:51
Jo to tak je jen ve Mozzile Firefoxu.V Opeře a IE tam nemám žádné bílé
|
||
| Shulík Profil |
#8 · Zasláno: 18. 10. 2009, 18:49:48
Když si za <div id='menu'> přidáš <div style="clear: both;"/>, bude to fungovat, teda alespoň mně to ve FF 3.5 jelo, když jsem to ve Firebugu přidal. Očividně tam dělá problém, že máš ve dvou divech za sebou nastavené float:left;
|
||
| Shadowek Profil |
#9 · Zasláno: 18. 10. 2009, 19:18:45
Díky za ten tip s floatem a tím čističem.To mi pomohlo s tou patičku, ale to neřeší muj problém na který se ptám.Když totiž se na to podíváte tak mezi koncem lorem ipsum v obsahu a patičku je asi 200px místa to je nejspíš zpusobeno tím mým pozicováním a nenapadá mě jak to odstranit...
|
||
| Shulík Profil |
#10 · Zasláno: 18. 10. 2009, 19:25:49 · Upravil/a: Shulík
Nevím na kolik je to prasácké, ale minimálně ve FF 3.5.3 se to dá obejít tím, že <div id='text'> nastavíš 'margin-top:167px;' místo 'top:167px;'
EDIT: Máš tam dvakrát <div id='text' /> |
||
| Shadowek Profil |
#11 · Zasláno: 18. 10. 2009, 20:50:20
Shulík
Velice ti děkuju :) to byl dobrý nápad ... mě ten margin napadl ale zdálo se mi to jako moc velká prasárna :D No a ještě nějak sjednotit patičku ve všech prohlížečích.V IE v pohodě na výšku 28px ale u ostatních prohlížeču text nezačíná ve středu te patičky a ona je jakdyby delší takže když ji zkrátím tak zase v IE je ten obrázek poloviční |
||
| Shadowek Profil |
#12 · Zasláno: 19. 10. 2009, 20:05:13 · Upravil/a: Shadowek
Netušíte?Vím že se to nějak dá udělat nějakým CSS hackem ... ale už nwm jak.Hmm tak jsem to opravil ale je to v Mozzile ted vadné ale v ostatních prohlížečích už v pohodě. Nenapadá vás nějaké řešení?No v nejhorším to udělám pomocí JS no ...
|
||
| panther Profil |
#13 · Zasláno: 19. 10. 2009, 20:17:48
Shadowek
„Netušíte?“ netušíme. Jediné, co tuším, ba co vím, je, že nejsme na chatu. Nwm jak ty, ale já to wm skoro jistě :-) |
||
| Shadowek Profil |
#14 · Zasláno: 19. 10. 2009, 20:19:14 · Upravil/a: Shadowek
Hmm tak jn :P ale tak je to trošku divné no všude kromě mozily je to v pohodě a pokud vím Opera a Mozzila mají oba vykreslovací režim takže by to mělo jít dobře ... v te mozzile mi blbne padding v té patičce ...
|
||
| Chamurappi Profil |
#15 · Zasláno: 19. 10. 2009, 20:32:58
Reaguji na Shulíka:
„Když si za <div id='menu'> přidáš <div style="clear: both;"/>, bude to fungovat“ Také by měl ten <div> zavřít, to lomítko nic nedělá. (Což mu zjevně došlo.) Reaguji na Shadowka: Vyházej všechny top, right, bottom, left spojené s „position: relative“ a srovnej ten layout jinak, bez relativního pozicování. „mě ten margin napadl ale zdálo se mi to jako moc velká prasárna :D“ Prasárna je v drtivé většině případů relativní pozicování, marginy jsou čistá cesta. „v nejhorším to udělám pomocí JS no ...“ Pomocí JS můžeš nanejvýš nastavit stejné CSS vlastnosti, které můžeš nastavit pomocí stylopisu. „nwm jak“ Co je NWM? Vyjadřuj se česky. „a pokud vím Opera a Mozzila mají standartní vykreslovací režim takže by to mělo jít dobře“ Všechny prohlížeče vykreslují tvoji stránku v quirku. Mozilla se píše s jedním Z a dvěma L. |
||
| Shulík Profil |
#16 · Zasláno: 19. 10. 2009, 20:45:20
Reaguji na Chamurappiho:
„Také by měl ten <div> zavřít, to lomítko nic nedělá. (Což mu zjevně došlo.)“ Omlouvám se, psal jsem to na rychlo a dostala se mi tam FireBugová XML zkrácenina, která samozřejmě v HTML nemá moc co dělat. |
||
| Shadowek Profil |
#17 · Zasláno: 19. 10. 2009, 20:55:47
Takže chamurappi teď se je stránka z vrchu trochu posunutá, a odjel mi ten text z toho loga.
A ta patička se nezměnila... |
||
| Chamurappi Profil |
#18 · Zasláno: 19. 10. 2009, 21:02:57 · Upravil/a: Chamurappi
Reaguji na Shadowka:
„teď se je stránka z vrchu trochu posunutá“ Asi tak o 145 pixelů. „odjel mi ten text z toho loga“ Asi tak o 145 pixelů. Zajímavá shoda, že? Zruš margin u <div id="poznamka">, použij místo něj padding. Nenastavuj <div>ům s textovým obsahem výšku (tedy ani té poznámce). „A ta patička se nezměnila...“ V patičce se ti odstavec s textem odsouvá, protože všechny <p> mají „od přírody“ vertikální margin. Můžeš ho snadno vynulovat. |
||
| Shadowek Profil |
#19 · Zasláno: 19. 10. 2009, 21:06:57
Hmm díky :)
ale proč jim nemám určovat výšku ... nechci aby mě přetekly ... Jinak odstranit padding bylo geniální ale jak mám udělat aby se do patičky vešel pouze jeden řádek textu a ten byl uprostřed toho obrázku? |
||
| Shulík Profil |
#20 · Zasláno: 19. 10. 2009, 21:23:47
„jak mám udělat aby se do patičky vešel pouze jeden řádek textu a ten byl uprostřed toho obrázku?“
text-align:center; white-space:nowrap; overflow:hidden; Ale při tomhle řešení si sám musíš dát pozor, aby se tam text vešel. A nebude to zrovna ideálně fungovat, když si uživatel ručně zvětší text. |
||
| Chamurappi Profil |
#21 · Zasláno: 19. 10. 2009, 21:24:12
Reaguji na Shadowka:
„nechci aby mě přetekly ...“ Nechceš, aby tě přetekly? :-) Dobře, tak pokud nemáš grafiku nakreslenou pružně, aby se mohla přizpůsobovat, tak výšku nastav. „Jinak odstranit padding bylo geniální“ Já ti radil vynulovat margin odstavce v patičce, nikoliv zrušit padding u <div id="paticka">. |
||
| Shadowek Profil |
#22 · Zasláno: 19. 10. 2009, 21:27:36
Hmm jak vynulovat margin odstavce?Dyt tím pozicuju tu patičku ...
|
||
| Chamurappi Profil |
#23 · Zasláno: 19. 10. 2009, 21:35:54
Reaguji na Shadowka:
Odstavec je <p>, margin je margin, nula je nula. Viz kontextové deklarace. |
||
| Shadowek Profil |
#24 · Zasláno: 20. 10. 2009, 18:31:32
Ok díky to jsem tě špatně pochopil :D no každopádně jak mám udělat aby se tam vešel a přímo na střed pouze 1 řádek
|
||
| Bubák Profil |
#25 · Zasláno: 21. 10. 2009, 01:31:15
Shadowek:
„jak mám udělat aby se tam vešel a přímo na střed pouze 1 řádek“ Nevím, jestli dobře chápu, co chceš, ale přidej patičce: line-height: 28px; 28 pixelů pro řádkování jsem si nevycucal z prstu, ale height a line-height musí být shodné, aby jednořádkový text byl vertikálně vycentrovaný. |
||
| Shadowek Profil |
#26 · Zasláno: 21. 10. 2009, 20:28:18
Děkuju vám vy hodní lidé :P už to mám ;) konečně :D
|
||
|
Časová prodleva: 6 dní
|
|||
| Shadowek Profil |
#27 · Zasláno: 27. 10. 2009, 22:10:45
Tak přece jenom se mi vyskytl další problém web jsem přesunul na www.andus.profitux.cz a tam mi vadí ta jejich reklamní lišta ... totiž v Opeře mi to funguje dobře ale v ostatních prohlížečích to mám nějak posunuté
|
||
| Shadowek Profil |
#28 · Zasláno: 27. 10. 2009, 22:17:08
Tedy konkrétnějí v IE ... zjistil jsem že v Mozille je to v pořádku
|
||
|
Časová prodleva: 14 let
|
|||
0