I am creating a navigation bar. I want the bottom border line to appear at the bottom of the navigation bar, like this:
But what i am getting out of my code is this:
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>batman</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<a href="#" class="logo">
<img src="./img/bat_logo.png" alt="batman" />
</a>
<nav>
<ul style="list-style-type: none;">
<li> Villains </li>
<li> Identity </li>
<li> Movies </li>
</ul>
</nav>
</div>
</body>
</html>
My CSS:
.logo {
float: left;
height: 50px;
}
#header {
padding: 5px 0px;
border-bottom: 1px solid;
}
Use flex with justify-content: space-between on the parent and you can also use align-items to vertically align things. Also changed <div id="header"> to <header id="header">, because it seems like a more semantically appropriate element.
img {
max-width: 50px;
}
.logo {
height: 50px;
display: block;
}
#header {
padding: 5px 0px;
border-bottom: 1px solid;
display: flex;
justify-content: space-between;
align-items: center;
}
nav li {
display: inline-block;
}
<header id="header">
<a href="#" class="logo">
<img src="https://images.coplusk.net/projects/19697/steps/33014/normal_big_cartoon_batman_symbol_1250787261.jpg" alt="batman" />
</a>
<nav>
<ul style="list-style-type: none;">
<li> Villains </li>
<li> Identity </li>
<li> Movies </li>
</ul>
</nav>
</header>
Yoy should use width and float on #header which is main wrapper. With that you should add ul li{float:left}
.logo {
float: left;
height: 50px;
}
#header {
padding: 5px 0px;
border-bottom: 1px solid;
display:block;
float:left;
width:100%;
}
ul li{float:left}
Codepen link: https://codepen.io/bravotanmoy/pen/qjZEbb
Related
I am using the rem to create a mobile web project.Now I am facing a problem.
My code is below:
<head>
<style type="text/css">
body {
background-color: green;
}
#top {
/*height: .9rem;*/
}
#top::after,
#top::before {
/*content: '';
display: block;
clear: both;
visibility: hidden;*/
}
ul {
list-style: none;
padding-left: 0;
}
#data-item {
margin-top: 4rem;
}
#data-item .image-list {
width: 4.5rem;
display: flex;
flex-flow: row wrap;
background-color: yellow;
}
#data-item .image-list .image-list .div-image {
width: 1.4rem;
height: 1.4rem;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: #6641E2;
}
</style>
</head>
<body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
<section id="top">
<div id="addImage" style="height: .90rem; width: 1.60rem; float:right ; padding-top: .20rem; position: relative;background-color: red; z-index: 999;">
<span style="display: inline-block; margin-right: .20rem;">ADD</span>
</div>
</section>
<section id="data-item">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<div class="title"><img src="images/vip.png" alt="" /><span class="date">6月１日</span></div>
<p class="item-description"></p>
<ul class="image-list">
<li>
<div class="div-image"></div>
</li>
<li>
<div class="div-image"></div>
</li>
<li>
<div class="div-image"></div>
</li>
<li>
<div class="div-image"></div>
</li>
</ul>
</li>
<li class="mui-table-view-cell">Item 2</li>
<li class="mui-table-view-cell">Item 3</li>
</ul>
</section>
</body>
I look the result in the chrome console, I choose the mobile device iPhone5.
The screen is like this:
I check the element in the Elements tab.
I see that the #top section is 320*0.
My question is why the #addImage div has the margin-top too. I set the margin-top for the #data-item section?
Why does not the red div at the top-right corner?
add this style to the parent:
#top{
overflow: auto;
}
I am trying to have a navigation bar that doesn't have any extra space on the sides and on the top and bottom. However nothing seems to be. Is there a way I can fix this. An example of how I would like my navigation bar to look is dootrix.com
Here is an image to illustrate what the problem is: image
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: mediumblue;
text-align: center;
object-position: fixed;
width: 100%;
top: 0;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
padding: 14px 50px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: darkblue;
font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- Navigation Bar -->
<ul>
<li>
ABOUT
</li>
<li>
PRODUCTS
</li>
<li>
COUPONS
</li>
<li>
FEEDBACK
</li>
</ul>
<div id='about'>
<a id="about" name='about'></a>
<img src="https://image.ibb.co/ft1bSv/cover.jpg" alt="cover">
<div id='about.container'>
<h2>About:</h2>
<p>We are a small family owned convenience store! We have operating since the early 2000s.</p>
</div>
</div>
<div id='products'>
<a id="products" name='products'></a>
</div>
<div id='coupons'>
<a id="coupons" name='coupons'></a>
</div>
<div id='feedback'>
<a id="feedback" name='feedback'>
</a></div>
</body>
</html>
You have to disable the margin (https://www.w3schools.com/css/css_margin.asp) of your body tag. You can do this in your css. Look at what I did at the top of this css file. That should work.
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: mediumblue;
text-align: center;
object-position: fixed;
width: 100%;
top: 0;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
padding: 14px 50px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: darkblue;
font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- Navigation Bar -->
<ul>
<li>
ABOUT
</li>
<li>
PRODUCTS
</li>
<li>
COUPONS
</li>
<li>
FEEDBACK
</li>
</ul>
<div id='about'>
<a id="about" name='about'></a>
<img src="https://image.ibb.co/ft1bSv/cover.jpg" alt="cover">
<div id='about.container'>
<h2>About:</h2>
<p>We are a small family owned convenience store! We have operating since the early 2000s.</p>
</div>
</div>
<div id='products'>
<a id="products" name='products'></a>
</div>
<div id='coupons'>
<a id="coupons" name='coupons'></a>
</div>
<div id='feedback'>
<a id="feedback" name='feedback'>
</a></div>
</body>
</html>
^^ 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 created 3 boxes. With UL/LI. But it doesn't seem to horizontally line up itself.
I have tried, float:right; and display: inline-block; both of which does not align it.
Preview Image
This is my code
#box1 {
height: 300px;
width: 250px;
background-color: grey;
display: inline-block
}
#box2 {
height: 300px;
width: 250px;
background-color: grey;
display: inline-block
}
#box3 {
height: 300px;
width: 250px;
background-color: grey;
display: inline-block
}
.boxy {
list-style: none;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta charset="UTF-8">
<title>Askar Photography</title>
</head>
<body>
<header>
<h1 class="logo"><img src="Assets/logo.png"></h1>
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
</header>
<div class="content">
<ul class="boxy">
<li>
<div id="box1"></div>
</li>
<li>
<div id="box2"></div>
</li>
<li>
<div id="box3"></div>
</li>
</ul>
</div>
</body>
<!--<div id="box2"></div> -->
</html>
Basically, This boxes will be filled with content and must be aligned horizontally with equal spaces in between. I tried googling and following step by step guide, But to no avail.
use below code: it will help u
<style>
#box1 {
height: 300px;
width: 250px;
background-color: grey;
display: inline-block;
margin-right:10px;
}
#box2 {
height: 300px;
width: 250px;
background-color: grey;
display: inline-block;
margin-right:10px;
}
#box3 {
height: 300px;
width: 250px;
background-color: grey;
display: inline-block
}
.boxy{
list-style: none;
display: flex;
width:100%;
}
</style>
The problem is that you're not changing the display type of those <li> tags. It is them which need to be set as display: inline-block;.
So basically you can take the display property off from #box1, #box2 and #box3. Instead, add the following:
.boxy > li { display: inline-block; }
You need to do the following:
.boxy {
display: flex;
justify-content: space-between;
}
#box1, #box2, #box3 {
display: inline-block;
}
Check out https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for more detail on flex and it's uses. It is quite a neat little tool to use when you need responsive, evenly spaced items on your page.
All you need to do is add the following to .boxy:
text-align:center;
and change the property display:inline-block to display:block in .boxy
See for yourself, I have edited the above in your code, and its working perfectly.
#box1 {
height: 300px;
width: 250px;
background-color: grey;
display: inline-block
}
#box2 {
height: 300px;
width: 250px;
background-color: grey;
display: inline-block
}
#box3 {
height: 300px;
width: 250px;
background-color: grey;
display: inline-block
}
.boxy {
list-style: none;
display: block;
text-align:center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta charset="UTF-8">
<title>Askar Photography</title>
</head>
<body>
<header>
<h1 class="logo"><img src="Assets/logo.png"></h1>
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
</header>
<div class="content">
<ul class="boxy">
<li>
<div id="box1"></div>
</li>
<li>
<div id="box2"></div>
</li>
<li>
<div id="box3"></div>
</li>
</ul>
</div>
</body>
<!--<div id="box2"></div> -->
</html>
You need to have your li tags display as inline-blocks, this is because browsers default all li's to block type element.
.boxy > li {
list-style: none;
display: inline-block;
}