Autor Zpráva
pavilek
Profil *
Zdravím,

mám div, který má 100% šířku a výšku 200px. V tomto divu je div nastavený width:960px, height:30 a margin:0px auto. Problém je v tom, že vnitří div mě nejde nastavit margin-top:20px. Když však místo toto napíšu position:relative, top:20, tak to funguje. Mám takový pocit že tato chyba souvisí s float prvkama na tímto ohraničením, jelikož na tímto obalem mám to samé a tam to funguje. Źkoušel jsem tomu předešlému nastavit clear:both, ale nefunguje. Víte někdo? Díky
Camo
Profil
pavilek:
Skúšal som teraz margin-top aj s floatovanými prvkami a normálne to funguje.
Ukáž ten kód kde ti to nejde.
pavilek
Profil *
HTML

<div id="box-container">
    <div class="box-in">
      <div class="box">
        <div class="box-header">
          <h2>ZÁMEČNICKÉ PRÁCE</h2>
        </div>
        <div class="box-content">
          <h3>Strojní zámečnictví</h3>
          <h3>Stavební zámečnictví</h3>   
            <span class="next"><a href="#">ZOBRAZIT VÍCE</a></span>
        </div>
      </div>
      <div class="box">
        <div class="box-header">
          <h2>SVAŘOVACÍ PRÁCE</h2>
        </div>
        <div class="box-content">
          <h3>Svařování nerezi</h3>
          <h3>Svařování oceli a litiny</h3>
          <span class="next"><a href="#">ZOBRAZIT VÍCE</a></span>    
        </div>
      </div>
      <div class="box3">
        <div class="box-header">
          <h2>MONTÁŽE / DEMONTÁŽE</h2>
        </div>
        <div class="box-content">
          <h3>Montáže haly, kostrukcí</h3>
          <h3>Montáže zařízení</h3>
          <span class="next"><a href="#">ZOBRAZIT VÍCE</a></span>
        </div>
      </div> 
    </div>
  </div>
  </div> <!-- End box-container --> 
  <div id="footer-container">
    <div class="footer-in">
      <div class="sitemap">
        <h4>MAPA STRÁNEK</h4>
        <p><a href="#">Úvod</a></p></p>
        <p><a href="#">Kontakt</a></p>
      </div>
      <div class="partner">
        <h4>PARTNERSKÉ STRÁNKY</h4>
        <p><a href="#">cokoliv</a></p>
      </div>
      <div class="view">
        
      </div>
    </div>
  </div> <!-- End footer-container -->

CSS

#box-container {
  width:100%;
  height:300px;
  margin:40px auto 0px auto;
  background-image:url('../images/greenlayer.png');
  background-repeat:repeat-x;
}
.box-in {
  clear:both;
  overflow:hidden;
  width:970px;
  margin:0px auto;
}
.box {
  width:310px;
  height:260px;
  float:left;
  margin:20px 20px 0px 0px;

}
.box3 {
  width:310px;
  height:260px;
  float:right;
  margin:20px 0px 0px 0px;
}
.box-header {
  margin:0px 0px;
  line-height:63px;
  width:310px;                                                        
  height:63px;
  background-image:url('../images/box-header.png');
  background-repeat:no-repeat;
}

.box-header h2 {
  color:rgb(117,117,117);
  font-size:14pt;
  font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
}
.box-content {  
  padding:30px 30px;
  text-align:center
  color:black;
  word-wrap:break-word;
  height:197px;
  overflow:hidden;
  background-image:url('../images/box-background.png');
  background-repeat:no-repeat;  
}
.box-content h3 {
  padding-bottom:10px;
  border-bottom:1px solid silver;
  text-align:center;
  font-size:12pt;
  font-weight:normal;  
}
.next {
  text-align:center;
  color:rgb(0,0,0);
  position:relative;
  top:10px;
  color:rgb(55,151,240);rgb(84,177,227)
  font-weight:bold;
  font-size:13pt;
}
.next a {
  color:#1580e4;
}
.next a:hover {
  color:rgb(34,72,96);
}
#footer-container {
  clear:both;
  width:100%;        
  height:200px;
  background-image:url('../images/footer.png'); 
  background-repeat:repeat-x;
}
.footer-in {
  text-align:left;
  margin:30px auto;
  width:960px;
  height:200px;
  
}
.footer-in a {
  color:rgb(255,255,255);
  text-decoration:none;
  font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
}
.footer-in a:hover {
  color:rgb(80,172,226);
  text-decoration:underline;
  font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
}
.sitemap {
  margin:0px 20px 0px 0px;
  width:300px;
  float:left;
}
.partner {
  margin:0px 20px 0px 0px;
  width:300px;
  float:left;
}
.view {
  margin:0px;
  width:300px;
  float:left;
}

obrázek

http://s21.postimg.org/9w7no0hmv/bugiig.png

Teď jsem si uvědomil, že nemám nastveno jak jsem si myslel (ale dle následujícího bych to chtěl udělat, pomocí margin-top:30px; vnořeného divu, abych nemusel nastavovat prvku ve vnořeném divu position:relative; top:30px; )

Tento kód je jak bych chtěl, avšak nefunguje
<div style="background-color:navy; width:100%; height:200px;">   
   <div style="margin:30px auto 30px auto; height:50px; width:960px;">
      <div style="background-color:white;">ahoj</div>
   </div>
</div>

Zde je ten samý kód, ale prvek ve vnořeném divu má nastavení position:relative; top:30px; a funguje
<div style="background-color:navy; width:100%; height:200px;">   
   <div style="margin:30px auto 30px auto; height:50px; width:960px;">
      <div style="background-color:white;">ahoj</div>
   </div>
</div>



Víte někdo proč to nejde?
Camo
Profil
Ja už neviem. Nech robím čo chem funguje mi to.
Chceš povedať, že ten kód čo si napísal:
<div style="background-color:navy; width:100%; height:200px;">   
   <div style="margin:30px auto 30px auto; height:50px; width:960px;">
      <div style="background-color:white;">ahoj</div>
   </div>
</div>
sa ti nezobrazí správne?

Napíš aspoň, ktorý presne je to div(triedu, id) v tom prvom kóde.
Davex
Profil
pavilek:
Definuj, prosím, co si představuješ pod slovy nefunguje a nejde. Výše uvedené kódy odsadí nápis ahoj shodně o 30 pixelů. Pokud ti vadí to bílé místo, tak nastav prvnímu bloku třeba overflow: hidden, aby se neslučovaly okraje sousedících prvků.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: