This is quite a niche issue, but here goes....
I'm using slick slider and have put together a nested vertical carousel with slider syncing which works great.
I only have 1 CSS issue I just can't resolve.
My vertical slider controls are on the left hand side and the content on the right.
I've used display:table-cell on the vertical controls and content so they appear side by side. All working well so far!
I want to add a triangle to the right of the control, which means I need to add a negative left margin to the content area.
This is where I have a problem....it seems display: table-cell ignores the left margin.
The image below is what I have - notice the gap between the edge of the control and the border of the content. This is what I'm trying to close up
The image below is what I'm after - no gap between control and content border
This is the fiddle I've created https://jsfiddle.net/damiantaylor/njds51yh/220/
Is it possible to fix this issue?
EDIT I have tried changing the display:table-cell to display:inline-block but Slick seems to calculate the width of the content container incorrectly when I do that
I've managed to get this working, but it's a horribly hacky way of piecing the border together.
I'd still love a better answer if there is one!
I've but the border together like this......
.vertical-nav-wrapper:before {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 13px;
box-sizing: border-box;
height: 100%;
border-top: 1px solid #fe0115;
border-bottom: 1px solid #fe0115;
border-left: none;
clear: both;
border-right: none;
}
.vertical-nav-wrapper:after {
content: '';
position: absolute;
right: 13px;
top: 0;
width: 1;
height: 100%;
border-top: none;
border-bottom: none;
border-left: none;
clear: both;
border-right: 1px solid #fe0115;
}
the new fiddle is here https://jsfiddle.net/damiantaylor/njds51yh/263/
EDIT if there's another slider/carousel that will handle what I'm trying to achieve better than Slick, I'd accept that as an answer too!
Related
I need to create a layout that has an inner border around the whole page that sits on top of the content like below.
So far I have
body::before {
border: 2px solid black;
border-radius: 22px;
content: '';
display: block;
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
z-index: 1;
}
But that only extends to the height of the window, it doesn't extend to cover the whole of the page's content.
Some of the different sections of the page need to extend to the full width of the window so I can't wrap the whole page in a div and apply border styles to that, the element with the border needs to sit on top of everything else.
Any ideas on how to do that?
Easiest way I have found is to create an element that sits over the others on your site:
<div class="overlay">
<div class="overlay-border"></div>
</div>
And then add the appropriate styling:
.overlay{
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
padding: 20px;
box-sizing: border-box;
pointer-events: none;
z-index: 99;
}
.overlay-border{
border-radius: 10px;
border: 5px solid #111;
width: 100%;
height: 100%;
}
The "z-index: 99" might need to be increased if you start allocating z-index to other elements. "pointer-events: none" ensures that website users can still click on links and other elements behind the overlay.
You can also change "position: absolute" to "position: fixed" if you would like this overlay across the whole window.
And then if you want the overlay across the entire page you can add this simple javascript:
var body = document.body,
html = document.documentElement;
var height = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
document.querySelector('.overlay').style.height = height + 'px';
I am sure there is a better way to do this, however, this was just in the interim as I found my solution and I look forward to seeing the easier ways to do this :)
I am trying to create this style directly through CSS. I have the whole button figured out except the tail on the top left corner. How do I add that through CSS? Here is what I want it to look like;
You can use pseudo css/html elements for this
:before and :after
See this hyperlink for a fuller understanding https://css-tricks.com/almanac/selectors/a/after-and-before/
Basically the opening paragrap states
The ::before and ::after pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML. While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this:
div::before {
content: "before";
}
div::after {
content: "after";
}
this makes your HTML have fake elements that can be styled in the HTML
<div>
before
<!-- Rest of stuff inside the div -->
after
</div>
You can use the border css attribute on the :before pseudo element
HTML example
** DISCLAIMER ** the following CSS was borrowed from Code Pen https://codepen.io/RajRajeshDn/pen/QpYqMW and this user rajeshdn deserves the credit
<div class="speechBubble">
Will do!
</div>
.speechBubble {
padding: 20px;
background-color: #888;}
.speechBubble:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 15px solid transparent;
border-right: 15px solid #888; // medium grey
border-top: 15px solid #888;
border-bottom: 15px solid transparent;
left: -16px;
top: 0px;}
.speechBubble {
padding: 20px;
background-color: #888;
width: 25%}
.speechBubble:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 15px solid transparent;
border-right: 15px solid #888; // medium grey
border-top: 15px solid #888;
border-bottom: 15px solid transparent;
left: -16px;
top: 8px;}
<div class="speechBubble">
Will do!
</div>
How does it work
By using the border and position property and clever use of color (or colour if your British but that doesn't work in HTML/Web design - have to use the American spelling)
every (most) HTML elements can have a border - even pseudo (fake) elements
the position attribute is set to 'absolute' see css positioning
it is postioned or steered into position using the top and left attributes (I use trial and error to get the right location though smarter people probably calculate the positioning)
as each element has 4 borders: top, right, left, bottom you have to manipulate them so the result ends up looking like a triangle using color and transparency (set the color to the same background coolor as your main speech bubble)
It takes (me anyway) a bit of time to get these things looking perfect and sometimes there are cross browser or device issues (PCs, phones, tablets etc) so sometimes a small effect can require heaps of work
I'm trying to build buttons that look like this:
I can accomplish this using :after and CSS triangles, but I can't get that working with variable height elements. Is there any way to accomplish this and keep variable height?
Fiddle: http://jsfiddle.net/AaP47/2/
You could use a skewed div in this case. The only issue here is that as your buttons get taller, due to the skew, they will get slightly wider. This may not be an issue if you are only dealing with 1 or 2 lines. If they get very tall it may cause things to noticeably not line up exactly:
http://jsfiddle.net/AaP47/3/
.button.triangle:after {
content: "";
background-color: red;
display: block;
height: 100%;
position: absolute;
right: -30px;
top: 0;
width: 60px;
transform: skewX(-10deg);
}
This is also not completely scalable. You would need to decide on the largest height you have to support and adjust accordingly. The taller you need to support, the wider the skewed div must be.
Result (without the red): http://jsfiddle.net/AaP47/4/
Just because I had fun tinkering in a different direction and to offer an option concept even though you apparently already got an answer;
a {
padding-right: 20px;
padding-left: 20px;
text-decoration: none;
color: white;
font-weight: bold;
display: inline-block;
border-right: 30px solid transparent;
border-top: 50px solid #4c4c4c;
height: 0;
line-height: 20px;
}
a p {margin-top: -45px;}
and;
<a href="#">
<p>this is a triangle button<br/>
with multiple lines!</p>
</a>
jfiddle: http://jsfiddle.net/AaP47/6/
Cheers!
I've got a set up similar to this: http://codepen.io/anon/pen/iAJnx where the main content is rather long. What I want to do is to put a border round the visible part of the screen as in this screenshot: http://i.imgur.com/ENtLau4.png
What I want to do is to create 4 divs that are positioned at the edges of the screen, but I'm struggling both with the positioning and giving the divs height and width without content. Does anyone have an idea about this?
Note: I've already tried using an overlay, but it makes the content non-clickable.
Try this:
HTML:
<div class="border-box"></div>
CSS:
body { position: relative; }
.border-box {
border: 5px solid blue;
box-shadow: 0 0 100px 100px #fff;
position: fixed;
pointer-events: none;
bottom: 10px;
left: 10px;
right: 10px;
top: 10px;
}
How it works:
I absolutely positioned an overlay with borders, that will stick the edges of the screen by using top, bottom, left, right definitions. To make the content below selectable, you set pointer-events: none; on the overlay.
Example: http://codepen.io/anon/pen/BxJbh
If you want to achieve the same results without adding additional HTML markup, you can use the :before sudo selector to prepend a block to the body. Simply add this CSS and it will produce the same results:
body:before {
border: 5px solid blue;
box-shadow: 0 0 100px 100px #fff;
display: block;
content: '';
position: fixed;
pointer-events: none;
bottom: 10px;
left: 10px;
right: 10px;
top: 10px;
}
Example: http://codepen.io/anon/pen/BDhql
you have to set in your content id (#content)
border:4px solid blue;
min-width:700px; //change accordingly.
min-height:1600px //change accordingly
The above code will fix the problem of border as well as the height & width you want to set without having any content.
I am having trouble with the alignment of a span contained within a button tag.
I have already done something like this before and it worked. In fact, it's the same css but different sizes.
The problem is that the containing span seems to be aligning to the right.
CSS:
#closePreviewBtn {
position: absolute;
height: 24px;
width: 24px;
right: 0;
background: #B9DEFD;
border-top: solid 1px #333333;
border-left: solid 1px#333333;
border-right: solid 1px #333333;
border-bottom: solid 1px #333333;
border-radius: 4px;
}
#closePreviewBtn .close {
display: inline-block;
position: relative;
height: 20px;
width: 20px;
background: url(../imagenes/close.png) no-repeat center;
padding: 0;
/*right: 2px;
bottom: 1px;*/ //This fixes the problem but it's manual
}
HTML:
<html>
<body>
<button id="closePreviewBtn" name="closePreviewBtn"><span class="close"></span></button>
</body>
</html>
Thanks a lot!
Simple fix - seems like the button has a padding by default. Just set it to 0:
#closePreviewBtn {
padding: 0;
}
Now you can position however you want - maybe adding a margin to the span if you want to move it around.
Hope that helps you,
In your #closePreviewBtn rule, remove the right:0;. Setting the position to absolute and right to zero will take the element out of the document flow and position it as far to the right as possible.
jsFiddle example
I noticed that the button still has some padding after resizing it to 10px. I found no way to set that space off.
The solution i've foud to center it was removing the button height and width, because it will expand to wrap the span and it will be centered.
For some weird thing, it works for small buttons. But for bigger buttons like 30px x 50px it will just be fine to set height and width, or at least the padding is very very hard to notice if there's some.