Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Avatar
tbartolen
Člen
Avatar
tbartolen:21.7.2014 23:08

Ahoj, jak vytvořím na stránce více článků tak, abych mohl každý z nich zvlášť upravovat? Z návodu je jasný, jak vytvořit právě jeden article, a jeden aside...ale co když chci mít článků třeba deset pod sebou, a u každého z nich jiné pozadí, umístění, a tak dále..
Děkuji za radu :-)

Odpovědět
21.7.2014 23:08
Navštiv www.fb.com/skkelticz
Avatar
Jan Demel
Tvůrce
Avatar
Odpovídá na tbartolen
Jan Demel:22.7.2014 8:25

Tak uděláš 10 articlů, každému nastavíš jiné ID a to ID nastyluješ v CSS tak, aby měl článek jiné umístění a jiné pozadí ;)

Nahoru Odpovědět
22.7.2014 8:25
To co se zdá být nemožné, je vždy možné.
Avatar
tbartolen
Člen
Avatar
tbartolen:9.10.2014 16:07

Jak vycentrovat položky na místo tak, aby zustali tam, kde maji být na každém monitoru a rozlišení? Proč mi nefunguje příkaz

nav {margin: 0 auto;
         width: 1200px;}

Měl by centrovat menu do středu stránky, ale celé je to posunuté šejdrem...

body {
      background: url('C:\Users\Tomas\Documents\Keltistranky/pozadikelti.png')#0099ff;
      margin: 73px 0px 0px 0px;
      font: 14px Verdana;
      min-width:  960px;
     }
article {
        background: white;
        margin: 100px 300px 6px 150px;
        font: 12px Arial;
        border: 2px solid #006797;
        minimal-width: 960px;
        float: left;
}
.cistic {
          clear: both;
          }
.centrovac {
          text-align: center;
                    }
article header    {
          background: #ffbb00;

          }
.header nav {
            : #006797;
             }
aside {background: white;
       float: left;
       width: 300px;
       margin: 0px 0px 100px;}


.druhaUroven, .tretiUroven{
         display: none;
 }
 .prvniUroven{
  display: inline-block;
 }

 .prvniUroven li:hover > .druhaUroven,  .druhaUroven li:hover > .tretiUroven  {
  display: block;
 }
 nav {margin: 0 auto;
         width: 960px;}
 nav ul {
   background: #1C4E71;
  padding: 0px 0px 0px 0px;
  list-style-type: none;
  position: relative;
  display: block;
  margin: 0px;
 }


 li {
  float: none;

   }
.prvniUroven > li {
  float: left;
  }

 li:hover {
  background: #14a1e5;
  }


.prvniUroven li a {
  display: block;
  padding: 0px 18px;
  color: #fff;
  text-decoration: none;
  margin: 0px 5px 0px 0px;
  float: none;
  line-height: 35px;
  padding: 0 18px;
  border-right: 1px solid #6E9DBE;
  }

 .druhaUroven {

  background: # #1C4E71;
  border-radius: 0px;
  padding: 0;
  position: absolute;
  top: 100;
  }

  .druhaUroven li {
   border-top: 1px solid #6b727c;
   border-bottom: 1px solid #575f6a;
   position: relative;
  }

  .druhaUroven li a {
    padding: 0px 18px;
    color:#fff;

  }

  .tretiUroven {
  position: absolute;
  left: 100%;
  top:0;
  }

a taky se mi v meníčku přesahuje hover přes tu border lajnu, nevím jak jí dat na ten poslední pixel, aby tam za ní už nebylo místo, jde to vubec? Děkuju :-)

Pro uplnost ještě HTML

<!DOCTYPE html>
<html lang="cs-cz">
<head>
      <meta charset="utf-8"/>
      <link rel="stylesheet" href="keltistyl.css" type="text/css"/>
      <title> SK Kelti 2008</title>
</head>
 <body>
    <p class="header nav">
    <header>
    <p class="centrovac">
      <img src="C:/Users/Tomas/Documents/Keltistranky/kelti.jpg" alt="keltinahore"/>
     </p>
