I have a navgiation menu with a logotype, a correpsonding name, a vertical border as a separator, as well as the actual navigation links. While the logotype and correpsonding name seem to be properly aligned, the vertical border and the navigation links are not. Instead, they are off by 5 or so pixels (i checked in Photoshop).
My question is: How do I make sure that all the navigation elements are aligned properly, meaning that they are vertically centered within the navigation bar?
body {
margin: 0;
}
/* Limit container width to 1200px */
.container {
max-width: 1200px;
margin: 0 auto;
}
nav {
background-color: #414b55;
}
.navigation {
overflow: hidden;
}
.logotype img {
margin: 10px 10px 10px 15px;
}
.logotype p {
display: inline;
vertical-align: middle;
font-weight: 700;
font-size: 24px;
}
.divider {
display: inline;
border-left: 1px solid #ffffff;
margin-left: 30px;
margin-right: 20px;
}
.navigation a {
display: inline;
color: #ffffff;
text-align: center;
text-decoration: none;
vertical-align: middle;
}
.item {
padding: 15px 15px;
font-size: 18px;
font-weight: 700;
}
.navigation .icon {
display: none;
}
<body>
<nav>
<div class="container">
<div class="navigation" id="script-target">
<a href="index.html" class="logotype">
<img src="img/logotype.svg" alt="logotype" height="40px" style="vertical-align: middle">
<p>Exception</p>
</a>
<div class="divider"></div>
Select
Select
Select
Select
<img src="img/icon.svg" alt="menu" height="26px">
</div>
</div>
</nav>
</body>
Update:
I changed the display properties and now all the navigation elements align properly. https://jsfiddle.net/MihkelPajunen/4zjbgLLk/4/
You can fix this by adding some padding to the bottom of the divider class:
https://jsfiddle.net/nb4o9p84/
.divider {
display: inline;
border-left: 1px solid #ffffff;
margin-left: 30px;
margin-right: 20px;
padding-bottom: 5px;
}
EDIT: Since you may want all the elements to align (not just the menu links) here is an updated fiddle with all elements aligned through margins and eliminating "inline":
https://jsfiddle.net/yLctgbcw/
.logotype img {
margin: 7px 10px 12px 15px;
}
.logotype p {
display: inline-block;
vertical-align: middle;
font-weight: 700;
font-size: 24px;
margin-top: -5px;
margin-bottom: 0;
}
EDIT 2: It seems like there may be a bug in fiddle or somewhere else because the horizontal distance between the menus is off by 1px - but the distance will change depending on how wide the viewport.
If you add "margin-right: -4px;" on the .item class it will leave 1px of space between 1 of the 4 and the gap will move as you resize your window:
https://jsfiddle.net/42j3e8jp/
If you add -5px the gap disappears (but there is most likely still a 1px difference):
https://jsfiddle.net/8udb4eqn/
To be honest, this is one of those problems that no one will ever notice unless you add red backgrounds to the a to really show the issue. Personally, I would either refactor your code to use the "traditional" menu setup that is used by libraries like Bootstrap:
https://getbootstrap.com/docs/3.3/examples/navbar/
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
Or, I would just forget about the 1px difference and move on as determining the issue could take much longer than refactoring the code. I've learned that there are a lot of little quirks in CSS/HTML (especially across browsers) so unless your 1px difference is noticeable it's usually not worth the effort.
Related
Trying to center div that contains a group of <a> tags, that is contained in a nav in a div as such in code provided. Not sure how to, and also want to understand which selector I use and why for aligning it to the center.
I tried text-align: center; on the div "top-nav-2". I don't want to use flexbox or grid, just basic floats, text-align, etc
/* HTML */
<nav class='top-nav'>
<div class="top-nav-2">
<a class="weed" href="#">Shitendo</a>
Pilates-Station: Move
Micro-Box
SEGA-Genitalia
Trash Bin
</div>
</nav>
/* CSS */
/* Nav bar */
.top-nav{
display: block !important;
background-color: #003371;
height: 51px;
}
.top-nav-2 > a{
display: inline-block;
text-align: center;
margin: 15px 5px;
font-size: 15px;
text-decoration: none;
color: #addeeb;
border-left: 10px;
}
Trying to make it look like website https://www.ebgames.com.au/
I'd go with the old display: inline-block and text-align: center; way of doing this, although you could use flexbox if you'd prefer.
.top-nav{
display: block;
text-align: center;
background-color: #003371;
height: 51px;
}
.top-nav-2 > a{
display: inline-block;
text-align: center;
margin: 15px 5px;
font-size: 15px;
text-decoration: none;
color: #addeeb;
border-left: 10px;
}
<nav class='top-nav'>
<div class="top-nav-2">
<a class="weed" href="#">Shitendo</a>
Pilates-Station: Move
Micro-Box
SEGA-Genitalia
Trash Bin
</div>
</nav>
Here's the flexbox version, in case you want to see it:
https://jsfiddle.net/6j2upgz7/
.top-nav-2 {
text-align:center;
}
Add this styling to your code, if you only want to set the center to top-nav-2
Or you can add text-align:center to the top-nav that you already have
I'm working on a pretty simple website right now that will serve as a sort of dictionary for some of my HTML and CSS work. I have a div for CSS terms on the page. When I shrink the browser, everything else on the page shrinks but this div moves to the far right and becomes less wide. The height stays the same but the width of the div becomes thin. The words in the div flow out and this causes there to be a scrollbar.
At the moment, my HTML looks like this:
.terms {
list-style-position: inside;
background-color: powderblue;
box-shadow: 10px 10px 15px dimgray;
padding: 20px;
margin-left: 370px;
margin-right: 370px;
}
<div class="terms">
<h2> CSS PROPERTIES: </h2>
<ul>
<li> <span class="def"> text-align </span> - left, center, right </li>
</ul>
</div>
The other elements on my page are paragraphs and they all resize. I have 2 other divs on the page for side comments but those resize with the browser too. In case it helps, this is the CSS for the div that actually resizes correctly:
.notes{
text-align: center;
padding: 20px;
font-weight: bold;
border: 10px dotted navy;
display: inline-block;
}
Does anyone have any idea why this particular div might not resize with the browser?
Issue is you have added following styles in your div:
.terms {
list-style-position: inside;
background-color: powderblue;
box-shadow: 10px 10px 15px dimgray;
padding: 20px;
/*Removing the margins from left and right
margin-left: 370px;
margin-right: 370px;*/
}
Removing theses styles will solve your problem
You can also try with max-width
.terms {
list-style-position: inside;
background-color: powderblue;
box-shadow: 10px 10px 15px dimgrey;
padding: 20px;
max-width: 1160px;
margin: 0 auto;
}
.notes {
text-align: center;
padding: 20px;
font-weight: bold;
border: 10px dotted navy;
display: inline-block;
}
<div class="terms">
<h2> CSS PROPERTIES: </h2>
<ul>
<li> <span class="def"> text-align </span> - left, center, right </li>
</ul>
</div>
Try using % or vh instead of px in your css.
A div with auto resize when changing window width\height
May not exactly match your issue but I think it is relevant to yours.I hope this helps.
You can see remove margin left and right ,and add ul tags.
My goal is to have a box around .toggles ("HTML, CSS, JS, Result"), and according to my instructor, we were supposed to set a border-right that would extend up and meet with the surrounding 1px black border. What is causing the space that's appearing above and below each vertical line?
JSBIN: http://jsbin.com/qipuzubure/1/
(In creating this jsbin a new problem has emerged: why is the inner div collapsing on top of itself when the window is shrunk?)
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
#menuBar {
width: 100%;
height: 2.5em;
display: table;
background-color: gray;
}
#logo,
#buttonDiv,
.toggles {
display: table-cell;
vertical-align: middle;
width: 33%;
}
.toggles {
width: 20% ;
}
#logo {
font-weight: bold;
font-size: 1em;
font-family: helvetica;
vertical-align: middle;
padding-left: 10px;
}
.toggles {
text-align: center;
border: 1px solid black;
padding-bottom: 1px;
}
.toggles ul {
padding: 0;
}
.toggles li {
list-style: none;
display: inline;
padding: 0 5px;
border-right: 1px solid black;
}
#buttonDiv {
text-align: right;
padding-right: 10px;
}
</style>
<div id="wrapper">
<div id="menuBar">
<div id="logo">CodePlayer</div>
<ul class="toggles">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>Result</li>
</ul>
<div id="buttonDiv">
<button id="runButton">Run</button>
</div>
</div>
</div>
1) The top and bottom borders are visible because you are displaying the menu using display: table.
display: table and display: table-cell are only necessary when creating tables or in exceptional circumstances.
Since you are creating a menu bar, you can use display: inline-block for some of the inner elements. This will help you correctly style your page.
2) The other issue regarding the widths is not really an error, the page is doing exactly what you're telling it to do. The middle section is keeping a width of 33%, the only way for the current content to fit within this area is to drop down.
Saying this, you can write rules to control what happens to the content in this scenario.
One thing to keep in mind when applying widths to elements is that if you then apply a left or right margin (or padding), it can throw off the width calculation and you may get a different width to what you were expecting.
The most stable way to do this is to wrap the elements in a container and set the width on that container.
Without knowing more about your example I can't give a definitive solution but one way would be to set a min-width: on the #menuBar div.
I've included a JSFiddle to demonstrate.
Your elements are only occupying that space. The 'body' has 8px margin all around so if you remove that your bar will ocupy 100% of the page.
If you want your classe toggles to occupy more than this you need to set a height value to it.
I think this is what you want:
WORKING: DEMO
Just alter the folloewing CSS:
CSS
.toggles li {
margin:0%;
list-style: none;
display: table-cell; /* Or use display:inline-block; but it will destroy vertical alignment of text*/
vertical-align: middle;
height:35px; /*ADDED : You didn't specified the height*/
padding: 0 5px;
border-right: 1px solid black;
}
Problem
So I'm creating a simple navigation menu which contains a div of a tags. Currently it looks like this:
The follow are my HTML and CSS:
HTML
<div id="tabcontent-container">
<div class="tabcontent-menu">
WLAN Jumpstart
Mobility
Guest Access Jumpstart
</div>
</div>
The CSS
#tabcontent-container { padding: 15px 0px; position: relative; text-align: center; border-radius: 25px; -webkit-border-radius: 25px; }
.tabcontent-menu {}
.tabcontent-menu a { text-decoration: none; color: white; font-size: 30px; border-right: 1px solid white; line-height: 33px; padding: 0 22px; display: inline-block; width: 200px; height: 70px; vertical-align: top; }
.tabcontent-menu a:last-child { border:none; }
.tabcontent-menu a:hover { color:#000; }
Working example on Jsfiddle.net
The Question
I'm wondering if there is an easier way to align the middle "Mobility" a tag to the middle. The other two links look fine because they are double line. I purposely made them double line for a reason, and now just need the middle one to middle align some how.
Any suggestions?
You can use vertical-align: middle to adjust the position vertically. Since that only works on table cells, set display: table-cell for the .tabcontent-menu a
http://jsfiddle.net/H9VHs/8/
I usually accomplish something like this by varying the line-height.
.tabcontent-menu a.midline {
line-height: 64px;
}
See it here: http://jsfiddle.net/PZVnq/
Documentation/Further Reading
CSS line-height on MDN - https://developer.mozilla.org/en/CSS/line-height
Lauri Raittilan on Vertical centering with CSS - http://www.student.oulu.fi/~laurirai/www/css/middle/
Vertical centering with CSS on vanseodesign.com - http://www.vanseodesign.com/css/vertical-centering/
I'm trying to make the menu appear at the middle of 30px line but the problem is that I cannot move it from the top unless I use display: table-cell.
What is wrong here?
Style sheet file:
div.menu
{
width: 600;
height: 30px;
border: 1px solid black;
margin: 0px auto;
text-align: center;
vertical-align: bottom
}
The menu code in my html file:
<div class="space"></div>
<div class="menu">
Home
Home
Home
Home
Home
</div>
<div class="space"></div>
line-height: 100px; set the height of your menu line. But keep enough space in horizontal dimension, otherwize you will get crazy view. Look forward to min-width, width or overflow-x rules.
div.menu
{
width: 600px;
/* Use line-height instead of height */
line-height: 30px;
border: 1px solid black;
margin: 0px auto;
text-align: center;
}
div.menu a {
vertical-align: middle;
}
setting the line-height to the desired value fixes the issue but it is not a correct way to do it. It is just a hack. The correct way is to use vertical-align property (for all the anchors inside the menu div)
.menu a {
vertical-align: middle;
}
Check this fiddle. http://jsfiddle.net/sfz7d/
Tell me if it works for you.