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;
}
Related
After I was done working on side bar I wanted to head to the content page to the right so I added a container div that I wanted to set to flex So that I make the two boxes to start styling, but right after adding it, the footer's position is ruined and the side bar isn't taking as much space as it should.
Here's a picture:
.side-bar {
font-family: 'Montserrat', sans-serif;
font-size: large;
font-weight: bold;
display: flex;
justify-content: left;
background-color: rgb(235, 235, 235);
width: 20%;
height: 80%;
flex-direction: column;
}
.side-bar ul {
display: flex;
flex-direction: column;
margin-left: 0%;
list-style: none;
margin-top: 5%;
}
.side-bar ul li {
margin-bottom: 10px;
display: inline;
cursor: pointer;
}
.togglable:hover {
border-radius: 7px;
background-color: rgb(216, 216, 216);
}
.togglable:active {
background-color: rgb(221, 221, 221);
}
.side-bar ul a {
color: black;
text-decoration: none;
}
.side-bar h2 {
font-family: 'Josefin Sans', sans-serif;
margin-bottom: 20px;
}
.container {
display: flex;
}
.task-container {
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ToDoList</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="nav-bar">
<img src="logo.png" alt="logo">
<nav>
<ul>
<li>Services</li>
<li>Projects</li>
<li>About</li>
</ul>
</nav>
<a class="cta" href="#"><button>Contact</button></a>
</div>
<div class="container">
<div class="side-bar">
<ul>
<li class="togglable"><img src="gym.png" alt="gym" id="gym">Gym</li>
<li class="togglable"><img src="today.png" alt="calendar" id="today"> Today</li>
<li class="togglable"><img src="week.png" alt="calendar" id="week">This Week</li>
<li class="togglable"><img src="month.png" alt="calendar" id="month"> This Month</li>
<h2>Projects : </h2>
<li id="addPr" class="togglable"><span id="plus-sgn">+</span> Add Project</li>
<!-- <li class="togglable"><img src="checklist.png" alt="checlist" id="list"> Testing</li> -->
</ul>
</div>
<div class="task-container">
<p>Some Text To test the box</p>
</div>
</div>
<div class="footer">
<p id="copyright">Copyright © 2021 FaroukHamadi</p>
</div>
<script src="main.js"></script>
</body>
</html>
Add width attribute to task-contianer and add your fotter class attribute on your CSS file.
.task-container {
background-color: red;
width: 100%;
}
.footer{
position: absolute;
bottom: 0px;
width: auto;
}
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 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
I'm recreating an article I found on The Economist and I'm having trouble creating the header. Please keep in mind I'm doing this without recreating their code verbatim. I'm trying to create my own implementation.
header {
background-color: #364043;
}
.header__content {
width: 70%;
margin: auto;
}
.header__left-content {
display: inline;
width: 50%;
}
.header__nav ul {
display: inline;
}
.header__nav li {
line-height: 0px;
display: inline-block;
vertical-align: middle;
}
.header__logo {
padding-right: 25px;
}
.header__nav-link {
padding-right: 15px;
}
<html>
<body>
<header>
<div class="header__content">
<div class="header__left-content">
<div class="header__nav">
<ul>
<li class="header__logo">
<img src="http://jobs.printweek.com/getasset/2eef9541-354f-4fec-8ce2-87b008f0323d/">
</li>
<li class="header__nav-link">
Topics</li>
<li class="header__nav-link">
Print Edition
</li>
<li class="header__nav-link">
More
</li>
</ul>
</div>
</div>
<!-- <div class="header__separator"></div> -->
<div class="header__site-functions">
<p>right</p>
</div>
</div>
</header>
<div class="container"></div>
</body>
</html>
I'm having trouble getting the paragraph element, and ultimately its container to sit to the right as shown in the article.
Thoughts on this?
You can use display: flex; justify-content: space-between; on the element that wraps the the left/right portions of the header to put those in a row separated by the available space left over. And you can use align-items to align that content vertically.
header {
background-color: #364043;
}
.header__content {
width: 70%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.header__left-content {
display: inline;
width: 50%;
}
.header__nav ul {
display: inline;
}
.header__nav li {
line-height: 0px;
display: inline-block;
vertical-align: middle;
}
.header__logo {
padding-right: 25px;
}
.header__nav-link {
padding-right: 15px;
}
<header>
<div class="header__content">
<div class="header__left-content">
<div class="header__nav">
<ul>
<li class="header__logo">
<img src="http://jobs.printweek.com/getasset/2eef9541-354f-4fec-8ce2-87b008f0323d/">
</li>
<li class="header__nav-link">
Topics</li>
<li class="header__nav-link">
Print Edition
</li>
<li class="header__nav-link">
More
</li>
</ul>
</div>
</div>
<!-- <div class="header__separator"></div> -->
<div class="header__site-functions">
<p>right</p>
</div>
</div>
</header>
<div class="container"></div>
This is happening due to your class="header__site-functions" is ablock element and is taking the 100% of the width, so it doesn't fit in a line. You can use a floating element to fix it:
header {
background-color: #364043;
}
.header__content {
width: 70%;
margin: auto;
}
.header__left-content {
display: inline-block;
width: 50%;
}
.header__nav ul {
display: inline;
}
.header__nav li {
line-height: 0px;
display: inline-block;
vertical-align: middle;
}
.header__logo {
padding-right: 25px;
}
.header__nav-link {
padding-right: 15px;
}
.header__site-functions{
float:right;
}
<html>
<body>
<header>
<div class="header__content">
<div class="header__left-content">
<div class="header__nav">
<ul>
<li class="header__logo">
<img src="http://jobs.printweek.com/getasset/2eef9541-354f-4fec-8ce2-87b008f0323d/">
</li>
<li class="header__nav-link">
Topics</li>
<li class="header__nav-link">
Print Edition
</li>
<li class="header__nav-link">
More
</li>
</ul>
</div>
</div>
<!-- <div class="header__separator"></div> -->
<div class="header__site-functions">
<p>right</p>
</div>
</div>
</header>
<div class="container"></div>
</body>
</html>
I've been trying to create a navigation bar which consists of three pieces, a list to the left of the centered logo, the logo itself and a list to the right of the logo. I've tried absolutely positioning the logo and floating the lists however this leads to the logo overlaying the lists when the width of the browser is altered.
Any suggestions would be much appreciated, JSFiddle included below :-).
JSFiddle
HTML
<div class="navigation">
<div class="container-1020">
<ul>
<li>Home</li>
<li>Work</li>
<li>Contact</li>
<li>Blog</li>
</ul>
<div class="nav-logo">
<img src="http://placehold.it/200x60"/>
</div>
<ul>
<li>01234 123456</li>
</ul>
</div>
</div>
CSS
.navigation {
background: #222222;
}
.container-1020 {
max-width: 1020px;
min-width: 500px;
margin: 0 auto;
}
ul {
color: #fff;
margin: 0;
list-style-type: none;
}
li {
display: inline;
margin-right: 10px;
}
li:last-child {
margin-right: 0 !important;
}
.logo-container {
width: 200px;
height: 60px;
}
This might work for youFIDDLE
css:
* {
margin: 0;
}
a {
color: #ffffff;
text-decoration: none;
}
.navigation {
background: #222222;
}
.container-1020 {
max-width: 1020px;
min-width: 500px;
margin: 0 auto;
}
ul {
color: #fff;
list-style-type: none;
display: inline-block;
width: 30%;
}
ul:last-child {
text-align: right;
}
.nav-logo {
display: inline-block;
width: 30%;
}
html:
<div class="navigation">
<div class="container-1020">
<ul class="left">
<li>Home
</li>
<li>Work
</li>
<li>Contact
</li>
<li>Blog
</li>
</ul>
<div class="nav-logo">
<img src="http://placehold.it/200x60" />
</div>
<ul class="right">
<li>01234 123456</li>
</ul>
</div>
</div>
well for one, correct your class name for the logo, is it .nav-logo or .logo-container
then set your ul's and whichever logo container class you decide on to display:inline-block