This should be fairly simple, but after trying a lot of solutions from Google and other Stack Overflow questions I still haven't found a solution. I have a html.erb partial in a rails project:
<div class="resource-body">
<div class="arrow-up"></div>
<h4><%= resource.title %></h4>
<div class="resource-section-id">
<span hidden><%=resource.section_id%></span>
</div>
</div>
And the corresponding CSS:
.resource-body{
padding-left: 20vw;
margin: 0;
}
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
margin: 0;
border-bottom: 5px solid black;
}
The arrow appears above the URL. I'm trying to get the arrow to be immediately to the left of the link. I've tried the usual suspects like display: inline, etc. but no dice. Any ideas?
Here I have modified the css and added two properties in .arrow-up class
float: left;
padding-top: 6px;
Here is the link to fiddle
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
margin: 0;
border-bottom: 5px solid black;
position: relative;
top: 33px;
left: -18px;
}
Make it easy!!!!!
just add this rules to your css:
h4 a {float:left;}
Enjoy it!!!
Related
So I have the following two triangles:
The points are cut off, but my code is literally just this:
.navCaret {
position: relative;
float: right;
right: 5px;
top: 5px;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #ccc;
}
.navCaretOL {
position: relative;
float: right;
right: 9px;
top: 9px;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #333;
}
And as you can see in this JSFiddle, it actually DOESN'T cut the edges off when rendering these triangles in a JSFiddle.
All in all this could not be a more standard way of creating a pure CSS triangle and has worked for me many, many times. Anyone have any idea what could be causing this strange behavior? Thanks.
EDIT: By the way, confirmed to behave the same way in IE and Chrome, both latest versions.
OMG I just figured this out by going through my page and deleting each CSS rule line-by-line. Apparently the problem was caused by the following rule:
div.navUpper * {
padding-top: 4px;
}
'.navUpper' is the container my carets were in. The '*' selector was applying 4px padding to them -- the effects of which can be seen here: https://jsfiddle.net/6f4yxp4e/8/
Thanks again to those who responded -- you were both right in different ways.
The triangle is only pointy when the border stretches all the way to the center, meaning anything altering the content box has to be 0 - this includes width/height and padding. Check for other css rules that overwrite your height: 0; or add some padding.
.navCaret {
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #ccc;
outline: 1px solid red; /*for illustration purposes only*/
}
.navCaretOL {
height: 0;
width: 0;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #333;
white-space: nowrap; /*for illustration purposes only*/
outline: 1px solid red; /*for illustration purposes only*/
}
<div class="navCaret">height != 0</div>
<br>
<div class="navCaretOL">height == 0 (content is overflowing)</div>
I want to draw this:
So I wrote this code:
HTML:
<div class="outer_border_cp">
<div class="inside_border_cp"><p>تعديل معلومات المستخدم</p></div>
</div>
CSS:
.outer_border_cp {
border: 1px solid #ccc;
padding-left: -10px;
}
.inside_border_cp {
border: 1px solid #ccc;
margin-top: 10px;
margin-bottom: 10px;
position: static;
}
But I got this result:
How can I complete this correctly?
I changed your CSS to this, and it works:
.outer_border_cp {
margin: 10px;
border: 1px solid #ccc;
}
.inside_border_cp {
border: 1px solid #ccc;
margin: 10px -10px;
padding: 0 20px;
position: static;
}
You can see it on codepen: http://codepen.io/anon/pen/cgvlD
Try using margin-left:-10px rather than padding-left:-10px. You cannot have negative padding values in CSS.
I'm trying to position a 10px height orange bar on the top of my HTML banner. When I put in the code the orange bar is displayed, but it's displayed on the top of the window. How do I move it so it's displayed on the top of the HTML banner? I'd like it in the "Top 10 Wi-Fi Routers" banner
see my jsfiddle: http://jsfiddle.net/huskydawgs/tKn9f/77/
<div id="wrapper-landing">
<p>
A Wi-Fi router is at the center of most people's home networks, but not every router is a good one. It's been a while since we last looked at the best Wi-Fi routers on the market, this week we want to take a fresh look and build a better top five list.</p>
<div class="box-promo-row">
<div class="box-promo-orange"></div>
<h3>
Top 10 Wi-Fi Routers</h3>
<span class="box-promo-content">
The last time we talked about Wi-Fi routers, 802.11ac wasn't really a thing yet, and now that it is and routers that support it have come down in price, it's time to take a fresh look. This week we want to know which routers you think offer the best combination of speed, range, features, customization options, and as always, bang for the buck.</span>
</div>
</div>
</div>
#wrapper-landing {
width: 916px;
margin: 0 auto 50px auto;
padding: 0;
}
#wrapper-landing p {
color: rgb(102, 102, 102);
font-family: 'SegoeRegular',Helvetica,Arial,sans-serif;
font-size: 1.1em;
line-height: 1.6em;
}
.box-promo-row {
width:893px;
margin: 0;
padding: 30px;
border-left: 1px solid #e2e3e4;
border-right: 1px solid #e2e3e4;
border-bottom: 1px solid #e2e3e4;
margin-top: 0;
margin-bottom: 0;
background-color: #e2e3e4;
box-shadow: 1px 2px 0px rgba (0,0,0,0.15);
}
.box-promo-row h3 {
font-family:SegoeBold, Helvetica, Arial;
font-size:1.3em;
color:#2251a4;
margin: 0 0 2px 0;
}
.box-promo-content {
color: #616161;
font-family: 'SegoeRegular',Helvetica,Arial,sans-serif;
font-size: 1em;
line-height: 1em;
}
.box-form-body {
display: inline-block;
width: 100%;
}
.box-promo-orange {
position: absolute;
content: "";
width: 100%;
height: 10px;
background: #f66511;
left: -1px;
top: 0;
z-index: 20px;
border: 1px solid #f66511;
}
You'd have to use relative positioning on .box-promo-row
or
you don't use a separate element at all and use an orange border?
.box-promo-now{
border-top: 10px solid orange;
}
please update this code with your CSS and the orange line will come just above the header..
.box-promo-row {
position:relative; /*Added this line*/
width:893px;
margin: 0;
padding: 30px;
border-left: 1px solid #e2e3e4;
border-right: 1px solid #e2e3e4;
border-bottom: 1px solid #e2e3e4;
margin-top: 0;
margin-bottom: 0;
background-color: #e2e3e4;
box-shadow: 1px 2px 0px rgba (0,0,0,0.15);
}
.box-promo-row:before {
position: absolute;
content: " ";
width: 100%;
height: 10px;
background: #f66511;
left: -1px;
top: 0;
z-index: 20px;
border: 1px solid #f66511;
}
Here is the Working Demo. http://jsfiddle.net/kheema/tKn9f/87/
Your .box-promo-orange CSS should set position: relative instead of absolute. Absolute means it positions it relative to the whole page. Relative positions it relative to the parent container (in this case box-promo-row).
Use
.box-promo-row {
position: relative;
}
I want to make this <hr> so it will stretch the full width, right to the edges of its parent container. I have tried adding margin-left/padding-right to overcome this but it keeps changing when resizing (responsive).
.single-article .article-container-inner {
background: #f0eded;
border: 1px solid #c9c7c7;
padding: 20px;
margin-bottom: 20px;
}
.single-article hr {
margin-top: 30px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #c9c7c7;
width:100%
}
<div class="article-container single-article">
<div class="article-container-inner">
<hr>
</div>
</div>
(also at http://jsfiddle.net/bh2f6/1/)
Is there a better solution for this?
Edit: I can't edit the parent container's padding as that is needed for bunch of other elements.
Your width:100%; on the <hr /> and the padding on the parent were messing things up. The <hr /> naturally stretches across the screen and doesn't need width:100%, so remove it. Then to compensate for the padding, just add the same negative margin to the <hr />.
Change your CSS to this:
.single-article hr {
margin: 30px -20px 20px;
border: 0;
border-top: 1px solid #c9c7c7;
}
See working jsFiddle demo
Something like this might work...
hr {
padding: 50px 0;
border: none;
&:before {
// full-width divider
content: "";
display: block;
position: absolute;
right: 0;
max-width: 100%;
width: 100%;
border: 1px solid grey;
}
}
http://codepen.io/achisholm/pen/ZWNwmG
HR Secret things, you must know.
When your horizontal rule (hr) leaves 15px from left and right, probably when you use with bootstrap.
<hr class="my-hr-line">
.my-hr-line {
position: relative;
left: -15px;
width: calc(100% + 30px);
height: 2px;
border: 2px solid blue;
}
Hope it will help many one.
Removing Padding should work for you
Working Example
.single-article .article-container-inner {
background: #f0eded;
border: 1px solid #c9c7c7;
margin-bottom: 20px;
}
.single-article hr {
margin-top: 30px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #c9c7c7;
width:100%
}
You mean like this?
Fiddle
just change the padding to padding: 20px 0;
Is it possible to somehow create a double border in CSS, with these 2 added customizations:
One line is slightly thicker than the other
There is a small gap between the two lines
This is the kind of border I need:
EDIT:
Guys, I cannot make any changes to my existing HTML code. I can only apply CSS for the existing HTML code. As far as you're concerned, consider I have a div named sampleDiv, and I want to apply the border on the top side of this div (see below).
Secondly, if you're using any technique other than border, please note that I only want to apply the this specialized border on the top side of my sampleDiv div.
pure CSS & Cross browser - the thickness and spacing can be customized
After your latest Edit: this is a Working Fiddle
without changing the markup, top border only.
your HTML:
<div class="sampleDiv">
some content
</div>
new CSS
.sampleDiv
{
border-top: 2px solid black;
padding-top: 1px;
}
.sampleDiv:before
{
content: '';
border-top: 1px solid black;
display: block;
width: 100%;
}
If you are allowed to change the DOM:
one line anywhere in the markup: Working Fiddle
HTML:
<div class="SpecialLine"></div>
CSS:
.SpecialLine
{
border-top: 2px solid black;
height: 2px;
border-bottom: 1px solid black;
}
full container border: Working Fiddle
HTML:
<div class="SpecialContainer">
<div class="Content">
here goes the content
<div>
</div>
CSS
.SpecialContainer
{
border: 2px solid black;
padding: 1px;
}
.Content
{
border: 1px solid black;
}
There are various ways you can have multiple borders. One way is to use box-shadow, you can specify multiple box shadows to create the effect you want.
Example
box-shadow: 0 0 0 5px black, 0 0 0 7px red;
Update
I have created a jsFiddle to show you how you can create your borders using box-shadow
Fiddle
There's not a specific property or something for this,but you can easily create one.Something like this:
html:
<div id="wrapper">
<div id="middle">put whatever you want here</div>
</div>
css:
#wrapper{
border: 3px solid black;
padding: 1px;
}
#middle{
border: 1px solid black;
}
here's a js fiddle link:
http://jsfiddle.net/roostaamir/GEqLJ/
UPDATE:
so I saw your edit,and here's the first thing that came to my mind(if you have the width of your sampleDiv this will work):
#sampleDiv
{
border-top: 3px solid black;
width: 500px; //this is an example
position: relative;
}
#sampleDiv:before
{
content: "";
display: block;
position: absolute;
top: 1px;
width: 500px;
height: 1px;
background-color: black;
}
Your div: <div class="framed" />
Simple CSS:
.framed {
border: solid 2px #ccc;
box-shadow: 0 0 0 14px #ccc;
outline: solid 8px #fff;
}
Demo Fiddle: http://jsfiddle.net/uRFsD/
The easiest way to do this would be wrapping the main div in a container div for the second line like so:
.inner {
border: 2px solid #000;
}
.outer {
border: 1px solid #000;
padding: 1px;
}
It's not particularly semantic but it's an easy way to get the job done. You could also use border-image if being semantic is important, but it's more complicated. I guess you could also use both border (inner) and outline (outer) on the same div, but that is not ideal since outline isn't technically part of the box model at all as far as I understand it.
HTML
<div></div>
<div></div>
CSS :
div{
display: block;
background-color: #000;
}
div:nth-child(1){
padding: 2px 0;
}
div:nth-child(2){
margin-top: 1px;
padding: 1px 0;
}
Check this fiddle
May be something like below:
div {
border-top: 3px solid #00f;
position: relative;
z-index: 10;
margin: 10px;
width: 200px;
}
div:before {
content: "";
border-top: 1px solid #f00;
position: absolute;
top: 0;
left: 0;
right:0;
z-index: -1;
}
http://jsbin.com/iWiGEzU/1/edit?html,css,output
Like
demo
css
.outline {
border-top: 2px solid #000;
border-bottom:1px solid #000;
height:3px;
}
CSS
.doubleBorder
{
border: 4px solid black;
padding: 2px;
}
.doubleBorder>div {
border: 2px solid black;
}
HTML
<div class="doubleBorder">
<div>
<p>Hello</p>
<p>World</p>
</div>
</div>
Working demo
Not in pure CSS as far as I know. Instead you could add in a div element to your HTML, set its width to the one below it and set it's border-top, thickness, margin properties to be meet your thicker border requirement.