I wish to make the all the list items to be centered. or at least 20 pixels from the top.
I have tried negative margin-top but that didn't work.
Any suggestions?
Here is the site. http://freddygonzalez.me/dev/85
The simplest way to do this is to remove display: inline and margin-top and add the following rules to the li elements:
float: left;
line-height: 49px;
Note that this won't work if a menu item can have two lines of text.
Related
I am trying to left align a list inside a css grid. However, the text-align and setting the margins and padding don't seem to work. How can I left align the ul list. Codepen: https://codepen.io/centem/pen/oNvZLgP Thankyou.
ul {
list-style: none;
text-align: left;
}
li {
padding-left: 0;
margin-left: 0;
}
Use the below CSS
ul{
padding-left: 2%;
}
You can accordingly change the padding value depending upon the requirements.
Also if you want your list items completely aligned to the left, get rid of the following padding line under the .grid-page > div selector:
padding: 0px 20px;
To complete Not A Bot's answer (it's always good to know why something works), the reason behind your issue was the default padding of unordered lists.
UL Default CSS Values
These values are there to make lists look like written documents lists but obviously, that's not what we want in many cases.
Usually, margins and paddings of elements should be reset. In your case:
ul {
padding: 0;
}
should be enough, since you're already setting a padding for the container.
I am trying to align the icons under the Share This Course icon horizontally, it works in the sidebar but not my content. Any advice?
Example here
http://www.themarketinggroup.ca/canscribe/courses/medical-transcription-healthcare-documentation-course/
The icons in the sidebar are floated to the left.
One solution would be to add a rule of float: left to the .widget li selector, like so:
.widget li { float: left; }
You could then add the desired amount of spacing between each icon with padding or margin rules.
You could also use flexbox. What you would do in that case is make the ul with a class of socials display: flex and add the additional rule of justify-content to give the icons some horizontal spacing. Something like this:
ul.socials { display: flex; justify-content: space-around; }
I like the latter solution because it takes care of spacing the icons for you.
The possible ways to achieve this one is by using float
.display_inline li {
float: left; // inline elements in left
margin: 10px; //to create some space between the icons
}
Heres my website unbotttled.com and the categories sub menu does not align with its parent categories? Is it to do with the padding, is there another way to solve this other than removing the padding? Any help would be greatly appreciated. Thanks in advance.
The <a> and the <ul> are both being padded by the containing <li> "Categories". To help you understand - If you look closely the drop down is getting lined up to the left edge of "Categories" because of the containg <li>'s padding:15px.
There are a few ways to fix this, using a negative margin is one:
#menuleft ul li:hover ul {
display: block;
position: fixed;
visibility: visible;
width: 130px;
padding: 0;
padding-top: 20px;
margin-left: -15px;
Having a thorough understanding of the CSS Box Model is imperative for modern Web Development. It's fairly easy to understand.
Learn about it here: http://www.w3.org/TR/CSS2/box.html
It is not positioned correctly because the li it is inside of has padding of 15px. So it is to the right by 15px.
Add this CSS to the ul sub-menu margin-left:-15px
Fixed it! I have added a negative left margin to the gRow class equal to the width of the surrounding container (in my case 744px). It seems to work both in Chrome and IE. It doesn't work in my fiddle though :-?
I have an unordered list depicting a tree-like structure. Each li contains a div element with class="gRow". This div contains other divs with "cells" in a grid. I would like to add a border-bottom on each gRow (or li?) maintaining the padding-left on the li but at the same time having the border-bottom to be the same width for all li/gRows (the entire width of the container).
I'm adding new levels dynamically using Ajax and I don't know the depth of the structure.
This is how far I have gotten:
My css is like this
ul {margin: 0;padding: 0;list-style-type: none;}
li { padding-left: 16px;}
.gRow { border-bottom: 1px #CCD9E0 solid;height: 20px; margin-left: -744px;}
Here's a jsFiddle: http://jsfiddle.net/kJQeq/
Hope you can help.
Thanks in advance.
Try setting the margin to 0 on the li as well.
ul {margin: 0;padding: 0;list-style-type: none;}
li { margin: 0; padding-left: 16px;}
.gRow { border-bottom: 1px #CCD9E0 solid;height: 20px; }
I have added a negative left margin to the gRow class equal to the width of the surrounding container (in my case 744px). It seems to work both in Chrome and IE. It doesn't work in my fiddle though :-?
I'll admit from the outset that I'm a self-semi-trained hack when it comes to html and css.
The problem I need help with is a drop down menu that is not centering in the container div. I need to have the menu behave like the one in the live site http://wedevents.com.au/index.htm
PROBLEM PAGE EXAMPLE: http://www.wedevents.com.au/index.asp (it's a work in progress so please forgive the mess)
Thaks for any help!
Regards,
Rick
I'm assuming you mean you want the links across the top to be centered on the page?
Floating the ul left won't help that :p. On ul.topnav, remove float:left and change the following properties:
margin: 0 auto;
padding: 0 85px;
width: 630px;
height: 36px;
I would adjust the width on your .topnav and adjust the padding as well.
Then on your ul.topnav li ul.subnav add this left:-31px; this shall make your drop down center below the weddings option
Create another div that will contain your ul class=topnav, set the width that fit in the page wrapper and add this as the property of ul:
margin: 0 auto;