so im having this issue with my CSS, im trying to write my CSS code the normal way like this, but i want it vertical
.topic_row {
height:60px;
}table
.reputation {
right:0px;
position:absolute;
.topic_row {
height:60px;
}table
.reputation {
right:0px;
position:absolute;
.rep_bar {
background:#FFF;
font-size:1.1em !important;
-moz-border-radius-topleft:5px;border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
padding:0px;
right:10px;
bottom:45px;
position:absolute;
width:150px
.rep_bar
ul {
margin-top:8px;
float:left
.rep_bar ul
li {
float:left;
margin:0
2px
p.rep_highlight {
float:left;
display:inline-block;
margin:5px
10px 10px 10px;
background:#D5DEE5;
color:#1d3652;
padding:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-border-radius:5px;
font-size:0.8em;
font-weight:bold;
text-align:center
p.rep_highlight
img{
margin-bottom:4px
.reputation{
float:none;
text-align:center;
/*margin-left:10px;*/
margin-right:10px
.reputation.negative, .members
li.negative{
background:#b82929;
color:#fff
.reputation.zero{
background:#CCC;
color:#6e6e6e
But i want it vertical since my style for the forums only accepts vertical for some reason, so i need it all the code formated in a straight line like this:
.pun .fakeform{PADDING:20px 20px 15px 20px}
And i do not know how to format it like this, so if someone has the time, and effort to format all of the code above to a straight vertical line i'd appriciate it!
Thank you.
Something like stylelint with the --fix option should solve your issue. See https://stylelint.io/user-guide/rules for documentation on all stylelint rules.
Here, the following stylelint rules would be most relevant:
block-opening-brace-newline-before: never-multi-line
block-opening-brace-newline-after: never-multi-line
block-closing-brace-newline-before: never-multi-line
block-closing-brace-newline-after: never-multi-line
Relevant stylelint documentation pages:
Stylelint configuration guide
Stylelint CLI / Stylelint editor plugins
Stylelint CLI's autofix switch (--fix)
Related
I'd like to change the shape of bootstrap badges. Not the default ellipse but a rectangle with rounded corners. What is the right way of doing so?
You need to adjust the badge class like the following:
.badge {
min-width: 28px;
border-radius: 4px;
}
try something like that...
.mynewbadge
{
width:20px;
height:20px;
border-radius:4px; //modify it according to your need..
-webkit-border-radius:4px;
background:gray;
color:white;
text-align:center;
}
<div class="mynewbadge">5</div>
hope this will help you.
This was very helpful and was able to get the badge to look exactly like how it is wanted, if anyone else who are beginner like me may find the following useful
//class
<span class="badge bg">[120]</span>
//css
.badge {
background-color: transparent;
float: right;
color:black;
font-size:15px;
}
I'm trying to figure out why images seem to jumble around in IE versus Chrome.
Alas, its an ancient public school CMS (we're talking early 00's), and I'm certainly no programmer, rather just a hobbyist trying to juggle the CSS and HTML.
I hope I can get a few pointers. I assume Its about floating the right DIV containers, to get it to render right. The entire thing litteralky exploded when I went to create the overlay text.
CSS can be seen below. Page source can be viewed outside of the CMS frame-template here.
Cheers, Trin
#persongalleri
{
margin-left:5px;
overflow:hidden;
}
img.person /* til personalesiden */
{
width:80px;
height:auto;
border:1px solid #000;
}
div.personwrap
{
float:left;
position:relative;
margin:2px;
}
div.undertekstkasse
{
position:absolute;
bottom:1px;
left:0px;
width:100%;
background-color:black;
font-family: 'Verdana, Arial, Helvetica';
font-size:14px;
font-weight:bold;
color:white;
opacity:0.6;
filter:alpha(opacity=60);
}
p.undertekst
{
padding:6px;
margin:0px;
text-align:center;
}
Its very difficult to spot but all the photos are slightly different heights, so you are getting this strange looking behavour when you float them. If you put a fixed height on the .personwrap then this will solve your layout issues.
div.personwrap {
height: 105px;
margin: 2px;
position: relative;
float:left;
}
You could also remove the float, and just add display: inline-block
I'm currently in the process of styling a website and have hit a bit of a rut.
I'm trying to target and style this:
<asp:Button ID="cmdUpdate" runat="server" Text="Update Details" CssClass="update_btn" />
Using this CSS:
div#account .update_btn {
width:108px;
height:27px;
background:url("/furniture/images/buttons/update.jpg") no-repeat 0 0;
clear:both;
float:left;
}
However when I inspect the button in firebug it doesn't appear.
It's currently being styled by the code below but the one above doesn't even appear.
div#account input {
border: 1px solid #ccc;
width:150px;
padding:5px 0 5px 10px;
margin: 0 0 10px 0;
float:right;
}
I don't know ASP so I can't make alterations and I can't use input.button[type="submit"] as it isn't supported by IE7.
Any help or guidance would be much appreciated.
Put a comma in your style it should work fine.
div#account, .update_btn {
try this
div#account input.update_btn {
width:108px;
height:27px;
background:url("/furniture/images/buttons/update.jpg") no-repeat 0 0;
clear:both;
float:left;
}
<container>
<element1>
</element1>
<element2>
</element2>
</container>
#container {
position:absolute;
right:33px;
top:15px;
}
#element1 {
position:relative;
float:right;
height:31px;
background:url(../main_bg.gif) repeat-x top left;
border: 1px solid #6a6a6a;
clear:both;
}
#element2 {
position:relative;
float:left;
clear:both;
background-color:#f8f0ce;
border-left:1px solid #6a6a6a;
border-right:1px solid #6a6a6a;
border-bottom:1px solid #6a6a6a;
}
The reason your container seems to be displayed as wide as it content in other browser is because it is out of the "body" and displayed in "nothing" (ence, as wide as its content). IE6/7 seems to treat this differently.
I do not have your issue in IE8, so I suppose you want this for IE6 or 7. It also seems you want 2 box, one under each other (clear).
From the code and the style you supplied, it seems we could simply get rid of the floating and put a text-align:right.
Would this solution work for you?
It does not work in IE6 however.
This one does however, but require a <br /> (and display:inline. Thanks #kei for the suggestion.)
I have been trying to validate my CSS, and the following lines continually return the error Parse Error [empty string]
.content { width:80%; text-align:center; margin-left:auto; margin-right:auto;
max-width:400px; border-width:4px; border-style:solid; border-color:#339900;
padding:5px; margin-top:10px; margin-bottom:10px; border-radius:20px;
background-color:#ccffcc; }
#side_link { position:fixed; bottom:5px; right:-4px;
background-image:url('img/FruitfulLogo.png'); height:29px; width:22px;
border-style:solid; border-width:2px; border-bottom-left-radius:5px;
border-top-left-radius:5px; border-color:#F90; background-color:#FF9; }
#side_link:hover { background-image:url('img/FruitfulLogo_over.png'); }
Am I missing something really obvious or really obscure?
Apparently, the border-radius throwing a Parse Error [empty string] is a bug in the W3C CSS validator.
See http://www.w3.org/Bugs/Public/show_bug.cgi?id=11975 .
You're using css3 elements while this is still just a draft. The w3 validators aren't yet equiped to deal with a lot of the new properties and attributes and they'll spew out errors on perfectly valid css in some cases. This is one of them.
Just give them a year-or more- to patch things up. Until then, use your own judgement, css is relatively simple syntax wise.
As #BoltClock commented as well, this appears to be a validator bug.
Take out your border-radius items in .content and #side_link and it validates fine. As far as I can see, they are correct.
.content {
margin:10px auto;
padding:5px;
border:4px solid #390;
border-radius:20px;
width:80%;
max-width:400px;
background-color:#cfc;
text-align:center;
}
#side_link {
position:fixed;
bottom:5px;
right:-4px;
width:22px;
height:29px;
border:2px solid #F90;
border-radius:5px 0 5px 0;
background-color:#FF9;
background-image:url('img/FruitfulLogo.png');
}
#side_link:hover {
background-image:url('img/FruitfulLogo_over.png');
}
I'm going to concur that the validator is going nuts, because when I input the above, it shows the errors. But then you have to note that below the errors it outputs all of the above and says "all this stuff is valid."
I put it throught the W3C validator and this is what I got back.
3: .content - Property border-radius doesn't exist in CSS level 2.1 but exists in : 20px 20px
7: #side_link - Property border-bottom-left-radius doesn't exist in CSS level 2.1 but exists in : 5px 5px
8: #side_link - Property border-top-left-radius doesn't exist in CSS level 2.1 but exists in : 5px 5px
When checking the CSS3 version it's the same line numbers.