I have a box defined that works for most of my site:
.searchBox
{
width: 610px;
height: 170px;
padding: 15px 55px 5px 15px;
background: url('../images/advanced_search_BG.jpg') no-repeat;
margin-top: 10px;
}
But I have one box that needs to be a little bigger; it has to be height: 220px.
I know I could duplicate the above, calling it, say searchBoxLarge, put that on my div tag, and be done. But that's duplicate code that I don't want.
This might be a 'dumb question', but I'm not trained in CSS and looking for assistance...
What is the format to specify the searchBoxLarge with the height: 220px, but without duplicating the entire searchBox entry?
Add searchBoxLarge to the searchBox declaration, and then make a separate declaration for just searchBoxLarge which overwrites the height value.
.searchBox, .searchBoxLarge
{
width: 610px;
height: 170px;
padding: 15px 55px 5px 15px;
background: url('../images/advanced_search_BG.jpg') no-repeat;
margin-top: 10px;
}
.searchBoxLarge
{
height: 220px;
}
There was a good article about doing this on SitePoint http://www.sitepoint.com/first-look-object-oriented-css/
I would suggest you read the responses to the article since there are some drawbacks to doing your CSS like this, and also some benefits.
I agree the name Object Oriented CSS is misleading because there is no true sub-typing
Cheers! Orin
Related
I am creating my own website and I've came to a strange problem.
I am using CSS and HTML while asking this question (respectively on my web); I m using Mozilla Firefox 66, the Developer version (just has some more web tools etc.)
So, I have a index.html, and index.css, in the index.html it is linked to the index.css <link rel="stylesheet" href="./css/index.css" type="text/css">.
Everything worked until I decided to customize my submit button:
<input type="submit" id="submit" value="Register!">
Basically, I've put this in my CSS (index.css) like I would always do:
#submit{
display: block;
font-size: 30px;
width: 600px;
height: 60px;
}
The thing is. This does not affect the submit button in any way. The strange thing is, if I did:
#registerName, #registerMail, #registerPass, #submit{
display: block;
margin-left: auto;
margin-right: auto;
font-size: 30px;
width: 600px;
height: 60px;
};
it would affect the button (and of cource registerName etc.). And I think, what the hell?
So, after searching up on here (StackOwerflow of course :) ), I found people doing some methods such as putting it directly into the button (<input type="submit" value="Register!" style="width:600px;height:60px;") worked, but not what I wanted, also things like input.submit(if I replaced id with class) which didn't work. I don't know. This seems like a strange bug or something.
So, all in all: When I simply do #submit{} in the CSS, it does not actually affect the submit id. Although if mentioning more of them (like #submit, #user, #phone{}), it does affect it. Is this a bug or something?
PS: Sorry for the long post, I am new here, and I wanted to explain fully for you to understand
If the css style sheet you have shown us looks like below, the ";" after the first declaration block is going to cause the second selector and declaration block to fail.
#registerName, #registerMail, #registerPass, #submit{
display: block;
margin-left: auto;
margin-right: auto;
font-size: 30px;
width: 600px;
height: 60px;
};
#submit{
display: block;
font-size: 30px;
width: 600px;
height: 60px;
}
Use button instead of input.
#submit {
display: block;
font-size: 30px;
width: 600px;
height: 60px;
}
<button type="submit" id="submit">Register!</button>
Why does it work on the group styling? Hard to say without having the whole CSS. My best guess is that something else is applied in between, like a border. For example, you can make the CSS work with input by setting any valid value to the border attribute.
#submit {
display: block;
font-size: 30px;
width: 600px;
height: 60px;
border: 1px solid lightgrey;
}
<input type="submit" id="submit" value="Register!"></input>
this is my stylesheet. Repeat doesn't work. I'm very new to coding and I'm really confused. Please help me. I know it's a very simple code, but it won't work. I don't know what I'm doing wrong.
background-color: white;
font-family: sans-serif;
margin-left: auto;
margin-right: auto;
max-width: 1024px;
min-width: 256px;
padding-top: 8px;
padding-bottom: 24px;
padding-left: 24px;
padding-right: 24px;
background: url("background_image.jpg")
background-repeat: no-repeat;
You're missing a semicolon (;) after your background: url("background_image.jpg")
If you miss a semicolon after an element, nothing after it until the end of the {} will work.
A semicolon is not needed however, on single-style elements or on the last style like the following examples:
.class { color: red }
.class {
background-color: blue;
color: red
}
Basically, a semicolon is required after every style, up until the last style. Although removing the semicolon from the last style is not recommended since you (or other contributors to the code) may forget about this when adding more styles to the element later on.
Sorry if the question is not really relevant, I'm french and I don't know the right terms of what I am asking exacly :)
Here is the 'thing' (module?) I've created to create a circle.
.fake-avatar {
width: 70px;
height: 70px;
}
But I want to outline this one without creating this :
.fake-avatar-outline {
width: 72px;
height: 72px;
}
Here is where I use it :
.fake-avatar-outline.rounded.flex-center.b-success.m-auto.bg-pink
.fake-avatar.rounded.flex-center.b-success.text-xl.m-auto.bg-pink-light.icon-star
so the goal is to have only fake-avatar and change manually the size. How is it possible? Should I do something like that :
.fake-avatar.rounded.flex-center.b-success.m-auto.bg-pink(width='72px')
.fake-avatar.rounded.flex-center.b-success.text-xl.m-auto.bg-pink-light.icon-star
Thank you,
Nicolas
If I am understanding this correctly you are looking for a border
.fake-avatar {
width: 70px;
height: 70px;
/* Add this*/
border: 2px solid #FFF; /* color can go here */
/* If you wanted a circle */
border-radius: 50%;
}
EDIT: As stated in the comments, the poster was also looking for a way to change the width of the element without having to change the class in the css file. I said he could use inline-styles.
<div class="fake-avatar" style="width: 72px"></div>
I also noted that setting styles this way is usually frowned upon as it makes css maintenance a nightmare.
Expanding on #DavidLee's answer, here a snippet with running code for both options.
.fake-avatar {
width: 70px;
height: 70px;
border: 2px solid white;
border-radius: 50%;
background-color:blue;
}
.fake-avatar-outline {
width: 70px;
height: 70px;
border: 1px solid red;
border-radius: 50%;
}
<div class="fake-avatar"></div>
<div class="fake-avatar-outline"></div>
I've recently encountered some problems with CSS Sprites.
I want them to switch pictures every function call, function itself is OK since it only removes and adds css class.
I have following CSS:
#slider_arrow {
padding-left: 200px;
position: relative;
top: -1px;
}
.red_arrow_sprite {
background: url(/Images/onex/arrows.png) 0 0 no-repeat;
width: 25px;
height: 12px;
}
.yellow_arrow_sprite {
width: 25px;
height: 12px;
background: url(/Images/onex/arrows.png) -26px 0 no-repeat;
}
.black_arrow_sprite {
width: 25px;
height: 12px;
background: url(/Images/onex/arrows.png) -51px 0 no-repeat;
}
Slider_arrow is:
<span id="slider_arrow" class="red_arrow_sprite"></span>
the element in which I change class.
And the problem is that my Sprite file has 75px width and 25px height.
(3x 25px/25px)
With the CSS I Presented I get the result where I see all 3 pictures at the time with red_arrow_sprite class, 2 pictures with yellow_arrow_class and 1 picture which is desired with black_arrow_class.
What have I done wrong with CSS?
Thanks in advance.
http://jsfiddle.net/9b57pb50/
Check out this solution
I've removed padding and add some display properties.
Right now I'm working on a bilingual website and kinda confuse about how to handle the RTL CSS codes. I have 2 things in my mind as follows;
1. Single CSS file - Overriding LTR default codes.
.content {
position: relative;
padding: 5px 10px 5px 240px;
}
.rtl .content {
padding-right: 240px;
padding-left: 10px;
}
2. Single CSS file - Without overiding
.content {
position: relative;
padding-top: 5px;
padding-bottom: 5px;
}
.ltr .content {
padding-left: 240px;
padding-right: 10px;
}
.rtl .content {
padding-right: 240px;
padding-left: 10px;
}
Using the first method, there will a lot of overrides. Also using the second method there will be a lot of codes in the css file. I know both will do the trick but curious to know which is the best method. Kindly suggest me if there is another method too.
If you are looking for a more robust solution, I would suggest you these approaches:
CSS Preprocessor
Learn and use a CSS preprocessor like LESS (if necessary, use a plugin like Bi-App-Less) and conditionally add the correct stylesheet.
Back-end controlled variable
Use CSS mixed with some back-end variable like:
direction: <%=rtl%>;
padding-<%=right%>: 10px;
padding-<%=left%>: 240px;.
RTL Tool
Use a RTLer tool.
CSS can display your text right to left with this:
.rtl
{
direction:rtl;
}
I prefer to handle padding and margins on a single line:
.content {
position: relative;
padding:5px 10px 5px 240px;
}
.rtl .content {
padding:0 240px 0 10px;
}
You could try doing something like this
.content {
width: 500px;
padding: 5px 10px;
border: 1px solid #ddd;
}
.content.rtl {
float: right;
direction: rtl;
}
try to hardcode the minimum amount of paddings/margins specific to a direction, heres an example http://jsfiddle.net/icodeforlove/UNS5L/