| 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: 11 let
|
|||
0