I know to insert the text and the buttons , i just don't understand those two black images or whatever they are . Thanks in advance :)
I'll make a guess. The black images are placeholders (because everything else you have looks like placeholders). I'm guessing you are searching for the CSS to make the frames around the images and perhaps how to "float" them on top of each other?
.float-stuff-relative-to-this-div {
position: relative;
}
.image-frame{
border: 5px solid white;
box-shadow: 0 1px 3px black;
}
.floaty-float{
position: absolute;
top: 20px;
left: 20px;
/* Puts it behind stuff with higher z-index (default is 0) */
z-index: -1;
}
<div class="float-stuff-relative-to-this-div">
<img class="image-frame" src="http://via.placeholder.com/200x200/000000/000000">
<img class="image-frame floaty-float" src="http://via.placeholder.com/200x200/000000/000000">
</div>
Related
I tried to make an under-line dotted under word to mark it as user provided information.
It is fine to use a pre-defined html under-line tag <u>..</u> with styling dotted or style border-bottom. However, it is a little bit problem with printing (the dotted not showing correctly); Therefore I decided to use dotted symbols ... instead because it is showing correct and precise.
By that way, I tried to make the word takes place of dotted points' spaces, and dotted point would stay a little bit lower from it current position under the word.
To make it clear, it would look like this:
My HTML Code do to this is like so:
.dotted:before{
content: '..................';
position: absolute;
top: 20px;
}
<p>Name: <span class="dotted">Jonh David</span></p>
However, as the information provided by user is varied, I cannot determined how many dotted points I would need to fit those information correctly.
Your tip is very much appreciated. Thanks.
Can use border-bottom-style css property
.dotted {
border-bottom: 1px solid #000;
border-bottom-style: dotted;
}
https://jsfiddle.net/j965444n/
I found this really cool site for doing this. Refer the site below.
Styling Underlines
You can play around with the properties and get the desired thickness and padding, also this is not dependent on setting the width based on the content size!
Check my below example of how this is done!
.dotted {
background-image: linear-gradient(to right, #000000 50%, transparent 50%);
background-position: 0px 100%;
background-repeat: repeat-x;
background-size: 4px 2px;
padding: 0px 3px;
}
<p>Name: <span class="dotted">Jonh David</span></p>
I think it's something like this:
#myDIV {
text-decoration: underline;
text-decoration-style:dotted;}
w3schools underline
Note: The text-decoration-style is only supported by Firefox.
If a simple dotted border isn't good enough for you and say you want to control the spacing between the dots - you could make your technique work by setting overflow:hidden on the parent element.
.dotted {
position: relative;
overflow: hidden;
display: inline-block;
vertical-align: bottom;
}
.dotted:before {
content: '...............................';
position: absolute;
top: 4px;
width: 100%;
letter-spacing: 2px; /* adjust to control spacing between dots */
}
<p>Name: <span class="dotted">Jonh David</span></p>
<p>Name: <span class="dotted">Jo</span></p>
<p>Name: <span class="dotted">Jonh David blabla</span></p>
I wonder what is the problem with underline or you could try border-bottom: 1px dotted #444 but whatever, here's your method - a span with dotted :pseudo - which takes into account the length of the element.
content is a lot of … (use dots if you wish)
it's cropped with overflow: hidden
test cases with 2 very different lengths
3rd example is good ole dotted border (works since IE7)
.dotted {
position: relative;
}
.dotted:before{
content: '…………………………………………………………………………………………';
display: block;
position: absolute;
top: 3px;
left: 0; right: 0;
overflow: hidden;
}
.other-dots {
border-bottom: 1px dotted black;
}
<p>Name: <span class="dotted">Jonh David</span></p>
<p>Name: <span class="dotted">Maria-Magdalena von Stroheim de la Peña</span></p>
<p>Name: <span class="other-dots">Other way with bd-bottom</span></p>
I think #Christopher Marshall's idea is gonna make the same effect on printed page, so here is an example with background : https://codepen.io/Pauloscorps/pen/YrwWYo
HTML
<p>My name is : <span>John David</span></p>
CSS :
p {
span {
display:inline-block;
font-weight:bold;
&:after {
content:"";
display:block;
width:100%;
height:1px;
background:red url('https://img11.hostingpics.net/pics/194508dot.jpg') repeat center bottom;;
}
}
}
I have 2 images. One image (through background-url) with position relative is the main image and another image (through background-url) with position absolute is placed above the first image.
when i shrink the browser the 2nd image doesn't follow responsiveness. Is there a way to do?
Thanks in advance!!
// 1st image//
&main-background {
z-index: -1;
position: absolute;
width: 100%;
height: 500px;
background-image: url("images/campaign/1-bg.jpg");
}
// 2nd image//
&__main-bg {
position: relative;
width: 100%;
height: 550px;
background-color: black;
margin-bottom: 2em;
color: $blue-2017;
background-image: url("images/campaign/main-1.jpg");
box-shadow: 0 10px 6px -6px #777;
#include media($small-screen) {
font-size: 0.8em;
}
}
What is the value for this variable for $small-screen ?
Is there a need to us that ?
#include media($small-screen) {
}
Try removing those lines and see if it works . If it doesn't.
Try using reducing the percentage of your image 2 and using brute force Css ( !important ) at the end of each line in your Css for your second image. I am pretty sure that there are some Css overwriting your second image
Thank you in advance for your help.
I have spent a good deal of time scouring the web and this forum for a solution to having a diagonal angled bottom to my navigation buttons. Here is an example:
I want to avoid using images if possible. I'm wondering how to create a box like this in the example image for each navigation choice with CSS. This navigation code will make its way into a Wordpress install. I really appreciate the expertise. Thank you again!
So good-news, bad-news...
This can be most-of-the-way done using nothing but CSS.
For sufficiently-new browsers (ie: you don't require IE<=8 to maintain all styles that Chrome 42 has) this can be done without using extra DOM elements.
This can also be done using just CSS ...wait for it...
buuuut the CSS-only version can only make the angle a set width.
It can't make the angle stretch across an arbitrary width, so either the buttons have to be the same length, or the width/height of the angle has to be the same on all buttons (meaning part of the bottom will be flat, on longer buttons).
CSS-only Solution (good enough?)
nav {
background-color: green;
padding: 20px;
}
nav > button {
background-color: rgb(60, 60, 60);
color: rgb(120, 120, 120);
position: relative;
border-radius: none;
border: none;
padding: 20px;
}
nav > button:after {
content: "";
width: 0;
height: 0;
right: 0;
bottom: 0;
position: absolute;
border-left: 60px solid transparent;
border-bottom: 15px solid blue;
}
<nav >
<button >About</button>
<button >Bios</button>
</nav>
I made the colours obvious for a reason.
For the full experience of the cheat, I'll make the solution a little more obvious, by changing the colour of the left border:
Behind the Scenes Look
nav {
background-color: green;
padding: 20px;
}
nav > button {
background-color: rgb(60, 60, 60);
color: rgb(120, 120, 120);
position: relative;
border-radius: none;
border: none;
padding: 20px;
}
nav > button:after {
content: "";
width: 0;
height: 0;
right: 0;
bottom: 0;
position: absolute;
border-left: 60px solid red;
border-bottom: 15px solid blue;
}
<nav >
<button >About</button>
<button >Bios</button>
</nav>
As you can see, the triangle that I created using the border-bottom (in blue) and border-left (transparent) is just about perfect.
The width of the border-left determines the width of this effect, and the height of the border-bottom determines the height; it just happens that the left one is invisible.
If that blue were set to the same green as the <nav> itself, then it would look like a notch was missing from the button, rather than having a corner painted over.
If you wanted to make this ES6-8 friendly, you'd just add 1 div per button (after each button or whatever), and size that and use its borders.
Really, you'd need to add a div to contain the div and the button, as well (so the container was relatively positioned, the button took up 100% of its space, and the paint-chip was absolutely positioned inside).
If you don't care about old browsers getting the exact same view, you really don't need to do this to yourself.
That's most of the way solved...
If you can say "My theme's smallest button is 60px, so a 60px triangle is okay", then great. Change the colours and you're done.
If not, there's a little more you can do.
It's not ideal, and it's not as pretty as it could be (still prettier than a lot out there), but if you can use JS to do this, and you can guarantee that all of the buttons are going to be on the page before the code runs, and their widths won't change, you can do something like:
JS + CSS (good enough!)
(function () {
var nav;
var buttons;
var style;
var styleText;
function getElWidth (el) { return el.getBoundingClientRect().width; }
function borderLeftText (width, i) {
return ["nav > button:nth-child(", i + 1, "):after { border-left: ", width, "px solid transparent; }"].join("");
}
function getStyleEntries (els) {
return els.map(getElWidth).map(borderLeftText);
}
try {
nav = document.querySelector("nav");
buttons = [].slice.call(nav.querySelectorAll("button"));
style = document.createElement("style");
styleText = getStyleEntries(buttons).join("\n");
style.textContent = styleText;
document.head.appendChild(style);
}
catch (err) {
// because the same browsers that will blow up won't support the CSS anyway;
// don't fix it, just move on
// good code shouldn't do this, but that's another story
}
}());
nav {
background-color: green;
padding: 20px;
}
nav > button {
background-color: rgb(60, 60, 60);
color: rgb(120, 120, 120);
position: relative;
border-radius: none;
border: none;
padding: 20px;
}
nav > button:after {
content: "";
width: 0;
height: 0;
right: 0;
bottom: 0;
position: absolute;
border-left: 60px solid transparent;
border-bottom: 15px solid green;
}
<nav >
<button >About</button>
<button >Bios</button>
</nav>
Here I'm basically grabbing all buttons that exist at this time, and writing my own CSS file, full of
nav > button:nth-child(1):after { /*...*/ }
nav > button:nth-child(2):after { /*...*/ }
and then appending a <style> tag to the <head> with that text inside.
There will just be one rule inside each one of those selectors; the border-left width is going to be set to the actual width of the button, in pixels.
Terms and Conditions
Now you have exactly what you wanted, but it required JS and requires that the buttons be on the page before that code runs, and requires that the widths not change (through styling, or through media-queries, et cetera). If either of those things happens, and you want to keep the corners updated, that code needs to be run again.
And if that's the case, special care should be made to cache and reuse the style tag, so that you don't have 8 tags with the same rules, on the page.
Conclusion
If you're good with mostly-fine, go CSS-only.
If you're good with knowing that the fix doesn't have to respond in real-time, or be applied to more and more buttons that are dynamically added, go JS + CSS.
If neither of those is good enough, use an .svg or .png
Transform: skewY(deg);
will skew a div up like that, you might need to build it in layers though, and then skew the text -deg to unskew the text
Simple example:
https://jsfiddle.net/uex2umac/
.wrapper{
width:500px;
height:300px;
background-color:#000;
overflow:hidden;
}
.tobeskew{
width:280px;
height:220px;
margin-bottom:0px;
background-color:#f1f;
text-align:center;
transform:skewY(-15deg);
}
p{
transform:skewY(15deg);
line-height:220px;
font-size:40px;
color:#fff;
}
<Div class="wrapper">
<div class="tobeskew">
<p>Hello</p>
</div>
</div>
Here's a solution using SVG background images. Note that using SVG requires IE9+ though...
BODY
{
background-color: #333;
}
.button
{
float:left;
float: left;
font-family: sans-serif;
font-weight: bold;
font-size: 44px;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115' preserveAspectRatio='none'><polygon points='0 0 100 0 100 100 0 115' fill='%23282828'/></svg>");
background-size: 100% 100%;
color: #999;
height: 110px;
line-height: 96px;
padding: 0 50px;
margin-right: 10px;
}
.button.selected
{
color: #fbac31;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115' preserveAspectRatio='none'><polygon points='0 0 100 0 100 100 0 115' fill='black'/></svg>");
}
<div class="button">
<div>ABOUT</div>
</div>
<div class="button selected">
<div>BIOS</div>
</div>
I am trying to create a box that has a 'highlight' down the sides of it, and at the top.
The CSS for the box was pretty simple, however, now that I introduced this 'highlight' to the design, it has added another level of complexity to the CSS...
I have tried a lot of things, not sure if they will help but here is my most recent:
/* Define the Main Navigation Drop Downs */
#mn_navigation .dd {position:relative;width:226px;padding:29px 0 0;background:transparent url("//beta.example.co.uk/_images/_global/dd_handle.png") no-repeat;z-index:1000;}
#mn_navigation .dd nav {padding:30px 0;background:#3E5032 url("//beta.example.co.uk/_images/_global/dd_bg.png");border-radius:3px;}
#mn_navigation .dd nav a {font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#fff !important;height:25px;line-height:25px;}
Please note I have posted the above to show that I have actually tried to sort this myself. The above code will probably not even help as a starting point as a restructure of the HTML may be necessary!
Here is the current HTML (probably needs to be restructured):
<div id="dd_foo" class="dd">
<nav>
LINK
</nav>
</div>
Here is a possible restructure (something like):
<div id="dd_foo" class="dd">
<div class="handle"><!-- Dropdown Handle --></div>
<nav>
LINK
</nav>
</div>
This is what I need the box to look like (notice the faint white border at the top and half way down the sides):
I have also included the box split into its separate elements (handle and background)
I think I can see how this can be done with clever overlaps and nested divs, but ideally I don't really want to resort to this... Can anybody suggest an alternative solution?
Simplest approach
You can try achieving this using a simple box shadow:
.plaque {
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.32);
/*...*/
}
An Example
Here's an example using 1 class and a div on jsbin.
Copy paste code
This code is only for modern browsers; it might cause ie < 9 and other non supporting browsers to explode.
.plaque:after {
top: -9px;
content: " ";
height: 11px;
width: 30px;
position: absolute;
pointer-events: none;
left: 50%;
margin-left: -15px;
display: block;
background-repeat: no-repeat;
}
.plaque {
width: 250px;
height: 100px;
display: block;
border: 0;
outline: 0;
padding: 12px 16px;
line-height: 1.4;
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.32);
border-radius: 5px;
border: 1px solid transparent;
font-family: sans-serif;
color: white;
font-size: 1.2em;
text-overflow: ellipsis;
position: relative;
top: 6px;
}
/* Use whatever background you want */
.plaque { background-color: green; }
.plaque:after { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcJJREFUeNqMUktPU0EU/mZuL6Up1RCjC4oRau4t4FJ84EKID/ZAjI9/6Mo/4MadG5dqJGjBatpyuY+2UNreeXDOBE0MNHGSSWZyzvnOd77zicdbd+EVJKyxGPSHmC4XIYSAMQYCoJhn81wJKSnHWhR8D1oZl69yhamiD8GBSefpywc2XKzjy7fP+PDuk5iUJxnksvvkxX1buxkgThOEt5exvr1qJ+XKy5CfvXpow9oSsn6GdqeF40EPK+GKY/ZfTNa3Vm1AI6TdFAeNfQgp0CKgrJehVg1AGl5gJLTWfxGfv15zI3BBnB5CehJGG5Cw8EjY6tw8KjNXsfv9K96//SguMOERgoU6+ic9NH8eQClNGzDQBMLb4FU1fzdxFB+hev0WNnbu2X802TxnkGQJoriNymwZHrFgAbhdidbOK+YTxR0ojLEc3sHmm0dOI8Gq10n9OI1xGLVcMvuGGYyHOYqlKcfK9wvOF3/i12ZvoFK+gsavPUgGSLsJkm4En4xDTqMi45iUZqZdd34zJY7L8was2enoGMHCEmS3l6LxYx9qrJ2I7FTNelBxPlKuYDgYu9nzUe6cenoygqF/J2o7AmcCDACumSjtgWp8aAAAAABJRU5ErkJggg==); }
Have been attempting to make a custom sidebar similar to the image linked below. However I'm unsure of how to go about coding the custom div (if even necessary) and incorporating a variable border.
I have tried managing multiple s to achieve the slanted header but to no success.
I have considered the option of just using the template as a background image but I'm not sure if that is the best approach as I would ideally like the sidebar to be scalable due to drop down menus.
I apologize if this isn't a wealth of information but I am just clueless as how to accomplish an end result. Any advice would be greatly appreciated.
http://oi47.tinypic.com/wjce1j.jpg
you can do this by
1, make a div for header like
2, make left and right side div with 100% height and repeat this image both side
it would be like
If you don't want to use images, you should be able to accomplish this with just css and html. The benefit to doing this with css and html is that it will re-size in the browser better (although newer browsers are getting better at re-sizing images) and take no time to load.
You could try something along the lines of the following.
Here are the CSS styles:
#tabbox {
position:absolute;
width: 200px;
height: 200px;
background: black;
border: 2px solid #C7ECFE;
-webkit-box-shadow:-4px 6px 12px #C7ECFE;
-moz-box-shadow: -4px 6px 12px #C7ECFE;
box-shadow:-4px 6px 12px #C7ECFE;
}
#tabbox:before {
margin-top:-2px;
margin-left:0px;
height: 0;
width: 143px;
content:"";
position: absolute;
border-bottom: 30px solid #C7ECFE;
border-right: 60px solid black;
}
#tabbox:after {
position: absolute;
top:0;
height: 0;
width: 142px;
content:"";
position: absolute;
border-bottom: 30px solid black;
border-right: 60px solid transparent;
}
And then in your body just define the div with id = "tabbox". This will give you something like this: