This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Styling the DD tag
Is it possible to HAVE a bullet in front of a <dd> tag just like <li> i cannot use <li> because i need to validate and <dl><dt>and <dd> is just fine
You could achieve it with a background image.
dt { background: transparent url(bullet.png) no-repeat; padding-left: 20px; }
EDIT: added padding-left.
By default a definition list doesn't have bullets. But you can use an image like jessegavin suggested. Remember about margins, paddings and .png problems with IE6 when you use a solution like this.
Good luck.
Shouldn't it be possible to play around with CSS like this?
dt:before {
content: "•";
position: ...;
margin: ...;
}
This is not nice, but... well, using a definition list element if you do not actually want a definition list to be shown is ugly anyway.
Related
This question already has answers here:
How do I style a <select> dropdown with only CSS?
(25 answers)
Closed 6 years ago.
So i am trying to customize a full dropbox (Country Selector) instead of the regular look, I want to add a diferent design to it.
Regular design
[
The Design I want
The first image is the default version with color adjustments, its the version that is working on the website, I want to make the design look like the 2nd picture i've uploaded.
The second version is what I got on photoshop, how i do customize my <select> to the 2nd picture? here is the code i got on css, I tried to use ::webkit and it didn't work.
CSS
.paistofill option {
background-color:#a5e4c9;
font-weight: normal;
white-space: pre;
min-height: 0.0em;
padding: 0px 0px 0px;
border-radius: 50px;
}
.paistofill select{
background-color: white;
color:#a5e4c9;
border-radius: 50px;
}
The select customization has no effect on the element, what do I need to do?
For this you need to use a plugin (or make it yourself) like https://select2.github.io/. You can't really customise the dropdown of the select reliably in every browser. These plugins usually replace and make div elements of the select (and the dropdown) which acts like the normal select. Then you can easily modify these elements with css.
This question already has answers here:
Is there a way to tell an html element to ignore any stylesheets?
(7 answers)
Closed 6 years ago.
I have a simple problem. I have exact same divs (without texts) inside another. I want to style outer csseffect with children, but not inside cssffect.
Let me show you.
Example CSS:
.cssEffect .bold{font-weight: bold;}
//Super Secret Faraday Code
Example HTML:
<div class="cssEffect effected">
<span class="bold">Hey I'm Red!</span>
~~ some random stuff ~~
<div class="cssEffect faraday">
<span class="bold">I shouldn't be bold.</span>
~~ some random stuff ~~
</div>
</div>
And I expect something like this:
Hey I'm Bold
I shouldn't be bold.
But I cant figure out how. I thought I can do something like this:
.cssEffect .bold + .cssEffect.faraday{
//I dont really know what I should write here for not styling here
}
And I thought if I could change the code like this it would solve:
.cssEffect:not(.faraday) .bold{font-weight: bold;}
But the outer div effects inner one. I couldnt figure out how to solve this.
Any Ideas?
Thanks for your help!
Edit: And no, I know "!important" means. I dont want to ignore all styles, I just want to make that inside a div.
Your inner div will always inherit inheritable properties (like font-weight) from its parent. If you want these properties to be different, you will have to overwrite them explicitly:
.effected .bold {
font-weight: bold;
}
.effected .faraday .bold {
font-weight: normal;
}
Here's a list of inheritable properties: Which CSS properties are inherited?
This question already has answers here:
Customizing Bootstrap CSS template
(9 answers)
Closed 1 year ago.
I have a small problem overriding some of Bootstrap's CSS style.
The standard definition of a bootstrap table has the following code:
.table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
}
I would like to set margin-bottom to 0px, using my own css code, but I'm having some problems overriding it.
This is my code:
table .table.table-responsive .table-middle {
margin-bottom: 0px;
}
How to fix it?
Thanks in advance! :)
Don't add important. That is a bad habit to fall into and will cause you even more headaches in the future. Plus, I doubt it will solve the problem. Instead, try to find out why your targeting (table .table.table-responsive .table-middle) isn't targeting and overriding the table you want.
The easiest way to do this is via Chrome or Firefox's "Inspect Element". Take a look at the table you want to change. See where the margin-bottom lies. Maybe it's on .table.blue or .container .table or something.
However, judging by your targeting, I doubt that is an issue. Instead, I believe you aren't targeting the element you want.
table .table.table-responsive .table-middle
will look for all <table> elements, then look for children of that <table> element with the classname of table AND table-responsive, and then look inside that element for children with the classname of table-middle.
Your HTML would have to look like this:
<table>
<??? class='table table-responsive>
<??? class="table-middle">
Instead, I'm guessing you have a <table> element that looks something like this:
<table class="table table-responsive table-middle">
Simply writing table.table or table.table-responsiveshould override bootstrap. Worst comes to worst, .table.table-responsive.table-middle will almost certainly work.
Remember
.classname .another-classname
with a space goes parent -> child
.classname.another-classname
without a space is one element that has both of those classes.
try adding the important.
table .table.table-responsive .table-middle {
margin-bottom: 0px !important;
}
Try Using !important after the css text. I have shown a example below
padding-bottom: 4.5rem !important;
This question already has answers here:
How to remove margin space around body or clear default css styles
(7 answers)
Closed 3 years ago.
In this test page, the element has a strange extra amount of space on the top:
http://dl.dropbox.com/u/3085200/canvasTest/index.html
I tried putting margin, padding, top all to 0 for body, and padding to 0 for html, but none of it helped.
html
{
padding:0px;
}
body
{
margin:0px;
padding:0px;
top:0px;
}
Try this in css:
h1 {
margin-top: 0;
}
This is a common scenario (logo image wrapped in h1 tag):
I believe this is actually caused by the margin on your h1 element.
You <h1> has default margin-top added to it, so it's pushing the <body> down from the top of the window.
body > h1:first-child { margin-top: 0; }
My console is showing a 0.67em top margin on the <h1> surrounding your top element.
Try this...
h1 {
margin: 0;
}
Well, I'm sure the experts will laugh at this. I started using Expression Web 4 and tried to place the header info for my pages into a file header.txt to include on every page. I changed the file type from html to shtml and used this line:
All okay, except for a pesky extra space at the top of the file.
The solution was this:
Tools>Page Editor Options>Authoring
Uncheck .txt under "Add a Byte Order Mark when creating or renaming UTF-8 documents with these file extensions."
I hope this helps someone else as naive as I.
You can try to put a display flex on your body, it worked in my case
Hope it will help someone :)
I recognize that space at the top. This often happens to me too. In my case there is a hidden break (<br/>) somewhere between the <head> and <body>. When you find this break and remove it, the top space will be fixed!
html > h1:first-child { margin-top: 0; }
I know this post is old, but I wanted to share a different solution that worked for me, for anyone that might come across this same post, looking for help, as I have.
Every solution I found seemed to be the result of an error, but I didn't have any errors, that could see. After over an hour of problem solving and piecing apart one of my past designs, I found this solution:
In the CSS for the DIV that you want attached to the top of the browser, add this one simple line:
#ContentContainer{
border: 1px solid transparent;
};
I'm not quite sure why it works or why it's needed, but it made the gap disappear.
I tried to figure it out using Firebug, but no chance. How is the Facebook status input border wrapped round the autosize input? Particularly, I am interested in the small triangle joined into the border. Using Firebug, I managed to find the triangle itself, which is provided in the form of a GIF image:
.uiComposerAttachment, .nub {
background: url(http://static.ak.fbcdn.net/rsrc.php/v1/zf/r/PfBgtiydy5U.gif) no-repeat center top;
height: 7px;
width: 11px
position: absolute;
left: 2px;
top: 18px;
}
But I couldn't figure out how it is placed above the input and how the border is added, in the form of a background image or defined as a CSS border?
I made a fiddle that mimics the facebook status box...
http://jsfiddle.net/UnsungHero97/mFuD4/5/
I added some functionality to the example, in particular, I found a cool jQuery plugin that allows for textarea auto-resizing.
Facebook actually uses a <textarea> element and the way they take care of the border is simple.
The "What's on your mind?" text is inside the <textarea> element and the border around it is due to several <div> element wrappers (more than the 2 I've shown above). Also, as you pointed out, the little arrow on top of the "What's on your mind?" is a .gif image, but there are ways to do this using only CSS!
Regarding the triangle...
If you're interested in alternative ways to do this using only CSS, I asked a question recently about the little triangle! Here's the question...
How can I create a "tooltip tail" using pure CSS?
... and here are the answers:
answer 1
answer 2
answer 3
answer 4 (this one is REALLY cool!!!)
I hope this helps.
Hristo
Here's how you can do it using only CSS: http://www.yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/
A similar question has been asked before though...
The border around the textarea is actually around parent div's (.uiTypeahead, .wrap) within the form. Looks like the actual textarea has no border.
As for the triangle it is just a css background inside the li (the items status, photo, video, link, etc are a list). The triangle is this element: <i class="nub"></i>. It is then positioned absolute to sit at the bottom of the list which has the form just below.
Thanks for your useful hints,
I finally managed to solve it in a four-liner:
#type_indicator { /* img#type_indicator is the triangle image tag, followed by the input field in HTML code */
position:absolute;
left:100px;
}
Greetings
Chris