Diskuze: Pozicování

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

Zjistit více...

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Kamil

Člen

Kamil:30.11.2013 1:07

Zdravím,
doufám, že mi pomůžete......

Tento box potřebuji dostat tam kam je vyznačeno na obrázku.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">

  <link rel="stylesheet" href="index.css" type="text/css">
  <title></title>
  </head>
  <body>

           <!------Pro hlavicku------->
           <center>
                 <div class="hlavicka">

                 </div>
           </center>
           <!------------------------->

           <!------Pro image-poprípadne slide-show--->
           <center>
                    <div class="image">
                    <img src="image/1.jpg" width="100%" height="100%">
                    </div>
           </center>
           <!---------------------------------------->

           <!--------Hlavni obsah----------->
           <center>
                    <div class="hlobsah">


                    </div>
                  <div class="menu">

                      <h4>Menu</h4>

                  <ul>
                    <li><a href="index.php">O nás</a></li>
                    <li><a href="#">Na prodej</a></li>
                    <li><a href="#">Prodané</a></li>
                    <li><a href="#">Prodej na splátky</a></li>
                    <li><a href="#">Pojištění motocyklů</a></li>
                    <li><a href="#">Doprava motocyklů</a></li>
                    <li><a href="kontakt.php">Kontakt</a></li>
                </ul>

                   <br>

                   <h4>Aktuality</h4>
                   <div class="vypaktu">
                   <a href="uaktuality.php">Pro podrobnější aktuality</a>




                   </div>
                    <!---------------------->








                    </div>
           </center>
           <!------------------------------->




           <!-------Paticka---------->
            <center>
                 <div class="paticka">
                  <a href="logadmin.php">Administrace</a>
                 </div>
            </center>

           <!----------------------->


  </body>
</html>

/* Pro body */
body{
padding:0px;
margin:0px;
color:white;
background:#111111;
}
/* Pro hlavicka */
.hlavicka{
border:solid black 2px;
color:white;
background:#800000;
padding:4px;
max-width:62%;
min-width:60%;
text-align:left;
font-weight:bold;




}
.vypaktu{
text-align:center;

}




/* Pro image */
.image{
border:solid white 2px;
height:38%;
width:62%;


}
/*Pro hlavní obsah*/
.hlobsah{
border:solid white 1px;
height:120%;
width:50%;
background:black;
padding:0px;
margin:0px;
position:relative;left:6%;

}
/*Pro menu*/
.menu{
float:left;
border:2px solid black;
height:50%;
width:15%;
text-align:left;
box-shadow: 0px 0px 6px white;





}






.menu a {
color:white;
text-decoration:none;

}


.menu a:hover{
text-decoration:underline;
color:gray;

}
.menu ul li{
list-style:none;

}
.menu h4{
color:red;

}
/* Pro paticku */
.paticka{
border:solid black 2px;
color:white;
background:#800000;
padding:4px;
width:62%;
text-align:left;
font-weight:bold;




}
.

Děkuju. Salieri

Odpovědět

30.11.2013 1:07

pk-grok

Člen

pk-grok:30.11.2013 9:11

Ahoj, jsem uplný začátečník a vážně netuším jestli ti tímhle komentářem pomůžu. Ale já dělal web v css a pozicování stránky jsem dělal přes:

#menu {position: absolute; width: %; height: %; left: %; top: px}

Na této stránce jsem abych se naučil více.

Editováno 30.11.2013 9:12

Nahoru Odpovědět

30.11.2013 9:11

Kamil

Člen

Kamil:30.11.2013 9:16

Menu nemám označené jako identifikátor..
Pozice mi jde jen na stranu, nahoru to nejde vůbec...
I tak ti děkuji za komentář a dávám i++

Nahoru Odpovědět

30.11.2013 9:16

Kit

Tvůrce

Kit:30.11.2013 9:20

Pokud něco chceš pozicovat, označuj to identifikátorem.

Nahoru Odpovědět

30.11.2013 9:20

Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.

Kamil

Člen

Kamil:30.11.2013 9:33

Kite,
myslíš, že to vyřeší můj problém?

Nahoru Odpovědět

30.11.2013 9:33

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:30.11.2013 9:35

částečně ano.

Nahoru Odpovědět

30.11.2013 9:35

Pavel Mareš

Tvůrce

Pavel Mareš:30.11.2013 9:35

Pokud se pletu, omlouvám se, ale ty to chceš mít na středu. Proč to vše nedáš
dejme tomu do divu obal, kterému nastavíš asi toto:

#obal {
        position: relative;
        top: 0px;
        left: 0px;
        width: 970px;
        margin: -8px auto;}

To zapříčiní to, že vše bude na středu. Pak si tam vkládej co chceš a bude to fungovat. (Já to používám.)

Editováno 30.11.2013 9:36

Nahoru Odpovědět

30.11.2013 9:35

Však ono půjde ...

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:30.11.2013 9:39

musíš první definovat menu, pak obsah, a teprve pak zápatí.

<nav></nav>
<article></article>
<footer></footer>

Body musíš nastavit na přesnou šířku.

body {
    width: 500px;
    /* margin: 0 auto; */
}

Pak tepreve budeme pozicovat.

menu:

nav {
    width: 150px;
    float: left;
}

článek:

article {
    width: 350px;
}

a u zápatí už není co pozicovat.

Toto jsem splácal z hlavy a asi to bude chtít mírné úpravy.

Editováno 30.11.2013 9:40

Nahoru Odpovědět

30.11.2013 9:39

done

Člen

done:30.11.2013 9:39

Jestli to chceš napozicovat tak to dej do divu, příklad:

#div { width: 50%; margin: 0 0 0 25%}

Tím si to nastyluješ na střed.

Nahoru Odpovědět

30.11.2013 9:39

Kit

Tvůrce

Kit:30.11.2013 9:40

Problém to nevyřeší. Je to systém, který ti jen pomůže podobným problémům předcházet. Pozicování přes identifikátory, stylování přes class - jednoduché pravidlo.

Absolutní pozicování zásadně nedělám. Když má někdo větší CSS než považuji za nutné, tak jeho problémy obvykle neřeším. Na tvůj problém se mohu podívat za chvíli, resp. až se mi bude chtít.

Nahoru Odpovědět

30.11.2013 9:40

Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.

Kamil

Člen

Kamil:30.11.2013 9:40

</div>
<div class="menu">

</div>
</div>

Tak?

Nahoru Odpovědět

30.11.2013 9:40

Ľuboš Čurgó

Tvůrce

Ľuboš Čurgó:30.11.2013 11:41

obal to do divou,na menu daj float: left; a na ten obsah stranky float: right; . A pouzivaj http://jsfiddle.net/

Nahoru Odpovědět

30.11.2013 11:41

Pavel Mareš

Tvůrce

Pavel Mareš:30.11.2013 11:58

Ano, mohu ti poslat příklad mých stránek. Tam to používám
a vše funguje zcela v pořádku na všech hlavních prohlížečích
včetně IE 8 a vyšší.
Odkaz: http://goo.gl/KlvhvY
(Tématiky si nevšímej, je to školní projekt.)

Nahoru Odpovědět

30.11.2013 11:58

Však ono půjde ...

Kamil

Člen

Kamil:30.11.2013 13:27

Kamarád mi s tim pomohl, objasnil mi dost pojmů. Děkuji všem

Nahoru Odpovědět

30.11.2013 13:27

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 14 zpráv z 14.

Nejčastěji vyhledáváné

Diskuze: Pozicování