I've been trying to create a navigation bar that meets the following criteria:
Spans 15% height.
Spans 100% width.
Navigation bar is aligned to the top of the site.
Elements within the navigation bar are vertically centered within it.
The last menu option is aligned to the far right of the navigation bar.
I've been playing with <div> and <ul> to implement the elements. I've spent a lot of time on it and researched it. I can't seem to find a way to vertically center the elements, which are images, if I use a percentage height. I assume this issue is because the <header> and <nav> elements are block elements, as is the div element, being that "vertical-align" only works on inline elements.
Questions, for those wise enough to provide what are probably easy answers:
Can I use "vertical-align" on block elements if I override the "display" element to the "inline" value? It seems like the answer is negative.
Can I right-align one <li> within a <ul> while the other <li> are left-aligned?
The only way I can get it to work is to use fixed height values on the navigation bar as well as padding around the elements. Is that my only option or does anyone know of a way I can make it work with a percentage height?
Basic code to express what I'd like to do (assuming all the <html> and other foundational tags are there, too; and I am aware the code below doesn't work but it shows the basic idea):
<style>
html, body {
height: 100%;
width: 100%;
}
.menu_bar {
display: inline; /* This element seems to mess things up pretty bad so I assume I can't do it
that way. I was only using it so my <ul> would be within an inline element which would allow me
to use vertical-align. */
height: 15%;
width: 100%;
background-color: #000000;
}
.menu_items {
height: 100%;
width: 100%;
}
.menu_logo {
vertical-align: middle;
text-align: left;
}
.menu_option1 {
vertical-align: middle;
text-align: left;
}
.menu_option2 {
vertical-align: middle;
text-align: left;
}
.menu_option3 {
vertical-align: middle;
text-align: right;
}
</style>
<body>
<header>
<nav>
<div class="menu_bar">
<ul class="menu_items">
<li class="menu_logo"><img src="images/logo.gif"></li>
<li class="menu_option1"><img src="images/option1.gif"></li>
<li class="menu_option2"><img src="images/option2.gif"></li>
<li class="menu_option3"><img src="images/option3.gif"></li>
</ul>
</div>
</nav>
</header>
</body>
Related
I would like a horizontally scrollable gallery like the one on the image.
My current markup is this (it is slim.):
.col-xs-12
.row-fluid.clearfix
ul.ace-thumbnails
- #equipment_uses.each do |gear|
= content_tag_for(:li, gear) do
a.cboxElement data-rel="colorbox" href="#" title=("Photo Title")
= image_tag gear.image, size: '80x80', alt: "150x150", class: 'img-thumbnail thumbnail'
If I set the 'overflow-x: scroll' fro the .col-xs-12 div and 'width:10000px' for the '.row-fluid.clearfix' div then it is working but the horizontal div too long. I would like to outspread the width of the .row-fluid.clearfix to be to total width of the images.
This is not exactly an answer, but this page has some great tutorials on exactly this topic, covering a few different versions. I would have left a comment rather than an answer but my reputation has prevented this.
Basic horizontally scrolling list of images using HTML & CSS:
HTML:
<ul class="images">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
CSS:
ul.images {
margin: 0;
padding: 0;
white-space: nowrap;
width: 900px;
overflow-x: auto;
background-color: #ddd;
}
ul.images li {
display: inline;
width: 150px;
height: 150px;
}
The trick in the CSS is to set the lis to display:inline, so they are treated as characters and placed next to each other, and set white-space:nowrap on the ul so that no line breaking is done.
The scrolling is then simply overflow-x:auto and the rest is obvious. Adding prev/next buttons could be done with position:absolute, or with float:left, or whatever other method you fancy.
See demo
friends,
I decided to ask this because I've seen many answers on the internet, but no one seems to be a definitive answer.
In out HTML documents we have many elements one inside another. Eventually we'll want to add paddings and margins to these elements.
So, what if we want to have all content horizontally aligned to the center of the page? If the content has 1000px of width and the screen resolution will change from device to device, the most common solution is something like (will work on netscape based browsers):
body{
width: 100%;
}
#content{
width: 1000px;
margin: 0 auto;
}
But if we have lots of other elements inside the #content element, like a table made of DIV elements, we start to face some problems. The parent's height will not adjust to its children's height and padding and margin will not work properly (if we inspect the element we will see that the width and height is not behaving as expected) unless we add some new rules.
I use float: left but then the headache starts! When I add float: left only those elements will work fine, but the parents will not. If I add float: left to an element that already has margin: 0 auto set, it will no longer be aligned to the center of the page...
I've seen some solutions using text-align: center to the parent and display: inline-block; float: none; to the element we want to be aligned to the center. But it also has many problems (for example, we can't set the float rule)
How do you deal with this problem guys?
You need to use clear after you use float on elements in order to 'clear the floats' and make the height propagate up to its parents. You can use clear:left (or right) to just clear float:left elements but typically it's fine to just use clear:both.
In the below example there are two versions of clearfixes, one that uses a pseudo-element on the container and another that is just another element.
Demo
HTML
<div id="content">
<nav>
<ul>
<li>Home</li>
<li>Second</li>
<li>Third</li>
</ul>
</nav>
<div class="float-me">Test1</div>
<div class="float-me">Test2</div>
<div class="clear"></div>
</div>
CSS
#content {
width: 500px;
margin: 0 auto;
}
li {
float:left;
}
/* our pseudo-element clearfix */
ul:after {
display: block;
content: "";
clear: both;
}
.float-me {
float:left;
}
.clear {
clear:both;
}
Yes, obviously I'm doing it wrong. Why can't it be as easy as horizontally aligning stuff? I sit and my work is halted for hours on end trying to look up how to vertically align in the middle, so I don't have to bug you guys with my stupid most-likely really easy to you question.
Display Block or Table-Cell, everything I read never works. I thought "maybe if I horizontally align my img with .divID img and then vertically align the div itself" sadly, I wish that'd work. But even when I did try centering the div vertically in the middle, it messed up the image centering and didn't even work.
TL;DR: I hate trying to vertically align stuff so much.
I'm trying to get my header image centered vertically and horizontally. This my code I'm working off.
HTML
<div id="wrapper">
<div id="header">
<div id="logo">
<img src="http://i.imgur.com/d0umnxt.png" />
</div>
</div>
</div>
CSS
body {
margin: 0px;
}
#header {
width: 100%;
height: 100px;
background-color: #151B1F;
}
#logo {
display: block;
margin: auto;
}
I hate table and table-cell just as much as the next guy, but when you know the height of the parent element (#header in your case), things become really easy.
Here's a working fiddle.
You just need to add the following styles to your CSS:
#header {
display: table;
}
#logo {
display: table-cell;
vertical-align: middle;
text-align: center;
}
I have a navigation bar which consists of two parts. The left area, which is where the actual links are. And the right area, which is were a search box will display.
The left area is fluid, while the right area has a fixed width.
What I'm trying to figure out is how to set the padding on my navigation links so that it will use up the full fluid width of the left area. (The navigation links are buttons with a hover effect, I would like them to cover the full navigation bar regardless of it's width)
See the example below
What I'm trying to do (fluid/percentage based padding based on bar width)
width 300px
|========================================|========|
|---Link------Link------Link------Link---| Search |
|========================================|========|
width 400px
- padding on Links automatically adjusts to fill the bar
|================================================|========|
|----Link--------Link--------Link--------Link----| Search |
|================================================|========|
How would I go about achieving this? I've tried messing with padding percentages but I can't seem to get it to work as desired. Are padding percentages even the best way to go about this?
Depending on what support level you desire, you could use flexboxes.
I'll just assume you want to support older browsers, tho, where the best solution is propably a normal 2 column layout, with the links inside the left column getting a percentage width (25% in your example) and propably a min-width.
Heres a working fiddle. I made the main box resizeable for easier demonstration.
reduce the width of the container with padding and absolutely position the search box inside the padding. Here's an example on jsbin
HTML (note that some whitespace has been deliberately removed so that there aren't text nodes taking up space.):
<nav class="">
<div class="nav-link-container">
<div class="nav-link"><a >link</a>
</div><div class="nav-link"><a >link</a>
</div><div class="nav-link"><a >link</a>
</div><div class="nav-link"><a >link</a>
</div>
</div><div class="search-box-container">
<input class="search-box" placeholder="search">
</div>
</nav>
CSS:
nav {
padding-right: 220px;
position: relative;
background: lightblue;
line-height: 1.5em;
}
.nav-link-container {
display: inline-block;
width: 100%;
text-align: center;
}
.nav-link {
display: inline-block;
width: 25%;
outline: 1px dashed grey;
}
.search-box-container {
position: absolute;
right: 0;
top:0;
width: 210px;
display: inline-block;
}
.search-box {
width: 200px;
border-radius: 5px;
border: 1px solid lightgrey;
padding-left: 5px
}
NB: I've only used outline to show where the links are, you wouldn't do that in practise.
I have a single header bar that is at the top of my website. Within the <header> tag I have an unordered list with a couple list items floating to the left, and another floating to the right. I want to be able to stick an element dead center of the header. What is the best way to do this? So far I have the page essentially set up like this:
<header>
<ul>
<li class="left">Item 1</li>
<li class="right">Item 2</li>
<ul>
<h1>Title of site</h1>
</header>
And then the <h1> tag has text-align: center and margin-top: -45px, to put it on the same level as the list items. The issue is, the h1 isn't exactly centered. What is the best way to set up a header to accomplish this behavior?
Here is an example jfiddle, where you can see that the title isn't really centered.
A good trick for getting something to align perfectly in the center when text-align:center; isn't an option is to do the following:
1) Get the exact width of the element you're wanting to center (div, hx tag etc)
2) Position the element absolute so that the item's position isn't affected by other elements
2) Set position to left:50% (the start of the element is exactly half way) then give a margin-left: negative half of the item's width.
Example
In your JS fiddle Your h1 is 106px wide. So for it's css you would put
header h1 {
position:absolute;
width:106px;
left:50%;
margin-left:-53px;
top:6px;
font-size: x-large;
color: white;
}
UPDATED JS FIDDLE
you could try
h1 { position: absolute; top: 45px; left: 45%; }
or you could possibly try adding a new div above the header like this
<div id="h1wrapper">Your h1 goes here</div>
in your css
#h1wrapper { display: block; height: 0px; width: 100%; text-align: center; overflow: visible }
h1 { margin-top: 45px; font-size: 16px; }