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
Related
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 have a layout for a website i am working on, basically i have about 10 pages but my footer will not stay in the same place. I have tried so many different variations of code and have been unsuccessful.
The footer should stay at the bottom of the page in the same place on every page.
I am fairly new to this so bear with me if there is any obvious mistakes.
I have created a JSFiddle with a page where the footer is at the bottom but it inst as far down as i need.
#footer {
width: 100%;
height: 20px;
text-align: center;
clear:both;
position:relative;
}
http://jsfiddle.net/mjbL7tcx/
I have created another JSFiddle with another page where it is no where at all where i want it.
http://jsfiddle.net/dej6b2df/
Any suggestions much appreciated.
I fixed your HTML code on both your example pages (too long to post as code chunk and unnecessary):
Page 1
Page 2
The solution is on the CSS side of things: don't float your photo elements, you should be good to go. I also optimized your css styles for your photo-divs since you can set a photo-div class to all your photo divs, style them as a group, and use their numeric class (ex: photo-div1) to set the background image:
.photo-div {
width: 241px;
height: 400px;
margin-left: 60px;
margin-top: 90px;
border: 2px solid #333;
box-shadow: 0px 7px 7px #999;
overflow: hidden;
display:inline-block;
}
.photo-div1 {
background-image: url(images/wildlife/cow.jpg);
}
.photo-div2 {
background-image: url(images/food/ice-cream.jpg);
}
.photo-div3 {
background-image: url(images/flowers/blue-bells.jpg);
}
.photo-div4 {
background-image: url(images/sport/cycling-zoom.jpg);
}
I've recently encountered some problems with CSS Sprites.
I want them to switch pictures every function call, function itself is OK since it only removes and adds css class.
I have following CSS:
#slider_arrow {
padding-left: 200px;
position: relative;
top: -1px;
}
.red_arrow_sprite {
background: url(/Images/onex/arrows.png) 0 0 no-repeat;
width: 25px;
height: 12px;
}
.yellow_arrow_sprite {
width: 25px;
height: 12px;
background: url(/Images/onex/arrows.png) -26px 0 no-repeat;
}
.black_arrow_sprite {
width: 25px;
height: 12px;
background: url(/Images/onex/arrows.png) -51px 0 no-repeat;
}
Slider_arrow is:
<span id="slider_arrow" class="red_arrow_sprite"></span>
the element in which I change class.
And the problem is that my Sprite file has 75px width and 25px height.
(3x 25px/25px)
With the CSS I Presented I get the result where I see all 3 pictures at the time with red_arrow_sprite class, 2 pictures with yellow_arrow_class and 1 picture which is desired with black_arrow_class.
What have I done wrong with CSS?
Thanks in advance.
http://jsfiddle.net/9b57pb50/
Check out this solution
I've removed padding and add some display properties.
I am trying to create a div that is square on the top site and flows into a triangle,
the square part is not so hard, and works fine, but the triangle part is a bit harder.
The box needs to change from size with the screen size, in the square i did this by using % in the width and height, but i cannot use the % sign in the border property
The code i have on this moment
HTML
<div id="overV12" class="menuItem" onclick="scrollToT('#overons')" onmouseover="setHover('overV12')" onmouseout="setOldClass('overV12')"><div class="menuInner">Over V12</div></div>
CSS
div.menuItem
{
height: 5.38%;
width: 7.44%;
position: fixed;
background-color: rgb(239, 239, 239);
cursor: pointer;
z-index: 12;
text-align: center;
top: 4.3%;
}
div.menuItemHover
{
height: 5.38%;
width: 7.44%;
position: fixed;
cursor: pointer;
z-index: 12;
text-align: center;
top: 4.3%;
background-color: rgb(211, 211, 211);
}
div.menuItemActive
{
height: 7.8%;
width: 7.44%;
position: fixed;
cursor: pointer;
z-index: 12;
text-align: center;
top: 4.3%;
background-color: Black;
color: White;
}
The JavaScript is used for setting the class: i did this because i use a parralax library and wanted to set the button on "active" on a certain height
i hope someone can help me (and perhaps others) with this problem
jsfiddle
example
My idea is that when the div is set on class menuItemActive, it will have the arrow, else not
This is only when it is set on active
This uses two overlapping divs to create the triangle and this method to make things fluid while maintaining the aspect ratio.
Working Example
.div1 {
width:100%;
height:100%;
border: 1px solid red;
position:absolute;
z-index:2;
}
.div2 {
width:70%;
min-height:70%;
transform:rotate(45deg);
border:1px solid blue;
position:absolute;
left:15%;
top:65%;
z-index:1;
}
#container {
display: inline-block;
position: relative;
width: 25%;
}
#dummy {
padding-top: 100%;
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
I left it without a background so you could see how it works.
You can do triangles in CSS.
Here's a link to an article, outlining the general technique: http://css-tricks.com/snippets/css/css-triangle/. There's also a variety of similar/other approaches for slightly different situations I've found and used, just search "css triangles".
To briefly describe the technique: it uses four borders on an element (if you wanted a down arrow, you'd put this element inside your <div id="overV12">, or depending on the effect, apply it to your inner <div>). Some are transparent, some aren't. By changing the border widths and colors, you can generate CSS triangles, which can be fully customized to form different angle degrees, lengths, etc. I've also seen this concept used to create CSS-only speech bubbles as well as tooltip handles.
I've used this technique extensively, and in my use cases, it worked in every browser (although I do remember having a problem with IE6 on one project).
I found the solution by using javascript instead of percentage,
Fiddle
I hope this can help some other people as well
The java script i used is this:
$(document).ready(setSize());
function setSize() {
var halfWidth = ($('.div1').width()) / 2;
$('.div2').css('border-width', ('50px ' + halfWidth + 'px 0 ' + halfWidth + 'px'));
$('.div2').css('top', ($('.div1').height()));
}
its better to use a background image for custom shaped like this
it'll make it easier to manager and you can make it adjust itself for different resolutions easily
Problem
I am working on a project to theme a website, but I am not allowed to change the HTML or JavaScript. I can only update the CSS stylesheet and add/update images.
Requrements
I need to style a h3 tag to have an
underline/border after the content.
This h3 will be used multiple times
on the page, so the conent length can
vary
The solution needs to be
cross-browser (IE 6/7/8, FF 3, &
Safari)
Sample Code
<div class="a">
<div class="b"><!-- etc --></div>
<div class="c">
<h3>Sample Text To Have Line Afterwards</h3>
<ul><!-- etc --></ul>
<p class="d"><!-- etc --></p>
</div>
</div>
Sample Output
Sample Text to Have Line Afterwards ______________________________________
Another Example __________________________________________________________
And Yet Another Example __________________________________________________
Notes
I think #sample:after { content: "__________"; } option wouldn't work since that would only be the correct length for one of the tags
I tried a background-image, but if it gave me problems if I gave it one with a large width
Using text-indent didn't see to give me the effect I was looking for
I tried a combination of border-bottom and text-decoration: none, but that didn't seem to work either
Any ideas would be much appreciated!
This will work if class 'c' is always the parent of the h3...
.c {
position: relative;
margin-top: 25px;
border-top: 1px solid #000;
padding: 0px;
}
h3 {
font-size:20px;
margin-top: 0px;
position: absolute;
top: -18px;
background: #fff;
}
It lets the container have the border, then uses absolute positioning to move the h3 over it, and the background color lets it blot out the portion of c's border that it's covering.
try attaching a background image to class c of a repeating underline, then add a background color to the h3 to match the background of the container. I believe that you would have to float the h3 left in order to get the width to collapse. does that make sense?
.c {
background: #ffffff url(underline.gif) left 20px repeat-x;
}
.c h3 {
margin: 0;
padding: 0 0 2px 0;
float: left;
font-size: 20px;
background: #ffffff;
}
.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c ul { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }
http://besh.dwich.cz/tmp/h3.html
H3 {
border: 1px solid red;
border-width: 0 0 1px 0;
text-indent: -60px;
}
You need to know the width of the text, but works pretty well.
The only solution I've imagined so far is to make a PNG or GIF image, with 1px height and a very large width (depends on your project, could be like 1x2000px), and do something like this:
h3#main-title { background: url(line.png) no-repeat bottom XYZem; }
where the XYZ you'd set manually, for each title, in 'em' units. But I can't figure out a 100% dynamic solution for this one, without using JS or adding extra markup.
this worked for me
div.c
{
background-image:url(line.gif);background-repeat:repeat-x;width:100%;height:20px;
}
div.c h3
{
height:20px;background-color:white;display:inline;
}
you make the div the width of your content
then you set the background of the h3 to the background of your page. this will then overlap the background imageof the full div. You might want to play with background positioning depending on your image
Can you pad content in the UL tags? If so, this might work:
h3 { display: inline; margin: 0; padding: 0 10px 0 0; float: left;}
ul { display: inline; border-bottom: 1px solid black; }
check source code of: http://nonlinear.cc/lab/friends/elijahmanor.html
then again i have NO IDEA how to control the end of the line.
Assuming that you're working with dynamic content, the best I could suggest is to accept graceful degradation and use a mix of great_llama and Bohdan Ganicky
Imagine:
A long title that will wrap to two lines___________________
and leave you like this in great_llama's solution
and nothing appearing at all with Bohdan Ganicky's solution if ul isn't immediate preceded by ul.
Solution:
.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c + * { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }
We care about IE6, but accept that this is an aesthetic touch and IE6 users will not suffer. If you can't get the designer to accept this AND you can't alter the HTML, then do something else (before you find another job ;))
Here's a better answer:
.c {
background: url('line.png') repeat-x 0 20px;
}
H3 {
background-color: white;
display: inline;
position: relative;
top: 1px;
}
Use a small, 1px height, couple px wide image as your underline and occlude it with a background color on your H3.
h3:after {
content: '___________';
}