I have a flex element <header> which contains two flex items: <span> and <ul>
My goal is to display flex items horizontally in one line like in this photo:
but the result which I get is:
I have figured out that my problem may be solved by using flex-basis: 100%; But the behaviour of the flexbox container is not understandable for me.
Why does it split <li> items in two lines instead of displaying them in one?
html:
<header>
<span>LOGO</span>
<ul>
<li>Library</li>
<li>Telegram channel</li>
<li>Contacts</li>
<li>Donate</li>
</ul>
</header>
css:
span {
border: 1px solid black;
margin-right: 10px;
}
ul {
padding: 10px;
}
li {
display: inline-block;
padding: 0 5%;
border: 1px solid black;
}
header {
display: flex;
align-items: center;
}
use width:100% and margin:0 for ul
span {
border: 1px solid black;
margin-right: 10px;
}
ul {
padding: 10px;
margin:0;
width:100%;
}
li {
display: inline-block;
padding: 0 5%;
border: 1px solid black;
}
header {
display: flex;
align-items: center;
}
<header>
<span>LOGO</span>
<ul>
<li>Library</li>
<li>Telegram channel</li>
<li>Contacts</li>
<li>Donate</li>
</ul>
</header>
Related
I have this HTML code:
<body>
<header id="masthead">
<div id="container">
<!-- logo -->
<img src="logo.png" alt="" width="200px" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>About Developers</li>
<li>History</li>
<li>Economy</li>
<li>Why Study in Dublin?</li>
<li>People and Culture</li>
</ul>
</nav>
</div>
</header>
And this CSS code:
.container {
width: 80%;
margin: 0 auto;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
header::after {
content : '';
display: table;
clear: both;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 2px;
position: relative;
padding-right: 0.1rem;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
However I want to make my nav bar to the left from the logo, but not down below. How can I do it using the given initial code that i hav pointed ? As you can see, align: right and align: left has been used, but had not helped me
Like on photo (Used arrows to point it )
Create two columns. In one column, place your logo, and in the second column, place your navigation bar.
<div class="row">
<div class="column" style="background-color:#aaa; width:20%;">
<!--pLACE Logo here--->
</div>
<div class="column" style="background-color:#bbb; width:80%">
<!--Place Navbar code here-->
</div>
</div>
Remember Adjust your css accordingly
Give your div with id container a display property of flex, direction property of row and then align or justify items as per your liking
#container{
display:flex;
flex-direction:row;
justify-content:space-between;
}
Also in your HTML code you've given tags ids but you're using class selectors in your CSS
Some resources that'll help you:
A Complete Guide to Flexbox
Basic Concepts of Flexbox
Flexbox Cheatsheet
You will have to change your CSS as shown below:
/*add this line to adjust paddings on the columns and remove default margin padding for all the html elements*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*change class to # it's ID and not class*/
#container {
width: 80%;
margin: 0 auto;
}
/*recommended to add width in percentage in css and remove fix width from <img width='200px' /> tag*/
.logo {
float: left;
width:20%;
padding: 10px 0;
}
/*add width 80% for <nav> tag*/
nav {
float: right;
width: 80%;
margin-top: 10%;
}
nav li {
display: inline-block;
/* margin-left: 70px; */ /*remove*/
/* padding-top: 2px; */ /*remove*/
position: relative;
/* padding-right: 0.1rem; */ /*remove*/
padding: 0 5px; /*instead add this for space between li content*/
}
I would recommend you to use CSS FLEXBOX.
I used flexbox to do this. your id="container" was not the same as the CSS so I changed it to class="container"
I added some simple 1px borders just to illustrate what is where on the page.
This is likely not a finished solution and only a starting point.
.container {
width: 90%;
margin: 0 auto;
display: flex;
flex-direction: row;
flex: space-between font-size: 16px;
justify-content: center;
align-items: center;
}
.logo {
padding: 10px 0;
height: 3em;
border: 1px solid lime;
}
header::after {
content: '';
display: table;
clear: both;
}
nav {
border: 1px solid cyan;
justify-content: center;
align-items: center;
}
nav ul li::before {
content: "\200B";
}
nav ul {
display: flex;
flex-direction: row;
border: 1px solid blue;
list-style-type: none;
justify-content: center;
list-style-position: inside;
margin-left: 0;
padding-left: 0;
}
nav ul li {
padding-top: 0.2em;
padding-right: 0.1rem;
border: 1px solid pink;
margin-left: 0;
padding-left: 0;
}
nav li a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 0.875em;
margin-left: 1em;
margin-right: 1em;
}
<header id="masthead">
<div class="container">
<img src="logo.png" alt="logo png" width="200px" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>About Developers</li>
<li>History</li>
<li>Economy</li>
<li>Why Study in Dublin?</li>
<li>People and Culture</li>
</ul>
</nav>
</div>
</header>
I trying to make a navbar that when you hover over one of its item it it drops down and shows another set of list items i know how to make the dropdown effect but i cant quite center the secondary list items above the parent list item
.container{
width: 90%;
margin: 0 auto;
}
header{
background: black;
height: 100px;
}
.container > ul {
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.container >ul li{
margin: 7px;
position: relative;
border: 1px solid green;
}
.container >ul li,
.container > ul li a{
list-style: none;
text-decoration: none;
padding: 4px;
}
.container ul ul{
position: absolute;
}
<header>
<div class="container">
<ul>
<li>Home
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</header>
I am trying to move my Nav Bar to the Top Right with my logo on the Top Left all on one line. But I am unable to do so and I could use some help. I am new to learning HTML and CSS. The nav bar currently rests below the name/logo on the top right.
Demo
.container{
padding: 40px 40px 40px 40px;
margin: 10px 10px 10px 10px;
position: relative;
display: block;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
text-align: left;
border: 1px solid blue;
color:white;
}
.container h1{
text-align: left;
font-size: 50px;
}
.container nav{
height: 70px;
line-height: 70px;
border: 1px solid green;
}
.container nav ul {
list-style: none;
width: 100%;
border: 1px solid red;
text-align:right
}
.container nav ul li {
display: inline-block;
font-size: 100%;
color:white;
margin-right: 0;
border : 1px solid yellow;
}
<div class="container">
<header>
<h1>Srikanth Gowda</h1>
</header>
<nav class="navbar">
<ul>
<li>Design</li>
<li>Photography</li>
<li>About</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
</div>
One way would be to use float.
Per documentation found on MDN Web Docs
The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning).
Learn more about float
Add the following to your CSS
.container header {
float: left;
}
Change your .container nav to:
.container nav{
height: 70px;
line-height: 70px;
border: 1px solid green;
float: right;
}
This will get you what you want...
Working demo
A couple of quick and dirty methods as starting points:
Method 1, using flexbox:
.container{
display: flex;
align-items: center;
justify-content: space-between;
}
nav ul {
display: flex;
list-style: none;
}
nav ul li {
margin-right: 20px;
}
<div class="container">
<header>
<h1>Srikanth Gowda</h1>
</header>
<nav class="navbar">
<ul>
<li>Design</li>
<li>Photography</li>
<li>About</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
</div>
Method 2, using floats:
header {
float: left;
}
nav {
float: right;
}
nav ul {
list-style: none;
padding-top: 18px;
}
nav ul li {
display: inline-block;
margin-right: 5px;
}
<div class="container">
<header>
<h1>Srikanth Gowda</h1>
</header>
<nav class="navbar">
<ul>
<li>Design</li>
<li>Photography</li>
<li>About</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
</div>
you can use flex box property. and float right and left to align your div
.container{
position: relative;
display: block;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
height:70px;
border: 1px solid blue;
color:blue;
}
.container h1{
font-size: 50px;
}
.container .navbar{
height: auto;
line-height: auto;
border: 1px solid green;
float:right;
}
.container .navbar ul {
list-style: none;
width: auto;
border: 1px solid red;
}
.container .navbar ul li {
display: inline;
font-size: 100%;
color:blue;
border : 1px solid yellow;
}
.header{
float:left;
}
.d1{
float:clear;
height:100px;
width:1000px;
}
<div class="container">
<div class="header">
<h4>Srikanth Gowda</h4>
</div>
<div class="navbar">
<ul>
<li>Design</li>
<li>Photography</li>
<li>About</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</div>
</div>
<div>
<div class="d1">
rest of your content
eferfer
</div></div>
When you want to align elements in a div on the same line but on different sides always use the float property. You can change the header's position to left and nav to right by using the float property as below:
.header{
float:left;
}
.container nav{
height: 70px;
line-height: 70px;
border: 1px solid green;
float: right;
}
There are two ways. the first one is given below.
.container header{
display:inline-block;
float:left;
}
.navbar{
display:inline-block;
float:right;
}
The second method is you can put them in a table like below.
<div class="container">
<table>
<tr>
<td>
<header>
<h1>Srikanth Gowda</h1>
</header>
</td>
<td>
<nav class="navbar">
<ul>
<li>Design</li>
<li>Photography</li>
<li>About</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
</td>
</tr>
</table>
</div>
I'm currently trying to learn how to make websites, I just started to test out flexbox but I cant figure out how to center the red box:
I looked at a very clear guide (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) and I figured I just had to use justify-content: center. But I am cleary doing something wrong please help.
P.S. Run the snippet in fullscreen, otherwise you won't see the problem.
* {
margin: 0px;
padding: 0px;
}
.flex_container {
display: flex;
flex-flow: row wrap;
border: 5px solid blue;
}
header,
section,
footer,
aside,
nav,
article {
display: block;
}
body {
justify-content: center;
border: 5px solid grey;
}
#top_menu {
text-align: center;
width: 100%;
height: 40px;
padding: 10px;
border: 5px solid green;
}
#top_menu li {
list-style: none;
font: 20px helvetica;
color: green;
display: inline;
}
main {
padding: 20px;
max-width: 1000px;
border: 5px solid red;
}
<div class="flex_container">
<nav id="top_menu">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</nav>
</div>
<main>
Sample text
</main>
You can use margin: 0 auto; on the main element as it is not a flexbox.
See example below:
* {
margin: 0px;
padding: 0px;
}
.flex_container {
display: flex;
flex-flow: row wrap;
border: 5px solid blue;
}
header,
section,
footer,
aside,
nav,
article {
display: block;
}
body {
justify-content: center;
border: 5px solid grey;
}
#top_menu {
text-align: center;
width: 100%;
height: 40px;
padding: 10px;
border: 5px solid green;
}
#top_menu li {
list-style: none;
font: 20px helvetica;
color: green;
display: inline;
}
main {
padding: 20px;
max-width: 1000px;
border: 5px solid red;
margin: 0 auto;
}
<div class="flex_container">
<nav id="top_menu">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</nav>
</div>
<main>
Sample text
</main>
Flex only affects the children of an element. The red box is not in the flex container, so it won't be affected.
I am attempting to center two unordered lists inside a div. To do this, I am using this basic strategy, the crux of which is giving the parent div a text-align: center property and then making the child uls inline-blocks:
.area {
text-align: center;
border: 2px dashed red;
border-radius: 5px;
padding: 20px;
width: 75px;
}
.list {
list-style-type: none;
padding: 0;
display: inline-block
}
.list li {
border: 1px solid pink;
margin-bottom: 3px;
padding: 5px;
}
<div class="area">
<ul class="list">
<li>sup</li>
<li>sup</li>
<li>sup</li>
<li>sup</li>
<li>sup</li>
</ul>
<ul class="list">
<li>hi</li>
<li>hi</li>
</ul>
</div>
However, the two list items in the second ul are positioned at the bottom instead of beginning at the top.
Floating seems to fix this particular issue, but then it seems like I have to do a clearfix to the parent div in order for it to match the height of the child uls and, in addition, my two uls are no longer nicely centered.
Is there a way to get that second ul in line with the first one?
just set vertical-align:top in .list because an element set inline-block by default is vertical-align:baseline
.area {
text-align: center;
border: 2px dashed red;
border-radius: 5px;
padding: 20px;
width: 75px;
}
.list {
list-style-type: none;
padding: 0;
display: inline-block;
vertical-align: top
}
.list li {
border: 1px solid pink;
margin-bottom: 3px;
padding: 5px;
}
<div class="area">
<ul class="list">
<li>sup</li>
<li>sup</li>
<li>sup</li>
<li>sup</li>
<li>sup</li>
</ul>
<ul class="list">
<li>hi</li>
<li>hi</li>
</ul>
</div>