We have carousel code like this:
<div style="width:280px; height:100px; border:1px solid red; overflow:hidden; ">
<ul>
<li style="position:relative; width:200px; height:50px; list-style-type:none; background:yellow;">
<div style="position:absolute; top:10px; left:10px; width:180px; height:150px; background:Pink; z-index: 99;">
<br/>
</div>
</li>
</ul>
</div>
Last div, which is positioned absolute, is cropping. Is there any way to do it works normal by changing only ccs code?
If you don't want to remove overflow: hidden, then is it ok for you to remove position:relative for inner li and this to some new outer div and add appropriate top and left values to the pink div as below.
<div style="position:relative">
<div style="width:280px; height: 100px; border:1px solid red; overflow:hidden; ">
<ul>
<li style="/* removed position:relative; */ width:200px; height:50px; list-style-type:none; background:yellow;z-index: 3;">
<div style="position: absolute; top: 30px; left: 52px; width:180px; height:150px; background:Pink; z-index: 99;">
<br>
</div>
</li>
</ul>
</div>
</div>
Thats the only way I could figure out!
you have given overflow:hidden to the main div which has width:280px
and so the last div with position:absolute is getting chopped off.
<div style="width:280px; height:100px; border:1px solid red; /* removed overflow:hidden; */ ">
<ul>
<li style="position:relative; width:200px; height:50px; list-style-type:none; background:yellow;">
<div style="position:absolute; top:10px; left:10px; width:180px; height:150px; background:Pink; z-index: 99;">
<br>
</div>
</li>
</ul>
</div>
Related
I have drop down menu which use css for acting like menu :-
#primary_nav_wrap
{
background:url("../img/footer_lodyas.png")no-repeat center center fixed;
display:inline-block;
width:800px;
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
margin:0;
padding:0
}
#primary_nav_wrap ul a
{
display:block;
color:black;
text-decoration:none;
font-weight:bold;
font-size:15px;
line-height:50px;
padding:0 15px;
font-family:yekan,montserratAltenates;
}
#primary_nav_wrap ul li
{
position:relative;
display:inline-block;
float:right;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:rgba(255, 153, 0, 0.7);
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
.slidshow_container{
max-width:800px;
position:relative;
margin:0;
padding:0;
}
.mySlides{
position:relative;
margin:0;
padding:0;
}
.numbertext{
font-family:yekan,montserratAltenates;
font-size:15px;
position:absolute;
padding:10px;
color:white;
}
.prev,.next{
cursor:pointer;
position:absolute;
padding:10px;
color:white;
margin:auto;
top:150px;
font-size:30px;
border-radius:0px 3px 3px 0px;
}
.next:hover{
background:rgba(40,40,40,0.8);
border-radius:3px 0px 0px 3px;
}
.prev:hover{
background:rgba(40,40,40,0.8);
}
.next{
right:0;
}
.mySlides .text{
font-family:yekan,montserratAltenates;
font-size:15px;
position:absolute;
bottom:0px;
padding:20px;
margin-bottom:5px;
width:800px;
text-align:center;
color:white;
background:rgba(35, 35, 35, 0.60);
overflow:hidden;
}
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>
Category
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>
Contact us
</li>
<li>
About us
</li>
</ul>
</nav>
<br style="clear:both;" />
<div class="slidshow_container">
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="~/Content/img/slideshow/image_1.jpg" style="width:100%;height:400px" />
<div class="text">image 1</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="~/Content/img/slideshow/image_2.jpg" style="width:100%;height:400px" />
<div class="text">image 2</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="~/Content/img/slideshow/image_3.jpg" style="width:100%;height:400px" />
<div class="text">image 3</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4/ 4</div>
<img src="~/Content/img/slideshow/image_4.jpg" style="width:100%;height:400px" />
<div class="text">image 4</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
But when I move the mouse over the category menu the blow list get under the image of slide menu like image below:-
So how can I solve this problem ?
z-index will fix your problem,
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element
with a lower stack order.
Note: z-index ONLY works on positioned elements (position:absolute,
position:relative, or position:fixed).
Syntax :
z-index: auto|number|initial|inherit;
Initial value: auto
Applies to positioned elements
Inherited no
https://developer.mozilla.org/en/docs/Web/CSS/z-index
#primary_nav_wrap
{
background:url("../img/footer_lodyas.png")no-repeat center center fixed;
display:inline-block;
width:800px;
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
margin:0;
padding:0
}
#primary_nav_wrap ul a
{
display:block;
color:black;
text-decoration:none;
font-weight:bold;
font-size:15px;
line-height:50px;
padding:0 15px;
font-family:yekan,montserratAltenates;
}
#primary_nav_wrap ul li
{
position:relative;
display:inline-block;
float:right;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:rgba(255, 153, 0, 0.7);
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0;
/* Here Put z-index*/
z-index:9999;
}
#primary_nav_wrap ul ul li
{
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
.slidshow_container{
max-width:800px;
position:relative;
margin:0;
padding:0;
}
.mySlides{
position:relative;
margin:0;
padding:0;
}
.numbertext{
font-family:yekan,montserratAltenates;
font-size:15px;
position:absolute;
padding:10px;
color:white;
}
.prev,.next{
cursor:pointer;
position:absolute;
padding:10px;
color:white;
margin:auto;
top:150px;
font-size:30px;
border-radius:0px 3px 3px 0px;
}
.next:hover{
background:rgba(40,40,40,0.8);
border-radius:3px 0px 0px 3px;
}
.prev:hover{
background:rgba(40,40,40,0.8);
}
.next{
right:0;
}
.mySlides .text{
font-family:yekan,montserratAltenates;
font-size:15px;
position:absolute;
bottom:0px;
padding:20px;
margin-bottom:5px;
width:800px;
text-align:center;
color:white;
background:rgba(35, 35, 35, 0.60);
overflow:hidden;
}
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>
Category
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>
Contact us
</li>
<li>
About us
</li>
</ul>
</nav>
<br style="clear:both;" />
<div class="slidshow_container">
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="~/Content/img/slideshow/image_1.jpg" style="width:100%;height:400px" />
<div class="text">image 1</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="~/Content/img/slideshow/image_2.jpg" style="width:100%;height:400px" />
<div class="text">image 2</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="~/Content/img/slideshow/image_3.jpg" style="width:100%;height:400px" />
<div class="text">image 3</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4/ 4</div>
<img src="~/Content/img/slideshow/image_4.jpg" style="width:100%;height:400px" />
<div class="text">image 4</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
I am trying to do a cross browser compatible drop down menu that is in this site:
jsfiddle.net
(check tags with id listdelete in thehtml/css file and javascript is for other purposes)
But my problem is that this version with the ul tags setted as "primary menu" works perfectly on chrome/firefox but it's not gonna work on ie because(i don't know why) the menu is not popping up.
i have tried to change the first #listdelete tags into the leftcont div to a tags and the menus pop up but links are not going to work(i guess that is because the links witch are a tags do not work in the list because the primary list is an a tag itself)
For anithing just ask in comments
HTML:
<div id="wrapperlink">
<ul>
<li><a id="temple"href="storia.html"/></a></li>
<li><a id="gallery"href="gallery.html"/></a></li>
<li><a id="play"href="video.html"/></a></li>
<li><a id="info"href="info.html"/></a></li>
</ul>
</div>
</div>
<div id="container">
<div id="leftcont">
<div class="wrapcont">
<div style="text-align:center;font-size:1.3em;"><b>Componenti aereo</b></div>
<ul class="listdelete">
<li>
<span><b>ALI</b></span>
<ul class="listdelete">
<li class="middle">
<b>Disegni</b>
</li>
<li class="middle">
<b>Componenti</b>
</li>
<li class="middle">
<b>Lavori</b>
</li>
</ul>
</li>
</ul>
<ul class="listdelete">
<li>
<span><b>CARRELLO</b></span>
<ul class="listdelete">
<li class="middle">
<b>Disegni</b>
</li>
<li class="middle">
<b>Componenti</b>
</li>
<li class="middle">
<b>Lavori</b>
</li>
</ul>
</li>
</ul>
<ul class="listdelete">
<li>
<span class="spanwidth"><b> CRUSCOTTO</b> </span>
<ul class="listdelete">
<li class="middle">
<b>Disegni</b>
</li>
<li class="middle">
<b>Componenti</b>
</li>
<li class="middle">
<b>Lavori</b>
</li>
</ul>
</li>
</ul>
<ul class="listdelete">
<li>
<span><b> ELICA</b></span>
<ul class="listdelete">
<li class="middle">
<b>Disegni</b>
</li>
<li class="middle">
<b>Componenti</b>
</li>
<li class="middle">
<b>Lavori</b>
</li>
</ul>
</li>
</ul>
<ul class="listdelete">
<li>
<span> <b>FUSOLIERA</b> </span>
<ul class="listdelete">
<li class="middle">
Disegni
</li>
<li class="middle">
<b>Componenti</b>
</li>
<li class="middle">
<b>Lavori</b>
</li>
</ul>
</li>
</ul>
<ul class="listdelete">
<li>
<span><b>LONGHERONE</b> </span>
<ul class="listdelete">
<li class="middle">
<a>Disegni</a>
</li>
<li class="middle">
<a>Componenti</a>
</li>
<li class="middle">
Lavori
</li>
</ul>
</li>
</ul>
<ul class="listdelete">
<li>
<span> <b>MOTORE</b> </span>
<ul class="listdelete">
<li class="middle">
<b>Disegni</b>
</li>
<li class="middle">
<b>Componenti</b>
</li>
<li class="middle">
<b>Lavori</b>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="centercontpos">
<div id="centercont">
<div class="wrapcont">
<div id="desc">
<div style="text-align:center;width:100%; height:auto; font-size:1.3em;font-family:Lucida Sans Unicode;"><b></b> </div><br>
<div style="text-align:center;width:100%;height:auto;font-size:1.1em; font-family:Lucida Sans Unicode;"></div>
<br>
</div>
<div id="pusher1">
</div>
<div id="pic1">
<div id="slider">
<img id="1"style="border-radius: 18px;width:100%;height:100%;" src="../immagini/slide1.jpg" border="0"style="width:100%;height:100%;"/>
<img id="2"style="border-radius: 18px;width:100%;height:100%;" src="../immagini/slide2.jpg" border="0"style="width:100%;height:100%;"/>
<img id="3"style="border-radius: 18px;width:100%;height:100%;" src="../immagini/slide3.jpg" border="0"style="width:100%;height:100%;"/>
<img id="4"style="border-radius: 18px;width:100%;height:100%;" src="../immagini/slide4.jpg" border="0"style="width:100%;height:100%;"/>
<img id="5"style="border-radius: 18px;width:100%;height:100%;" src="../immagini/slide5.jpg" border="0"style="width:100%;height:100%;"/>
</div>
</div>
</div>
</div>
</div>
<div id="rightcont">
<div class="wrapcont">
<div id="lastarticlepos">
<div id="lastarticlediv">
<div style="border-bottom:1px solid black;">
<b>ULTIMI ARTICOLI</b>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
CSS:
body{
background-image:url("../immagini/polaroid.jpg");
background-size:cover;
height:100%;
width:100%;
margin:0;
padding:0;
min-width:1100px;
min-height:1000px;
}
body,html{
height:100%;width:100%;
min-width:1000px;
margin:0;
padding:0;
}
#media screen and (max-height: 900px){
#link{
position:relative;
width:100%;
height:20%;
background-color: rgba(255,246,0,0.9);
}
#wrapperlink{
position:relative;
width:90%;
height:90%;
margin-left:auto;
margin-right:auto;
}
#link ul{
position:absolute;
width:90%;
height:90%;
list-style:none;
margin:auto;
padding:0px;
}
#link li{
float:left;
width:4em;
height:100%;
margin-right:5%;
}
#link a{
float:left;
width:4em;
height:100%;
}
}
#logo{
position:absolute;
background-image:url("../immagini/logo.png");
width:14.563em;
height:100%;
background-size:contain;
background-repeat:no-repeat;
}
#title{
position:relative;
width:100%;
height:15%;
background-color: rgb(0,0,0);
}
#link{
position:relative;
width:100%;
height:8%;
background-image:url("../immagini/linkbg.png");
background-size:contain;
background-repeat:repeat-x;
}
#wrapperlink{
position:relative;
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
}
#link ul{
position:absolute;
width:100%;
height:100%;
list-style:none;
margin:auto;
padding:0px;
}
#link li{
float:left;
width:4em;
height:100%;
margin-right:5%;
}
#link a{
float:left;
width:4em;
height:90%;
}
#container{
position:relative;
min-width:100%;
height:85%;
background-color: rgba(136,136,136,0.9);
box-sizing:border-box;
}
#footer{
position:relative;
background-image:url("../immagini/footer.png");
width:100%;
height:20%;
background-size:cover;
background-repeat:no-repeat;
box-sizing:border-box;
bottom:0;
}
#home{
position:absolute;
background-image:url("../immagini/home1.png");
width:100%;
height:100%;
background-repeat:no-repeat;
background-size:contain;
}
#temple{
position:absolute;
background-image:url("../immagini/storia.png");
width:100%;
height:100%;
background-repeat:no-repeat;
background-size:contain;
}
#gallery{
position:absolute;
background-image:url("../immagini/gallery.png");
width:100%;
height:100%;
background-repeat:no-repeat;
background-size:contain;
}
#info{
position:absolute;
background-image:url("../immagini/info.png");
width:100%;
height:100%;
background-repeat:no-repeat;
background-size:contain;
}
#play{
position:absolute;
background-image:url("../immagini/play.png");
width:100%;
height:100%;
background-repeat:no-repeat;
background-size:contain;
}
.wrapcont{
position:relative;
width:100%;
height:100%;
}
#leftcont{
position:absolute;
border:black solid 2px;
height:100%;
width:20%;
left:0;
box-sizing:border-box;
}
#centercont{
position:absolute;
border:black solid 2px;
height:100%;
width:100%;
margin:auto;
background-color: rgba(200,80,30,0.9);
box-sizing:border-box;
}
#rightcont{
position:absolute;
border:black solid 2px;
height:100%;
width:20%;
right:0;
top:0;
box-sizing:border-box;
}
#centercontpos{
position:relative;
width:60%;
height:100%;
margin:auto;
box-sizing:border-box;
}
#engsite{
position:absolute;
top:0;
right:0;
background-image:url("../immagini/eng.png");
width:3em;
height:1.9215em;
background-size:contain;
border:2px solid grey;
}
#itasite{
position:absolute;
top:0;
right:0;
background-image:url("../immagini/itaflag.png");
width:3em;
height:1.9215em;
background-size:contain;
border:2px solid grey;
}
/*------------------------------------------------------------lateral bar opening--------------------------------*/
/*------------------------------------------------------------lateral bar opening--------------------------------*/
/*------------------------------------------------------------lateral bar opening--------------------------------*/
/*------------------------------------------------------------lateral bar opening--------------------------------*/
.listdelete{
position:relative;
list-style:none;
display:inline;
margin:0px;
padding:0px;
width:auto;
font-size:1em;
}
.listdelete>li{
text-align:center;
}
.spanwidth{
width:30px;
text-align:center;
}
.listdelete>li:hover span{
width:100%;
text-align:center;
background-color:red;
}
.listdelete>li>.listdelete>li{
display:none;
background-color:white;
width:auto;
margin:0;
height:auto;
}
.listdelete:hover li>.listdelete>li{
display:block;
background-color:white;
margin:0;
width:auto;
font-size:0.8em;
text-align:center;
}
.primo{
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom:1px grey solid;
}
.ultimo{
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
.middle{
border-bottom:1px grey solid;
}
/*------------------------------------------------------------lateral bar close--------------------------------*/
/*------------------------------------------------------------lateral bar close--------------------------------*/
/*------------------------------------------------------------lateral bar close--------------------------------*/
/*------------------------------------------------------------lateral bar close--------------------------------*/
#desc{
border:black solid 2px;
border-radius: 25px;
position:relative;
width:100%;
height:auto%;
background-image:url("../immagini/descbg.png");
background-size:cover;
}
#pusher1{
position:relative;
width:100%;
height:5em;
}
#pic1{
border:black solid 2px;
border-radius: 18px;
margin:auto;
position:relative;
width:80%;
height:40%;
background-color:red;
}
.spancenter{
position:relative;
width:auto;
margin:auto;
}
#slider{
position:absolute;
width:100%;
height:100%;
overflow:hidden;
margin:0px;
}
#lastarticlepos{
position:absolute;
width:100%;
height:80%;
border:black solid 2px;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
background-color:rgba(255,255,255,0.7);
box-sizing:border-box;
}
I think the problem is that IE doesn't understand the "hover" attribute with tag "li". It only applies to tag "a". Try to solve your problem by inserting "if ie" blocks with links instead of list elements. Here's an example (a little different task but still can help): http:// jsfiddle. net/xan9gtde/
Pay attention that the commented CSS-block must be in different CSS-file for IE only.
I'm creating a landing page with an embedded video background so I've assigned its z-index lower than that of the navigation bar, the footer, etc. But when I do so, the layers on top of the video are very glitchy meaning they sometimes don't show up. I thought I could resolve this glitch by assigning the video a negative z-index. This works and solves the glitching problem, but the video layer becomes un-clickable. Not sure what the problem is, really appreciate the help.
HTML:
<nav>
<ul style="display: inline-block; padding-top: 15px; padding-bottom: 10px; padding-left:20px; padding-right:30px;">
<a href="{{store_url}}">
{{#logotype}}
<img src="{{url-2000}}" alt="{{store_name}}">
{{/logotype}}
</a>
</ul>
<ul style="display: inline-block;">
<li>All
</li>
<li>Men
</li>
<li>Women
</li>
</ul>
</nav>
<div id="bg_container">
<iframe id="bg" src="//www.youtube.com/embed/wO_xhHf-OgM?wmode=opaque&autoplay=1&rel=0&controls=0&showinfo=0&vq=hd720" frameborder="0" allowfullscreen></iframe>
</div>
CSS:
#bg_container {
height:700px;
overflow:visible;
}
#bg {
width:100%;
height:1200px;
position: fixed;
top: -50%;
z-index:1;
}
#content {
position:absolute;
top:0px;
padding:30px;
color:#FFF;
text-shadow:#000 2px 2px;
}
.transparent {
background-color:rgba(0, 0, 0, 0.8);
position: relative;
z-index:10;
}
.nav {
background-color:rgba(0, 0, 0, 0.5);
position: relative;
z-index:10;
}
Check out the code snippet below and this fiddle.
#bg_container {
height:700px;
overflow:visible;
z-index:0;
}
#bg {
width:100%;
height:1200px;
position: fixed;
top: -50%;
}
#content {
position:absolute;
top:0px;
padding:30px;
color:#FFF;
text-shadow:#000 2px 2px;
z-index:1;
}
nav {
background-color:rgba(0, 0, 255, 0.5);
position: relative;
}
ul {
display: inline-block;
}
.logo {
height:30px;
}
<div id="bg_container">
<iframe id="bg" src="//www.youtube.com/embed/wO_xhHf-OgM?wmode=transparent&autoplay=1&rel=0&controls=0&showinfo=0&vq=hd720" frameborder="0" allowfullscreen></iframe>
</div>
<div id="content">
<nav>
<ul>
<img class="logo" src="https://chillix.files.wordpress.com/2009/10/android-logo-small.gif" alt="android" />
</ul>
<ul>
<li>
All
</li>
<li>
Men
</li>
<li>
Women
</li>
</ul>
</nav>
</div>
I would like to have my logo inside my menu, and the list in the middle of the page. But only when i make it float right my logo is staying inside my menu... Here's an example: http://gyazo.com/76719bc76c08765cb1f8fee588b3daae
<body>
<div id="Wrapper">
<header>
<div id="Menu">
<div id="Nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Social</li>
</ul>
</div>
<Div id="logo">
<img src="Breaking Bad.png" alt="Logo" height="150px">
</div>
</div>
</header>
<div id="Video"><iframe width="640" height="360" src="http://www.youtube.com/embed/Gx7L8FWN80Y" frameborder="0" allowfullscreen></iframe></div>
<div id="News"></div>
<div id="Footer"></div>
</div>
</body>
body{
font-family:impact;
overflow-y: scroll;
background-color:#4A4247;
margin:0px;
}
#Wrapper{
margin:0 auto;
width:1000px;
}
#Menu{
color:#09b800;
margin:0 auto;
width:1000px;
height:150px;
background-color:#151D04;
}
#Nav{
text-align:center;
margin:0 auto;
display:table;
}
#Logo{
clear:right;
float:left;
}
#Video{
width:640px;
height:360px;
margin-top:20px;
float:left;
background-color:black;
margin-bottom:20px;
}
#News{
margin-top:20px;
width:340px;
height:360px;
color:black;
float:right;
background-color:black;
margin-bottom:20px;
}
#Footer{
clear: both;
background-color:black;
height: 100px;
}
This might be usefull:
<body>
<style>
body{
font-family:impact;
overflow-y: scroll;
background-color:#4A4247;
margin:0px;
}
#Wrapper{
margin:0 auto;
width:1000px;
}
#Menu{
color:#09b800;
margin:0 auto;
width:1000px;
height:150px;
background-color:#151D04;
}
#Nav ul{
margin:0 auto;
}
#Nav{
width:850px;
margin-left:-75px;
text-align:center;
display:table;
float:left;
}
#Logo{
clear:right;
float:left;
width:150px;
}
#Video{
width:640px;
height:360px;
margin-top:20px;
float:left;
background-color:black;
margin-bottom:20px;
}
#News{
margin-top:20px;
width:340px;
height:360px;
color:black;
float:right;
background-color:black;
margin-bottom:20px;
}
#Footer{
clear: both;
background-color:black;
height: 100px;
}
</style>
<div id="Wrapper">
<header>
<div id="Menu">
<div id="logo">
<img src="Breaking Bad.png" alt="Logo" height="150px">
</div>
<div id="Nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Social</li>
</ul>
</div>
</div>
</header>
<div id="Video"><iframe width="640" height="360" src="http://www.youtube.com/embed/Gx7L8FWN80Y" frameborder="0" allowfullscreen></iframe></div>
<div id="News"></div>
<div id="Footer"></div>
</div>
</body>
I merge HTML and CSS together,
put float left to both #Nav and #Logo, static width, with negative margin.Read the code and you will notice the trick.
I want to make a navigation bar. I supposed a big block would be shown when i hover a the nav bar. However, it didn't work.
This is my html code.
<div id="outerContainer">
<div id="header">
<a id="logo" href="#"><img src="#"></a>
<div id="nav">
<div class="selectors">aaa</div>
<div class="selectors">bbb</div>
<div class="selectors">ccc</div>
<div class="selectors">ddd</div>
</div>
</div>
<div id="innerContainer">
<div class="navHidden"></div>
<div class="navHidden"></div>
<div class="navHidden"></div>
<div class="navHidden"></div>
<div id="content"></div>
</div>
And, this is my css.
#nav{
position:relative;
float:left;
width:600px;
padding-left:30px;
padding-top:25px;
}
.selectors{
width:150px;
position:relative;
float:left;
margin:0;
z-index:10px;
}
.selectors:hover{border-bottom-color:silver;background-color:silver;}
.navHidden{
width:760px;
height:100px;
background-color:silver;
position:absolute;
z-index:10;
display:none;
visibility:hidden;
}
I want the web become as follow:
|.selectors |.selectors | .selectors | .selectors |
| navHidden .....(only shown when hover)......|
I can only allowed to use html and css, because this is homework.
Thanks.
Your code was adapted so now your have desired layout. But it is NOT PERFECT I did not remove excess rules. Do your homework by yourself
HTML
<div id="header">
<a id="logo" href="#"><img src="#"></a>
<div id="nav">
<div class="selectors">
aaa
<div class="navHidden">Lorem ipsum text</div>
</div>
<div class="selectors">
bbb
<div class="navHidden">Lorem ipsum text</div>
</div>
<div class="selectors">
ccc
<div class="navHidden">Lorem ipsum text</div>
</div>
<div class="selectors">
ddd
<div class="navHidden">Lorem ipsum text</div>
</div>
</div>
</div>
CSS
#nav{
position:relative;
float:left;
width:600px;
padding-left:30px;
padding-top:25px;
}
.selectors{
width:150px;
position:relative;
float:left;
margin:0;
z-index:10px;
}
.selectors:hover{
border-bottom-color:silver;
background-color:silver;
}
.navHidden{
width:760px;
height:100px;
background-color:silver;
position:absolute;
z-index:10;
display:none;
top: 100%;
left: 0;
}
.selectors:hover .navHidden {display: block;}
Try this way to create your navigation.
<style>
ul, li {list-style: none; padding: 0; margin: 0; float: left;}
li a{display: block; width: 100px; height: 40px;}
li a:hover{display: block; width: 100px; height: 40px; background: red;}
li ul {display: none;}
li:hover ul {display: block;}
</style>
</head>
<ul id="nav">
<li class="selectors">aaa</li>
<li class="selectors">bbbb
<ul id="innerContainer">
<li class="navHidden">222</li>
</li>
</ul>
</li>
</ul>