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;}
Related
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.
Need a guidance from CSS pro. how can i get the expected result. Appreciated for any help.
What i've tried so far : JsFiddle Demo
Simply give your <li> elements a margin. For example:
ul li {
margin: 0 0 10px;
}
To avoid extra spaces below the list you can remove the last margin with the last-of-type psuedo selector:
li:last-of-type {
margin-bottom: 0;
}
Assuming that you are content with the static fixed-width layout, you can also force the widths of all list items with:
ul li {
width: 145px;
}
Here your adjusted fiddle.
For further reference see the tutorials at w3cschools. Specifically for the CSS width and margin properties, and the last-of-type psuedo selector.
I'm new so don't mind if I ask some pretty dumb questions, I've been trying to create a navigation menu that has links that pop up once the mouse hovers over, it's been great so far, the only problem I have is that the spaces between the links appear to be uneven.
Now I've searched high and low (I'm bad with google) for an answer but just can't seem to find one.
I've tried the following CSS.
padding: 0;
margin: 0 0 0 0;
TL:DR; space between an unorganised row of vertical multiline links is uneven.
Here's the http://jsfiddle.net/1f9b0h6p/ , help please? ;-;
Best regards,
Vernon
Remove unwanted line-height from the ids #top, #top li li, #top li li a and height from the id #top li:hover li
Fiddle Demo
In #top li:hover li{ change the height from 33px to auto. here is the jsfiddle
On http://www.w3schools.com/cssref/playit.asp?filename=playcss_ol_list-style-type&preval=none, a nice overview is provided for the different list-style-type values.
However, for the value none, it still reserves some horizontal space for the empty list symbol. Is there a way to remove this horizontal spacing, so that the text actually moves to the left as if it was no list? I would like to use text-align:center on the list items, and this horizontal spacing makes them not really centered. And I need to use <ul> because the CMS brings it in that way.
Basically, by default list-style-type:none does a visibility:hidden on the bullets, while I would like to achieve display:none on the bullets instead. What would be the proper way to do this?
It's the browsers default styling that's adding that space, just use a CSS reset to reset all of the browsers default styles. Most block elements have some default margin/padding .. even the <body> element has 8px of margin applied to it by default.
Here is a link to Eric Meyer's reset: http://meyerweb.com/eric/tools/css/reset/
Just to see for yourself, add:
ol {
margin: 0;
padding: 0;
}
/* This would be declared in the above reset */
Make sure to add browser reset styles before you start working with CSS.
You have to add this:
ol, li {
margin: 0px;
padding: 0px;
}
for this question.
A better way to this these days I found recently is to set the <ul> to display: contents;. Thus the css should look something like this:
ul {
list-style-type: none;
display: contents;
}
ul > li {
padding: 0;
margin: 0;
text-align: center;
}
This should do the trick.
add
margin:auto;
float:none;
display block; to your css for the ol element, this will remove the padding and align the elements in the centre
If I have user-generated content, such as:
<p>my paragraph</p>
<ul>
<li>item1</li>
<li>item2</li>
</ul>
This outputs with a paragraph gap between the end of the paragraph and the list like so:
My paragraph:
item1
item2
I know I can get rid of the gap in my CSS by setting margin-top on the UL tag and margin-bottom on the p tag, but is there a way to do it without affecting the margins between actual paragraphs?
The content is user-generated with a limited set of tags available and no fonts, sizes... available so all formatting should be done in CSS, if possible without having to put classes in the tags.
I know, because of the way margin collapsing works in CSS, I could usually set
p { margin-bottom:0; }
li { margin-top:0; }
The separation would be correct in both cases as the margin-top property on the p tag would still be 1, but I already set margin-top to 0.2em for a smaller gap between h2 and p tags.
This is a perfect use case for the sibling selector. However, it doesn't work in IE6 or IE7.
p { margin: 0; }
ul { margin-top: 0; margin-bottom: 0; }
p + p { margin-top: 15px; }
p + ul { margin-top: 3px; }
ul + p { margin-top: 3px; }
So, I'm setting the relevant margins to 0 on the p and the ul, and then telling any compliant browsers to look for a p that's after a p and add a top margin to it. Same for a ul after a p (though it's a small margin), and a p after a ul (large margin again).
Again, this doesn't work in IE6 and 7, so you may want to use conditional comments to get a decent (if not perfect) look on those browsers.
If you want to target ul elements, then use an adjacent sibling selector.
p + ul { margin-top: 0; }
There isn't any decent way to set the p bottom margin this way, but you could use a negative margin on the ul if needed.
The other answers work well, again, as they said, except for IE6/7. However, realize that you will not affect margin between paragraphs if you set your p bottom margin to 0 as long as you set your top margin for p to be the greater of the two values that your margins are currently. As long as you don't have an issue setting the ul top margin to 0 then your p margin spacing will not be affected. So let's say you have this currently defined:
p {margin: 10px}
Setting it to this:
p {margin: 10px 10px 0}
Will not affect your margin between p tags (which seems to be your concern), as the 10px bottom margin is collapsing with the top to make the gap only 10px. If your bottom margin is currently set greater than the top margin, you will need to change your top margin to the greater value to see the same spacing you have been. Now, if you want some bottom margin on the last p then you will have to accommodate for that.
If what the user types ends up in a specific wrapper div that you can target (via id or class), then you could just set these styles for p and ul to apply only within that wrapper if that is a concern.
This depends on the rest of your code, but it should be ok for you to do:
p{ margin-bottom:0; }
You may think this will affect all of the rest of your paragraphs, but due to CSS's "margin-collapsing" feature it actually shouldn't - provided you're in standards mode with a valid DOCTYPE.
If you have construction like below:
<p>my paragraph</p>
<ul>
<li>item1</li>
<li>item2</li>
</ul>
And CSS like:
p { margin: 0 0 25px 0; }
it can cause a gap between P and LIST.
I resolved this problem using a negative margin:
p + ul { margin-top: -20px; }