There are two issues that I'm trying to fix, but can't find a solution
The first one is that the space between the li fields is way wider than the 2px than it should be. How do I remove it?
And other is that the a fields are only as high as the text, although the field height is defined to be 50px.
I also have the normalize.css file enabled from GitHub.
Any suggestions?
HTML
<nav class="nav-box">
<div class="row">
<ul class="main-nav">
<li>YES</li>
<li>NO</li>
</ul>
</div>
</nav>
CSS
.row {
max-width: 1140px;
margin: 0 auto;
}
.nav-box {
position: fixed;
top: 0;
left: 0;
width: 100%;
box-shadow: 0 2px 2px #f2f2f2;
min-height: 65px;
}
.main-nav {
float: right;
margin-top: 7px;
}
.main-nav li {
list-style: none;
display: inline-block;
font-size: 100%;
}
.main-nav li a {
height: 50px;
background-color: #ee4723;
padding: 0 18px 0 18px;
font-size: 1.4rem;
color: #fff;
font-family:'Oswald', sans-serif;
border:solid #fff;
border-width: 0 1px 1px 0;
line-height: 54px;
}
Here's a fiddle.
For the spacing issue
This is an issue with inline-block elements (extra spacing appears between two such elements). One way to solve this is to give the parent element (in this case <ul>) font-size of 0 and then setting the font-size of the <li> element explicitly. There are other ways like negative margin but I find font-size: 0 method to be the most convenient.
You can read about other methods here https://css-tricks.com/fighting-the-space-between-inline-block-elements/
For the height issue
While you have given the inline-block property to the <li> elements, the child <a> elements are still inline. Attributes such as height and width would have no effect on inline elements. Add display: inline-block to the <a> element as well for the desired effect
You can use negative margins:
.main-nav li {
margin: 0 -2px;
}
.main-nav li a {
display: inline-block;
}
Related
I have this navigation with unordered list, I made the li display to be inline, And here comes the problem, I am having problem trying to align the text upward, apparently, inline elements doesn't take margin and padding property.
My codes:
<ul>
<li><h3>Home</h3></li>
<li><h3>About</h3></li>
<li><h3>Contacr</h3></li>
<li><h3>Blog</h3></li>
</ul>
ul{
list-style: none;
max-width: 250px;
height: 40px;
background-color: #486348;
margin-top: 20px;
padding: 0;
padding-right: 10px;
padding-bottom: 10px;
padding-top: -10px;
}
li{
display: inline-block;
height: 40px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 0;
border: 1px solid rgba(78,78,78,0.67);
}
a {
color: #fff;
text-decoration: none;
line-height: 1;
}
<ul>
<li><h3>Home</h3></li>
<li><h3>About</h3></li>
<li><h3>Contacr</h3></li>
<li><h3>Blog</h3></li>
</ul>
Although a line-height of 1 did do something nice for me, but not enough, so how do I move my text upward neatly?
In your stylesheet add h3 { margin:0; }. The h3 elements inside the anchors have a default margin value.
Also, to align the text in the middle (vertical alignment), add line-height: 40px; display:block; for the a elements, so they have the same line-height as their parent li.
Well, I want this text to be up the top roughly 20 PX from the top of the wrapper (background color) I did the margin up there but nothing happened if anyone can help it will be greatly appreciated.
CODE
.wrapper {
background-color: #01172c;
}
.footerid {
list-style: none;
}
.footerid li {
padding-left: 125px;
padding-top: 20px;
padding-bottom: 20px;
display: inline;
display: inline-block;
}
.footerid h3 {
padding-top: 20px;
margin-top: 20px;
}
<footer>
<div class="wrapper">
<ul class="footerid">
<li><img src="logo-f.png" style=" width:80px; height:105px;"></li>
<li><h3>lol</h3></li>
</ul>
</div>
</footer>
Run the code sample in full screen to see properly.
You have to indicate the li element about the vertical-align which I would set to top for this case
Please see https://jsfiddle.net/4zr9j3eg/
I have also disabled the padding property for your h3 element which will sumup the margin that make the text distance from the top to 40px
Also I changed the text-color to color: #fff; for debug easier
As a general tips, you can set the wrapper to position: relative;
By doing this you can easily "control" the elements (children) inside the parent (in this case, the wrapper) with position absolute.
Example:
#wrapper {
position:relative;
}
#wrapper .child {
position: absolute;
top: 20px;
}
Apply vertical-align: top to <li>:
.footerid li {
padding-left: 125px;
padding-top: 20px;
padding-bottom: 20px;
display: inline;
display: inline-block;
vertical-align: top;
}
and remove padding and margin from .footerid h3.
In the following code:
<a href="*">
<h3>My really really long header</h3>
<img src="thumbnail.png" width="150" height="100" />
</a>
The h3 overflows its size. If I set the overflow to hidden, an extra margin is added to the bottom of the h3. If I change the header to short one, the extra bottom margin does not appear.
After searching SO I found something about collapsing margins. But the point is there is no margin applied to img nor to h3.
Here is the CSS:
h3 {
width: 300px;
height: 40px;
line-height: 40px;
padding: 0 0 0 10px;
margin: 0;
display: inline-block;
width: 150px;
background-color: #0f0;
}
a {
position: relative;
display: block;
margin-bottom: 20px;
padding: 4px;
border: 1px solid #000;
width: 160px;
height: auto;
}
img {
background-color: #00f;
}
Fiddle
If I set the font-size of tag a to zero, the extra margin doesn't show up.
Question: Is there a proper way (not setting font-size: 0) to solve this issue?
You have your h3 set to inline-block. By default, inline-block respects line-height and font-size. Change your h3 to display block.
css:
h3 {
width: 300px;
height: 40px;
line-height: 40px;
padding: 0 0 0 10px;
margin: 0;
display: block;
width: 150px;
background-color: #0f0;
overflow:hidden;
}
Remove display: inline-block from the h3, or add vertical-align:bottom.
That you are making the h3 an inline-block element is causing this, because as such it gets laid out in the line box in a way that leaves space for the descenders of characters of (potential) text content on that same line.
How can I vertically align a button in a nav that is using line-height while keeping my specified padding dimensions?
I'd like to align this button with the rest of the nav elements:
I'm using line-height to align the others, but using line-height on the button creates unwanted results:
Summary: I'm vertically aligning my nav list items with line-height but this makes my button extend the full height of the nav bar. I need to use line height to vertically align this ul with another ul that contains the site icon. The line-height height used is the icon's height.
Please see the issue recreated here
fiddle.
html:
<ul>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
</ul>
css:
* {
box-sizing: border-box;
}
ul {
list-style: none;
border: 1px solid;
float: right;
width: auto;
height: auto !important;
display: inline-block;
margin: 0;
}
ul li {
line-height: 103px;
background: rgba(0, 0, 0, 0);
text-transform: uppercase;
float: left;
margin: 0;
padding: 0;
direction: ltr;
}
ul li a {
line-height: 103px;
background: rgba(0, 0, 0, 0);
text-transform: uppercase;
padding: 0 15px;
display: block;
width: 100%;
}
.button {
padding: 0.5em;
background: grey;
}
The easy fix is to apply the class to the column (IE: <li class="button">) instead of the link: <a href="#" class="button"> (See edit here)
If you can't do this, you will have to play around with, height, and width styles, or create a div to make your link fit
Edit: By changing the style to padding:0 0.5em; you will not get the vertical displacement
You can vertically-align by doing
CSS:
div {
height: 300px;
}
a {
line-height: 300px;
}
Put the a in the div and you should be all set.
Add display:inline-block; vertical-align:middle instead of float:left in li tag
I need to dynamically add LI elements to the UL element which are of "n" length. The HTML I have right now is...
<div class="center">
<ul id="tabList" class="parent">
<!-- I am adding LI using jQuery here. -->
<br class="clearfix" />
</ul>
</div>
The CSS applied here is...
.center
{
top: 0;
margin: 0 15%;
width: 70%;
overflow: hidden;
}
.center ul.parent
{
left: 0;
height: 100%;
position: relative;
}
.center ul.parent li
{
float: left;
margin: 0 5px;
}
.center ul.parent li .tab
{
position: relative;
padding: 5px 10px;
background: transparent;
font-size: 16px;
font-weight: bold;
line-height: 49px;
border: 1px solid rgba(0, 0, 0, 0.1);
color: #A9D0F5;
background: rgba(0, 0, 0, 0.1);
border-radius: 3px;
}
I must set .parent width according to its children width in order not to let UL expand vertically here. Is there a way I can use to fix the width setting? I don't like setting width according to children accumulated width.
You want something like this?
I put a big witdh in order to avoid that the new LIs going down.
.center ul.parent
{
width: 1000%;
}
But I think that your problem are here:
.center
{
width: 70%;
overflow: hidden;
}
Will come a time where the .center will not allow to show new LIs.
I recommend to you, because you will add LI tags with jQuery, detect the first width of the .center ul.parent and increment it programmatically in each new LI addition.
From what you tell me in the comments I make another demo to see if it help you --> http://jsfiddle.net/Galled/KQqYm/4/