Okay so I am currently using this for my <a> tags in HTML, and here is my css for it
#button {
border-style: solid;
border-width: 1px;
border-bottom-width: 5px;
width: auto;
padding-left: 2px;
padding-right: 2px;
text-decoration:none;
color: gray;
}
#button:hover {
color: black;
}
But sadly the buttons are bigger then a standard line and just overlap eachother, for example:
Here is some text [button]
here is some more text [button]
Where the [button]s is beneath/ontop of the other it overlaps in the browser, (if that makes sense)
Here is a screenshot:
How can I make it so it creates a kind of area around it where it cant overlap and will push other elements outwards or so, margin seems to not work (top and bottom does nothing) and padding seems to make the 1px border bigger in height, thanks!
Add
display:inline-block;
to your button selector, e.g.:
#button {
border-style: solid;
border-width: 1px;
border-bottom-width: 5px;
width: auto;
padding-left: 2px;
padding-right: 2px;
text-decoration:none;
color: gray;
display:inline-block;
}
As an aside, i'd recommend that button is a class rather than an id, because you shouldn't really have multiple elements with the same id on the same page.
The distance between the lines in your example is too short to display a Button-Text surrounded by border with space that fits into that line.
So I sugesst to increase the line-height of the default Text.
Here an example: JSFiddle-Example
Related
When I use the following CSS, I go from the output of the image at the top to the image at the bottom:
.menu-border {
border: 1px solid #000000;
padding: 30px 0px;
border-radius: 4px;
}
The purpose is to have a larger hover area for the mega menu, otherwise the mega menu disappears when the mouse is between the ''Assessment'' menu and the mega menu box. However, when my padding is at 30px, all the menu items shift higher up. What would I need to add to keep this large box (the edges will be white - I put black so it is easier to see now) without affecting the rest of the menu?
edit1: the menu is generated from the pearl theme for wordpress. The .menu-border is an added css class for the ''assessment'' menu.
If we could get a working snippet it would be easier to help.
Also, there are two menus in your capture. I guess that adding the code it's the second one. Looks you're missing vertical-align property
.menu-border {
border: 1px solid #000000;
padding: 30px 0px;
border-radius: 4px;
vertical-align: middle;
}
I'm unsure what you're exactly looking for but have a crack at this CSS that's using the inline-block property -
.menu-border {
display: inline-block;
border: 1px solid #000000;
padding: 30px 0px;
border-radius: 4px;
}
Further reading on CSS inline-block
https://www.w3schools.com/css/css_inline-block.asp
If someone ever face that problem, the solution was to replace my code with this
body .stm-header .stm-navigation__default > ul > li > a {
padding: 30px 30px;
}
I am designing a custom arrow (using background image) for a group of select boxes.
Problem is that each select box should be very short in width and therefore if the text is longer than this width it appears over the background arrow.
I need to find a way to display the background image over the text.
The other problem is that there are about 500 such select boxes and I do not wish to add a span layer in the HTML code for each of those boxes to accomplish the goal.
Therefore I am looking for a CSS solution only. JS would not work either.
Here is the CSS:
.dropdown{
width:57px;
border: 1px solid #cfcfcf;
height: auto;
border-radius: 5px;
padding:3px 4px 4px;
position: relative;
z-index: 0;
overflow:hidden;
}
.dropdown select{
border: none;
background-color: transparent;
outline: none;
padding: 1px 0 0 5px;
width:145%;
background: url(http://i57.tinypic.com/nnmgpy_th.png) no-repeat right;
background-position: 55%;
}
JSFiddle here:
http://jsfiddle.net/pazzesco/r6c9zcpc/
Any comments or ideas will be greatly appreciated.
Have you considered just increasing the right padding on your .dropdown selector to say 10px?
padding:3px 10px 4px; should make sure your text never overlaps over the arrow.
Or do you actually want the text to display behind the arrow (which won't work as you've got the arrow as a background image)? :)
I hope I haven't misunderstood the question!
Cheers
Ines
Just increase padding-right values by 30px.
.dropdown select{ padding: 1px 30px 0 5px; }
Result: This will clip the text; 30px from right side.
JSFiddle Here: [http://jsfiddle.net/nvishnu/Lq7hosrd/2/]
I want to create a partial circular border around an element using pure css. I've been able to achieve the effect to a certain extent in this: http://jsfiddle.net/5MZMj/202/
However, this removes 25% or the border, How do I remove just 5% or say 20% ?
Also, how do I rotate the border (without rotating the content inside)?
Code in jsfiddle:
HTML:
<div class="one">
<div class="two">4.5</div>
</div>
CSS:
.two {
font-size: 24px;
display:inline;
padding-bottom:5px;
}
.one {
padding: 10px;
border: 1px solid green;
border-radius: 25px;
border-top-color: transparent;
width:30px;
margin-left: 10px;
}
Edit: image to give an idea of the effect I'm trying to achieve: http://imgur.com/JU78ICT
Edit2: sorry, I just realized I had linked the wrong jsfiddle, correct one is: http://jsfiddle.net/5MZMj/202/
I'm not sure if this is what you're looking for, but a simple hack is to put the upper right circle behind your main div:
#f {
z-index: -1;
}
http://jsfiddle.net/5MZMj/199/
Partially solved using psuedo elements, see: http://jsfiddle.net/5MZMj/205/
:after {
display: inline-block;
content: "";
border-left: 10px solid transparent;
border-top: 25px solid #fff;
border-right: 10px solid transparent;
border-top-color: #fff;
position: absolute;
margin-top:-42px;
margin-left: -5px;
}
Editing margin-top, margin-left and border-right changes the amount of arc to be removed.
[There ought to be a better way though, someway in which editing a single variable changes the amout of arc to be removed]
I didn't get you all, but may be this is the answer.
#f
{
right:-93px;
}
http://jsfiddle.net/7zDNK/
You can specify the radius for each corner if that what you mean:
border-radius: 5px 10px 15px 20px;
Starting with the top-left corner and going clockwise.
If you want to take less of a chunk out of the corner, you need to adjust the positioning of the circle.
http://jsfiddle.net/5MZMj/201/
#f {
right: -85px;
top: -85px;
}
I am trying to create a banner effect using just CSS and no images. The result is supposed to look like this:
This example was created using the html and CSS in this jsfiddle. This is the CSS for the banner (.widget-title):
.widget-title
{
background-color: #B1DDC9;
color: white;
height: 24px;
text-align: center;
}
.widget-title:before
{
content: "";
float:left;
width: 0px;
height: 0px;
border-style: solid;
border-width: 12px 0px 12px 12px;
border-color: #B1DDC9 #B1DDC9 #B1DDC9 white;
}
.widget-title:after
{
content: "";
float:right;
width: 0px;
height: 0px;
border-style: solid;
border-width: 12px 12px 12px 0px;
border-color: #B1DDC9 white #B1DDC9 white;
}
This seems to work fine on all the browsers I've tested on my desktop and phone. Both Safari and Chrome on my Ipad2 however render a faint thin line on the left and right outer edges of the banner:
What is causing this phenomenon? Is there anything I can do to resolve it?
This looks like it is the background colour bleeding through at the edge of the triangle, probably due to some kind of sub-pixel rendering quirk. From your CSS this shouldn't be happening, as the triangles should be butted up against the edges of the title, but that's CSS for you ;)
Not sure if it'll work for you, but you could try putting position:relative on the title and position:absolute on the two triangles, with the relevant left:0 and right:0 to position the where you want them. In my experience this is generally more reliable than floating in terms of where your elements will end up.
As a side note, you could use border-color:transparent for the three sides you don't want to display. This would also allow you to make the triangle one pixel bigger and overlap the left/right by a pixel (i.e. left:-1px). That should definitely sort your problem.
Try changing border-width: 12px 0px 12px 12px;
to border-width: 12px 2px 12px 12px;
Maybe this will extend the "back" of the triangle just off the banner and get rid of the line
With this html:
<div class="sectionheading">User Information</div>
<table id="UserInputTable" class="xInputTable">
...and this CSS:
.sectionheading{width:100%; font-size:20px; font-weight:bold; background-color:#28BA87; color:white; text-align:center; border-style:solid; border-width:thin; border-color:Black; border-collapse:separate; overflow:hidden}
.xInputTable {text-align:left;
vertical-align:middle;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-collapse:separate;
overflow:hidden}
table.xInputTable {width:100%; border: solid thin red; border-top-style:none;}
The DIV ends up rendering 2 pixels wider in both IE and Firefox (the left borders line up perfectly, the right borders are off by two pixels). Using the IE web dev toolbar, both elements have a width of 100%. In Firebug, they have widths of 950px and 948px. Here is the computed CSS (from IE developer toolbar):
DIV
BORDER-LEFT-WIDTH: thin;
BACKGROUND-REPEAT: repeat;
BORDER-RIGHT: thin solid black;
WIDTH: 100%;
FONT-SIZE: 300;
MARGIN-RIGHT: 0px;
OVERFLOW: hidden;
BORDER-LEFT: thin solid black;
BORDER-COLLAPSE: separate;
PADDING-TOP: 0px;
VERTICAL-ALIGN: middle;
DISPLAY: block;
BORDER-BOTTOM: thin solid black;
BORDER-TOP: thin solid black;
BACKGROUND: #28ba87;
BORDER-BOTTOM-WIDTH: thin;
FONT-FAMILY: Arial;
BORDER-TOP-WIDTH: thin;
LINE-HEIGHT: 1.5;
BACKGROUND-COLOR: #28ba87;
PADDING-RIGHT: 0px;
BORDER-RIGHT-WIDTH: thin;
PADDING-LEFT: 0px;
TEXT-ALIGN: center;
COLOR: white;
FONT-WEIGHT: 700;
MARGIN: 0px;
PADDING-BOTTOM: 0px;
TABLE
BORDER-LEFT-WIDTH: thin;
BACKGROUND-REPEAT: repeat;
BORDER-RIGHT: thin solid red;
WIDTH: 100%;
FONT-SIZE: 180;
MARGIN-RIGHT: 0px;
OVERFLOW: hidden;
HEIGHT: auto;
BORDER-LEFT: thin solid red;
BORDER-COLLAPSE: separate;
PADDING-TOP: 0px;
VERTICAL-ALIGN: middle;
DISPLAY: block;
BORDER-BOTTOM: thin solid red;
BACKGROUND: white;
BORDER-BOTTOM-WIDTH: thin;
FONT-FAMILY: Arial;
BORDER-TOP-WIDTH: thin;
BACKGROUND-COLOR: white;
LINE-HEIGHT: normal;
PADDING-RIGHT: 0px;
BORDER-RIGHT-WIDTH: thin;
PADDING-LEFT: 0px;
MARGIN-BOTTOM: 0px;
COLOR: #222;
TEXT-ALIGN: left;
MARGIN: 0px;
PADDING-BOTTOM: 0px;
Any idea what concept I'm missing here?
Wild guess here, but tables by default have cellpadding or cellspacing (can't remember which one) set to 2px by default, unless you set border-collapse: collapse;.
This doesn't affect the table itself, but the td's inside the table.
If my guess is correct, either of the following should work:
Set border-collapse: collapse; in the css for the table
Put "cellpadding="0" cellspacing="0"in the` tag
Add a new CSS declaration table.xInputTable td { padding:0; margin:0; }
Could be the 2 pixels for each (left and right) border which aren't taken into account when calculating the width.
Try to not set the width specifically on the div (and maybe the table too). They default to 100% but get calculated slightly different when it's set, I believe.
pb is correct.
When you apply "border" to a table, it will adjust the width to accommodate for the border. DIVs will add the border in addition to the width (as will most elements with a specified width, tables are special).
Hurix is correct that there is no point in adding width 100% to the div since it is a block element and will take up the full width of the parent by default, so you can take it off and it will auto-size to stay inside the parent even with the border added to its width. The table, however, should get the width: 100% if you want it to be full width.
Borders act like padding, so you are adding 2px to your width => 100% + 2px
Also consider using meyers reset.css to make sure your on level ground before jumping in.
http://meyerweb.com/eric/tools/css/reset/
Also you are getting sorta crazy with the all caps thing.
Ok so, in my opinion, at this point I would roll all the way back to just the html. Use FireBug religiously and only add one CSS attribute at a time to be sure that it doesn't have a negative effect on the layout.
Unfortunately the nature of CSS is that it is full of exceptions and things to consider with inheritance. Starting with just a reset.css, and maybe making all your different major elements a different background color (because that wont change the size like border) can help you see where you elements ACTUALLY reside.
Following up on kmiyashiro and pb I wanted to add that if you wrapped your table in a div with the style "width:100%; border: solid thin red; border-top-style:none;" and changed the style on "table.xInputTable" to "width: 100%" then everything should line up.