I am adding nav bar on top of image. Nav bar has white background with logo pic left side and other content on right side. But looks like nav bar is not taking 100% width. If I increase width it is not woking. I added all bootstrap link to make it responsive.
.main{
position: relative;
}
.topNav{
position: absolute;
width:100%;
}
li{
float: left;
padding: 20px;
background-color: aliceblue;
height: 100px;
list-style-type: none;
}
.topImg{
position: absolute;
top:100px;
}
.logo{
float: left;
}
}
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="main text-center">
<div class="topNav">
<ul>
<li class="logo"><img src="https://i2.wp.com/riverviewramslacrosse.com/wp-content/uploads/img-header-logo.png?fit=204%2C202"></li>
<li> Home</li>
<li>About</li>
<li> Contact</li>
<li> Apply</li>
</ul>
</div>
<div class="topImg text-center">
<img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" class="img-responsive img-center image-fluid" alt="officeImg">
</div>
</div>
</div>
</div>
</div>``
</body>
Related
I am designing a webpage with multiple divs. I need to stack div one over another. How can I do that?
Currently, one div is overlapping with navbar in the web site
Here is HTML code
<body>
<div class="main">
<div class="main-banner">
<!--- Nav Menu-->
<div class="nav-menu">
<ul>
<li>Home</li>
<li>About us</li>
<li>Services</li>
<li>Blog</li>
<li>Contact us</li>
</ul>
<!-- First Banner-->
<div class="heading">
<div class="animation">
<h1>India's first startup<br> consultancy.</h1>
</div>
</div>
<div class="sub-head">
<h2>
For the startup.<br>
By the startup.<br>
Of the startup. <br>
</h2>
</div>
</div>
<!--Seccond Banner-->
<div class="about">
<h2>
Place holder text
</h2>
</div>
</div>
</body>
</html>
and my css code for stylesheet that contains the styling of the div is mentioned below:
*{
padding: 0;
margin: 0;
}
body{
background: White;
padding: none;
margin: none;
border: none;
}
.main-banner{
display: inline-block;
position: fixed;
background: #6ebdff;
color: white;
width: 100%;
height: 100%;
}
.about{
display: inline-block;
background: #6c00a6;
color: white;
width: 100%;
height: 100%;
}
I want to place "about" after the "main-banner" div
I am using materialize CSS and have created a Nav but want to move it a bit further to the right without affecting the position of the logo. See current image below;
Navbar photo
My current code:
< div class="navbar-fixed">
<nav class="white" role="navigation" id="top-nav">
<div class="nav-wrapper container">
<a id = "logo-container" href="#" class="brand-logo"><img src = "img/DataNavSmaller.png" ></ a >
< ul class="right hide-on-med-and-down">
<li>Home</li>
<li><a href = "#" > Who We Are</a></li>
<li><a href = "#" > What We Do</a></li>
<li><a href = "#" > Contact Us</a></li>
</ul>
<ul id = "nav-mobile" class="sidenav">
<li><a href = "#" > Navbar Link</a></li>
</ul>
<i class="material-icons">menu</i>
</div>
</nav>
</div>
CSS:
nav.brand - logo {
margin - left: -60px;
padding - top: 4px;
}
nav.right {
padding - top: 10px;
}
nav ul a{
color: black;
font - size:20px;
}
How can i achieve the above?
You can set the right of your navbar with CSS properties position: fixed; top: 10px; right: 5px;. position: fixed makes the element stay in place. top specifies the distance the element is from the top and right specifies the distance the element is from the right (these properties only work when the display property is set).
.navbar-fixed{
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
background-color: #BEBEBE;
}
.logo{
margin: 10px 10px 10px 15px;
background: red;
padding: 5px;
background: linear-gradient(red, yellow, green);
width: 60px;
height: 25px;
color: white;
}
.navbar-right{
position: fixed;
top: 10px;
right: 5px;/*pixels away from the right of the navbar*/
}
.title{
display: inline-block;
margin: 5px;
}
<div class="navbar-fixed">
<div class="logo">
<!--<img src="something.png" alt="img"/>-->
DataNav
</div>
<div class="navbar-right">
<div class="title">
Home
</div>
<div class="title">
Who we are
</div>
<div class="title">
What we do
</div>
<div class="title">
Contact us
</div>
</div>
</div>
How about
nav .right {
float: right;
}
^^ The above images show =900px, >900px, <900px...I just want to center and shorten padding as window shrinks.(at 15px)
^^Using 1.666666666666666%
Right now im trying to make my webpage navbar work with changes in widths. When the window is exactly 900px The navbar fits perfectly. I have 30px spacing around each block (15px left and right; 15px start and end of list). I took 900 and divided by 60 to get 15px and that is my percentage (%/60). When i use the formula calc(1/60*100%) the navbar has the wrong spacing. Am i misunderstanding something.
I dont think this is google chrome issue assuming something is wrong with the above logic. I can post the html file if anyone needs it. Don't know if its neccessary.
body {
margin:0px;
font-family:avenir, sans-serif;
}
.nav {
margin: 0px 0px 0px 0px;
overflow:hidden;
width:100%;
<!--box-shadow: 0px 0px 10px 0px #000000;-->
}
.link-header {
background-color:rgb(242,242,235);
}
.school-header {
background-color:rgb(40,110,123);
}
.nav-left {
display: inline-block;
float:left;
}
.nav-right {
display: inline-block;
float:right;
}<!--
.nav-center {
text-align: center;
}-->
a {
text-decoration: none;
}
.school-header a {
color:white;
}
.link-header a {
color:rgb(40,40,40);
}
.nav-li-outer {
padding-left:calc(1/60*100%);
padding-right:calc(1/60*100%);
display: inline-block;
margin-top: 0px;
vertical-align: top;
}
.school-header li {
line-height:80px;
}
.link-header li {
line-height:30px;
}
.link-header li:hover {
box-shadow:inset 0 -3px 0 rgb(40, 40, 40);
}
ul {
margin: 0;
list-style-type: none;
padding-left: calc(1/60*100%);
padding-right:calc(1/60*100%);
}
html:
<html>
<head>
<link rel="stylesheet" href="kamsc.css">
</head>
<body>
<div class="school-header">
<div class="nav">
<div class="nav-left">
<ul>
<a href="#">
<div class="nav-li-outer">
<li>
<img src="Logo-Test.png" width=600px style="vertical-align:middle">
</li>
</div>
</a>
</ul>
</div>
<div class="nav-right">
<ul>
<a href="#">
<div class="nav-li-outer">
<li>
Login
</li>
</div>
</a>
</ul>
</div>
</div>
</div>
<div class="link-header">
<div class="nav">
<div class="nav-left">
<ul>
<a href="#">
<div class="nav-li-outer">
<li>
Home
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
KAMSC
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Staff
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Admissions
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Curriculum
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Sizzling Summer
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
KAMSC Connection
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Alumni
</li>
</div>
</a>
</ul>
</div>
</div>
</div>
</body>
</html>
You can significantly simply your HTML, particularly for the nav section. Here's a JSFiddle: http://jsfiddle.net/vanu2ynx/
I didn't completely recreate what you're trying to do, but you can probably fill in the details.
Here's the HTML I used:
<header>
<h1>Title</h1>
<div class="login">Login</div>
</header>
<nav>
<ul>
<li>Home</li>
<li>KAMSC</li>
<li>Staff</li>
<li>Adminssions</li>
<li>Curriculum</li>
<li>Sizzling Summer</li>
<li>KAMSC Connection</li>
<li>Alumni</li>
</ul>
</nav>
And the CSS:
header {
background: teal;
overflow: hidden;
padding: 2% 2%;
}
header h1 {
float: left;
margin: 0;
padding: 0;
}
header .login {
float: right;
}
nav {
background: lightgray;
padding: 2% 2%;
}
nav ul {
font-size: 0;
margin: 0;
padding: 0;
text-align: justify;
}
nav ul:after {
content: '';
display: inline-block;
width: 100%;
}
nav li {
display: inline-block;
font-size: 16px;
}
The trick here is the text-align: justify; on nav ul and then the :after creates a full width child element for the justify to work.
You'll need to add media queries to have this break properly, but that should be pretty straight-forward.
Read more here: How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container
Hi new to CSS here could anyone help me get the text to move down so it's aligned with my logo image? Also as an extension on that question does anyone know how I can make the text move across so the margins on either side match?
This is what it looks like now:
Here is the html:
<div id="header">
<div class="wrap">
<nav id="topnav"> <!-- This is the top nav bar-->
<ul id="topnavlist">
<li> <!-- Home logo-->
<div class="logo">
<img src="images/TechNow Logo 0.2.jpg" alt="TechNow Logo" height="70" width="auto">
</div>
</li>
<div class="navItems"><!-- Nav items-->
<ul>
<li>UK News</li>
<li>Smartphones</li>
<li>Reviews</li>
</ul>
</div>
</ul>
</nav>
</div>
</div>
And the CSS:
#header, #footer {
background-color:#115279;
float:left;
padding:15px 0;
min-width:100%;
}
.wrap {
position:relative;
margin:0 auto;
width:960px;
}
#topnavlist li {
font-family: verdana, sans-serif;
color:#D9330F;
list-style-type: none;
float: left;
display:inline;
padding: 10px;
}
.navItems {
height: 20%;
display: inline;
margin-top:30px;
padding-top: 50px;
padding: 50px;
}
Your HTML is invalid, you can't have div inside li. Replace div with li and wrap their children(lis) in a ul.
To vertically center the lis, give .navItems a height: 50px same as the height of your logo and give it a line-height: 50px(height)
#header,
#footer {
background-color: #115279;
float: left;
padding: 15px 0;
min-width: 100%;
}
.wrap {
position: relative;
margin: 0 auto;
width: 960px;
}
#topnavlist li {
font-family: verdana, sans-serif;
color: #D9330F;
list-style-type: none;
float: left;
display: inline;
padding: 10px;
}
.navItems {
display: inline;
height: 50px;
line-height: 50px;
}
<div id="header">
<div class="wrap">
<nav id="topnav">
<!-- This is the top nav bar-->
<ul id="topnavlist">
<li>
<!-- Home logo-->
<div class="logo">
<a href="index.html">
<img src="http://dummyimage.com/100x50/000/fff" alt="TechNow Logo" height="70" width="auto">
</a>
</div>
</li>
<li class="navItems">
<!-- Nav items-->
<ul>
<li>UK News
</li>
<li>Smartphones
</li>
<li>Reviews
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
You can't have a div element as a child to a ul element. As for aligning all of your elements. By default, the img and a elements are considered inline elements in css. You can use the vertical-align property on inline elements. So your markup could be a bit more simple like
<nav id="topnav">
<img src="images/TechNow Logo 0.2.jpg" alt="TechNow Logo" height="70" width="auto">
UK News
Smartphones
Reviews
</nav>
and then the css
#topnav a {
vertical-align: middle;
}
Since I don't have the exact size of your image, this won't get you exactly what you're looking for, but it should get you on the right track. The main thing is to make sure you have valid HTML markup. This can cause many headaches and issues with your css if it's not.
As mentioned your current HTML is invalid. limust be children (and the only direct children) of a ul.
In fact there is no need to use divs at all.
#header,
#footer {
background-color: #115279;
float: left;
padding: 15px 0;
min-width: 100%;
}
.wrap {
position: relative;
margin: 0 auto;
width: 960px;
}
#topnavlist li {
font-family: verdana, sans-serif;
color: #D9330F;
list-style-type: none;
display: inline-block;
vertical-align: middle;
padding: 10px;
}
.NavItem {
color: white;
}
<div id="header">
<div class="wrap">
<nav id="topnav">
<!-- This is the top nav bar-->
<ul id="topnavlist">
<li>
<!-- Home logo-->
<a href="index.html">
<img src="http://placehold.it/70x70" alt="TechNow Logo" height="70" width="auto" />
</a>
</li>
<li>UK News
</li>
<li>Smartphones
</li>
<li>Reviews
</li>
</ul>
</nav>
</div>
</div>
I have a nav bar with an image and a ul. I want to text in the ul to align to the bottom of the div but it at the top right now. How can i achieve this?
http://jsbin.com/otitaf/1/
<nav>
<div class="logo">
<img src="img/logo.jpg" id="logo">
</div>
<div class="nav">
<ul>
<li class="bottom">
Luigi's ♨ Pizzeria
</li>
<li>
Menu
</li>
<li class="bottom">
Map
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Praises
</li>
</ul>
</div>
</nav>
css
.logo{
width: 30%;
float: left;
}
.nav{
float: right;
}
#logo{
height: 100%;
margin-left: 25%;
}
.bottom{
position: relative;
vertical-align: bottom;
}
use below css to achieve your dream
#side-bar{ position:relative; }
#side-bar ul{position: absolute; bottom: 0;} /* this will apply to all ul available in side-bar
insted this, you can also add class or id to ul to select it specifically, like:
.sidebar-ul{position: absolute; bottom: 0;}
Try adjusting your ul and the positioning, something like this:
#side-bar section ul {
position: absolute;
bottom: 30px;
}