Autor Zpráva
j.dvorak
Profil *
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>&copy; 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
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 *
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>&copy; 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>
CSS:
.menu {height: 10%;}
Tomáš123
Profil
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;
}
Toto je iba ukážka, akýsi náznak.

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.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: