HTML/CSS наложения прозрачных ящиков

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

<html> 

<head> 
     <title>Welcome Home</title> 
<link rel="stylesheet" type="text/css" href="css/index.css"> 
</head> 

<body> 

<div id="topbar"> 
<div id="container"> 
    <div id="header"> 
     <div id="logo"> 
      <a href="index.html"><img id="logo" src="images/WelcomeHomeLogo.png"> </a> 
     </div> 
     <ul class="toolbar"> 
      <li id="left"><a href="lol.html"> About Us </a></li> 
      <li id="left"> <a href=""> Volunteer </a></li> 
      <li id="left"><a href=""> Donate </a></li> 
      <li id="left"><a href="lol.html"> Contact Us </a></li> 
      <li id="left"><a href="lol.html"> Blog </a></li> 
      <li id="right"><a href="lol.html"> Events </a></li> 
     </ul>  
    </div> 
</div> 
</div>

CSS:

body{ 
    background-image:url("../images/thewood.jpeg"); 
background-size: cover; 
} 

#container{ 
background-color:#ffffff; 
width: 69%; 
margin-left: auto; 
margin-right: auto; 
opacity:0.7234; 
filter:alpha(opacity=60); 
height: 950px; 
    } 

#topbar{ 
filter:alpha(opacity=60); 
opacity:0.7234; 
width: 100%; 
background-color:#ffffff; 
height:150px; 
} 

li{ 
float: left; 
list-style: none; 
display: inline; 
color: black; 
font-size: 170%; 
padding-right:48px; 
margin-top: 105px; 
} 

#logo{ 
float:left; 
margin-top:40px; 
padding-right:20px; 
padding-left:8px; 
} 

ul{ 
display: inline; 
} 

#right{ 
float: right; 
padding-left:none; 
} 

a:link {text-decoration:none;color:black;} 
a:visited {text-decoration:none;color:black;} 
a:hover {text-decoration:none;color: black;} 
a:active (text-decoration:none;color:black;}

источник

2013-11-19 user3006964

Есть более элегантные способы, но это поможет вам, где вы должны быть с минимальными изменениями в текущей настройки.

Сделать #topbar отдельный элемент (не контейнер для #container) следующим образом:

<div id="topbar"></div> 
<div id="container"> 
    <div id="header">

, а затем adjuste на полях CSS для #topbar и #container соответственно

#container { 
    background-color:#ffffff; 
    width: 69%; 
    margin-left: auto; 
    margin-right: auto; 
    opacity:0.7234; 
    filter:alpha(opacity=60); 
    height: 980px; 
    margin-top: -180px; /*Push back to top of page (height of #topbar + 30px)*/ 
} 
#topbar { 
    filter:alpha(opacity=60); 
    opacity:0.7234; 
    width: 100%; 
    background-color:#ffffff; 
    height:150px; 
    margin-top: 30px; /*Move it down*/ 
}

источник

2013-11-19 03:16:21 msanteler

HTML/CSS наложения прозрачных ящиков

ответ

Смежные вопросы