Diskuze: Začínám- hloupé otázky

HTML a CSS HTML a CSS Začínám- hloupé otázky American English version English version

Avatar
tbartolen
Člen
Avatar
tbartolen:

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
Redaktor
Avatar
Odpovídá na tbartolen
Jan Demel:

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  +2 22.7.2014 8:25
To co se zdá být nemožné, je vždy možné.
Avatar
tbartolen
Člen
Avatar
tbartolen:

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
Fredep
Redaktor
Avatar
Odpovídá na tbartolen
Fredep:

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  +1 9.10.2014 16:09
Týmová práce je důležitá proto, aby bylo možno obvinit z neúspěchu někoho jiného.
Avatar
tbartolen
Člen
Avatar
Odpovídá na Fredep
tbartolen:

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
Fredep
Redaktor
Avatar
Odpovídá na tbartolen
Fredep:

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
Týmová práce je důležitá proto, aby bylo možno obvinit z neúspěchu někoho jiného.
Avatar
Odpovídá na tbartolen
Michal Štěpánek:

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:

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:

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.