| Autor | Zpráva | ||
|---|---|---|---|
| pavilek Profil * |
#1 · Zasláno: 23. 8. 2013, 16:56:44
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 |
#2 · Zasláno: 23. 8. 2013, 17:10:00
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 * |
#3 · Zasláno: 23. 8. 2013, 17:32:03 · Upravil/a: pavilek
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 |
#4 · Zasláno: 23. 8. 2013, 19:19:44
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>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ů.
|
||
|
Časová prodleva: 11 let
|
|||
0