CSS灯箱问题

-1

我为播放YouTube视频创建了一个小灯箱。它工作正常，但它的设计很糟糕。检查出来。 enter image description here CSS灯箱问题

我试图解决它，但这是我得到的最好结果。您可以观察灯箱的JSbin的链接。 http://jsbin.com/UDIGeveg/1/edit

这是我的CSS。不太确定，我还能做些什么，因此关闭的X在对话框中显示得很好。

.close { 
    background: #606061; 
    color: #FFFFFF; 
    line-height: 25px; 
    position: absolute; 
    right: -12px; 
    text-align: center; 
    top: -10px; 
    width: 24px; 
    text-decoration: none; 
    font-weight: bold; 
    -webkit-border-radius: 12px; 
    -moz-border-radius: 12px; 
    border-radius: 12px; 
    -moz-box-shadow: 1px 1px 3px #000; 
    -webkit-box-shadow: 1px 1px 3px #000; 
    box-shadow: 1px 1px 3px #000; 
} 

.close:hover { background: #00d9ff; }

来源

2013-12-16 Diego

你在问我们做什么？好的设计对每个人都是不同的...... – c0d3Junk13

我想知道如何让X的close完全出现在对话框中。 – Diego

好吧，它看起来像你必须玩在CSS中的正确和最高值...不知道你的CSS的其余部分，很难说。尝试-22px的权利和-20px的顶部，看看是否移动'X'按钮 – c0d3Junk13

您需要删除从overflow: hidden;，

div#openMContainter { 
    width: 600px; 
    height: auto; 
    display:block; 
}

的overflow导致按钮只显示什么是父母的内部可见。

来源

2013-12-16 20:28:37

谢谢。仍然想知道为什么是-1问题。 – Diego

没问题，我敢肯定有人可能脾气暴躁，或者他们觉得答案很明显。我可以看到他们为什么低估了我猜，因为'溢出'是一种常见的CSS风格，但谁知道。无论如何，您的设计中最好的运气。 –

不知道这是你在想什么，但我的建议，整理，这将是：

更改CSS来：

// Uniform padding around the screen, keeps the grey area constant 
.modalDialog > div { 
    padding: 20px 20px 20px 20px; 
} 

//Moving the x 'close button' 
//Amend the padding that determines the button position 
.close { 
top: 2px; 
right: 2px; 
}

然后在java：

// amend the width of the screen so that it fits into the grey area 
width: '600',

不知道这是你想要的，但我会从这开始清理你的最终结果。希望它有帮助。

丹

来源

2013-12-16 20:29:48 PartTimeNinja

回答

相关问题