I was able to create navigation menus using div.
I now need to create a responsive navigation bar using nav and bootstrap grid. Just a simple navbar with 4 horizontal links centered.
Question: After 12 or so hours searching and reading so many sites, I just cannot find examples of such a basic navigation bar. Is it just that people do not use <nav> and always use <div> instead?
It is just getting really confusing at this point and I'm feeling stupid as I thought there would be so many examples online. Can anybody clarify please?
Thanks!!
Updated
I did not see the original need for bootstrap grid. Here is another example that utilizes it and uses markup from the bootstrap official site: https://codepen.io/anon/pen/qYjOgv
HTML
<header>
<nav class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</nav>
</header>
CSS
header {
background: dodgerblue;
padding: 30px;
}
.col {
text-align: center;
}
Original
This is a very simple base that uses flexbox. Pen: https://codepen.io/anon/pen/odwjMO
HTML
<header>
<nav>
<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
<a>Link 4</a>
</nav>
</header>
CSS
header {
background: dodgerblue;
padding: 30px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
Related
<div class="checkbox-password">
<div>
<mat-checkbox class="example-margin">Remember me</mat-checkbox>
</div>
<div>
<a routerLink="/forgotPassword" class="createAccount"
routerLinkActive="active"> Forgot Password? </a>
</div>
</div>
Using the above code I get remember me and forgotPassword next to each other, I need help in giving space between them, I have tried the following CSS code. Thanks in advance.
CSS:
.checkbox-password {
padding: 5px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between
}
Try giving a class to the div, and applying the styles to the div.
For example:
<div class="checkbox-password">
<div class="remember-me">
<mat-checkbox class="example-margin">Remember me</mat-checkbox>
</div>
<div>
<a routerLink="/forgotPassword" class="createAccount"
routerLinkActive="active"> Forgot Password? </a>
</div>
And in the css
.remember-me {
margin-bottom: 10px;
}
What I want to have is two divs side-by-side and within one of them is an image and in the other is two divs, one above the other.
This happens to be a Wordpress theme, but I'm pretty sure this is basic CSS question.
The Wordpress stack exchange told me it was off-topic.
Call the left div #divL and the right div #divR.
I found an answer on SO mentioning that I should set display of #divL and #divR to
inline-block. I can get this to work on a test html file that I created in isolation but it doesn't work in the wordpress header. Specifically the divs in the wordpress header #divL and #divR act as if they had display: block rather than being positioned side-by-side.
Changing them to display: inline does put them side-by-side but then it
doesn't work to stack two divs within #divR.
I'll replicate here some of the code in the Wordpress header. Note that I'm going to simplify this by omitting the stacked divs inside #divR, because the symptom is obvious without that.
the following is what I'm using to try to get #divL and #divR to display side-by-side.
#divL { display: inline-block; }
#divR { display: inline-block; }
<header class="site-header">
<div class="wrap">
<div class="title-area">
<div id="divL">
<img id="logo-img" class="attachment-full size-full">
</div>
<div id="divR">Some text that should go on right</div>
</div>
<nav> .... </nav>
</div>
</header>
But they display one above the other.
Note that this actually does work to get them side-by-side, but then the
stacked divs inside #divR don't work as intended:
#divL { display: inline; }
#divR { display: inline; }
<header class="site-header">
<div class="wrap">
<div class="title-area">
<div id="divL">
<img id="logo-img" class="attachment-full size-full">
</div>
<div id="divR">Some text that should go on right</div>
</div>
<nav> .... </nav>
</div>
</header>
There is a lot of CSS on these other elements but I'm not sure which of it is important to this question so I'll wait for someone to comment and tell me what I should include.
As I wrote in my comment, you should set widths for those ìnline-blocks, that should basically do what you are after.
But as an alternative you can also use display: flex; on the container DIV. This can be done rather simple, but in the snippet below I added some additional settings to define a certain width for the two DIVs and to center the contents in these DIVs both horizontally and vertically (by also making the child elements flexboxes with flex-directon: column. For the rest of the settings see the code below.
.title-area {
display: flex;
justify-content: center;
align-items: stretch;
}
.title-area>* {
width: 40%;
border: 1px solid green;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
<header class="site-header">
<div class="wrap">
<div class="title-area">
<div id="divL">
<img id="logo-img" src="https://placehold.it/200x150/fa0" class="attachment-full size-full">
</div>
<div id="divR">Some text that should go on right</div>
</div>
<nav> .... </nav>
</div>
</header>
Here's an example of what would work:
<header class="site-header">
<div class="wrap">
<div class="title-area">
<div id="divL">
<img id="logo-img" class="attachment-full size-full" />
</div>
<div id="divR">
<div id="divTR">Some text that should go on top right</div>
<div id="divBR">Some text that should go on bottom right</div>
</div>
</div>
<nav>....</nav>
</div>
</header>
And the CSS:
#divL {
display: inline-block;
width: 49%;
}
#divR {
display: inline-block;
width: 49%;
}
But also Jon P is right; it might be worth your while to investigate one of the newer methods for dynamically spacing and sizing content.
I want my code to do what it is doing in this snippet but on my browser it's displayed as in the picture. I think it is flexbox causing this issue. Anyone has any idea why this could be and how to fix it?
I have checked whether if it is anything on other classes but this div is completely separate from the other divs and their classes
.activity-snippets {
display: flex;
}
.activity-post-link {
height: 215px;
width: 33.33333333%;
padding-right: 12px;
padding-left: 12px;
flex-grow: 0;
}
.activity-post-link img {
max-width: 100%;
}
.activity-post-link a {
text-decoration: none;
}
<div class="activity-snippets">
<div class="activity-post-link">
<a>
<img src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
<h2>
My Girl's Cave for $55
</h2>
</a>
</div>
<div class="activity-post-link">
<a>
<img src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
<h2>
Turning a French Door Into a Shower Wall.
</h2>
</a>
</div>
<div class="activity-post-link">
<a>
<img src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
<h2>
LOVE SHELF
</h2>
</a>
</div>
</div>
If the snippet looks good but your actual full code doesn't, then there must be something else in your code preventing the text to wrap.
Looks like your flex items are being sized correctly but your text is overflowing. Check if there's some white-space: nowrap; being applied to those h2s anywhere in your full code.
I am using Bootstrap's Navbar and Bootsrap's grid to display a Navbar with a image immediately underneath the Navbar. However, for some reason there is whitespace between this Navbar and the image. When I use firebug to investigate the location of the whitespace, it looks like the Navbar is top-aligned within its containing . I have tried to fix this by using CSS to bottom-align the navbar, to no avail.
How can I eliminate this whitespace?
<!-- Top Navigation Bar -->
<div class="row" id="rowTopLinkNavBar">
<div class="span6 offset3" id="divTopLinkNavBar">
<div class="navbar" id="topLinkNavBar">
<div class="navbar-inner" style="font-size: 16px;">
<ul class="nav">
<li class="active">Home</li>
<li class="divider">PROJECTS</li>
<li class="divider">ABOUT US</li>
<li class="divider">THE TEAM</li>
<li class="divider">EVENTS</li>
<li class="divider">MEETINGS</li>
<li>RESOURCES</li>
</ul>
</div>
</div>
</div>
</div>
<!--Background Image-->
<div class="row" id="rowBackgroundImg">
<div class="span6 offset3" id="backgroundImg">
<!-- background image is set in CSS -->
</div>
</div>
Here is my desperate attempt at fixing this issue using CSS:
#backgroundImg
{
color: #ff0000;
background-color: #000000;
/*width: 709px;
height: 553px;*/
background: url('../images/someImage.jpg') no-repeat;
background-size: 100%;
height: 700px;
border-radius: 0px;
background-position: center;
vertical-align: top;
background-position: top;
}
#divTopLinkNavBar
{
vertical-align: bottom;
}
#topLinkNavBar
{
padding-bottom: 0px;
}
#rowBackgroundImg
{
padding-top: 0px;
}
.navbar
{
vertical-align: bottom;
}
You may want to override the margin-bottom: 20px from navbar :
.navbar {
margin-bottom: 0;
}
Something like that : http://jsfiddle.net/q4M2G/
(the !important is here just to override the style of the CDN version of bootstrap I'm using in the jsfiddle but you should not need to use it if your style correctly overrides bootstrap styles)
Why you put classes: span12 offset3 ?
Bootstrap has 12 columns default. so if you didn't changed it try to put:
span9 offset3 or just span12.
How should we make 6 column layouts with css without tables and one layer above and one layer in buttom?
(with floats ? i try without success)
Thanks
Here is a simple three-column layout with a header and a footer:
<!DOCTYPE html>
<html>
<head>
<title>Column Layout</title>
<style type="text/css">
.column {
width: 33%;
border: 1px solid gray;
float: left;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div class="column one">
Column 1
</div>
<div class="column two">
Column 2 I am the very model of a modern major general.
</div>
<div class="column three">
Column 3
</div>
<div id="footer">Footer</div>
</body>
</html>
By floating the columns they appear next to each other. By using clear: both for the footer it sits below the columns.
In recent browsers you can implement columns much more simply using CSS3 multi-column layout.
If you want to vary the number of columns from three to six depending on the available space, you could try using a media query. Like multi-column layout, media queries are a relatively new feature. If you want to achieve this in older browsers, you will need to use JavaScript (or use floats very creatively.)
For a more detailed discussion of cross-browser multi-column layouts, I highly recommend CSS Mastery: Advanced Web Standards Solutions. It is a great book.
What I tend to do is float all but one of my columns left and the final one right. I then apply a right margin to all of the columns except the final two. This is because the gutter between them is created by the difference in the float, but also gives different browsers a bit of leeway so the layout doesn't break.
As for the layer below (I guess you mean a footer) you use
clear: both;
For example if my page was 65em wide (I tend to work in ems), and I wanted 6 columns, I give all my columns a width of 10em, and I float columns 1-5 left and I float column 6 right. I then give columns 1-4 a right margin of 1em.
you should use "ul"/
<header></header>
<ul id="columner">
<li>
<ul>
<li class="one"></li>
<li class="two"></li>
<li class="thr"></li>
<li class="fou"></li>
<li class="fiv"></li>
<li class="six"></li>
</ul>
</li>
<li>
<ul>
<li class="one"></li>
<li class="two"></li>
<li class="thr"></li>
<li class="fou"></li>
<li class="fiv"></li>
<li class="six"></li>
</ul>
</li>
</ul>
<footer></footer>
Even easier than fighting with floats and clear floats and the like is going to a CSS layout framework like Blueprint (http://www.blueprintcss.org/) or 960 grids (http://960.gs/). If you've never been exposed before, they work by creating a virtual grid system on your page--to get something to be 6 columns, you'd divide the total number of grids on the screen (or on your container) by 6 and voila, perfect grids every time with no overlap and no bugs.
Even if you're well-versed in floats, there are some pretty crazy quirks that you can avoid altogether with a framework that already has the brain damage done. Bonus points to those frameworks with a CSS "reset" that essentially makes all browsers the "same".
try to use some generators online like this:
http://csscreator.com/version2/pagelayout.php
or this http://www.cssportal.com/layout-generator/
I've just tried this 6 colunm layout with css and it seems to work well - I have based this on a 960px wide template, but you can adjust the number to fill any size layout:
<title>6 column layout</title>
<style type="text/css">
.wrapper {
width: 960px;
height: 160px;
padding: 4px;
border: 1px solid gray;
float: left;
}
.column {
width: 150px;
height: 150px;
padding: 4px;
border: 1px solid gray;
float: left;
}
.rightcolumn {
width: 150px;
height: 150px;
border: 1px solid gray;
padding: 4px;
float: left;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="column one">
Column 1
</div>
<div class="column two">
Column 2 </div>
<div class="column three">
Column 3
</div>
<div class="column four">
Column 4
</div>
<div class="column five">
Column 5</div>
<div class="rightcolumn">
Column 6
</div>
</div>
</body>
</html
I tried this on the latest firefox and Safari, and I also tried it on a IE 7 Browser and it all worked well. I added a wrapper to the css because I didn't want the boxes to go under each other if somebody shrank their browser.