i'm trying to make a nav bar at the end of a div, but the problem i have is that when i put position: fixed at it's parent, the justify.content: space-between disappear.
This is the code I have:
<main>
<div>
<div class="row">
<div class="logo col-3">
<img src="img/logo.jpg">
</div>
<div class="video-container">
<img src="img/Foto1.jpg">
</div>
</div>
<div class="text">
<p> Some text here </p>
</div>
<nav>
<ul>
<li>About</li>
<li>Projects</li>
<li>Ask</li>
<li>Work in progress</li>
<li>Idea</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</nav>
</div>
</main>
<style>
nav{
position: fixed;
bottom: 0;
}
nav ul{
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
nav ul li{
list-style: none;
}
nav ul li a{
text-decoration: none;
color: black;
}
<style>
I would like to have a nav bar fixed and justified.
Related
I need to vertically align the button text to the line with respect to second line(always to second line) of the label if there is a word-break else to the first line of the label text(which is dynamic.)
<ul>
<li>
<div id="label" class="left word-break-on-particular-width">A dynamic text</div>
<div id="value" class="right"><button>button text</button></div>
</li>
<li>
<div id="label1" class="left word-break-on-particular-width">A dynamic text(width of this will differ as per the text recieved)</div>
<div id="value1" class="right"><button>button text</button></div>
</li>
</ul>
output should be like this
Flexbox can do that:
ul {
list-style-type: none;
width: 50%;
/* for demo */
margin: auto;
}
li {
display: flex;
align-items: center;
margin-bottom: 1em;
}
li div {
padding: 0 1em;
}
.right {
margin-left: auto;
flex: 0 0 auto
}
<ul>
<li>
<div id="label" class="left word-break-on-particular-width">A dynamic text</div>
<div id="value" class="right">
<button>button text</button>
</div>
</li>
<li>
<div id="label1" class="left word-break-on-particular-width">A dynamic text(width of this will differ as per the text recieved)</div>
<div id="value1" class="right">
<button>button text</button>
</div>
</li>
</ul>
CSS Tables also
ul {
list-style-type: none;
display: table;
width: 50%;
margin: auto;
}
li {
display: table-row;
}
li div {
border: 1px solid grey;
padding: 1em;
display: table-cell;
vertical-align: middle;
}
.right {
white-space: nowrap;
}
<ul>
<li>
<div id="label" class="left word-break-on-particular-width">A dynamic text</div>
<div id="value" class="right">
<button>button text</button>
</div>
</li>
<li>
<div id="label1" class="left word-break-on-particular-width">A dynamic text(width of this will differ as per the text recieved)</div>
<div id="value1" class="right">
<button>button text</button>
</div>
</li>
</ul>
I have a navigation bar as shown here: http://i.imgur.com/4rxkS2K.jpg
I am using foundation to build a website, the way I have built the nav bar is as follows:
HTML:
<nav class="top-bar">
<ul>
<li>About</li>
<li id="menu-divider">|</li>
<li>Testimonials</li>
<li><img src="images/logo.png" alt=""></li>
<li>Services</li>
<li id="menu-divider">|</li>
<li>Contact</li>
</ul>
</nav>
CSS:
.top-bar { font-family: 'bebas_neueregular';
height: 150px;
line-height: 100px;
padding: 18px;
width: 100%;
position: relative;
text-align:center;
margin-bottom:10px; }
.top-bar ul { display:inline-block;
margin-left: auto ;
margin-right: auto ;}
.top-bar ul > li { display:inline-block;
margin-left: auto ;
margin-right: auto ;}
#menu-divider { color:#ffffff;
font-size: 24px;}
As you can see in the picture, the way I have built it means that my center li element (my logo picture) is not in exact center as the other li elements are of different widths meaning they are all centered collectively. What I'm after is the logo in the dead center then the other li elements as they are centered around the logo.
Thanks in advance for any help!
You can play around but I'm pretty sure this does the trick:
http://codepen.io/anon/pen/dYXQpz
Use 3 containers (that means you lose your nav as a ul). Flex them and inside of the left and right one, flex the elements (end for the first, start for the other)
<div class="nav-bar">
<div class="sideNav leftNav">
<div class="menu">
MENU 1
</div>
<div class="split"></div>
<div class="menu">
MENU 2
</div>
</div>
<div class="logo">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSN9qhGx6NftAepiMOjdGXkcW-UxkO9dtQ4VGRlepyzNC2S8xQCcA" />
</div>
<div class="sideNav rightNav">
<div class="menu">
MENU 3
</div>
<div class="split"></div>
<div class="menu">
MENU 4
</div>
</div>
</div>
Then apply the css. It can be improved but it can help you get started.
.nav-bar {
background: pink;
display: flex;
}
.sideNav {
flex: 1 0 auto;
background: red;
display: flex;
}
.leftNav {
justify-content: flex-end;
}
.rightNav {
justify-content: flex-start;
}
.sideNav > div {
margin: 100px 20px 0 20px;
}
.split{width: 2px;background: white;height: 16px}
Hope that helps. I loves flexbox.
Hi I tried to center the navigation menu by using floating CSS element but didn't work. Does anyone have any advices?
<header>
<div id="top-banner">
<img src="Images/headerlines.png" alt="lines">
</div>
<div id="logo">
<img src="Images/logo.png" alt="logo">
</div>
<nav>
<ul class="nav">
<li>About</li>
<li>Price</li>
<li>Contact us</li>
</ul>
</nav>
</header>
Css
.nav li{
width:960px;
list-style:none;
float:left;
}
.nav a {
display:block;
text-align:center;
width:320px;
text-decoration:none;
}
Sorry guys, this is my first time posting question on stackoverflow.
You can do it like this :)
.nav {
width: 960px;
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}
.nav li{
display: inline-block;
}
.nav a {
text-decoration: none;
margin: 0px 30px;
}
<header>
<div id="top-banner">
<img src="Images/headerlines.png" alt="lines">
</div>
<div id="logo">
<img src="Images/logo.png" alt="logo">
</div>
<nav>
<ul class="nav">
<li>About
</li>
<li>Price
</li>
<li>Contact us
</li>
</ul>
</nav>
</header>
Adding
margin-left:50%;
in the class "nav"
i got an html structure as below,
<div id="page-wrap">
<header>
<div id="logo">
</div>
<nav>
<ul>
<li>text 1<li>
<li>text 2</li>
<li>text 3</li>
</ul>
</nav>
</heder>
<div id="main-content">
<h1>Some Heading</h1>
<p>Some Text</p>
<div>A div</div>
</div> <!-- end of main-content -->
</div> <!-- end of page-wrap -->
with css
#page-wrap {
max-width:850px;
top:0;
bottom:0;
height:100%;
margin: 0 auto;
}
header {
padding: 80px 0px 0px 0px ;
position: relative;
}
#logo {
position: absolute;
left:0;
width:123px;
height:122px;
background:transparent url(../images/logo.png) no-repeat;
}
header nav {
position: absolute;
right:0;
}
header nav ul {
}
header nav ul li {
display:inline;
list-style: none;
}
as above.. the main-content div overlaps the header >.< please suggest propper css for getting main-content have an 80px distance from bottom of the header.. (there is a logo with 122px height on the header)
HTML
<div id="page-wrap">
<header>
<div id="logo"> </div>
<nav>
<ul>
<li>text 1<li>
<li>text 2</li>
<li>text 3</li>
</ul>
<div class="clear"> </div>
</nav>
<div class="clear"> </div>
</header>
<div class="clear"> </div>
<div id="main-content">
<h1>Some Heading</h1>
<p>Some Text</p>
<div>A div</div>
</div> <!-- end of main-content -->
</div> <!-- end of page-wrap -->
CSS:
html, body {
height: 100%;
}
#page-wrap {
max-width:850px;
height:100%;
margin: 0 auto;
}
header {
margin: 80px 0 0 0;
}
#logo {
width:123px;
height:122px;
background: url("../images/logo.png") no-repeat;
float: left;
}
header nav {
float: right;
}
header nav ul {
}
header nav ul li {
display:inline;
list-style: none;
}
#main-content {
margin: 80px 0 0 0;
}
.clear {
clear: both;
}
Look up CSS clear: both, and you'll understand why I used clear.
Try giving some top margin for main-content...
CODE:
<div id="main-content">
//somecode
<div>
CSS:
# main-content
{
margin-top:somepixel;
}
I'm using the 960.gs frameowrk and http://www.cssstickyfooter.com and want to have a separate back ground colour for the main content div. This div won't stretch the background to the bottom of the page.
HTML:
<div id="wrapper">
<div id="content" class="container_12">
<div class="grid_12" id="header"><img src=logo.png" alt="" width="145" height="160" border="0" /></div><!--header-->
<div class="clear"></div>
<div class="grid_12" id="navbar">
<ul>
<li>Home</li>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5</li>
</ul>
</div><!--navbar-->
<div class="clear"></div>
<div class="grid_12" id="content_body">
<div class="grid_4" id="sidebar">
sidebar left
</div> <!--sidebar-->
<div class="grid_7" id="body_right">
body right
</div> <!--body_right-->
</div> <!--content_body-->
<div class="clear"></div>
</div><!--content-->
</div> <!--wrapper-->
<div id="footer"> footer </div> <!--footer-->
CSS:
html, body, #wrapper {height: 100%;}
body > #wrapper { height: auto; min-height: 100%; }
/* must be same height as the footer */
#content { overflow: auto;
padding-bottom: -1.5em;
}
#footer {
position: relative;
margin-top: -1.5em; /* negative value of footer height */
height: 1.5em;
clear: both;
}
/*Opera Fix*/
body:before { /* thanks to Maleika (Kohoutec)*/
content: "";
height:100%;
float: left;
width: 0;
margin-top: -32767px; /* thank you Erik J */
}
body {
min-width: 960px;
background: #E9F2F9;
}
div#header{
background-color: #3399cc;
}
div#navbar {
background-color: #FF9900;
}
div#navbar LI{
margin: 0 auto;
display: inline;
padding-right: 5px;
}
div#content_body{
background: #9CC4E4;
}
You have a div class="clear" but clear isn't defined in your CSS - you need to specify "clear:both" in a .clear CSS class.