FINÁLNÍ VÝPRODEJ KREDITŮ na ITnetwork je tady. Využij poslední šanci a získej až 80 % extra kreditů ZDARMA na náš interaktivní e-learning. Zjisti více:
NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
Tomáš
Člen
Avatar
Tomáš:16.3.2014 14:37

Ahoj, učím se podle zdejšího seriálu HTML a trochu jsem se zasekl. Mám vložené <nav> a <section> do <article>, ale article se chová jakoby v něm nic nebylo, roztáhne se jen podle toho jak zadám padding.

<!DOCTYPE html>
<html lang="cs-cz">

<html>
  <head>
    <meta charset="utf-8" />
    <title>Domácí úkol IKT - Hlavní stránka</title>
    <link rel="stylesheet" href="styl.css" type="text/css" />
  </head>

  <body>
    <header>
    Hlavička
    </header>

    <article>
      <div id="centrovac">
      <nav>
        <ul>
        <li class="aktivni"><a href="index.html">Hl. stránka</a></li>
        <li><a href="obrazky.html">Obrázky</a></li>
        <li><a href="tabulky.html">Tabulky</a></li>
        </ul>
      </nav>

      <section>
        <h1>Hlavní stránka</h1>
        <p class="vpravo"><img src="obrazky/html5.png"></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vulputate malesuada consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt lorem id sapien vehicula ultricies. Praesent non dignissim dui. Phasellus rhoncus dapibus urna. Pellentesque massa diam, semper ut viverra eget, lacinia ac lectus. Proin pulvinar nulla non ultricies dignissim. Praesent ut aliquam tortor. Integer a nisl elementum, elementum nisl pellentesque, condimentum nisi. Donec suscipit elementum odio, non auctor purus vestibulum non. Aenean non lorem sollicitudin, tempus magna et, dignissim augue. Ut tempor, nisi vitae lacinia viverra, lorem ligula laoreet metus, nec posuere nulla justo eu tellus. Aliquam at.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vulputate malesuada consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt lorem id sapien vehicula ultricies. Praesent non dignissim dui. Phasellus rhoncus dapibus urna. Pellentesque massa diam, semper ut viverra eget, lacinia ac lectus. Proin pulvinar nulla non ultricies dignissim. Praesent ut aliquam tortor. Integer a nisl elementum, elementum nisl pellentesque, condimentum nisi. Donec suscipit elementum odio, non auctor purus vestibulum non. Aenean non lorem sollicitudin, tempus magna et, dignissim augue. Ut tempor, nisi vitae lacinia viverra, lorem ligula laoreet metus, nec posuere nulla justo eu tellus. Aliquam at.</p>
      </section>
      </div>
    </article>

    <footer>
    Patička
    </footer>


  </body>
</html>
body {
  font: 14px Verdana;
  background: url('obrazky/cerna.png');
  margin: 0px;
}

p{
  text-align: justify;
}

h1 {
  text-align:center;
}

article {
  background: url('obrazky/seda.png');
  padding: 30px 0px;
  height: auto;
}

article section {
  width: 753px;
  float: left;
  padding: 20px;
  background: #ffffff;
  border: 2px solid #2E2E2E;
  box-shadow: 2px 2px 7px #1c2228;
}

nav {
  background: url('obrazky/cerna.png');
  float: left;
  width: 176px;
  margin: 0px 23px 0px 0px;
  border: 2px solid #2E2E2E;
  box-shadow: 2px 2px 7px #1c2228;
}

nav ul {
  list-style-type: none;
  margin: auto;
  text-align: center;
}

nav ul li {
  font-size: 17px;
  margin: 8px 0px;
  padding: 10px 0px 10px 0px;
  width: 176px;
  float: right;
  color: white;
}

nav a {
  text-decoration: none;
  color: white;
}

nav ul li:hover, .aktivni {
  background: #6E6E6E;
}

header {
  color: white;
        height: 73px;
}

footer {
  color: white;
  height: 70px;
}

img {
  margin: 20px;
}

.vpravo {
        float: right;
}

#centrovac {
        margin: 0px auto;
        width: 1000px;
}
 
Odpovědět
16.3.2014 14:37
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Michal Žůrek - misaz:16.3.2014 14:40

