Diskuze: <article> se neroztáhl

Tomáš

Člen

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

Michal Žůrek - misaz

Tvůrce

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

Neaktivní uživatel

Tvůrce

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

Tomáš

Člen

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

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:16.3.2014 14:52

patičce dej v CSS:

clear:both;

Nahoru Odpovědět

16.3.2014 14:52

Tomáš

Člen

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

Neaktivní uživatel

Tvůrce

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 16.3.2014 15:29

Nahoru Odpovědět

16.3.2014 15:28

Neaktivní uživatelský účet

Tomáš

Člen

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á , 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 16.3.2014 16:00

Nahoru Odpovědět

16.3.2014 15:59

Michal Žůrek - misaz

Tvůrce

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

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:16.3.2014 16:09

No ja som sa na to pozrel trošku inak

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

Tomáš

Člen

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

Michal Žůrek - misaz

Tvůrce

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

Honza Bittner

Tvůrce

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.

Naučíme tě pracovat na home-office.

Zjistit více...

Naučíme tě pracovat na home-office.

Více info »

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.