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.
Related
How can I align all my bullets perfectly?
Expected result: Bullets line up to one another
Actual result: They move depending on how big the text is for the
JSFiddle for clarification:
https://jsfiddle.net/hk12hhp1/
Result I want (look at red line):
http://prntscr.com/grt24m (make bullets aligned just like red line is straight)
Fiddle code:
<div id='center-everything'>
<ul>
<li>test1wef</li>
<li>test2ferwfwergwerg</li>
<li>test3grew</li>
</ul>
</div>
#center-everything{
text-align: center;
background-color: gray;
height: 100px;
width: 200px;
list-style-position: inside;
}
Note: I still want text-align to be center
An alternative solution, using pseudo-element to create the bullet, with position: absolute positioning it on the left.
#center-everything {
text-align: center;
background-color: gray;
height: 100px;
width: 200px;
list-style-position: inside;
}
ul {
list-style: none;
}
li {
padding-left: 20px;
position: relative;
}
li:before {
content: '☻';
position: absolute;
left: 0;
top: 1px;
font-size: 10px;
}
<div id='center-everything'>
<ul>
<li>test1wef</li>
<li>test2ferwfwergwerg</li>
<li>test3grew</li>
</ul>
</div>
Your question isn't at all clear about exactly what you mean by wanting the bullets vertically aligned on a centered list.
Having the bullets all the way to the left in a centered list is not any sort of standard typography conventions, so I think you might really be asking is for the entire left-aligned list inside the container? I've seen this asked more often than having the bullets float all the way to the left.
#center-everything {
text-align: center;
background-color: gray;
height: 100px;
width: 300px;
list-style-position: inside;
}
ul {
text-align: left;
padding-left: 0; /* remove any padding to stop it throwing off the "center" */
margin: auto; /* center the ul */
display: inline-block; /* hack to make the ul only as wide as its contents */
}
<div id='center-everything'>
<ul>
<li>test1wef</li>
<li>test2ferwfwergwerg</li>
<li>test3grew</li>
</ul>
</div>
To do this, you just need to change the styling for the ul, nothing else.
#center-everything{
background-color: gray;
height: 100px;
width: 300px;
}
li {
display: inline-block;
}
li:before {
content: "■"
}
span {
position: absolute;
left: 150px;
transform: translateX(-50%);
}
<div id='center-everything'>
<ul>
<li></li><span>test1wef</span><br>
<li></li><span>test2wef</span><br>
<li></li><span>test3wef</span><br>
</ul>
</div>
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.
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 need to have an UL on the right side of a SPAN (http://jsfiddle.net/Shg9L/8/).
When the width is not enough I would like the UL to keep being on the right side of the SPAN but the LI items to start stacking ...
The problem is that when I resize down the window the UL goes under the SPAN.
The code I currently have is (http://jsfiddle.net/Shg9L/8/):
HTML
<div>
<span>Categories</span>
<ul>
<li>Book</li>
<li>Computer</li>
<li>Tablet</li>
<li>Toy</li>
<li>Music</li>
<li>Audio</li>
<li>Game</li>
</ul>
</div>
CSS
div {.clear;}
div span {
background-color: #E0E0E0;
float: left;
margin-right: 8px;
margin-bottom: 8px;
padding: 8px;
}
div ul {
list-style: none;
margin: 0;
padding: 0;
float: left;
.clear;
}
div ul li {
background-color: #F0F0F0;
float: left;
margin-right: 8px;
margin-bottom: 8px;
padding: 8px;
}
.clear:after {
content: "";
display: table;
clear: both;
}
Does anyone knows how to solve this?
Thank You,
Miguel
Fiddle
remove float:left; in your div ul
You can use div {white-space:nowrap;} to make sure it doesn't break on the contents of the div. The ul has display:inline-block; instead of float: left;. Float left makes it go to the left, leaving the flow of the text, and inline-block still keeps it in the flow of the text, while not taking up a new line.
demo