i'm pretty new to css and html and trying to make a site to work on improving and learning. I've been searching and cant figure out how to fix my menu in the sidebar, to me it looks like the li's in the ul are floating to the right for some reason, heres my code:
also Jsfiddle Link:
https://jsfiddle.net/h2bpxcxe/
#side-bar #recents {
width: auto;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#recents h3 {
text-align: center;
padding-top: 4px;
}
#recents ul {
margin-top: -10px;
list-style-type: none;
text-align: center;
}
#recents ul li {
padding: 2% 0px;
border-bottom: 1px solid black;
background: grey;
Thanks if somone can help! :)
UL-elements have a padding-left by default.
You need to reset this padding which will center your li-elements in your sidebar.
#recents ul {
margin-top: -10px;
list-style-type: none;
text-align: center;
padding-left:0px; //Adding this will center your LI's
}
FIDDLE
a tip for when dealing with issues like this. Look at the element in your browsers developer tools. Padding and Margin will always be shown clearly there.
I feel there is also an issue with the positioning of the sidebar's list/ul element.
If you apply:
#recents ul {
position:absolute;
}
to your CSS, it will preclude the list element from overflowing the parent, which is the case with your current code. Here's a jsfiddle: https://jsfiddle.net/46t4f5zs/
just do like this
<div id="recents">
<ul><h3>Recent Posts</h3>
<li>Recent One
</li>
<li>Recent Two
</li>
<li>Recent Three
</li>
<li>Recent Four
</li>
</ul>
</div>
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 6 years ago.
I can't figure out how to remove this space from my navbar and the picture..
The CSS code I have for the navbar and the image is:
a {
text-decoration: none;
color: white;
padding-right: 5px;
padding-left: 5px;
padding-top: 0;
}
a:hover {
color: black;
}
header {
background-color: #C0C0C0;
margin: 3px 60px 0;
}
li {
display: inline;
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
nav {
position: relative;
text-align: center;
}
ul {
list-style-type: none;
}
#bikebanner {
position: relative;
left: 65px;
}
#bikebanner is the image id.
And the html goes like so:
<header>
<img src="images/bicyclebanner.jpg" id="bikebanner" alt="People riding bikes." title="Biking">
<h1 id="pagetitle">Cycling Tours</h1>
<nav>
<ul>
<li>About Us</li>
<li>Ask Us</li>
<li>Destinations</li>
<li>FAQ</li>
<li>Reviews</li>
<li>Seminars</li>
<li>Trip Prep</li>
</ul>
</nav>
</header>
Looking for a universal fit as I have other things with white space between them as well.
Thanks.
Try adding this to your css:
img{
display:block;
}
img is of type inline-block which adds a little space which is hard to find.
setting it to block should fix it.
what space you are talking about ?
Keep in mind h1 by default has white space around it
every h1-h6 tag has a margin top and bottom by default. i think if you overwrite this in your css you have what you want.
h1 {
margin: 0;
padding: 0;
}
look at this jsfiddle https://jsfiddle.net/zn7wtdLp/
This drives a lot of people crazy initially and the solution is not obvious, but images, lists and list items end up with a small space like this due to the font size inherited by or set on the img or ul. If you do nothing, the img and ul inherit the body font size (often 14px - 16px) with results in this 0.25rem (or 3.5px - 4px) space issue.
Nav Items
There are two popular solutions:
Float your list items left and make sure that you add a clearfix to your ul or its container, or
My preferred solution: Set the font-size on the ul to 0 and then the font-size on the li to 1rem (or whatever).
So my CSS would look something like this:
ul {
font-size: 0;
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
font-size: 1rem;
}
Images
If you set the image to display: block, this would kill the space below the image. This comes with its own caveats as well. For example, if you want it centered after you switch it to display: block;, you'll need to set the side margins to auto. Something like this:
header img {
display: block;
margin: 0 auto;
}
The problem is display:inline. This treats the elements like text, so if you have
<li>...</li>
<li>...</li>
you have the problem you mentioned, because the linebreaks cause a space.
Try to put your list elements like this:
<li>...</li><li>...</li>
For other solutions see here
I am working on my online shop, and I want to add stages, like in the picture below:
My problem is getting one of the stages to be highlighted, depending on the page it should be shown on. I had a standard div and ul in my HTML:
<div id='stages'>
<ul>
<li class='selected'>Cart</li>
<li>Your Details</li>
<li>Summary</li>
<li>Payment</li>
<li>Complete</li>
</ul>
</div>
And my CSS (so far):
div#stages {
position: relative;
display: block;
height: 40px;
text-align: center;
}
#stages > ul > li:first-child {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
#stages > ul > li {
text-align: center;
width: 110px;
height: 40px;
line-height: 40px;
display: inline-block;
background: #DDD url(/img/bin/bg-steps.png) no-repeat top right;
margin: -3px;
text-indent: -15px;
}
#stages > ul > li.selected {
background: #306bb4 url(/img/bin/bg-steps.png) no-repeat bottom right;
}
#stages > ul > li:last-child {
background: #DDD!important;
padding-right: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
Originally using the image 'bg-steps.png':
Which looks nice. However to get an item selected is proving to be too hard, because it needs a different image at the begining of the LI and at the end. Can anyone help/simplify this for me? See here for a JSFiddle.
EDIT: This is my aim:
Try this one: jsFiddle
Here I added some pseudo classes :before and :after
In here you do not need your pictures in the background and it is made in PURE css and html
With CSS3, you don't need to use images.
It can be achieve using a pure CSS solution with pseudo classes :before and :after.
You can use it to generate triangles before and after each li element.
You can find a full working example in this JSFiddle.
I have used a similar trick in one of my project, and it's well supported in FF, Chrome and IE10. For other browsers, you need to check yourself because I don't test them.
Ok this is simple thing. I firstly created a usual "Home" Button linking to the Home Page of the website, but the word "Home" looked too obvious. Hence I tried to insert an icon in place of that word, but its not fitting properly. I have tried some things in my css but its messing up the whole (used to create the navigation menu). The screenshot is attached. Please if someone can see whats wrong.
CSS:-
ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}
ul#menu li
{
display: inline;
text-decoration:solid;
}
ul#menu li a
{
color: black;
background-color: #f5b45a;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
/*CSS3 properties*/
border-radius: 4px 4px 0 0;
}
HTML:-
<ul id="menu">
<li id="Home_Link"><img src="../../Image_Data/Home_Icon.ico" id="Home_Icon"/></li>
<li>MEN</li>
<li>WOMEN</li>
<li>KIDS</li>
<li>DESIGN!!</li>
With your current styles you will need to play around with the vertical-alignment and margins for the image, something like:
ul#menu li#Home_Link a img {
vertical-align: text-bottom;
margin-bottom: -5px;
}
As a side note, your use of ID's for elements is not recommended - use classes if needed. And reduce the specificity of your style declarations, e.g. .home-link img
Hopefully this is something simple I am missing, I have an OL encompassing a set of LI links.
In Chrome and firefox this works perfectly, in IE8 they appear as a numbered list moving vertically down the page.
HTML:
<div class="header">
<img src="images/header.png" alt="Logo">
<ol>
<li>Home</li>
<li>page2</li>
<li>page3</li>
<li>page4</li>
<li>page5</li>
<li>page6</li>
<li>page7</li>
</ol>
</div>
CSS;
.header {
width:888px;
height:119px;
margin: 0 auto;
margin-top: 20px;
padding:0;
text-align: left;
}
.header ol {
margin-top: -32px;
width: 888px;
padding:0;
margin-left: 10px;
}
.header li {
font-weight: bold;
display: inline;
padding-right: 20px;
padding-left: 20px;
border-right: solid 1px;
border-right-color: #FFFFFF;
}
Is there something basic I am missing here? Doing some searching doesn't seem to provide me with a solution. There are some suggestions of using display: inline; on the LI but this doesn't appear to make any difference.
The behaviour I am looking for is horizontal ordering of the links as displayed in Chrome and Firefox.
IE8 and lower versions of IE have trouble implementing display:inline on many block-level elements.
You could try to float the lis...
so remove the display:inline and replace with something like float:left
I was wondering if you could give me some helpful hints on how to correct this issue? I have a main menu on my site, the code for it is as follows:
li:hover {
background-color: #222222;
padding-top: 8px;
padding-bottom: 9px;
}
And here's a demo of what it actually looks like:
The problem is that when I hover over a menu option (li), the background appears, but it overflows to the outside of the menu's background, and makes it look really dodgy/crap/cheap/yuck!
Note that (obviously) when I change the padding to make it display correctly in these browsers, it appears too small in height in IE! So I'm screwed either way. How can I make little imperfections like this look the same in all browsers?
Update:
HTML (The menu):
<ul class="menu">
<li class="currentPage" href="index.php"><a>Home</a></li>
<li>Services</li>
<li>Support</li>
<li>Contact Us</li>
<li>My Account</li>
</ul>
The CSS:
.menu {
margin-top: 5px;
margin-right: 5px;
width: 345px;
float: right;
}
li {
font-size: 9pt;
color: whitesmoke;
padding-left: 6px;
padding-right: 8px;
display: inline;
list-style: none;
}
li:hover {
background-color: #222222;
padding-top: 8px;
padding-bottom: 9px;
}
You might prevent problems by not changing the padding based on the hover. Furthermore you should hover on the a
Does this work as expected?
JSFiddle example
Your problems are probably due to your use of display: inline. Try setting explicit height on the ul. Doing this with your example worked for me:
ul {
border-bottom: 2px solid black;
height: 28px;
}
I added the border to be able to see where I was aligning to.
BTW, the proper solution is to not use li:hover, but a:hover, as has been stated.