Avatar
Tomáš
Člen
Avatar
Tomáš:

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):

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
Nesnáším {}, proto se jim vyhýbám.
Avatar
Samuel Illo
Redaktor
Avatar
Samuel Illo :

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
www.samuelillo.com; lamka02sk(zavináč)samuelillo.com, www.point.samuelillo.com, www.csgorig.eu
Avatar
Tomáš
Člen
Avatar
Tomáš:

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
Odpovídá na Tomáš
Michal Žůrek (misaz):

patičce dej v CSS:

clear:both;
Nahoru Odpovědět 16.3.2014 14:52
Nesnáším {}, proto se jim vyhýbám.
Avatar
Tomáš
Člen
Avatar
Tomáš:

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
Samuel Illo
Redaktor
Avatar
Odpovídá na Tomáš
Samuel Illo :

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
www.samuelillo.com; lamka02sk(zavináč)samuelillo.com, www.point.samuelillo.com, www.csgorig.eu
Avatar
Tomáš
Člen
Avatar
Tomáš:

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 16.3.2014 16:00
 
Nahoru Odpovědět 16.3.2014 15:59
Avatar
Odpovídá na Tomáš
Michal Žůrek (misaz):

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

clear:both;
Nahoru Odpovědět 16.3.2014 16:09
Nesnáším {}, proto se jim vyhýbám.
Avatar
Samuel Illo
Redaktor
Avatar
Odpovídá na Tomáš
Samuel Illo :

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
www.samuelillo.com; lamka02sk(zavináč)samuelillo.com, www.point.samuelillo.com, www.csgorig.eu
Avatar
Tomáš
Člen
Avatar
Tomáš:

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
Odpovídá na Tomáš
Michal Žůrek (misaz):

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

Nahoru Odpovědět  +1 16.3.2014 17:51
Nesnáším {}, proto se jim vyhýbám.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Tomáš
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
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.