Css fails to apply on a child div - html

I have a simple page that I'm creating. When I create a child div inside a parent div, it inherits the background, but when I try to float the child div to the right, it loses the inherited background and turn white. What might I be missing? My fiddle is here
my css code is here
#fullwidth{
width: 100%;
/* background: url(../images/bg.jpg);*/
background-color: black;
background-repeat: repeat;
position: relative;
top: 0;
}
#fullwidth .container{
width: 994px;
position: relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
background: transparent;
}
#fullwidth .test{
float: right;
}
my div is here
<div id="fullwidth">
<div class="container">
<div class="test">
<ul id='header_nav'>
<!--li><img src="images/home-icon.png" /></li-->
<li>Design
<ul>
<li>Products</li>
</ul>
</li>
<li>Events
<ul>
<li>Services</li>
<li>Gallery</li>
</ul>
</li>
<li>Public Relations
</li>
<li>Media and Outdoor
<ul>
<li>Services</li>
<li>Gallery</li>
</ul>
</li>
<li>Production
<ul>
<li>Services</li>
<li>Gallery</li>
</ul>
</li>
<li>Login
<ul>
<!--li>Register</li-->
</ul>
</li>
</ul>
</div>
</div>
</div>

Add this
HTML
<html>
<head>
</head>
<body>
<div id="fullwidth">
<div class="container">
<div class="test">
<ul id='header_nav'>
<!--li><img src="images/home-icon.png" /></li-->
<li>Design
<ul>
<li>Products</li>
</ul>
</li>
<li>Events
<ul>
<li>Services</li>
<li>Gallery</li>
</ul>
</li>
<li>Public Relations
</li>
<li>Media and Outdoor
<ul>
<li>Services</li>
<li>Gallery</li>
</ul>
</li>
<li>Production
<ul>
<li>Services</li>
<li>Gallery</li>
</ul>
</li>
<li>Login
<ul>
<!--li>Register</li-->
</ul>
</li>
</ul>
</div>
</div>
<div class="cler"></div>
</div>
</body>
Css
.cler{
clear:both;
}
on your last div child end
demo
----------
2nd option is
write this css
#fullwidth:after{
content:'';
clear:both;
overflow:hidden;
display:table;
}
Demo-2

it loses the inherited background and turn white
It doesn't fail, it's just floating so you just need to clear the float after the div with class test.
Here is a good article about it http://www.quirksmode.org/css/clearing.html

Related

What is the selector class for div inside another div

I'm trying to apply styles for Menu class. However, when I'm writing some CSS properties to the menu the styles are not applying. How to select the exact CSS class div inside another div that to div inside header like this code below
<section class="showcase">
<header>
<img src="assets/images/logov2.png" alt="company-Logo" style="width:160px;height:20px;">
<div class="menu">
<ul>
<li>How it works</li>
<li>About</li>
<li>Team</li>
<li>Contact</li>
</ul>
</div>
<div class="Access">
Get Early Access
</div>
</header>
</section>
Just use the tag header as the start point to reach other selectors.
header>img {
height: 220px;
width: 300px;
}
header>.menu {
background-color: red;
}
header>.Access {
padding: 10px;
background-color: yellow;
}
<section class="showcase">
<header>
<img src="https://images.unsplash.com/photo-1554232456-8727aae0cfa4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80" alt="company-Logo">
<div class="menu">
<ul>
<li>How it works</li>
<li>About</li>
<li>Team</li>
<li>Contact</li>
</ul>
</div>
<div class="Access">
Get Early Access
</div>
</header>
</section>

How to get a div overlapping another