<header>
 <nav>
        <ul class="prvniUroven">
                <li><a href="#">Úvod</a></li>
                <li><a href="#">Muži</a>
                        <ul class="druhaUroven">
                                <li><a href="#">Soupiska</a></li>
                                <li><a href="#">Novinky</a></li>
                                <li><a href="#">Zápasy</a></li>
                                <li><a href="#">Rozpis</a></li>
                                <li><a href="#">B tým</a>
                                        <ul class="tretiUroven">
                                                <li><a href="#">Soupiska</a></li>
                                                <li><a href="#">Novinky</a></li>
                                                <li><a href="#">Zápasy</a></li>
                                                <li><a href="#">Rozpis</a></li>
                                        </ul>
                                </li>
               </li>
               </ul>
                <li><a href="#">Mládež</a>
                        <ul class="druhaUroven">
                                <li><a href="#">Minipřípravka</a>
                                        <ul class="tretiUroven">
                                                <li><a href="#">Soupiska</a></li>
                                                <li><a href="#">Novinky</a></li>
                                                <li><a href="#">Zápasy</a></li>
                                                <li><a href="#">Rozpis</a></li>
                                        </ul>
                                </li>
                                <li><a href="#">Přípravka</a>
                                        <ul class="tretiUroven">
                                                <li><a href="#">Soupiska</a></li>
                                                <li><a href="#">Novinky</a></li>
                                                <li><a href="#">Zápasy</a></li>
                                                <li><a href="#">Rozpis</a></li>
                                        </ul>
                                </li>
                               <li><a href="#">Mladší Dorost</a>
                                        <ul class="tretiUroven">
                                                <li><a href="#">Soupiska</a></li>
                                                <li><a href="#">Novinky</a></li>
                                                <li><a href="#">Zápasy</a></li>
                                                <li><a href="#">Rozpis</a></li>
                                        </ul>
                                </li>
                                <li><a href="#">Starší Dorost</a>
                                        <ul class="tretiUroven">
                                                <li><a href="#">Soupiska</a></li>
                                                <li><a href="#">Novinky</a></li>
                                                <li><a href="#">Zápasy</a></li>
                                                <li><a href="#">Rozpis</a></li>
                                        </ul>
                                </li>
                        </ul>
                </li>
                 <li><a href="#">Ženy</a>
                        <ul class="druhaUroven">
                                <li><a href="#">Soupiska</a></li>
                                <li><a href="#">Novinky</a></li>
                                <li><a href="#">Zápasy</a></li>
                                <li><a href="#">Rozpis</a></li>
                        </ul>
                </li>

                <li><a href="#">Keltí shop</a></li>
                <li><a href="#">Nižborský hokejbal</a></li>
                <li><a href="#">Fotogalerie</a></li>
                <li><a href="#">Kontakt</a></li>

        </ul>
 </nav>
 </header>

     <article id="PHP novinky">
            <div id="centrovac">
            <header>
            <h1>Novinky</h1>
            </header>
            <section>
             <p>

            <p>Zde budu mít novinky, na uvodni strance, nejspíše v PHP</p>

            </section>


     </article>
     <aside>
     <h1>Poslední zápasy</h1>
     <p>Muži - přátelský zápas - Beroun
vs. HC Kert Park Praha "A" 2:6 (0:3, 1:2, 1:1)</p>
     <h2>Tréninky</h2>
     <p>
Muži "A"
Fyzická příprava, Beroun, po, út, čt

Minipřípravka
Středa, 16:30, Beroun - Hlinky</p>
     </aside>
     <footer>
     Vytvořil Tomáš Bartolen
     </footer>
</body>
Editováno 9.10.2014 16:10
Nahoru Odpovědět
9.10.2014 16:07
Navštiv www.fb.com/skkelticz
Avatar
Odpovídá na tbartolen
Neaktivní uživatel:9.10.2014 16:09

No tím nastavíš, že element velké šířky 1200px bue uprostřed, na malých monitorech to dělá neplechu. Zkus zmenšit tu šířku nebo ještě k tomu připsat

text-align: center;
Nahoru Odpovědět
9.10.2014 16:09
Neaktivní uživatelský účet
Avatar
tbartolen
Člen
Avatar
Odpovídá na Neaktivní uživatel
tbartolen:9.10.2014 16:12

Tak text align center skutečně pomohl, bude to ted dodržovat na každém monitoru, nebo když to zapnu dejme tomu na 19" místo na 24", tak to bude zase rozhozené? A taky nevím jak udržet ty article pod tím, aby mi neplavali pořád po stránce v závislosti na velikosti obrazovky :( Děkuju :-)

Editováno 9.10.2014 16:12
Nahoru Odpovědět
9.10.2014 16:12
Navštiv www.fb.com/skkelticz
Avatar
Odpovídá na tbartolen
Neaktivní uživatel:9.10.2014 16:14

Promiň, nevšiml jsem si, že jsi to editoval. Ve zdrojáku máš header v headru a celé je to v odstavci (p). Tak by to určitě nemělo vypadat. Změň ty odstavce na divy a zkus si ten kód ještě jednou projít...

Nahoru Odpovědět
9.10.2014 16:14
Neaktivní uživatelský účet
Avatar
Odpovídá na tbartolen
Michal Štěpánek:9.10.2014 17:04

Je asi jedno, jestli je monitor 19" nebo 24", důležité je, jaké je na tom monitoru nastaveno rozlišení...

Nahoru Odpovědět
9.10.2014 17:04
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
tbartolen
Člen
Avatar
tbartolen:9.10.2014 17:10

Menu jsem už vyřešil, takže jak se bránit tomu aby při ruzným rozlišení bylo rozložení stránky jiné než v jakym bylo udělaný ? Těch chyb v kodu jsem si nevšiml, děkuji za upozornění, je to pro mě hrozný zmatek :-)
Děkuju

Nahoru Odpovědět
9.10.2014 17:10
Navštiv www.fb.com/skkelticz
Avatar
vidlec
Člen
Avatar
Odpovídá na tbartolen
vidlec:16.10.2014 14:29

Dejme tomu, že máš nějaký element, třeba <div> a v něm máš text, který má délku 300px.
No a když řekneš, že div {margin: 0 auto; width: 1200px}, tak se text zarovná na levou stranu divu. A celý div se zarovná na střed. To znamená, že text není na středu, ale je posunutý o těch 1200px - 500px do leva.

Proto stačí buď text vycentrovat, nebo divu nastavit stejnou délku jako má text.

Editováno 16.10.2014 14:31
 
Nahoru Odpovědět
16.10.2014 14:29
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 9 zpráv z 9.