I'm working on my portfolio site, and I have no idea how to get rid of the white space.
Based on the inspect element there is styling to ul.AMSI but it is not used in my styles.css
image is hosted at
https://i.imgur.com/jWRzy86.png
I tried to inspect element, but it doesn't help.
Any hints on this will be much appreciated.
URL : https://portfolio-thomas-2019.herokuapp.com/
update
Thanks again for the support
what I have tried
removing all AMSI Li padding and margin
.AMSI li {
list-style: none;
display: inline-block;
text-align: center;
color: #EC7108;
}
commented out margins and paddings in different areas around my issue in hopes of finding the issue but I cannot find it.
I went to the extremes of changing the body background to the hex #EC7108.
Given my experience I don't know of any other angles to approach my issue but ask all the great developers out there.
The <ul> element is part of the problem. You should add this style to it
.AMSI {
margin-bottom: 0;
padding-bottom: 0;
}
this by itself does not fix it. However, there is a stray <p></p> on the page, just after this <ul> element.
You should remove this <p> tag (assuming it's empty because you are not using it.)
This <p> tag has a margin-bottom of 1rem which is causing the white space
I just looked at the page and it would appear the problem is related to the style associated with the un-ordered list your social media icons are in.
.AMSI li {
list-style: none;
display: inline-block;
text-align: center;
color: #EC7108;
padding: 4px;
margin-bottom: 10px;
}
The margin bottom is most likely the problem.
There is margin-bottom in your ul class="AMSI" you need to set margin-bottom: 0
And you got a p tag below ul class="AMSI" got empty content inside and it got margin-bottom also. Then just remove it too.
Related
(Edit: I'm new to coding, so my apologies for stupid mistakes)
I can't find any errors in my coding, but my images are positioned slightly off-centre, to the right :( The images have been entered using a list format, but I'll just copy one image and then the relevant CSS:
<nav>
<ul>
<li>
<img src="Images/mountains.jpg" alt="Mountains">
</li>
</ul>
</nav>
(Updated) CSS:
li {
text-align: center;
margin: 0 0 40px;
}
I cant find what's wrong :(
Is it possible that my table is out of line? (Reference image in comments)
My ul element had some default padding, so I removed all padding in my universal selector.
It's always best practice to use reset css or normalize and then style your elements as per your need.
As stated in the commemt position: center; is not valid css.
To align to the center, give your li elements a text-align a center like:
li {
text-align: center;
}
Figured it out!
My ul element had some default padding, so I removed all padding in my universal selector.
I am trying to learn basic HTML and CSS. This is the code I have currently:
http://jsfiddle.net/spadez/vvDJ9/3/
There are two issues with the code:
Currently not only is there a large gap between the list items
The list in the header doesn't have the top padding correctly applied. It should sit in the middle of the header.
Here is the relevant bit of the code:
header a { padding: 15px 20px; background-color: #16AD8F; }
This is because your lis are inline-blocks. You can, of course, redo the code and fix that using floats, for example... or get rid of the whitespace by joining lis together (</li><li>..., see here: http://jsfiddle.net/vvDJ9/6/), etc...
But there's a nice little hack to get rid of the space: set font-size: 0; to their parent ul element: http://jsfiddle.net/vvDJ9/5/
#header ul {font-size: 0;}
And to get the top padding correctly, just set your anchors to display: block;: http://jsfiddle.net/vvDJ9/9/
#header a {display: block;}
I'm having some problems with my ul-list after using applying CSS-reset.
When the text in the li is long and it breaks to a second line, the text begins under the bullet. I'd like it to start with the same margin/padding as the text on the right side of the bullet.
Sort of hard to explain, but if you look at the example-image. The left-image is the list today. "motta varsel [...]" begins under the bullet, but I'd like it to look the picture on the right.
How can I do this with CSS? I assume there is something very simple I've overlooked, but I can't figure out what. Google searches did not return anything useful either.
The li tag has a property called list-style-position. This makes your bullets inside or outside the list. On default, it’s set to inside. That makes your text wrap around it. If you set it to outside, the text of your li tags will be aligned.
The downside of that is that your bullets won't be aligned with the text outside the ul. If you want to align it with the other text you can use a margin.
ul li {
/*
* We want the bullets outside of the list,
* so the text is aligned. Now the actual bullet
* is outside of the list’s container
*/
list-style-position: outside;
/*
* Because the bullet is outside of the list’s
* container, indent the list entirely
*/
margin-left: 1em;
}
Edit 15th of March, 2014
Seeing people are still coming in from Google, I felt like the original answer could use some improvement
Changed the code block to provide just the solution
Changed the indentation unit to em’s
Each property is applied to the ul element
Good comments :)
Here is a good example -
ul li{
list-style-type: disc;
list-style-position: inside;
padding: 10px 0 10px 20px;
text-indent: -1em;
}
Working Demo: http://jsfiddle.net/d9VNk/
I second Dipaks' answer, but often just the text-indent is enough as you may/maynot be positioning the ul for better layout control.
ul li{
text-indent: -1em;
}
I would set the fish in a :before style in css. Also you have a spelling mistake in your HTML. It should be <ul>. Font Awesome should give you the code to put into content.
li {
padding: 0% 0% 5% 3%;
width: 100%;
list-style-position: outside;
position: relative;
}
li:before {
content: '';
position: absolute;
width: 5px;
height: 5px;
background: black;
top: 10px;
left: -5px;
}
<div class="col">
<ul>
<p class="col align-self-center">
<li>5% marketing and strategic alliances</li>
<li>10% Metadata release (Rarity tools) Focus on community growth</li>
<li>25% Listing in Magic Eden</li>
<li>50% First Donation to partners</li>
<li>65% Increase in marketing investment</li>
<li>80% Bluepaper Publication of Phase 2</li>
<li>100% Second Donation to partners</li>
</p>
</ul>
</div>
</div>
I am having an issue with a particular aspect of a web dev that I am doing at the moment with regards the css styling.
What I have is the following HTML:
<div id = "spaninsidea">
<ul id="spantest">
<li><a id="nav-button-one" href="javascript:return false;"><span>Link 1</span></a></li>
<li><a id="nav-button-two" href="javascript:return false;"><span>Link 2</span></a></li>
</div>
Styled with the following CSS:
#spaninsidea { background: #494949; padding: 5px 5px 5px 37px; overflow: hidden; margin: 0 0 10px 0; }
#spaninsidea li { display: inline;}
#spaninsidea li a { text-transform:uppercase; text-align:center; border-radius:5px;
display: block; margin-right:50px; width: 100px; height: 100px; background-color: green;
float: left; }
#spaninsidea li a span {background-color:orange; margin-top:50px}
What I am trying to get is the spaned text inside the link to sit in the middle of the a tag. When I try to apply the margin setting on the span it simply sits still, however if I change the font color etc it plays cricket. I cant figure why it styles but wont budge.
I will confess the front end stuff is new to me so if there are any glaring issues that you can see in general please do point them out.
Cheers
Usually you shouldn't have a span within an a. That would be the first part... I would suggest try to apply a text-align:center; to the span as well.
Update: See a working version here: http://jsfiddle.net/2eLer/ You just have to set the line-height of the span equal to or greater than the height of the a.
It's important to remember that spans are inline elements not block elements and as such, do not respond to margin and padding like you would think they do.
There is a css display property called "inline-block" that allows elements to float like spans and other inline elements do, but also makes them behave like divs with regards to margin and padding.
You shouldn't use <span> at all, but change the padding property of the link itself.
I have a navigation layer, and I cannot seem to get the links to center within.
This is the stylesheet I am using
.Layer1 {
position:absolute;
width: 10%;
height: 95%;
list-style-position: outside;
list-style-type: disc;
background-color: #D2FFFF;
}
.Layer1 a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 600;
color: #0066FF;
text-decoration: none;
text-align: center;
}
Using standard a href links makes no difference, nor does specifying the style to be a href. I am wondering what I am missing.
Have you tried adding:
text-align: center;
to .Layer1 {}?
I am assuming by your style properties that you are applying them to a <ul> element. They have pretty wacky default padding/margin properties (a good reason to always use a reset). If you set the text-align: center; as suggested by Stuart AND then set padding: 0; it will be centered as you might expect. Just tested it on IE and FF.
Links are inline elements, so setting text-align center on them won't achieve anything. Try making the link a block with an assigned width and then applying text-align center.
Is layer 1 a div or a ul? if it is a div, text-align: center should work, as long as you haven't set display: block on your a tags.
to center a block element, you need to use margin: auto. to center an inline element, it is text-align: center. if that doesn't work, it has to do with your markup, or some other way that styles are getting overridden. I would highly suggest using firebug to see what is going on, I used to have these "wtf is going on" moments all the time with html, but since getting good with firebug they rarely last more then a few minutes.
The other thing is text-indent is for indenting the first line of a paragraph. use padding-left to add whitespace inside a block element, or margin-left to add it outside.