Narovnat

Josh · Napísal **Josh**: 11.11.2012 12:06 | Narovnat

Potreboval by som pomoc ako narovnat do stredu. Na chrome mi to ide a ked pozriem na operu tak mam niektore casti posunute do prava to znamena ze sa stranka moze posuvat ci ako to napisat. Poprosil by som ao to vsetko narovnat ako je na prvom obrazku. vorped diky

Citácia:

#Sq1{
margin: 0 auto;
float: left;
height: 180px;
width: 670px;
background-image: url("../images/sq/1/1.png");
background-repeat: no-repeat;
}

aby sme boli v obraze tak tusu fotky

Kód:

http://www.upnito.sk/0/7kyk3s9pupjx4p8z2qp4nxajnyhumxxg.PNG

http://www.upnito.sk/0/fnqndsyqn3s53jdn3e925bdgaxurfswt.PNG

weroro · Napísal **weroro**: 11.11.2012 12:31 | Narovnat

Aby sa ti podarilo vycentrovať stránku na horizontálny stred, musia byť všetky prvky obalené vo wrappery, čo je vlastne DIV [alebo iný blokový element] s nastaveným ID alebo class, do ktorého vkladáš ostatné elementy.

Narovnat

Potom ti už iba stačí v CSS zadefinovať [v prípade, že nepoužívaš absolútne pozíciovanie a daný DIV má nastavenú class="wrapper"]. Tento DIV musí mať nastavenú pevnú šírku (zaužívaný rozmer je 980px).

Kód:

.wrapper{
 width:980px;
 margin:0 auto;
}

Takýchto wrapperov, môžeš mať na stránke aj viac pod sebou.

Ďuri · Napísal **Ďuri**: 11.11.2012 18:41 | Narovnat

Ako ten wrapper mozes pouzit normalne aj <body>.
Josh, posli odkaz na zivu ukazku.

Josh · Napísal autor témy **Josh**: 12.11.2012 8:53 | Narovnat

na zaciatku suboru mam napisane

* {
margin: 0 auto;
padding: 0px;
}

tak nvm preco tak

weroro · Napísal **weroro**: 12.11.2012 9:08 | Narovnat

Dodaj odkaz na živú ukážku.

Ďuri: To s tým body som teda nevedel.

Dík za typ.

Josh · Napísal autor témy **Josh**: 12.11.2012 9:53 | Narovnat

tam skoro nic nemam len teraz pozicujem

// pridané po 29 minútach od posledného príspevku

ako to mam pouzit na body? staci dopisat margin: 0px auto; ?

weroro · Napísal **weroro**: 12.11.2012 10:40 | Narovnat

Vždy, keď centruješ na stred musíš zadať aj šírku.

Kód:

body{
width:980px;
margin:0 auto;
}

Josh · Napísal autor témy **Josh**: 12.11.2012 12:00 | Narovnat

jj to viem no a este sa chcem spytat aky je rozdiel medz

tymto
<div id="wrapper">
<div id="header">
<div id="menu">
</div>
</div>

a tymto?
<div id="wrapper">
</div>
<div id="header">
</div>
<div id="menu">
</div>
</div>

weroro · Napísal **weroro**: 12.11.2012 12:38 | Narovnat

Prvý príklad ti obalí element menu do elementu header a element header sa obalý do elementu wrapper.

Kód:

<!doctype html>
<html>     
  <head>       
    <meta http-equiv="content-type" content="text/html; charset=utf-8">       
    <style type="text/css">         
      <!--
          #wrapper {
             width: 980px;
             background-color: #f00;
          }
          #header {
             width: 600px;
             height: 300px;
             background-color: #0f0;
          }
          #menu {
             width: 400px;
             height: 100px;
             background-color: #00f;
          }
      //-->        
    </style>     
  </head>     
  <body>              
    <div id="wrapper">   
      <div id="header">   
        <div id="menu">   
        </div>   
      </div> 
    </div>  
  </body>
</html>

Druhý príklad ti všetky elementy zobrazí pod sebou:

Kód:

<!doctype html>
<html>        
  <head>            
    <meta http-equiv="content-type" content="text/html; charset=utf-8">            
    <style type="text/css">         
      <!--
          #wrapper {
             width: 980px;
            height: 20px;
             background-color: #f00;
          }
          #header {
             width: 600px;
             height: 300px;
             background-color: #0f0;
          }
          #menu {
             width: 400px;
             height: 100px;
             background-color: #00f;
          }
      //-->        
    </style>       
  </head>        
  <body>                   
    <div id="wrapper">   
    </div>   
    <div id="header">   
    </div>   
    <div id="menu">   
    </div>    
  </body>
</html>

Mimochodom v tvojom prvom kóde ti chýba </div> a v druhom máš jeden </div> navyše.

Josh · Napísal autor témy **Josh**: 12.11.2012 13:40 | Narovnat

jj to som robil rychlo

inak dobre som pochopil?

1 priklad

Kód:

http://www.upnito.sk/0/3jvzxu7e6h29rqzgxk6xzszp7dkmndcw.PNG

