First time messing around with a grid layout. Here is what I have so far:
http://fordsseafoodrockhall.com/marina/index.html#
My question is, how to I center the links in my Horizontal nav bar? As can be seen Im left with a little extra space on the right side then I am on the left.
HTML:
<div class="row">
<div class="twelve columns">
<ul class="nav-bar">
<li class="active">Home</li>
<li>Marina</li>
<li>Services</li>
<li>Amenities</li>
<li>Activities</li>
<li>Photos</li>
<li>Yacht Club</li>
<li>Directions</li>
<li>Contact Us</li>
</ul>
</div>
CSS:
.nav-bar {
height: 40px;
background: #435d78;
margin-top: 20px;
padding: 0;
color: #fff;
text-align:center; }
Add this to your existing code:
.nav-bar {
display: flex;
}
.nav-bar > li.active {
flex-grow: 1;
}
The flex-grow property distributes free space among sibling elements with the property applied.
Set display: flex on the parent in order to enable the use of flex properties.
Related
.footer {
display: flex;
position: fixed;
bottom: 0;
width: 100%;
justify-content: space-around;
align-items: center;
min-height: 30vh;
background-color: #a44949;
font-family: 'Open Sans', sans-serif;
}
.footer-list {
display: flex;
justify-content: space-around;
}
<div class="footer">
<h4>Kontakt</h4>
<ul class="footer-list">
<li>Mobilni: 062/329-077</li>
</ul>
<h4>Podaci</h4>
<ul class="footer-list">
<li>PIB: 112295370</li>
<li>Matični broj: 66007057</li>
</ul>
<h4>Lokacija</h4>
<ul class="footer-list">
<li>Oslobođenja 32c, Rumenka</li>
</ul>
</div>
How it looks like:
I want those ul elements placed under the h4 , how do I do it? did I mess something up or? I will add more stuff to it, I planned to add a google map for the location too
EDIT: Another issue
So, I've solved my first and second issue, now here comes the third. Added a map thumbnail, h4 positioning kinda got messed up as you can see here
enter code herehttps://jsfiddle.net/sushmee/nz1txweh/1/
EDIT2: And another issue
How to fix this div with p and text in it, goes under footer instead of expanding the body? I have another line of text, you just cant see it
.footer {
display: flex;
position: fixed;
bottom: 0;
width: 100%;
justify-content: space-around;
align-items: center;
min-height: 30vh;
background-color: #a44949;
font-family: 'Open Sans', sans-serif;
}
<div class="footer">
<div>
<h4>Kontakt</h4>
<ul>
<li>Mobilni: 062/329-077</li>
</ul>
</div>
<div>
<h4>Podaci</h4>
<ul>
<li>PIB: 112295370</li>
<li>Matični broj: 66007057</li>
</ul>
</div>
<div>
<h4>Lokacija</h4>
<ul>
<li>Oslobođenja 32c, Rumenka</li>
</ul>
</div>
</div>
You have a couple of options, the first is to stay with CSS flex layout, and wrap the <h4> elements into a 'wrapping' element with its associated <ul>, and the second – as you want to align across columns and rows – is to use CSS grid layout.
To show the first option, because you're effectively showing a navigation list with associated lists, we wrap the <h4> elements along with its associated <ul> in a wrapper <li> element which, of course, requires either a <ul> or <ol> parent.
I've effectively stripped out all of the styling, so you will need to reintroduce the styles required to position the .footer element, but this should be enough to show you how to visually align the elements:
/* a basic reset so that elements are sized, and
spaced, consistently: */
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* removing all list-markers from the <ul> elements
within the .footer element: */
.footer ul {
list-style-type: none;
}
.footer-list {
display: flex;
justify-content: space-between;
}
/* to show how a marker could be added back to the
descendant <li> elements that follow the <h4>: */
h4 + ul ::marker {
/* a right guillemet, using unicode: */
content: '\00BB';
width: 0.5em;
}
h4 + ul li {
/* making space for the marker: */
margin-left: 0.6em;
}
<div class="footer">
<!-- this element serves to wrap each of the content 'columns'
in <li> elements in order that flex-box layout can
position the <h4> along with its associated list of
links; the class-name is used for ease-of-selecting: -->
<ul class="footer-list">
<li>
<h4>Kontakt</h4>
<ul>
<li>Mobilni: 062/329-077</li>
</ul>
</li>
<li>
<h4>Podaci</h4>
<ul>
<li>PIB: 112295370</li>
<li>Matični broj: 66007057</li>
</ul>
</li>
<li>
<h4>Lokacija</h4>
<ul>
<li>Oslobođenja 32c, Rumenka</li>
</ul>
</li>
</ul>
</div>
JS Fiddle demo.
The second option, as mentioned above, is to use CSS grid, though because this does not wrap the relevant <h4> and <ul> within the same parent, this is somewhat brittle, but can be used:
/* a basic reset so that elements are sized, and
spaced, consistently: */
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* removing all list-markers from the <ul> elements
within the .footer element: */
.footer ul {
list-style-type: none;
}
.footer {
display: grid;
/* because we're positioning the elements in pairs,
one h4 to one ul, we use two rows and direct the
layout to place elements in column direction
instead of rows: */
grid-template-rows: repeat(2, min-content);
grid-auto-flow: column;
}
<div class="footer">
<h4>Kontakt</h4>
<ul>
<li>Mobilni: 062/329-077</li>
</ul>
<h4>Podaci</h4>
<ul>
<li>PIB: 112295370</li>
<li>Matični broj: 66007057</li>
</ul>
<h4>Lokacija</h4>
<ul>
<li>Oslobođenja 32c, Rumenka</li>
</ul>
</div>
JS Fiddle demo.
References:
Adjacent-sibling (+) combinator.
display.
grid-auto-flow.
grid-template-columns.
grid-template-rows.
justify-content.
list-style-type.
::marker.
repeat().
Bibliography:
"Adding HTML entities using CSS content."
"Basic concepts of flexbox."
"CSS Grid Layout."
"A Complete Guide to Flexbox."
"A Complete Guide to Grid."
I am looking at some HTML code, which looks like this (summarised):
html,
body {
height: 100%;
background: #1c1c1c;
}
header {
background: #1c1c1c;
display: flex;
}
.child {
flex-grow: 1;
}
ul {
display: flex;
}
li {
flex-grow: 1;
}
#media only screen and (max-width:542px) {
header div:nth-child(1) {
display: block;
}
}
<header>
<div class="child">
<img src="logo.png" />
</div>
<ul class="child">
<li>About</li>
<li>Services</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</header>
The display:block on the third line from bottom of the css has no effect and I find myself wondering what it is there for?
It's not apparent in the code because there seem to be parts missing.
But here's the underlying logic:
display: flex lines up child elements in a row
display: block restores vertical stacking
So the override takes you out of flex layout and back to standard block layout (where flex properties have no effect).
This set-up can be handy for switching from a desktop to a mobile layout, among other use-case scenarios.
Here's a simplified version of the code for illustration purposes:
.child {
display: flex;
justify-content: space-around;
}
#media (max-width:542px) {
.child {
display: block;
}
}
<ul class="child">
<li>About</li>
<li>Services</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
jsFiddle demo
Hi I am trying to align the bottombar elements so that they are in 2 columns on the side of 102. I was wondering if there is a way to fix it as they are all floating on the right at the moment. I am a beginner html css programmer and I am not very experienced yet. Ill appreciate any help you can give me!
CSS
/*bottom navbar*/
.bottomnav{
width: 100%;
background-color: rgb(248, 138, 180);
display: flex;
flex-direction: row;
}
.navbarlogo2{
display: block;
margin-left: auto;
margin-right: auto;
width: 10%;
text-decoration: none;
}
/*bottombar*/
.nav {
display: flex;
flex-direction: row;
}
.left, .right {
flex: 1;
}
HTML
<div class="bottomnav">
<ul class="bottomlogo">
<li class="navbarimg2"><img class="navbarlogo2" src="img/LOGO.png"></li>
</ul>
<div class='nav'>
<div class='left'>
<ul>
<li>About Us</li>
<li>Affiliates</li>
</ul>
</div>
<div class='right'>
<ul>
<li>TOS</li>
</ul>
</div>
</div>
</div>
END RESULT
WANTED RESULT
I made things like that. CSS Grid is one of the new HTML5 standard you should take a look. In your case, use a grid is better choice against flex because you're looking for a table-like structure.
I choosed to split your needs in 2 parts:
Center your logo
Make a 2 columns grid for your links
Centering your logo
We need to center an element and prevent it to interfere with our incoming links grid. So we'll set our container with a position: relative and place the img tag in position: absolute. Note the image's top right bottom left properties are now relative to the first parent positioned as relative.
And so we only need to make some simple maths. Note the calc() function, we don't want to center the top left corner of your logo but the center. So we need to remove the half of the defined logo's width.
navbarlogo2 {
left: calc(50% - 60px);
}
Make a 2 columns grid for your links
In order make a grid, you have to display your container as grid and set its grid-template-columns to 1fr 1fr. You can translate fr with the word fraction. So here, we're asking for a row split in 2 fractions.
Because we want a place for our logo, we're adding a gap (grid-cap) in out container to make some space between our 2 columns.
Learn more about the fr unit here.
body {
margin:0
}
.bottomnav {
width: 100%;
background-color: rgb(248, 138, 180);
position: relative;
}
.navbarlogo2 {
display: block;
margin-left: auto;
margin-right: auto;
width: 120px;
text-decoration: none;
position: absolute;
filter: brightness(10);
top: 15px;
left: calc(50% - 60px) /*center top left corner then remove half logo width (120px)*/
}
/*bottombar*/
.nav {
display: grid;
grid-gap: 120px;
grid-template-columns: 1fr 1fr;
}
.nav ul {
padding-left: 0;
}
.nav ul li {
list-style: none;
text-align: center;
padding-left: 0;
}
.left,
.right {
flex: 1;
}
<div class="bottomnav">
<div class="bottomlogo">
<img class="navbarlogo2" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg">
</div>
<div class='nav'>
<div class='left'>
<ul>
<li>About Us</li>
<li>Affiliates</li>
</ul>
</div>
<div class='right'>
<ul>
<li>TOS</li>
<li>Fourth </li>
</ul>
</div>
</div>
</div>
I have a Flexbox in use for header navigation, the logo is aligned to the left and the ul items are aligned to the right as in a traditional style. Both the logo and the navigation links are flex items within a full width Flexbox, and I have given them both flex: 50%. The navigation links section is also a Flexbox (an inner Flexbox) to prevent the menu from stacking and instead behaving in a better responsive manner.
When I apply justify-content to that inner Flexbox, there is no change to the links, as if there is an overriding style or the property does not work on an inner text box. I should like the navigation links to equally divide themselves among the 50% of the screen width.
I've toyed with placing flex: auto on the items but can't keep it within the current layout by doing that, and I've tried fiddling with inline elements to see if I can remove any overriding property, but no cigar.
#nav {
display: flex;
flex: 50%;
align-items: center;
}
#logo {
margin-right: auto;
width: 50px;
height: auto;
}
#links {
margin-left: auto;
display: flex;
justify-content: space-between;
}
#links a {
text-decoration: none;
}
<nav id="nav">
<img id="logo" src="https://pngimage.net/wp-content/uploads/2018/06/logo-placeholder-png.png"/>
<ul id="links">
<li><a href="#">Link1<a></li>
<li><a href="#">Link2<a></li>
<li><a href="#">Link3<a></li>
<li><a href="#">Link4<a></li>
</ul>
</nav>
You were pretty close. Important changes I made were to set the width of the #links <ul> to 50% and add justify-content: space-between to the container #nav wrapper. A few other style changes to the ul so it doesnt have default margin and padding and I think it is behaving as you are expecting now..
#nav {
display: flex;
align-items: center;
justify-content: space-between;
}
#logo {
width: 50px;
flex: 0 0 50px;
}
#links {
width: 50%;
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
list-style: none;
}
#links a {
text-decoration: none;
}
<nav id="nav">
<img id="logo" src="https://pngimage.net/wp-content/uploads/2018/06/logo-placeholder-png.png"/>
<ul id="links">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul>
</nav>
I think you have problem with flex: 50%; CSS deceleration. It's not at proper place. I have re-write the html to use it properly and fixed the CSS according.
Here is the Modified CSS
#nav {
display: flex;
background: #eee;
}
#nav>#logo,
#nav>#links {
flex: 50%;
}
#logo img {
width: 50px;
height: auto;
}
#links {
display: flex;
justify-content: space-around;
list-style-type: none;
}
#links a {
text-decoration: none;
}
<nav id="nav">
<div id="logo"><img src="https://pngimage.net/wp-content/uploads/2018/06/logo-placeholder-png.png" /> </div>
<ul id="links">
<li><a href="#">Link1<a></li>
<li><a href="#">Link2<a></li>
<li><a href="#">Link3<a></li>
<li><a href="#">Link4<a></li>
</ul>
</nav>
Also the code available at codepen https://codepen.io/mobarak/pen/jRjZxB/
I don't know how to put <h1> heading exactly on center of the page using a flexbox.
Here is a link: https://jsbin.com/movevezesi/edit?html,css,output
Desired effect: https://tutorialzine.com/media/2016/06/landing-page-hero.jpg
HTML:
<div class="wrap">
<header class="header">
<a class="logo" href="#">logo</a>
<ul class="nav">
<li>Features</li>
<li>Pricing</li>
<li>Sign In</li>
<li>Free Trial</li>
</ul>
</header>
<div class="hero">
<h1>how to center horizontally and vertically this text ???</h1>
<h2>any</h2>
<h3>ideas???</h3>
</div>
</div>
css:
You'll want to nest your flex boxes and change their direction to column. I put together an example using flexbox if you want to continue using that instead of a position 50% hack:
.wrap {
display: flex;
/*
flex-direction: column keeps the nav and
hero in vertical alignment
*/
flex-direction: column;
border: 1px solid red;
height: 500px;
}
.hero {
display: flex;
/*
again, using flex-direction:column to keep
the nested headers in vertical alignment
*/
flex-direction: column;
/*
flex-grow tells .hero to grow along the main
flex axis of its parent. in this case we set
wrap to flex-direction:column, so .hero stretches
vertically
*/
flex-grow: 1;
/*
justify-content sets the children's layout
along the parent's main axis. in this case
the headers will group up in the vertical middle
of .hero
*/
justify-content: center;
/*
align-items sets the children's layout perpendicular
to the parent's main axis. so in this case they'll bunch up
along the horizontal center
*/
align-items: center;
border: 1px solid red;
}
.hero > * {
border: 1px solid black;
/*
without this text-align, the headers would
be centered horizontally, but the text inside those
headers would still be left-aligned
*/
text-align: center;
}
<div class="wrap">
<header class="header">
<a class="logo" href="#">logo</a>
<ul class="nav">
<li>Features</li>
<li>Pricing</li>
<li>Sign In</li>
<li>Free Trial</li>
</ul>
</header>
<div class="hero">
<h1>how to center horizontally and vertically this text ???</h1>
<h2>any</h2>
<h3>ideas???</h3>
</div>
</div>
You could use the next class. It will center horizontally and vertically the element.
.centerElement{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="hero centerElement">
<h1>how to center horizontally and vertically this text ???</h1>
<h2>any</h2>
<h3>ideas???</h3>
</div>
Hoping it helps.