Proč tam máš 2 tagy HTML a jeden není ukončen? Proč je navigace v článku, umím si to představit, ale nemyslím že je to zrovna tvůj případ.

Pošli nějaký screenshot jak by sis představoval výsledek.

 
Nahoru Odpovědět
16.3.2014 14:40
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:16.3.2014 14:49

Aj by som k tomu niečo povedal, ale neviem ako si predstavuješ tú stránku. Nejaký návrh by si sem mohol dať :) a jednoznačne vyhoď to druhé <html>...

Nahoru Odpovědět
16.3.2014 14:49
Neaktivní uživatelský účet
Avatar
Tomáš
Člen
Avatar
Tomáš:16.3.2014 14:50

html tag jsem si opravil, moje představa je taková aby šedé pozadí bylo roztáhnuté na celou délku okna s článkem http://screenshot.cz/2AD1M/web.jpg

vlastně nevím proč mám umístěnou navigaci v článku... hodím ji mimo a třeba si najdu chybu sám

 
Nahoru Odpovědět
16.3.2014 14:50
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Tomáš
Michal Žůrek - misaz:16.3.2014 14:52

patičce dej v CSS:

clear:both;
 
Nahoru Odpovědět
16.3.2014 14:52
Avatar
Tomáš
Člen
Avatar
Tomáš:16.3.2014 15:10

patičku to dalo na správné místo, ale šedé pozadí zůstalo stejně

 
Nahoru Odpovědět
16.3.2014 15:10
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Tomáš
Neaktivní uživatel:16.3.2014 15:28

Na to pozadie musíš definovať rozmery zvlášť cez background-size (daj hodnotu cover alebo auto) a poprípade nastav background-repeat...ak som to správne pochopil :)

Editováno
Nahoru Odpovědět
16.3.2014 15:28
Neaktivní uživatelský účet
Avatar
Tomáš
Člen
Avatar
Tomáš:16.3.2014 15:59

no já nevím jestli je tam zapotřebí ještě dávat background-size a repeat... když jsem smazal v css u nav

float: left;

, tak to funguje jak má :D, ale to menu je samozřejmě špatně http://screenshot.cz/SMU1Y/web2.jpg

zkoušel jsem měnit hodnoty jestli by mě to aspoň trochu nenavedlo, ale nic mě nenapadlo

Editováno
 
Nahoru Odpovědět
16.3.2014 15:59
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Tomáš
Michal Žůrek - misaz:16.3.2014 16:09

Tak za patičku dej něco a tomu nastav

clear:both;
 
Nahoru Odpovědět
16.3.2014 16:09
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Tomáš
Neaktivní uživatel:16.3.2014 16:09

No ja som sa na to pozrel trošku inak :D

A s tým článkom:
Skús dať <article> do <div> a div nastav

float: left;

alebo jednoducho mechanicky nastav tomu <article> nejaké odsadenie cez margin-left alebo padding - záleží, ktoré bude fungovať.
Je dobré dávať všetky možné veci na stránke do divu hlavne, keď je zložitejšia.

Nahoru Odpovědět
16.3.2014 16:09
Neaktivní uživatelský účet
Avatar
Tomáš
Člen
Avatar
Tomáš:16.3.2014 17:39

udělal jsem to znovu od nuly... menu a článek jsem dal do divu, za plovoucí menu a článek jsem dal clear:both; a všechno funguje jak má a vypadá podle mojich představ... díky za nasměrování :)

 
Nahoru Odpovědět
16.3.2014 17:39
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Tomáš
Michal Žůrek - misaz:16.3.2014 17:51

super, jen pro informaci to clear:both; ti zruší platnost float.

 
Nahoru Odpovědět
16.3.2014 17:51
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Tomáš
Honza Bittner:16.3.2014 18:31

Floaty ti za nějaké situace mohou rodičovský element neroztahovat. Tím se dá bránit jak psal Michal Žůrek - misaz pomocí

clear:both;

, nebo se dá na ten rodičovský element umístit

overflow: auto;

.

Ovšem pokud to je možné tak je lepší použít clear, jelikož ti overfow může někdy udělat posuvníky.

:)
Nahoru Odpovědět
16.3.2014 18:31
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 13 zpráv z 13.