I have a css and i want to put all the rules in css relative to an id.
For Example:
I have
.clearfix {
clear: both;
display: block;
font-size: 1px;
height: 0;
line-height: 1px;
margin: 0;
padding: 0;
}
And I have to make it like
#vn_space .clearfix {
clear: both;
display: block;
font-size: 1px;
height: 0;
line-height: 1px;
margin: 0;
padding: 0;
}
Is there any simple method to put all css rules relative to one id instead of editing each rule
You can use inheritance for second rule.
E.g. clear: both in .clearfix will apply to rule #vn_space .clearfix. So in #vn_space .clearfix you can omit anything that is same in rule .clearfix.
.clearfix {
background-color: red;
width: 20px;
height: 20px;
}
#vm_space {
padding: 5px;
background-color: green;
}
#vm_space .clearfix {
border: 1px solid black;
}
<div class="clearfix"></div>
<div id="vm_space">
<div class="clearfix"></div>
</div>
if you want to do this any how then you can use it like
$('div').css(["#vn_space", ".clearfix"]);
but i would not suggest it to prefer you can do this css with other way
here is ref link where i found
Is it possible to reference one CSS rule within another?
Related
I have the following CSS lines:
.liquid {
display: inline-block;
width: 25px;
height: 25px;
background: #ff8125;
margin-right: 15px;
}
<h2 class="liquid">Liquid</h2>
It should look like this:
http://imgur.com/B9vblUP
But instead looks like this:
http://imgur.com/8RQTkcO
What am i doing wrong here and how to get it exactly like the first pic?
I tried overflow hidden but that only shows Liquid in 25x25 on the block and the rest is not showing.
Any help is much appreciated.
Kind regards,
Majin Buu
I think you should create another element for the orange square instead of editing the class of the h2 element because the background attribute it will be applied on that element, so I would make something like:
<div class="liquid"></div>
<h2>Liquid</h2>
.liquid {
float: left;
width: 25px;
height: 25px;
background: #ff8125;
margin-right: 15px;
}
To have the square floating to the left of the element.
Check out CSS position!
.liquid {
display: inline-block;
position: absolute;
width: 25px;
height: 25px;
background: #ff8125;
}
h2 {
position: relative;
margin-left: 30px;
}
<div class="liquid"></div><h2>Liquid</h2>
Use html like this
<div class="bg_white">
<span class="liquid"> </span><h2>Liquid</h2>
</div>
CSS
.bg_white{background:white; padding:5px; width:auto; float:left;}
.liquid {
display: inline-block;
width: 25px;
height: 25px;
background: #ff8125;
margin-right: 15px;
float:left;
font-size:18px;
}
.bg_white h2{float:left; margin:0px;}
Pseudo element is better for this solution:
h2 {
background: #eee;
padding: 5px;
display:inline-block;
}
.liquid::before {
content:'';
display: inline-block;
vertical-align: middle;
width: 25px;
height: 25px;
background: #ff8125;
margin-right: 15px;
}
<h2 class="liquid">Liquid</h2>
You are styling the font part of the wanted result itself. You should either add an element for the orange square or use a pseudo element. This will get you in the right direction.
.liquid {
line-height: 1;
}
.liquid:before {
background: #ff8125;
content: ''; /* important for pseudo elements */
display: inline-block;
height: .9em;
margin-right: .45em;
position: relative;
top: .1em;
width: .9em;
}
<h2 class="liquid">Liquid</h2>
you can use below CSS for this if text is small and always in one line.
.liquid {
display: inline-block;
padding-left: 10px;
border-left: 25px solid #ff8125;
margin-right: 15px;
font: 25px/25px Arial;
font-weight: bold;
}
<h2 class="liquid">Liquid</h2>
I'm quite new on web development. I'm struggling with this question for a while. Now I post my question(s) here.
The souce code is as linked: Source Code
The HTML:
<div id="wrap">
<div id="main" class="clearfix">
<ul class="ranklist" id = "ranklist">
<li class="ranklistitem font-size-0">
<div class="itemnumber divinline"> <span class="helper"></span>1</div>
<div class="userprofile divinline"><img class="profileimg" src=""/></div>
<div class="nameandcredit divinline">
<div class="username">SteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteve</div>
<div class="credit">I'm description</div>
</div>
<div class="ranktitle divinline">Total:</div>
<div class="usercredit divinline">1000</div>
</li>
</ul>
</div>
</div>
The CSS:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
html {
background: #aaaaaa;
}
body {
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
font-family: "PingHei", "Helvetica Neue", "Helvetica", Arial, "Microsoft YaHei";
font-weight: lighter;
}
#wrap {
min-height: 100%;
}
#main {
overflow-y: auto;
padding-bottom: 55px;
}
div, ul, p {
padding: 0px;
margin: 0px;
color: #ffd8d0;
}
.rewarddes
{
margin-top:10px;
display:block;
color:#ffdcc5;
overflow:hidden;
font-size:87.5%;
}
.ranklistitem {
height: 60px;
border-bottom: solid 1px #faa559;
font-size:87.5%;
}
.font-size-0 {
}
.divinline {
display: inline-block;
vertical-align: top;
padding: 0px;
margin: 0px;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.itemnumber {
line-height: 60px;
height: 60px;
background:#aa8800;
width: 6%;
text-align: right;
padding-right: 5px;
}
.userprofile {
line-height: 60px;
height: 60px;
width: 14%;
text-align: center;
vertical-align: middle;
background:#228845;
}
.profileimg {
height: 36px;
width: 36px;
vertical-align: middle;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border: solid 2px #fff;
}
.nameandcredit {
height: 60px;
width: 45%;
padding-left: 5px;
background:#342389
}
.username {
height: 55%;
text-align: left;
vertical-align:bottom;
overflow:hidden;
}
.credit {
height: 25%;
font-size: 66.7%;
text-align: left;
overflow:hidden;
color:#fdff6e;
}
.username:before, .credit:after {
content:'';
height:100%;
vertical-align:middle;
display:inline-block;
}
.iconaward {
vertical-align: middle;
height: 20px;
width: 14px;
}
.ranktitle {
line-height: 60px;
height: 60px;
width: 15%;
background:#cd8912;
text-align: right;
padding-right: 0.125em;
}
.usercredit {
line-height: 60px;
height: 60px;
background:#ff0000;
width: 20%;
text-align: right;
padding-right: 0.5em;
}
I have 2 questions based on the linked(or above) code.
The 5 container div's width was set as:
.itemnumber 6%, .userprofile 14%, .nameandcredit 45%, .ranktitle 15%, .usercredit 20%. So in total they are 100%. But as you see, the last one .usercredit is not in the same line and there're margins between each div, which is not what I want.
for the .username, I have set overflow:hidden, but as you see, when there's a large string, the .username was totally disappeared. If there're spaces in the string, it will only hide the overflow part and show the front part. I want to know what's the problem?
I know it's a little bit messed up of a lot code here. But my question is as listed as above. Thanks in advance for any kind suggestion.
For the spacing, you have two problems:
Implicit spaces between inline-block elements, and
Defining widths for elements with padding.
Regarding username overflow, you have one issue:
Default word wrapping behavior is to wrap the whole word to the next line. You need to change that behavior.
Let's take a look at each of them:
Implicit Spaces
The problem is that your divs have a display: inline-block; style. Elements displayed as an inline-block have any white-space between them converted to a single space.
See the "Fighting the Space Between Inline Block Elements" article on CSS Tricks for more information on how to overcome this.
One fix, for instance, is to have the li element that is wrapping the divs to have a 0 font-size, and reset a non-zero font size to its children, e.g. in your CSS:
.font-size-0 {
font-size: 0;
}
.font-size-0 > * {
font-size: 12px;
}
Any of the links outlined in the link above would work; for example, removing spaces and newlines between your closing tag and opening tag would do the same thing, without forcing you to set and reset the font-size.
Widths for elements with padding
In CSS, a width is defined by default for an element to include only its content area (box-sizing: content-box; by default) and not the padding. Set the box-sizing to border-box and you'll be all set.
E.g.
.font-size-0 > div {
box-sizing: border-size;
}
Properly wrapping a single word without spaces
See this StackOverflow answer to see how to address the issue. You will basically need to add this to your .username rule:
.username {
...
word-wrap:break-word;
}
Final Result jsFiddle
Im trying to make a line after each of my h2 tags. I can´t figure out how I should tell the width, cause the lenght of the h2 headlines is differ from h2 to h2.
I use the :after method to create lines
h2:after {
position: absolute;
content: "";
height: 2px;
background-color: #242424;
width: 50%;
margin-left: 15px;
top: 50%;
}
Check code here: http://jsfiddle.net/s9gHf/
As you can see the line get too wide, and make the website too wide.
You could achieve this with an extra <span>:
h2 {
font-size: 1rem;
position: relative;
}
h2 span {
background-color: white;
padding-right: 10px;
}
h2:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0.5em;
border-top: 1px solid black;
z-index: -1;
}
<h2><span>Featured products</span></h2>
<h2><span>Here is a very long h2, and as you can see the line get too wide</span></h2>
Another solution without the extra <span> but requires an overflow: hidden on the <h2>:
h2 {
font-size: 1rem;
overflow: hidden;
}
h2:after {
content: "";
display: inline-block;
height: 0.5em;
vertical-align: bottom;
width: 100%;
margin-right: -100%;
margin-left: 10px;
border-top: 1px solid black;
}
<h2><span>Featured products</span></h2>
<h2><span>Here is a very long h2, and as you can see the line get too wide</span></h2>
External examples: First, Second
There's no need for extra wrappers or span elements anymore. Flexbox and Grid can handle this easily.
h2 {
display: flex;
align-items: center;
}
h2::after {
content: '';
flex: 1;
margin-left: 1rem;
height: 1px;
background-color: #000;
}
<h2>Heading</h2>
using flexbox:
h2 {
display: flex;
align-items: center;
}
h2 span {
content: "";
flex: 1 1 auto;
border-top: 1px solid #000;
}
<h2>Title <span></span></h2>
Here is another, in my opinion even simpler solution using a flex wrapper:
.wrapper {
display: flex;
align-items: center;
}
.line {
border-top: 1px solid grey;
flex-grow: 1;
margin: 0 10px;
}
<div class="wrapper">
<p>Text</p>
<div class="line"></div>
</div>
External link
I notice that there are some flexbox implementations but they don't explain why and how to use it.
First, we just need one element, for this example h2.
We will change the element's display behavior to display: flex
Then, we center vertically its child elements using align-items: center.
h2 {
...
display: flex;
align-items: center;
}
Then, let's draw the line using the pseudo-element after.
We add '' to the content property to draw the element (we must).
Now lets make it flexible using flex: auto. This means that our element is sized according to its width and height properties. It grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. This is equivalent to setting flex: 1 1 auto.
Then we add an small gap between the text and the line using margin-left: 1rem.
Finally, we draw a black line using border-top: 1px solid #000.
h2::after {
content: '';
flex: auto;
margin-left: 1rem;
border-top: 1px solid #000;
}
Here is functional snippet.
h2 {
font-size: 1em; /* not needed */
display: flex;
align-items: center;
}
h2::after {
content: '';
flex: auto;
margin-left: 1rem;
border-top: 1px solid #000;
}
<h2>Normal title</h2>
<h2>Very long title to test the behavior of the element when the content is wider</h2>
This is the most easy way I found to achieve the result: Just use hr tag before the text, and set the margin top for text. Very short and easy to understand! jsfiddle
h2 {
background-color: #ffffff;
margin-top: -22px;
width: 25%;
}
hr {
border: 1px solid #e9a216;
}
<br>
<hr>
<h2>ABOUT US</h2>
Here is how I do this:
http://jsfiddle.net/Zz7Wq/2/
I use a background instead of after and use my H1 or H2 to cover the background. Not quite your method above but does work well for me.
CSS
.title-box { background: #fff url('images/bar-orange.jpg') repeat-x left; text-align: left; margin-bottom: 20px;}
.title-box h1 { color: #000; background-color: #fff; display: inline; padding: 0 50px 0 50px; }
HTML
<div class="title-box"><h1>Title can go here</h1></div>
<div class="title-box"><h1>Title can go here this one is really really long</h1></div>
I am not experienced at all so feel free to correct things. However, I tried all these answers, but always had a problem in some screen.
So I tried the following that worked for me and looks as I want it in almost all screens with the exception of mobile.
<div class="wrapper">
<div id="Section-Title">
<div id="h2"> YOUR TITLE
<div id="line"><hr></div>
</div>
</div>
</div>
CSS:
.wrapper{
background:#fff;
max-width:100%;
margin:20px auto;
padding:50px 5%;}
#Section-Title{
margin: 2% auto;
width:98%;
overflow: hidden;}
#h2{
float:left;
width:100%;
position:relative;
z-index:1;
font-family:Arial, Helvetica, sans-serif;
font-size:1.5vw;}
#h2 #line {
display:inline-block;
float:right;
margin:auto;
margin-left:10px;
width:90%;
position:absolute;
top:-5%;}
#Section-Title:after{content:""; display:block; clear:both; }
.wrapper:after{content:""; display:block; clear:both; }
I am trying to work with markup that someone else has created. My problem is that I have set the width of a parent container for use on other elements, but want to over-ride this on one specific child container that I can target using .ticket13 .text b and set it to 400px. However this doesn't work.
If you check out this jsfiddle you can see the problem. How can I get .ticket13 .text bto be 400px wide without changing the markup?
<div class="left-container">
<div class="ticket13">
<p class="text">
<b> I want this container to be 400px wide </b>
</p>
</div>
</div>
.ticket13 .text b { width: 400px !important; }
p.text {
display: inline;
margin: 5px;
padding: 0;
}
P.text {
font-size: 1em;
font-style: normal;
margin: 0;
padding: 0.3em 0.3em 0;
text-align: left;
text-indent: 0;
width: auto;
}
.ticket13 {
display: inline;
float: left;
width: 186px;
}
.ticket13 {
border: medium none;
float: left;
margin: 0;
padding: 0;
}
.left-container {
background-color: red;
float: left;
text-align: left;
width: 60%;
}
You'd have to make the b a block level element, by either setting it's display to block or inline-block.
Put the markup for the child BELOW the markup for the parent. You shouldn't even need to use !important
Try use that:
.ticket13 .text b {
width: 400px !important;
display: inline-block;
}
To do that you have 2 solutions:
.ticket13 .text b {
width: 400px!important;
display: block;
}
or
.ticket13 .text b {
width: 400px!important;
float: left;
}
I've been doing a site for tafe and I've gone over different ways to do this and none of them have worked so far. I am trying to add a button image to a list menu using div id but it just seems not to be working. This demo page is a online version of my page, Image menu is suppose to be on the left hand side with the text over it.
I am trying to put a image in a unordered list as a background image and it doesn't appear to be working.
I am trying to put it in this part of the css at the very ened
#navcontainer ul {
padding: 0px;
margin-left: 0px;
list-style-type: none;
width: 200px;
display: block;
line-height: 34px;
background-image: url(images/pg_menu_bg.png);
}
Here is my html and my css:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation"><ul><li>HOME</li><li>NEWS</li>
<li>
CONTACT</li><li>ABOUT</li></ul></div>
<div id="leftcolumn">
<div id="navcontainer">
<ul>
<li>Upcoming Events</li>
<li>Members</li>
<li>Specials</li>
<li>Who is Snap Nature</li>
</ul>
</div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
CSS:
#charset "utf-8";
* {
background-color: #6FF;
margin: 0px;
padding: 0px;
}
#wrapper {
background-color: #F90;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#header {
background-color: #6F0;
height: 124px;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#navigation {
background-color: #F3F;
float: left;
height: 25px;
width: 960px;
}
#leftcolumn {
background-color: #009;
float: left;
height: 350px;
width: 250px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#content {
background-color: #69F;
width: 710px;
float: left;
height: 350px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#footer {
background-color: #F00;
clear: both;
height: 25px;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#navigation ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 960px;
height: 0px;
}
#navigation li {
float: left;
background-color: #F3F;
}
#navigation a {
line-height: 25px;
text-decoration: none;
color: #000;
background-color: #F3F;
display: block;
text-align: center;
vertical-align: middle;
width: auto;
padding-right: 10px;
padding-left: 10px;
padding-top: 0px;
padding-bottom: 0px;
height: 25px;
}
#navigation a:hover {
color: #999;
text-decoration: none;
}
#navcontainer ul {
padding: 0px;
margin-left: 0px;
list-style-type: none;
width: 200px;
display: block;
line-height: 34px;
background-image: url(images/pg_menu_bg.png);
}
Please help TY
Jared
Edit:
Yes, this is exactly the problem. I just checked the link you posted, and the browser is looking for an image located at: http://www.156.onl.checit.info/CSS/images/pg_menu_bg.png - which doesn't exist.
See that "CSS" in there? I'm 99% sure that's unintentional. It's an absolute/relative path issue. Read on...
if your image is not appearing I'm gonna go out on a hunch and say it's because your image paths are messed up.
Solution:
This:
/* ABSOLUTE PATH solution */
background-image: url(/images/pg_menu_bg.png);
or maybe even this (depending on your file structure):
/* RELATIVE PATH solution. This is FROM YOUR CSS FILE.*/
background-image: url(../images/pg_menu_bg.png);
Explanation:
There is a big difference between:
background-image: url(images/pg_menu_bg.png);
and
background-image: url(/images/pg_menu_bg.png); /* note the leading slash */
The leading slash means an absolute path (ie. "path from your root domain url"), whereas no leading slash means a relative path (ie. "relative to the location of this file, in this case, your CSS file").
That means, presuming you have a file structure like this:
root
|
----images
| pg_menu_bg.png
|
----css
| mycss.css
from your css file, calling:
background-image: url(images/pg_menu_bg.png);
actually results in:
http://yourdomain.com/css/images/pg_menu_bg.png /* note the "css" */
whereas calling:
background-image: url(/images/pg_menu_bg.png);
results in:
http://yourdomain.com/images/pg_menu_bg.png
So I think you need to have a look at your directory structure, and work from there. My guess is you need to use absolute paths.
But if you wanted to use relative paths with the dummy file structure above, you can use:
background-image: url(../images/pg_menu_bg.png); /* ".." means "parent directory"
More info:Using relative URL in CSS file, what location is it relative to?
Second problem:
You have another issue, this style:
* {
background-color: #6FF;
margin: 0px;
padding: 0px;
}
This style applies a blue background TO EVERY ELEMENT. So even if your paths to that background image are ok, they're being hidden by foreground elements with blue backgrounds.
Try change * to body:
body {
background-color: #6FF;
margin: 0px;
padding: 0px;
}
Note: if you actually want a margin:0; and padding:0; on every element, leave the above style as you had it (but remove the background-color), and define a new body style and put the background-color in there instead. Like this:
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #6FF;
}