I have a task that I initially thought would be easy, but turned out to be quite difficult. I want to be able to detect the height of the current visible window, center some text in that section of visible window, and place a navigation bar at just the end of the window, so a graphic of what it would look the following:
I have tried various ways of doing this, including setting the height of a div to a certain vh level and centering text inside that dif, though that was quite problematic, as vh is not supported in ie 8 and in order to center the text inside the div, many sources told me to do position: absolute, which tended to shift the text to a corner, which I did not want.
Is there a way in which I can create such a display? If I worded anything incorrectly or posted in the wrong place, please let me know. Thanks in advance for any help.
edit: here is the code I am using: http://pastelink.me/dl/b3cb50
Also some snippets of code for clarification:
what I do is I have a div with height of 100vh and width of 100% and an h1 with an id of myTitle (the css for id myTitle just sets the text-align to center)
<div style="height: 100vh; width: 100%"><h1 id="myTitle"> This is a large title!</h1></div>
and a nav bar directly below it, using foundation's nav bar code:
<nav class="top-bar" id="myNav" data-topbar>
<ul class="title-area">
<li class="name"><h1>My Site</h1></li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section"> <!-- Right Nav Section -->
<ul class="right">
<li class="active">Right Button Active</li>
<li class="has-dropdown">Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
EDIT: Many answers were said regarding setting the position of the nav bar to the bottom, and I thank you for that, though I forgot to clarify one thing. I would like for the nav bar to only be at the bottom initially, and when someone scrolls down it moves up, and does not stay fixed to the bottom.
find
<div class="navbar navbar-fixed-top">
...
</div>
and change it to
<div class="navbar navbar-fixed-bottom">
...
</div>
bootstrap has a fixed top and bottom selectors :)
JSBIN
Is this what you need? A table is the most supported method for vertical align in CSS.
.table {
display: table;
min-height: 100vh; width: 100%;
}
.table div {
display: table-row;
}
.header {
height: 90px;
background: #ddd;
}
.header h1 {
text-align: center;
}
.content p {
padding: 0 1em;
display: table-cell;
vertical-align: middle;
}
.footer {
height: 220px;
background: #ddd;
}
Related
I'm currently in the process of learning Bootstrap, and decided to make myself a simple personal website. At the very top left, in the navbar, I want to put my name. On the right I want to have three menu options (about, projects & Contact). However, upon resizing the text for my name (up to 60px using CSS), the website looks okay on a computer (after some modifications to the navbar size), however when I open the site on my phone, the text overlaps. My first name and my last name are written on top of each other, with the navbar items from the right underneath it.
I'm not sure if I'm missing something simple (like using a different Bootstrap class), but I've looked extensively for a solution with no results. Below is the relevant HTML/CSS files.
HTML:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Name -->
<div class="navbar-header">
My Name Goes Here
</div>
<!-- Menu Items -->
<div>
<ul class="nav navbar-nav navbar-right" id="right_menu_items">
<li>About</li>
<li class="active">Projects</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar>ul>li>a {
padding-top: 5px;
padding-bottom: 5px
}
.navbar {
min-height: 80px;
}
#myNameHeader {
font-size: 60px;
padding-top:20px;
padding-bottom: 40px;
position: relative;
}
#right_menu_items {
padding-right: 10px;
padding-top: 14px;
}
To correct this you need to set line-height of your text. This will prohibit your text overwrites on himself.
#myNameHeader {
font-size:60px;
line-height:60px;
padding-top:10px;
padding-bottom:10px;
}
But there is another problem, when you do that, your text overwrite the navbar menu. The reason is because twitter boostrap navbar-brand has a fixed height equals to 50px. To fix, just change navbar-brand to "auto".
.navbar-brand {
height:auto;
}
Check my code on copen: http://codepen.io/eMineiro/pen/reEYXY
Try changing the nav class to navbar-static-top as per bootstrap navbar menu overlaps text
^^^
This doesn't solve my question my situation is different, because of the animated css navigation button. Can get it work like that: display: table-cell and vertical-align: middle; etc.
I have a responsive header that shows a navigation button when in mobile size where you can show the rest of the menu items (disabled in example don't need it for my question).
Because i going to make the header responsive in height it is beter that the navigation button is always centered vertical. Now it is placed in the center with a top margin of 20px and because the button is 20px in height and the header is 60px it is centered, but that won't work if the header height changes responsively.
--> FIDDLE
Code:
<header>
<nav>
<div class="col-nav">
<span class="nav-icon"></span>
Name
</div>
<ul>
<li class="col-nav">Item1</li>
<li class="col-nav">Item2</li>
<li class="col-nav">Item2</li>
</ul>
</nav>
</header>
If you can set it's parent's position to relative then you might be able to use
position: relative;
top: 50%;
transform: translateY(-50%);
on the button
You can try like this DEMO Just changed margin value
CSS:
.nav-icon {
position: relative;
margin-top: 7px;
}
I've followed various tutorials over the last few days and am having difficulties with the (sticky) header overlapping the content below it when my page is scrolled vertically.
It's on all pages of this test site.
HTML >
<header>
<div id="nav">
<ul>
<li>Home</li>
<li>Collection</li>
<li>Shop</li>
<li>FAQ/Policies</li>
<li>Contact</li>
</ul>
</li>
</ul>
<br class="clearboth"/>
</div>
</header>
<br>
<div class="table">
CSS >
header {
margin-left: auto;
margin-right: auto;
text-align: center;
position: fixed;
z-index: 10;
}
.table {
margin-left: 75px;
text-decoration: none;
margin-top:300px;
}
Actually you were almost there with your code as it was. You simply need to give the header a background colour, as that is transparent by default, and also give a width of 100%. Then the scrolling content will disappear up behind it.
Also best to tidy it up by setting the body margin and padding to zero. So add this to your CSS:
body{
margin: 0;
padding: 0;
}
header {
background: white;
width: 100%;
}
That will achieve what you want initially. Now, however, comes the interesting bit that most people omit. I'm not quite sure why you have given the table div a margin of 300px, as that is much larger than you need. But do not set this in pixels at all! Because using fixed measurement means that as soon as a partially sighted user running with text-only zoom (a lot depends on their browser) sees the page, the header will overlap the content, hiding it, so undoing all your hard work! Use em units.
The menu in your example has 5 lines, plus there is a blank line above and two or three more below, so allow 9em in all for the header (you choose the value according to how high your final header actually is), and do this:
.table {
margin-top: 9em; /* instead of 300px */
}
Now, whatever text zoom the user is using, your content's top margin will grow accordingly, and the content will always start just below the header.
Add below css into your top header class:
z-index: 99;
As:
<header style="z-index:99">
<div id="nav">
<ul>
<li>Home</li>
<li>Collection</li>
<li>Shop</li>
<li>FAQ/Policies</li>
<li>Contact</li>
</ul>
</li>
</ul>
<br class="clearboth"/>
</div>
</header>
Im trying to align the out of the box Tabs which come with Foundation 5. For some reason by default they are aligned to the left and i cant figure out how i can get these to align to the center of the screen. The code i am working with is fairly simple (the bog standard tab markup)
Example:
<ul class="tabs" data-tab>
<li class="tab-title active">Tab 1</li>
<li class="tab-title">Tab 2</li>
</ul>
<div class="tabs-content">
<div class="content active" id="panel2-1">
<p>First panel content goes here...</p>
</div>
<div class="content" id="panel2-2">
<p>Second panel content goes here...</p>
</div>
</div>
Live Demo:
http://jsfiddle.net/7YxLg/
So what i am aiming for is for the two tabs to be centered in the middle of the screen instead of to the left can this be done?
I got the tabs to center and play nice with foundation through the following SCSS:
ul.tabs {
text-align: center;
li {
float: none !important;
display: inline-block;
}
}
If you're using plain CSS:
ul.tabs {
text-align: center;
}
ul.tabs li {
float: none !important;
display: inline-block;
}
Benefits: You don't need to specify a width, which can cause problems with responsiveness. You also don't need an extra div. This solution is specific to foundation as well.
Explaination:
Normally, adding text-align: center; to the ul's css would center the li elements. But, foundation's default css adds float: left to li's inside ul.tabs. We clear this with float: none !important and realign the li elements in an inline block.
Sure, using the magic of auto-margins.
Figure out the overall width of the elements, then encase the lot in a div.
CSS:
#tabsDiv
{
width:250px;
margin:0 auto;
}
Then in the HTML, put all your code into that div.
How can we create a navbar similar to the one on Twitter Boostrap's website? The navbar is black, and more importantly is centered in the middle of the page. The alignment of the links seem to be too high too.
The navbar created using the code below is aligned to the left. How do you get it to be centered with a max width like on Twitter Bootstrap's website.
Target navbar
Attempt
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="#">Bootstrap</a>
<ul class="nav">
<li class="active">Home</li>
<li>Get Started</li>
<li>Scaffolding</li>
</ul>
</div>
</div>
one nice technique i like for aligning the links always to the center is to use line-height:
.navbar-inner { height: 60px; }
.nav { line-height: 60px; }
make it the same as the height of the container div, whether this is placed on .navbar-inner or .nav is your call. but it will make the text of the links always vertically aligned in the middle.
Using the bootstrap framework, .navbar-inner should have the same css applied to it as .container or .container-fluid (depending on if you are using the fluid layout or not). For non-fluid layouts this means the following rules:
.navbar-inner {
margin: 0 auto;
width: 1140px; /* or whatever width you choose for your .container */
}
fluid layouts this means:
.navbar-inner {
padding: 0 20px;
}
You need to put everything inside the navbar-inner inside a <div class="container">.