Autor | Zpráva | ||
---|---|---|---|
j.dvorak Profil * |
#1 · Zasláno: 1. 5. 2015, 12:10:18
Ahoj,
Nedávno jsem si nechal udělat od známého návrh na design pro můj web a snažím se ho nějak nakodovat, ale vyskytl se menší problém... Mělo by to vypadat nějak takhle http://www.img.tpx.cz/uploads/10723204_944124058938340_128037500_n.jpg ale pořád nemůžu zarovnat ty partnery jako jsou na tom obrázku... Vůbec nevím jestli je ten web napsaný dobře, jsem celkem začátečník... Ukázka: http://jandvorak.wz.cz/ html: <!DOCTYPE html> <html lang="cs"> <head> <title>Flat UI</title> <link rel="stylesheet" href="style.css"> <meta charset="utf-8"> </head> <body> <div class="navigation_bar"> <a href="#"><span>úvod</span></a> | <a href="#"><span>portfolio</span></a> | <a href="#"><span>reference</span></a> | <a href="#"><span>o mně</span></a> | <a href="#"><span>kontakt</span></a> </div> <div class="scroll_bar"> </div> <div class="article_bar"> </div> <div class="project_bar"> </div> <div class="partner_bar"> <div class="partners"> <div class="partners_header"> <p>Partneři</p> </div> <div class="partners_scroll_bar"> <!-- CNN --> <a href="#"><img src="http://www.theblaze.com/wp-content/uploads/2013/08/cnn.png"></a>- </div> </div> </div> <div class="footer_bar"> <div class="copyright"> <p>© 2015 Jan Dvořák. Všechna práva vyhrazena.</p> </div> <div class="hotlinks"> </div> </div> </body> </html> css: html, body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #ecf0f1; } .navigation_bar { width: 60%; height: 10%; background-color: #ecf0f1; margin-left: auto; margin-right: auto; text-align: right; overflow: auto; } .navigation_bar a { display: inline-block; text-decoration: none; margin-right:5px; margin-top: 2%; top: 50%; padding: 0 5px; line-height: 25px; color: #000; text-transform: uppercase; } .navigation_bar a:hover { display: inline-block; text-decoration: none; margin-right:5px; margin-top: 2%; top: 50%; padding: 0 5px; line-height: 25px; color: #2980b9; text-transform: uppercase; } .navigation_bar a span { display: inline-block; text-decoration: none; line-height: 25px; text-transform: uppercase; } .scroll_bar { width: 100%; height: 60%; background-color: #2c3e50; margin-left: auto; margin-right: auto; } .article_bar { width: 100%; height: 55%; background-color: #ecf0f1; margin-left: auto; margin-right: auto; } .project_bar { width: 100%; height: 55%; background-color: #bdc3c7; margin-left: auto; margin-right: auto; } .partner_bar { width: 100%; height: 30%; background-color: #ecf0f1; margin-left: auto; margin-right: auto; } .partners { border-style: solid; border-width: 1px; width: 70%; height: 75%; margin-left: auto; margin-right: auto; position: relative; top: 50%; transform: translateY(-50%); } .partners_scroll_bar { border-style: solid; border-width: 1px; width: 100%; height: 75%; margin-left: auto; margin-right: auto; } .partners_scroll_bar img { max-width: 80%; max-height: 50%; margin-left: auto; margin-right: auto; } .partners_header p { width: 100%; color: #000; font-size: 25px; } .footer_bar { width: 100%; height: 20%; background-color: #2c3e50; margin-left: auto; margin-right: auto; overflow: auto; } .copyright { width: 70%; margin-top: 2.5%; margin-left: auto; margin-right: auto; } V té ukázce je pěkně vidět, že p tag s textem partneři nesedí na vrchu divu, ale je kousek pod okrajem a okolo sebe zanechává místo, které nemohu vyplnit. |
||
Bubák Profil |
#2 · Zasláno: 1. 5. 2015, 13:10:11
Na kód jsem se díval jen zběžně, ale odstavec má výchozí horní a dolní margin, můžeš ho vynulovat, nebo nastavit na hodnotu, která ti bude vyhovovat.
„Vůbec nevím jestli je ten web napsaný dobře, jsem celkem začátečník...“ - HTML kód je předivovaný, a CSS kód taky nestojí za moc. - <div class="partners_header"> <p>... to by byl o lepší použít rovnou nadpis příslušné úrovně, jedno slovo není odstavec
- je zvykem dělal menu jako <menu> nebo seznam odkazů <ul> a položky odkazu mít v <li> - odkazy odsazuješ marginem, kdybys použil padding, díky tomu je klikatelná větší plocha - netuším, proč jsou v odkazech spany, určitě vy to šlo ve tvém případě bez nich - u hoveru stačí deklarovat pouze to, co se změnilo - top funguje jen tehdy, pokud má position jinou hodnotu, než (výchozí) static , ty position nedeklaruješ vůbec. Obecně, je vhodné používat pozicování jen v odůvodněných případech
- transform: translateY() umí jen nové prohlížeče, ve starších prohlížečích to bude rozhozené
- deklarace margin: auto; nebude poznat na elementech se 100% šířkou
Určitě je toho více. Na začátečníka sice dobré, hlavně se nenech odradit. |
||
j.dvorak Profil * |
#3 · Zasláno: 2. 5. 2015, 11:35:55
Takže něco málo jsem upravil podle toho co si mi napsal, akorát nevím jak s tím transform: translateY()... Co přesně bych měl změnit aby to fungovalo i ve starších prohlížečích?
A menu jsem změnil na <nav></nav> místo toho divu. Dával jsem k tomu i <ul> a <li>, ale nedařilo se mi zarovnat text do středu toho menu a border-bottom zarovnat na úroveň spodní části menu jako to je teď. A pořád netuším jak bych měl napozicovat ty obrázky a ten text v tom divu "partner_bar" - Ještě k tomu menu, nastavil jsem ho jako fixed aby se pohybovalo podle toho jak scrolluješ dolu/nahoru, ale začalo mi překrývat ten první div "scroll_bar", jakto? No každopádně, zde je upravený kod a živá ukázka. http://jandvorak.wz.cz/ html: <!DOCTYPE html> <html lang="cs"> <head> <title>Jan Dvořák</title> <link rel="stylesheet" href="style.css"> <meta charset="utf-8"> </head> <body> <nav class="navigation_bar"> <a href="#">úvod</a> | <a href="#">portfolio</a> | <a href="#">reference</a> | <a href="#">o mně</a> | <a href="#">kontakt</a> </nav> <div class="scroll_bar"> </div> <div class="article_bar"> </div> <div class="project_bar"> </div> <div class="partner_bar"> <div class="partners"> <div class="partners_header"> <h2>Partneři</h2> </div> <div class="partners_scroll_bar"> <!-- CNN --> <a href="#"><img src="http://www.theblaze.com/wp-content/uploads/2013/08/cnn.png"></a>- </div> </div> </div> <div class="footer_bar"> <div class="copyright"> <p>© 2015 Jan Dvořák. Všechna práva vyhrazena.</p> </div> <div class="hotlinks"> </div> </div> </body> </html> css: html, body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #ecf0f1; font-family: raleway; } @font-face { font-family: raleway; src: url("fonts/Raleway-SemiBold.ttf"); } .navigation_bar { width: 100%; height: 10%; background-color: #ecf0f1; text-align: right; position: fixed; } .navigation_bar a { display: inline-block; text-decoration: none; margin-right:5px; padding: 1.38% 1.2%; line-height: 25px; color: #000; text-transform: uppercase; } .navigation_bar a:hover { color: #2980b9; border-bottom-style: solid; border-bottom-width: 2px; } .navigation_bar a { display: inline-block; text-decoration: none; line-height: 25px; text-transform: uppercase; } .scroll_bar { width: 100%; height: 60%; background-color: #2c3e50; } .article_bar { width: 100%; height: 55%; background-color: #ecf0f1; } .project_bar { width: 100%; height: 55%; background-color: #bdc3c7; } .partner_bar { width: 100%; height: 30%; background-color: #ecf0f1; } .partners { border-style: solid; border-width: 1px; width: 70%; height: 75%; margin-left: auto; margin-right: auto; position: relative; top: 50%; transform: translateY(-50%); } .partners_scroll_bar { border-style: solid; border-width: 1px; width: 100%; height: 75%; } .partners_scroll_bar img { max-width: 80%; max-height: 50%; margin-left: auto; margin-right: auto; } .partners_header p { width: 100%; color: #000; font-size: 25px; } .footer_bar { width: 100%; height: 20%; background-color: #2c3e50; overflow: auto; } .copyright { width: 70%; padding: 2.5% 0; margin-left: auto; margin-right: auto; } |
||
kovs Profil |
stačí, když to menu obalíš divem a přidáš mu stejnou hodnotu výšky jako "navigation_bar"... potom by to mělo fungovat myslím
<div class="menu"> <nav class="navigation_bar"> <a href="#">úvod</a> | <a href="#">portfolio</a> | <a href="#">reference</a> | <a href="#">o mně</a> | <a href="#">kontakt</a> </nav> </div> .menu {height: 10%;} |
||
Tomáš123 Profil |
#5 · Zasláno: 2. 5. 2015, 15:14:45
j.dvorak:
„Co přesně bych měl změnit aby to fungovalo i ve starších prohlížečích?“ Nič, staršie prehliadače sú jednoducho staršie a niektoré vlastnosti nepodporujú. Šlo by to nahradiť JavaScriptom. „A menu jsem změnil na <nav></nav> místo toho divu.“ Nesprávne si pochopil to, čo písal Bubák. Nav je z HTML5, staršie Explorery budú mať problémy s pripisovaním štýlov. Použi kombináciu <ul> , <li> alebo <menu> , <li> . V <li> by mal byť odkaz.
„Dával jsem k tomu i <ul> a <li>, ale nedařilo se mi zarovnat text do středu toho menu a border-bottom zarovnat na úroveň spodní části menu jako to je teď.“ Neviem presne, čo myslíš. Z tvojich otázok mám ale pocit, že nevieš ako by malo vyzerať menu. Pre ukážku: <ul> <li><a href="#">1. položka</a></li> <li><a href="#">2. položka</a></li> <li><a href="#">3. položka</a></li> </ul> CSS: ul li { line-height: 30px; height: 30px; /*ak nie je deklarovaná výška, border sa vykresľuje zvnútra*/ } ul li a { padding: xx px; } ul li a:hover { border-bottom: 2px solid; } „A pořád netuším jak bych měl napozicovat ty obrázky a ten text v tom divu "partner_bar"“ V tomto prípade by bolo lepšie použiť float . Urobil by som to podobne ako menu cez kombináciu prvkov <ul> a <li> . Potom treba prvkom <li> nastaviť float: left . Takto vytvoríš rad prvkov vedľa seba. JavaScriptom zaistíš animácie posunu po stlačení šípky.
„Ještě k tomu menu, nastavil jsem ho jako fixed aby se pohybovalo podle toho jak scrolluješ dolu/nahoru, ale začalo mi překrývat ten první div "scroll_bar", jakto?“ Nedávno som o priorite a pozícii poziciovaných prvkov písal v inom vlákne, prečítaj si to. |
||
Časová prodleva: 9 let
|
0