Diskuze: Pozicování

HTML a CSS HTML a CSS Pozicování American English version English version

Avatar
Salieri
Člen
Avatar
Salieri:

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
Hlavní zlo? **Školství a Matematika**!
Avatar
pk-grok
Člen
Avatar
pk-grok:

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  +1 30.11.2013 9:11
Avatar
Salieri
Člen
Avatar
Salieri:

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
Hlavní zlo? **Školství a Matematika**!
Avatar
Kit
Redaktor
Avatar
Odpovídá na Salieri
Kit:

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

Nahoru Odpovědět  +2 30.11.2013 9:20
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
Salieri
Člen
Avatar
Odpovídá na Kit
Salieri:

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

Nahoru Odpovědět 30.11.2013 9:33
Hlavní zlo? **Školství a Matematika**!
Avatar
Nahoru Odpovědět 30.11.2013 9:35
Nesnáším {}, proto se jim vyhýbám.
Avatar
Pavel Mareš
Redaktor
Avatar
Pavel Mareš:

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
Nechci být workoholik. Bohužel někdy musíme být tím, čím nechceme.
Avatar
Odpovídá na Salieri
Michal Žůrek (misaz):

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  +1 30.11.2013 9:39
Nesnáším {}, proto se jim vyhýbám.
Avatar
done
Člen
Avatar
done:

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

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  +1 30.11.2013 9:40
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
Salieri
Člen
Avatar
Odpovídá na Pavel Mareš
Salieri:

<div id="obal">
<div class="hlobsah">

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

</div>
</div>

Tak?

Nahoru Odpovědět 30.11.2013 9:40
Hlavní zlo? **Školství a Matematika**!
Avatar
Ľuboš Čurgó
Redaktor
Avatar
Ľuboš Čurgó:

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
Avatar
Pavel Mareš
Redaktor
Avatar
Odpovídá na Salieri
Pavel Mareš:

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
Nechci být workoholik. Bohužel někdy musíme být tím, čím nechceme.
Avatar
Salieri
Člen
Avatar
Salieri:

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

Nahoru Odpovědět 30.11.2013 13:27
Hlavní zlo? **Školství a Matematika**!
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.