<header>
<div>
<h1>Midorikawa's Site</h1>
<hr />
<!--<p>Work in progress</p>-->
<nav>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Blog</li>
<li>Quote</li>
<li>Photographs</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="wallpaper"></div><!-- THIS div has to go underneath the other div -->
</header>
the "wallpaper" div has to go underneath the other div the "wallpaper" div is javascript activated and switches wallpaper with an fade but i have no idea how to get it underneath the other div please help
Use position: absolute on the first div:
Refer code:
<header>
<div class="content">
<h1>Midorikawa's Site</h1>
<hr />
<!--<p>Work in progress</p>-->
<nav>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Blog</li>
<li>Quote</li>
<li>Photographs</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="wallpaper"></div><!-- THIS div has to go underneath the other div -->
</header>
CSS
.content {
position: absolute;
left: 0;
right: 0;
margin: auto;
text-align: center;
}
.body {
position: relative;
}
Use position: absolute; on both children of <header>.
Use positive z-index on the div you want on top.
jsFiddle: https://jsfiddle.net/sukritchhabra/89f1est4/
Use css property z-index on your divs. The one which you need on top should have higher z-index than the one that should be underneath it (I coloured the divs for visual).
<div style="position:absolute">
<h1>Midorikawa's Site</h1>
<hr />
<nav>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Blog</li>
<li>Quote</li>
<li>Photographs</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="wallpaper" style="width:50px;height:100px;background-color:red;z- index:-5"></div>

Hoverable Dropdown

