I am trying to use this chat snippet in the angular project. The point is that I can't include jquery parts so I need just its HTML and CSS parts. Here is the original one:
https://bootsnipp.com/snippets/exR5v
I copied it on Codepen and there were bullets on the left side of each user in chat list.
I also added list-style-type:none;
But it just removed bullet points and the extra margin was left there instead of bullets.
Here is the link of my example: https://codepen.io/artyombaykov/pen/pxGyjY
I made changes in this part for removing bullet points:
#frame #sidepanel #contacts ul li.contact {
position: relative;
padding: 10px 0 15px 0;
font-size: 0.9em;
cursor: pointer;
list-style-type:none;
}
How can I remove that left side extra margin which was appeared because of bullet points?
How to fix this
Overriding the style of the ul element inside #contacts to 0 or 0px.
#contacts ul {
padding: 0px;
}
Adding the above code to your stylesheets will fix the issue.
Why did this happen
This extra padding was because of this below property added in the stylesheets common to all ul, menu, dir elements.
padding-inline-start: 40px;
Add this css and it will fix your problem.
#frame #sidepanel #contacts ul {
padding-left: 0px;
}
Add to ul list-style-type:none
#frame #sidepanel #contacts ul {
list-style: none;
padding: 0;
}
Related
I set up my .nav class for my nav menu but when I use it it seems to cause problems and when I remove .nav and leave just ul li it fixes it but that also has a margin problem.
the problem is on the bottom I commented /Problem/
http://jsbin.com/fupewijame/1/
You must remove .nav
.nav ul li{
width: 100%;
}
and change it to
ul li{
width: 100%;
}
that kinda fixes it but you can see a margin error. I also must use .nav class as I don't want it global. Please help I can't see the bug
I'm not entirely sure what you'd like it to look like with 100% width. If you give a little more information I can help further.
However, I noticed a few things that might be confusing your CSS.
1) The height is showing as "0" due to a float being applied to the list items. When you apply float to your items they are removed from the normal flow of the document.
To solve, try first removing this:
.nav li {
float: left;
}
2) Most browsers add default padding and/or margin to ol and ul
I recommend you reset, and then try to style.
RESET:
ul {
margin: 0;
padding: 0;
}
TARGET RE-STYLE:
.nav {
margin: /* your style here */;
padding: /* your style here */;
}
instead of :
.nav ul li{
width: 100%;
}
use:
.nav li{
width: 100%;
margin-bottom: 0;
}
if you don't want to have a margin
.nav{
margin: 0;
padding: 0;
}
This
.nav ul li{
width: 100%;
}
is saying :
an element with class .nav
with a descendant of type ul
with a descendant of type li
Since .nav is a class of your ul, and not of an ancestor of your ul, you should use
ul.nav li {
width: 100%;
}
that instead means :
an element of type ul with class .nav
with a descendant of type li
EDIT: for the margin problem, you should probably use position: relative; instead of position: absolute;, that should not be used if not completely aware of how it works
My problem is that I've got a div at the top of my site that has a dropdown menu with a float to the left, the thing is that under that div where I want to have a header whenever I hover over the menu the header floats to the left as well.
I tried to do a clear div after the top div then on css use clear:both; but it didn't really help
Here's the JSfiddle:
http://jsfiddle.net/Safushi/XRNP5/
ul {
font-size: 16px;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px 15px 5px 15px;
background: #464646;
white-space: nowrap;
}
ul li a:hover {
background: #565656;
}
is some of the code for the menu (had to paste some code to be able to paste JSfiddle link).
It will be fixed by adding a
position: absolute;
to the ul that contains the submenu.
The child ul element needs to be absolutely positioned if you don't want it to effect the other elements.
Example Here
#top li > ul {
position:absolute;
width:100%;
}
And as Adrift mentions, you may also want to give the ul a width of 100%.
You got the layer of HTML file right,but the property "position" wrong.
Demo
Once a tag's settled position:absolute; ,it will only be positioned referring to its containing block.So you need to set #menu{postion:relative;} to let its parent-tag be the containing block.In fact,now the submenu is totally deleted from the normal flow,so it won't affect the styles of other tags.
Moreover,I highly recommend you to resist to use descendant selectors,which not only let your browser slower,and your code maintenance much more complex as well.
I was working on this site and added the header menu with drop downs. The third menu item WINDOWS SUPPORT sub menus are aligned to the left while others are aligned to to the center of the dropdown.I have edited the css to
.sub-menu li a {
text-align: center;
}
but the dropdown area is aligned to the right compared to others.Please help me in making it align correct.Thanks!!
i checked your site. just add these two classes in your css. it will resolve the problem.
#mainmenu .menu-item-292 ul
{
left:-15px;
}
#mainmenu .menu-item-292 li
{
padding-left:15px !important;
}
watch your css file and remove this 2 lines
#mainmenu .menu-item-291 a{margin-right:15px;}
#mainmenu .menu-item-292 a{margin-left:-16px;}
If you want to make more space use padding and border-box:box-sizing
You have
#mainmenu .menu-item-292 a {
margin-left: -16px;
}
It's pulling over both the "Windows Support" anchor, and all anchors below it.
Try this
Add margin-left: 0; css for given anchor tags into your style.css file I guess at line no. 383
#header #mainmenu ul.children li a, #header #mainmenu .sub-menu li a {
color: #FFFFFF;
font-family: 'menu-font' !important;
font-size: 13px !important;
padding: 5px 20px;
text-align: left;
text-transform: uppercase;
margin-left: 0;
}
I hope this solves your problem!
I am a developer and I don't know CSS properly. Here I am stuck with a simple problem. I am using Sitefinity CMS for development. I one of the page I used ul and li. CSS given by designer for li is as below
.listing li {
list-style: circle url(/images/default-source/main_library/bullet.gif?Status=Temp&sfvrsn=2);
margin-bottom: 7px;
}
I just copied his HTML into my page but I observed li bullets are not at the same position as designer gave. I used Developers Tools and inspected. My CMS adding its own style to li as below
body, nav, ul, li, a {
margin: 0;
padding: 0;
}
When I disable padding: 0; then it appears to be at desired position. But how can I disable padding: 0; from development environment. Means any CSS that can remove padding: 0; effect?
You need to apply padding-left: 20px; to the ul.
Add this to your css:
.listing { padding-left: 20px; }.
Edit: looks like you already have styles defined for .listing, so just append that to the .listing block, I believe it's line 730 in common.css.
The more accurate the selector, the more precedence it has.
ul li { padding:5px; }
#my-Div div.another-div ul li { padding:0px; }
In this example, the more specific li element will use the 0px padding instead of the 5px. You can also add !important after an attribute if you need to ultimately override and existing style on an element.
ul li { padding:0 !important; }
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