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.
Related
I have a list component with a custom bullet defined as a before pseudoelement:
li:before {
display: inline-flex;
width: .8rem;
height: .8rem;
margin-right: 1.5rem;
margin-left: -2.9rem;
background-color: #00c878;
border-radius: .375rem;
content: "";
}
It all works fine as long as the li content doesn't overflow the container. Then, the whole content just jumps down a few pixels and leaves a weird top margin between the bullet and the content.
I have recreated it here.
I have managed to make it disappear using work-break: break-all, but that is of course not a susteinable solution.
Any tips?
So many solutions. but this one worked best
Please Set position to absolute on the pseudo element and remove margin. My solution uses positioning to get wrapped lines automatically line up correctly.
Advantages:
very compact code
works with any font size (no absolute pixel values contained)
aligns rows perfectly (no slight shift between first line and following lines)
.container {
width:170px;
border:1px solid red;
}
ul {
margin: 0;
padding: 0;
}
li {
padding-left: 35px;
margin-bottom: 24px;
margin-top: 0;
font-size: 16px;
line-height: 24px;
list-style-type: none;
position:relative;
word-break: break-all;
}
li::before {
width: 4px;
height: 4px;
background-color: #00c878;
border-radius: 375px;
content: "";
position: absolute;
left: 10px;
top: 9px;
}
<div class="container">
<div class="list unordered">
<h3 class="text-grey-150 h5 "> Branchen ETFs </h3>
<ul class="">
<li>Technologie ETF
<br>
</li>
<li style="/* word-break: break-all; */">Finanzdienstleistungen ETF</li>
<li>Gesundheitswesen ETF
<br>
</li>
<li>Immobilien ETF
<br>
</li>
<li>Industrie ETF</li>
</ul>
</div>
</div>
When doing custom pseudo-elements it's better to position them absolute and relative to the li. See example below, this has fixed your issue:
li {
padding-left: 35px;
margin-bottom: 24px;
margin-top: 0;
font-size: 16px;
line-height: 24px;
list-style-type: none;
position: relative;
}
li::before {
display: inline-flex;
width: 4px;
height: 4px;
margin-right: 15px;
margin-left: -29px;
background-color: #00c878;
border-radius: 375px;
content: "";
position: absolute;
top: 9px;
}
You can use top and left properties to re-position as per your needs.
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.
I just want to move the 3 links(shaped into block) to center. it should be easy but I just can't figure out how to. Center as in horizontally center. its probably a silly mistake or concept problem. I don't want to move the text in centre of box, just want to move the box.
CSS:
<style>
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
header li{
list-style: none;
}
a:link, a:visited
{
text-decoration: none;
background-color: green;
border: 5px solid black;
color: white;
display: block;
text-align: center;
width: 200px;
position: relative;
margin-left: 240px;
margin-bottom: 5px;
}
a:hover, a:active{
color: black;
background-color: red;
margin-bottom: 10px;
font-size: 1.5em;
}
header li:nth-child(3)
{
font-size: 25px;
}
HTML:
<header>
<ul>
<li> Google</li> <!-- notice here how when 9i add "http:// the link will open and if don't it won't-->
<li> Facebook </li>
<li> Wikipedia </li>
</ul>
</header>
How about displaying your whole unordered list as an inline block and centering the text content within your header, making the list centered:
header{
text-align: center;
}
header > ul{
display: inline-block;
}
JSFiddle
Note: I removed the margin from your anchors, since I assumed this was some attempt at making them more central. Correct me if I'm wrong.
You can also add margin: 0 auto; to the actual anchor tags and remove your margin-left attribute. Fiddle
As it's been said, to center blocks horizontally you should use automatic margins on both left and right sides. It will work with any block (not inline elements) that has a specified width. Inline elements can easily be converted into blocks with display: block;
div{
display: block;
margin-left: auto;
margin-right: auto;
background-color: red;
height: 100px;
width: 100px;
}
<div></div>
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;
}
I have a unordered list, which is inside a div element. The goal is to make list elements fill the <div> from one side to the other perfectly.
Right now the left side is positioned just as I need, but I need the right side to look the same way. Hopefully you get the idea of what I mean.
Fiddle
HTML code:
<div id="currency">
<ul>
<li>Currency £</li>
<li>Sign in</li>
<li>My Account</li>
<li>My Gifts</li>
<li>My Basket</li>
</ul>
</div>
CSS code
#currency{
height: 11px;
width: 360px;
background-color: green;
float: right;
margin-top: 11px;
margin-right: 11px;
line-height: 11px;
font-size: 11px;
text-align: justify;
}
#currency ul{
list-style-type: none;
margin: 0;
padding: 0;
display: table;
table-layout: fixed;
width: 100%;
}
#currency ul li{
display: table-cell;
}
I think want you want to achieve is using text-align properly.
#currency ul li{
text-align: center;
}
#currency ul li:first-child {
text-align: left;
}
#currency ul li:last-child {
text-align: right;
}
Fiddle
Try the flexbox model since it's meant for situations like this:
The flex CSS property is a shorthand property specifying the ability
of a flex item to alter its dimensions to fill available space. Flex
items can be stretched to use available space proportional to their
flex grow factor or their flex shrink factor to prevent overflow.
#currency {
width: 500px;
background-color: green;
float: right;
margin-top: 11px;
margin-right: 11px;
line-height: 11px;
font-size: 14px;
text-align: justify;
padding:10px;
vertical-align:middle;
}
#currency ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content:center;
width: 100%;
}
#currency ul li {
flex-grow:2;
text-align:center;
margin:3px;
background:#fc0;
height:20px;
padding:5px;
}
See fiddle
All colors, paddings and margins were added in order to show how it works since your tiny example is very difficult to see