I tried to make a Hoverable text, but it gives me a little visual error. I want to make it in this way: http://i.imgur.com/fg1NTab.png
but at my website it gives in this way.
http://vestigedayz.com/wqeq
(press on the A from menu on my website)
This is my CODE.
<div class="liste">
<div class="dropdown">
<ul> <li>A</li> </ul>
<div class="dropdown-content">
<li>AA</li>
<li>AB</li>
<li>AC</li>
<li>AD</li>
</div>
</div>
<ul> <li>B</li> </ul>
<ul> <li>c</li> </ul>
<ul> <li>d</li> </ul>
<ul> <li>e</li> </ul>
<ul> <li>f</li> </ul>
<ul> <li>g</li> </ul>
<ul> <li>h</li> </ul>
<ul> <li>i</li> </ul>
<ul> <li>j</li> </ul>
<ul> <li>k</li> </ul>
<ul> <li>l</li> </ul>
<ul> <li>m</li> </ul>
<ul> <li>n</li> </ul>
<ul> <li>o</li> </ul>
<ul> <li>p</li> </ul>
<ul> <li>q</li> </ul>
<ul> <li>r</li> </ul>
<ul> <li>s</li> </ul>
<ul> <li>t</li> </ul>
<ul> <li>u</li> </ul>
<ul> <li>v</li> </ul>
<ul> <li>w</li> </ul>
<ul> <li>y</li> </ul>
<ul> <li>z</li> </ul>
</div>
</div>
</div>
AND THE STYLE CSS
.header .liste {background:#ffd564;border-bottom:5px solid #ffecb8;font-size:13px;height:50px;overflow:hidden;padding-left:25px;margin-top:30px;}
.header .liste > ul li {float:left;padding-right:30px;margin:17px 0;}
.header .liste > ul li a {text-decoration:none;color:#1b1b1b;text-transform:uppercase;}
.dropdown {
position: fixed;
display: table;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffecb8;
min-width: 950px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
display: inline-table;
}
Ok, to get A in the right spot you have to put that ul element on the same level as other ul elements (B, C, D etc.)
So change your list div like this
<div class="liste">
<ul><li>A</li></ul>
<div class="dropdown">
<div class="dropdown-content">
<li>AA</li>
<li>AB</li>
<li>AC</li>
<li>AD</li>
</div>
</div>
<ul> <li>B</li> </ul>
<ul> <li>c</li> </ul>
<ul> <li>d</li> </ul>
<ul> <li>e</li> </ul>
<ul> <li>f</li> </ul>
<ul> <li>g</li> </ul>
<ul> <li>h</li> </ul>
<ul> <li>i</li> </ul>
<ul> <li>j</li> </ul>
<ul> <li>k</li> </ul>
<ul> <li>l</li> </ul>
<ul> <li>m</li> </ul>
<ul> <li>n</li> </ul>
<ul> <li>o</li> </ul>
<ul> <li>p</li> </ul>
<ul> <li>q</li> </ul>
<ul> <li>r</li> </ul>
<ul> <li>s</li> </ul>
<ul> <li>t</li> </ul>
<ul> <li>u</li> </ul>
<ul> <li>v</li> </ul>
<ul> <li>w</li> </ul>
<ul> <li>y</li> </ul>
<ul> <li>z</li> </ul>
</div>
Then find these properties and remove padding left:
.header .liste {
background: #ffd564;
border-bottom: 5px solid #ffecb8;
font-size: 13px;
height: 50px;
overflow: hidden;
/* padding-left: 25px; */
margin-top: 30px;
}
Then move your opened dropdown down (top: 50px)and change min width to 948px
.dropdown-content {
/* display: none; */
position: absolute;
background-color: #ffecb8;
min-width: 948px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
top: 50px;
}
Then give your liste li padding left:
.liste li {
padding-left: 25px;
}
And here is the screenshot of the result: http://screencast.com/t/RD3Akbot
Also, because structure changed you will have to deal with hover.
Here is the code for the hover:
.liste ul:hover + .dropdown {
display: block;
}
This says, when you hover over this ul element show next .dropdown div. So all you have to do is add .dropdown sections underneath appropriate ul section. I will add the code snippet below.
<ul> <li>A</li> </ul>
<div class="dropdown">
<div class="dropdown-content">
<li>AA</li>
<li>AB</li>
<li>AC</li>
<li>AD</li>
</div>
</div>
<ul> <li>B</li> </ul>
<div class="dropdown">
<div class="dropdown-content">
<li>AA777</li>
<li>AB777</li>
<li>AC777</li>
<li>AD777</li>
</div>
</div>
Oh, I forgot you have to declare your .dropdown display:none too. So when you hover it will display block.

Align image and list on same line in html

Currently I am trying to create a header section in HTML, which contains a logo image and a list which is being used as a navigation menu.
The problem which I am facing right now is that, when I am giving a certain height to the list(equivalent to image height) the height of the list is going downwards against the image, and I want to be on the same line and text of the list in the middle. The following is the code snippet of my page.
.header-section>img
{
display:inline-block;
padding:10px;
background-color:yellow;
}
.navigation,.navigation ul
{
list-style:none;
}
.navigation
{
background-color:red;
display:inline-block;
}
.navigation>li
{
display:inline;
text-align:center;
line-height:50px;
}
.navigation ul
{
display:none;
}
<!--Header section-->
<div class="header-section">
<img src="images/logo/logo.png" alt="logo" width="90px" height="30px">
<!--Navigation section-->
<ul class="navigation">
<li>Home</li>
<li class="sub-menu">
About ▼
<ul>
<li>The Company</li>
<li>The Founders</li>
<li>The Team</li>
<li>The Mission</li>
</ul>
</li>
<li class="sub-menu">
Products ▼
<ul>
<li>Solar Panels</li>
<li>Solar Lamps</li>
<li>Solar Heaters</li>
<li>Solar Cookers</li>
</ul>
</li>
<li class="sub-menu">
Services ▼
<ul>
<li>Solar Equipment Repair</li>
<li>Installation</li>
<li>Maintenance</li>
<li>Training</li>
</ul>
</li>
<li class="sub-menu">
Support ▼
<ul>
<li>Training</li>
</ul>
</li>
<li class="sub-menu">
Contact ▼
<ul>
<li>Email Us</li>
<li>Contact Form</li>
</ul>
</li>
</ul>
<!--Social Icons-->
<img src="images/icons/twitter.png">
<img src="images/icons/facebook.png">
<img src="images/icons/google-plus.png">
</div>
<!--Header section closed-->
Add a vertical-align attribute to your images
.header-section > img
{
display:inline-block;
padding:10px;
background-color:yellow;
vertical-align: middle;
}
Update : Float version
Add a "float left" attribute to your images and .navigation and set an image "height + padding" equal to the line-height of your list.
.header-section
{
overflow: hidden;
}
.header-section > img
{
float: left;
padding:10px;
background-color:yellow;
width: 30px;
height: 30px;
}
.navigation
{
padding: 0;
margin: 0;
float: left;
list-style:none;
}
.navigation
{
background-color:red;
}
.navigation > li
{
display:inline;
text-align:center;
line-height:50px;
}
.navigation ul
{
display:none;
}
<!--Header section-->
<div class="header-section">
<img src="images/logo/logo.png">
<!--Navigation section-->
<ul class="navigation">
<li>Home</li>
<li class="sub-menu">
About ▼
<ul>
<li>The Company</li>
<li>The Founders</li>
<li>The Team</li>
<li>The Mission</li>
</ul>
</li>
<li class="sub-menu">
Products ▼
<ul>
<li>Solar Panels</li>
<li>Solar Lamps</li>
<li>Solar Heaters</li>
<li>Solar Cookers</li>
</ul>
</li>
<li class="sub-menu">
Services ▼
<ul>
<li>Solar Equipment Repair</li>
<li>Installation</li>
<li>Maintenance</li>
<li>Training</li>
</ul>
</li>
<li class="sub-menu">
Support ▼
<ul>
<li>Training</li>
</ul>
</li>
<li class="sub-menu">
Contact ▼
<ul>
<li>Email Us</li>
<li>Contact Form</li>
</ul>
</li>
</ul>
<!--Social Icons-->
<img src="images/icons/twitter.png">
<img src="images/icons/facebook.png">
<img src="images/icons/google-plus.png">
</div>
<!--Header section closed-->

display inline is not working in ul tag

<div class="links1">
<ul style="float:left; position:absolute; top:115px; right:200px; display:inline;">
<li>Warranty & Support</li>
<li>Shipping Info</li>
<li>Privacy Policy</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
I want these links to be arranged in horizontal in navigation bar but the display: inline; is not working in the ul tag please suggest some solution???
float and display:inline don't go together.
You have to float or inline your lis not the ul.
Snippet using display:inline or dsiplay:inline-block on li:
Note: Using only inline will prevent lis from behaving as block elements thereby preventing you from styling things like dimensions.
div.links1 ul {
list-style: none;
margin: 0; padding: 0;
}
div.links1 ul li {
display: inline-block;
}
<div class="links1">
<ul>
<li>Warranty & Support</li>
<li>Shipping Info</li>
<li>Privacy Policy</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
Snippet using float on li:
Note: You have to have adequate margins while floating. This is because, inline-block leaves the whitespace in the markup as is and hence you get a small separation between the lis.
div.links1 ul li {
display: block;
float: left;
margin: 0px 8px;
}
<div class="links1">
<ul>
<li>Warranty & Support</li>
<li>Shipping Info</li>
<li>Privacy Policy</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
Try:
<head>
<style>li {display: inline}</style>
</head>
<body>
<div class="links1">
<ul >
<li>Warranty & Support</li>
<li>Shipping Info</li>
<li>Privacy Policy</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
Simply apply inline to li:
li{
display: inline;
}
http://jsfiddle.net/u8shhkem/
See this Fiddle: http://jsfiddle.net/o3apjcku/3/
No need to use float, the li should be inline.
Use display: inline-block
.links1 ul li {
position: relative;
display: inline-block;
vertical-align: top;
}
<div class="links1">
<ul style="">
<li>Warranty & Support
</li>
<li>Shipping Info
</li>
<li>Privacy Policy
</li>
<li>About Us
</li>
<li>Contact Us
</li>
</ul>
</div>
check
http://liveweave.com/cxNlbu
<div class="links1">
<ul class="hiii">
<li>Warranty & Support</li>
<li>Shipping Info</li>
<li>Privacy Policy</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
css
ul.hiii li{display:inline-block;float:left}