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; }
Related
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;
}
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 have one CSS file which I found it in one website, but I have a confusion about it. The code is:
ul li a {
background-color: FFFFFF;
border: 1px solid 86B3E6;
color: 2F62AC;
display: block;
font-size: 17px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
text-decoration: none;
direction:rtl;
}
So, what I am styling here? as I know, it should be (( a )) tag, so if I add
display:inline-block;
to (( ul )) tag styling which I found here (( UL display: block )) it should work, but unfortunately I failed to make it.
Maybe I will have one more question later, but for timing i want to understand the code and correct my information.
Best regards and thanks in advance,
Gharib
edit:
I want to use both inline-block and block, and here is my full code:
ul.ablock {
display: block;
}
ul.aninline {
display: inline-block;
float: right;
width: 50%;
}
a {
background-color: FFFFFF;
border: 1px solid 86B3E6;
color: 2F62AC;
display: block;
font-size: 17px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
text-decoration: none;
direction:rtl;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
}
a:active, a:hover {
background-color:2F62AC;
color:FFFFFF;
}
and the html is something like:
<ul class="ablock">
<li><div align="center">Find</div></li>
</ul>
<ul class="aninline">
<li><div align="center">Back</div></li>
<li><div align="center">Next</div></li>
</ul>
The above selector will target all a elements which are nested under li which is further nested under ul, that's a general element selector, which will target all the a element which falls in that pattern. It is better to be specific and use a class instead, like
ul.class_name li a {
/* Styles goes here */
}
The above selector will only target a elements which are nested under li which are further nested under an ul element having a class called .class_name
As you commented, it seems like you want to target a ul element, now instead of using something like
ul {
/* Styles goes here */
}
Will apply the styles to all the ul elements, instead, be specific, either assign a class to your ul element and use a selector like
ul.class_name {
/* Styles goes here */
}
Or you can also use a nested selector like
div.wrapper_div ul {
/* Styles goes here */
}
Here, in the above selector we are selecting all the ul which are nested under .wrapper_div.
Just a side note, you seem to be confused so don't wanna confuse you more, so don't read this, you can simply ignore, but if you want to learn, just make sure that, if you are targeting ul, make sure you use > selector which will select direct child, as users tend to nest a ul element under li, say for example dropdown menu, this is common, so it is better to use a selector like
div.class_name > ul { /* Selects first level ul elements */
/* Styles goes here */
}
ul > li > ul { /* Selects nested level ul elements */
/* Styles goes here */
}
You are targeting the <a> element here. The reason for the ul and li is that, you're targeting a specific nesting of a. Namely, you are targeting a <a> that is a descendant of <li> that is in turn, a descendant of a <ul>.
If you want to add dispay: inline-block to all <ul> elements then above the rule for ul li a you want to add:
ul { display: inline-block; }
I am trying to create a very simple "no-frills" tab using html & css. For this, I have a bunch of li elements and inside each of these, there is a "a href" element. Now, when i look at the output in IE & Firefox (after setting the styles to make the list display horizontally with proper border and everything), I can see that the "a" element overflows the "li" element. How do i make the "li" element resize based on the "a" element?
CSS and html as follows
#tabs ul
{
list-style:none;
padding: 0;
margin: 0;
}
#tabs li
{
display: inline;
border: solid;
border-width: 1px 1px 1px 1px;
margin: 0 0.5em 0 0;
background-color: #3C7FAF;
}
#tabs li a
{
padding: 0 1em;
text-decoration: none;
color:White;
font-family: Calibri;
font-size: 18pt;
height: 40px;
}
<div id="tabs">
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
</div>
You forgot the "#" in the CSS declarations. You've an id="tabs" in you html code which needs to be referenced as
#tabs {
....
}
in the CSS. The rest is fine-tuning ;)
And try
#tabs {
display: inline-block;
}
instead of the display: inline;
Try settings the the display on the li element as "inline-block".
http://www.quirksmode.org/css/display.html
give style to anchor as
display:block
I give
display:block
to both the li and a tags. Then float the li. You can add this code to make the li enclose the a completely:
overflow: hidden; zoom: 1; word-wrap: break-word;
This will clear anything inside.
You could also simply give your li's some padding:
#tabs li {
padding: 8px 0 0;
}
Inline-block is a good way to go (as suggested).
But if you want this to be cross-browser, you need to add som CSS-hacking "magic" :)
One very good tutorial on the subject is http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
Using the method from that article, you'd end up with the following CSS:
/* cross browser inline-block hack for tabs */
/* adapted from:
/* http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */
#tabs ul,
#tabs li,
#tabs li a {
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: bottom;
margin:0; padding:0; /* reset ul and li default settings */
}
/* The rest is "window dressing" (i.e. basically the tab styles from your CSS) */
#tabs li a {
margin: 0 0.5em 0 0;
background-color: #3C7FAF;
padding: 0 1em;
text-decoration: none;
color:white;
font-family: Calibri;
font-size: 18pt;
height: 40px;
}
Simply display:inline-block on both li & a did the trick for me man. Lists stretched to accommodate whatever I did with the links.