2015-01-25 4 views
-1

Я пытаюсь сделать прозрачную коробку за столом, которую я могу использовать в качестве фона для нее, но она отображается слева направо моей страницы и не только за столом , Любые идеи, как я могу это исправить?Прозрачная коробка вокруг стола CSS/HTML

Вот HTML:

<!DOCTYPE HTML> 
<HEAD> 
<LINK href="Menu/Menu.css" rel="stylesheet" type="text/css" /> 
<LINK href="Pictures/Background.css" rel="stylesheet" /> 
<LINK href="Style/Boxes.css" rel="stylesheet" /> 
</HEAD> 
<BODY> 

<nav class="nav"> 
<ul> 
<li class="current"><a href="#"><b>MENU</b></a></li> 
<li><a href="Index.html">BLOG</a></li> 
<li><a href="#">MUSIC</a></li> 
<li><a href="#">PHOTOGRAPHY</a></li> 
<li><a href="#">QUOTES & THOUGHTS</a></li> 
<li><a href="#">ABOUT ME</a></li> 
</ul> 
</nav><br><br><br><br><br> 

<div class="BlueBox"> 
<TABLE border="0" align="center" width="60%"> 
<TR> 
<TD ROWSPAN="2" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</TD> 
<TD valign="bottom" align="center"><b><i><FONT SIZE="6" COLOR="FFFFFF">What can I say about myself...</FONT></i></b></TD> 
<TD ROWSPAN="2" >&nbsp;&nbsp;&nbsp;</TD> 
<TD ROWSPAN="2"><IMG SRC="Pictures/Me.JPG" height="400"></TD> 
</TR> 
<TR> 
<TD valign="middle" align="left" > 
TEXT 
</TD> 
</TR> 
</TABLE> 
</div> 

</BODY> 
</HTML> 

Вот CSS для коробки:

.BlueBox{ 
position:fixed; 
background-color:rgba(0,157,255,0.7); 
padding:10px 10px 10px 10px; 
border-radius:15px 15px 15px 15px; 
} 

ответ

0

Ваш пример просто элемент блока (таблица) внутри другого элемента блока (div.bluebox). .. ничего, что должно помешать вашему примеру от рендеринга, как вы ожидаете.

Для отладки дизайна я бы рекомендовал вам удалить все остальные файлы css и rowspans в таблице, чтобы получить минимальный пример.

1
Just simply remove **position:fixed;** from your css. 

.BlueBox{ 
position:fixed; 
background-color:rgba(0,157,255,0.7); 
padding:10px 10px 10px 10px; 
border-radius:15px 15px 15px 15px; 
} 
Смежные вопросы