2 priklad

Kód:

http://www.upnito.sk/imggal.php?viewImage=49e248aa6a62695b9c7ca0fdd24f46e5

weroro · Napísal **weroro**: 12.11.2012 14:18 | Narovnat

Áno, presne tak.

Josh · Napísal autor témy **Josh**: 12.11.2012 14:29 | Narovnat

cize ten moj problem vyriesim tym ze to spravim 1 prikladom hej?

cize

<div id="wrapper">
<div id="header">
<div id="menu">
<div id="menu">
<div id="menu">
<div id="menu">
<div id="menu">
<div id="menu">
<div id="menu">
<div id="menu">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

weroro · Napísal **weroro**: 12.11.2012 16:18 | Narovnat

Nemusíš to všetko zanárať do seba. Stači to iba celé vložiť do wrapperu a potom to už môžeš mať rozhádzané ako chceš. Wrapper je iba obal a ten keď vycentruješ, tak vycentruješ predsa aj jeho obsah. (pozor na position:absolute)
Daj odkaz na živú ukážku, možno to pôjde aj krajšie.

Josh · Napísal autor témy **Josh**: 12.11.2012 17:57 | Narovnat

Keby som vedel ako. Inak ten obrazok co si Zaslal: Ne 11.11.12 12:31 - To zelene pozadie dam do wrapper aj s headerom a zvysok mam zacat od noveho elementu? jedna sa o tie kocky modre.

weroro · Napísal **weroro**: 12.11.2012 19:43 | Narovnat

Kód:

<!doctype html>
<html>     
  <head>       
    <meta http-equiv="content-type" content="text/html; charset=utf-8">       
    <title>ukazka</title>
    <style type="text/css">  
      <!--
          html,*,body{margin:0;padding:0;}
          html{font-size:100%;}
          body{font-family:'Lucida Grande',Verdana,Helvetica,Arial,sans-serif;color:#000;background-color:#fff;font-size:12px;}
          a{color:#336699;text-decoration:none;}
          a:active,a:visited{color:#336699;text-decoration:none;}
          a:hover{color:#7192bb;text-decoration:underline;}
          .clr{clear:both;}
          .wrapper{width:980px;margin:0 auto;}
          .menu{background-color:#222;padding:10px 0;}
          .menu li{display:inline;}
          .menu a{display:block;float:left;padding:10px 20px;}
          .menu a:hover{background-color:#ff0;}
          .menu ul{width:350px;margin:0 auto;}
          .content{padding:10px;background-color:#666;}
          .el{width:400px;height:200px;background-color:#ccc;}
          .footer{padding:20px 0;text-align:center;background-color:#0ff;} 
      //-->  
    </style>       
  </head>     
  <body>
    <!-- WRAPPER -->         
    <div class="wrapper">
      <!-- MENU -->                        
      <div class="menu">                
        <ul>                
          <li>
          <a href="#">odkaz1</a>
          </li>                
          <li>
          <a href="#">odkaz2</a>
          </li>                
          <li>
          <a href="#">odkaz3</a>
          </li>                
          <li>
          <a href="#">odkaz4</a>
          </li>                
        </ul>              
      </div>
      <!-- CONTENT -->              
      <div class="content clr">
        <h1>Toto je časť kde môžeš dať čokoľvek a akoľvek.</h1>              
        <div class="el">nejaký prvok 1</div>                                                           
      </div>
      <!-- FOOTER -->                                            
      <div class="footer">&copy; 2012 Tvoje-Meno</div>                                                                     
    </div>  
  </body>
</html>

Josh · Napísal autor témy **Josh**: 12.11.2012 20:01 | Narovnat

Ako to mam vzdialit ked tam pridam margin tak mi to posunie aj pozadie chcem to posunut nizsie aby to nebolo tak tesne

Kód:

http://www.upnito.sk/0/x9n82qm6nx3xnwdaptr562f7aca3bnry.PNG

Kód:

  <body>   
  <div id="wrapper">
    <div id="header"> 
      <div id="menu">    
     </div>
       </div>
         </div>
   <div id="bigsquare">                
    </div>
      <div id="bb">         
      <div id="sq">         
        </div> 
        </div>                          
 
   <div id="panel">
   </div>
   <div id="content">
   </div>
   <div id="footer">
   </div>
  </div>     
  </body>

Kód:

/* Style Sheets */
* {
   margin: 0 auto;
   padding: 0px;
}

body {
background-image: url("../images/background/background.png");
width: 1000px; 
margin: 0 auto; 
}

#wrapper{
background-image: url("../images/bb2/bb2.png");
width: 1000px;
height: 501px;
}

#header{
background-image: url("../images/header/header.png");
width: 1000px;
height: 95px;
}


#bigsquare{    
background-image: url("../images/bigsquare/bigsquare.png");
width: 1000px;
height: 90px;
}

#bb{    
background-image: url("../images/bb/bb.png");
width: 1000px;
height: 1408px;
}


#sq{    
background-image: url("../images/sq/1/1.png");
margin-left: 20px;
width: 670px;
height: 181px;
}