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>
Related
I am making a website about pets. I crafted the pictures that were needed but .. When I put the banner , it does not show up. When inspecting the page - it is not there. If I put it right after the body tag , it will show , also when inspected. But it won't be what I want.
<body>
<ul class="nav">
<div class="logo">
Pets
</div>
<li>Home</li>
<li>Pets</li>
<li>Rates</li>
<li>Contacts</li>
</ul>
<div class="banner>
<img class="banner-image" src="testbanner.png">
</div>
I don't get what the problem is.
There are two problems with this I can see.
<ul class="nav">
<!--1: You cannot have a div directly inside a <ul> tag. Move it somewhere else-->
<!--<div class="logo">
Pets
</div>-->
<li>Home</li>
<li>Pets</li>
<li>Rates</li>
<li>Contacts</li>
</ul>
<!--2: You must end the string describing the class. This is what is preventing the banner to work-->
<div class="banner">
<img class="banner-image" src="testbanner.png">
</div>
You can't put a div directly in ul.
Assuming you want the banner inherit the nav class, you can add a parent div that contain your banner and the list like this :
<div class="nav">
<div class="logo">
Pets
</div>
<ul>
<li>Home</li>
<li>Pets</li>
<li>Rates</li>
<li>Contacts</li>
</ul>
</div>
otherwise if you are not bothered by the bullets or if you hide them with css you can put the banner between <li> </ li> :
<ul class="nav">
<li><div class="logo">Pets</div></li>
<li>Home</li>
<li>Pets</li>
<li>Rates</li>
<li>Contacts</li>
</ul>
This is what I have so far: (using bootstrap)
<body>
<div class="container">
<div class="page-header">
<h1>Title <small>Secondary Text</small></h1>
<ul class="nav nav-pills navbar-right">
<li class="active">Home</li>
<li>Register</li>
<li>Login</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</body>
The page-header creates a horizontal line and I want the navigation menu above that line, aligned on the right and the title on the left. For some reason it keeps going below the horizontal line.
I tried using div container-fluid, but the title jumps up and isn't resting on the horizontal line at that point.
All help is appreciated. Thank you.
You can use display: flex; on your .page-header to position the elements next to each other.
With flex: 1; on h1 and .nav both get the same amount of space from the viewport width (50%). Of course you can adjust this value for your needs. On small viewport widths you will have to adjust the styles, e.g. with media queries.
.page-header {
display: flex;
}
h1,
.nav {
flex: 1;
vertical-align: top;
margin-top: 0 !important;
}
.nav {
text-align: right;
}
.nav.nav-pills>li {
float: none;
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="page-header">
<h1>Title <small>Secondary Text</small></h1>
<ul class="nav nav-pills">
<li class="active">Home</li>
<li>Register</li>
<li>Login</li>
<li>Contact Us</li>
</ul>
</div>
</div>
It's a small problem with you tag wrapping. You have wrapped all elements under the page-header.This is your first mistake. The starting div must be page-header and then followed by container in which h1 and ul elements are present.
Second mistake is when you tried to pull ul the elements to the left.There are no elements that are pull to right. Because of this the browser thinks it as a new line instead of the same one.Therefore, you need to wrap the h1 with a div with class pull-left.
This would work according to your wish.
<body>
<div class="page-header">
<div class="container">
<div class="pull-left">
<h1>Title <small>Secondary Text</small></h1>
</div>
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li>Register</li>
<li>Login</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</body>
<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>
I have very simple list of links in bootstrap navbar:
<div class="navbar">
<ul class="nav">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</div>
but that list is aligned on the left, I need it centered, I tried add inline style
style="text-align:center"
but it doesn't help.
Example:
http://jsfiddle.net/NdsaU/
How can I center it?
Html
<div class="navbar">
<div class="container">
<ul class="nav">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</div>
</div>
Css
.navbar { text-align:center; }
.navbar .nav { display:inline-block; float:none; }
Fiddle
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