After trying every possible variation of position: relative/absolute/etc and negative margins, I'm wondering if someone can tell me how to get the two green bars to overlay the header image - at top and bottom - at http://itlaunchpad.patienceandfortitude.com/iphone-cant-get-your-email/.
*Note that the main header has to remain an img and not become a background property due to the way WordPress' custom image header handles responsiveness.
Many thanks!
Absolutely position the two bars within the common ancestor element. For example:
<header>
<nav>Foobar</nav>
<img src="http://placekitten.com/640/200" />
<nav>Foobar2</nav>
</header>
And with the following CSS:
header {
position: relative
}
nav:nth-of-type(1) {
top: 0
}
nav:nth-of-type(2) {
bottom: 0
}
nav {
background-color: rgba(0,255,0,.25);
box-sizing: border-box;
position: absolute;
width: 100%;
}
Which gives you the following: http://jsfiddle.net/M3jyV/
Try this css
and make the inline css to external css its for your reference (inline css).
bootstrap.css line 5416
#masthead.container {
padding: 0;
position: relative;
width: 1198px;
}
app.css line 13
#banner {
position: absolute;
}
bootstrap.css line 3779
.navbar {
color: #777777;
overflow: visible;
position: absolute;
width: 100%;
}
<div class="container" style="width:100%">
<header style="margin-top: -40px;" class="navbar" role="banner">
see image:
you can use CSS z-index Property
for Example- http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
DEMO - http://jsfiddle.net/xY5Re/75/
Related
I am writing a web-app using React.js. I have come to the point where I need to control the position of a note on a bar. I intend having two buttons (one for up, one for down) and have the bar and note be two separate .svg image files that I will somehow draw ontop of each other. Like this:
SVG note ontop of SVG bar
So my question is:
How can I draw an SVG ontop of another SVG and control its position (dynamic position)? I have tried using
style={{position:'fixed'}}
for the note but the formatting gets all messed up.
Edit:
.svg image files.
A page element with relative positioning gives you the control to absolutely position children elements inside of it.
If you give the note position: absolute, you'll be able to position it wherever you want, relative to the parent.
.parent {
position: relative;
}
.note {
positition: absolute;
/* place note in the top left */
left: 0px;
top: 0px;
}
See here for more on this technique.
Here's a snippet using <div>s instead of SVGs, run it for an example:
function moveUp() {
document.getElementById("note").style.top = "0.5rem";
}
function moveDown() {
document.getElementById("note").style.top = "2.5rem";
}
.container {
position: relative;
}
.bar {
width: 15rem;
height: 4rem;
background-color: lightblue;
}
.note {
position: absolute;
top: 1.5rem;
left: 1rem;
width: 1rem;
height: 1rem;
border-radius: 1rem;
background-color: red;
}
<div class="container">
<div class="bar"></div>
<div class="note" id="note"></div>
</div>
<div class="buttons">
<button onclick="moveUp()">up</button>
<button onclick="moveDown()">down</button>
</div>
position:absolute will give you the freedom to position the <img> tag freely - in relation to the next parent element with a position:relative property. For example like this:
<div style={{position: 'relative'}}>
<img src="bar.svg"></img>
<img src="note.svg" style={{
position: 'absolute',
left: x,
top: y
}}></img>
I have come across a fragment of CSS that works. I would like to understand why it works for my own edification. My question is a general one on the sematics of using :after in CSS.
The Wordpress Twenty Nineteen theme puts a dark filter on feature images in order to make the (white) header text more readable.
I was searching for a way to remove the dark filter on specific feature images.
I found a post that suggests this css:
.site-header.featured-image:after {
background: none;
}
It works a treat!
Using Firefox inspector I see that .site-header & .featured-image are both classes of an enclosing <header> element. Layout is flex.
I'm trying to get my head round this usage of :after. My search of :after suggests that is a way of adding 'content' after an element. This example add no content.. instead it seems to be modifying/overriding an existing property.
If I remove ':after' it stops working, so It's definitely necessary.
Can any kind expert explain what is going on here and/or point me to a spec that explains it?
Thank you
What it actually appear to be seeing is specificity.
What :after does is add an element after the last child or content of the element that :after is applied to. See: https://developer.mozilla.org/en-US/docs/Web/CSS/::after
Here is a rough example
.featured-image {
position:relative;
padding:5px;
}
.featured-image > p {
position: relative;
z-index:10;
}
.featured-image:after {
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: '';
border: 1px solid black;
background-color: #CCC;
z-index:1;
}
.site-header.featured-image:after {
background: none;
}
<div class="featured-image"><p> :after will have a background</p></div>
<div class="site-header featured-image"><p> :after wont't have a background 2</p></div>
As .site-header.featured-image:after is more specific than .featured-image:after, .site-header.featured-image:after takes preference for any conflicting styles.
With ::after and ::before you can add html elements or at least something that mimics the functionality of an html element.
::before will be placed before all the elements inside the element and ::after would be the last element.
As an example, Say we already have this markup,
<div class="some-div">
<h1>some text</h1>
<div>Another div</div>
<!-- bunch of other elements -->
</div>
If we add the following css,
.some-div::after,
.some-div::before {
content: "";
display: block;
}
It'll result in this markup,
<div class="some-div">
::before
<h1>some text</h1>
<div>Another div</div>
<!-- bunch of other elements -->
::after
</div>
Now, I'm guessing that your Wordpress theme adds an after element with a background-color of some value that overlays the image. And by setting the background of that ::after element to none you overwrite those styles and get rid of the overlay.
This snippet further elaborates what happens in the theme.
.some-div {
width: 20rem;
height: 20rem;
}
.img {
position: relative;
background-color: orangered;
width: 100%;
height: 100%;
}
.some-div:hover .img::after {
position: absolute;
top: 0;
left: 0;
content: "";
display: block;
width: 100%;
height: 100%;
background-color: black;
opacity: .3;
}
<div class="some-div">
<div class="img"></div>
<div>
I'd like to change the background image of the body (or my section) on link hover as in this example:
http://www.passion-pictures.com/paris/directors/
Is there any way to do it without using JS.
I only know how to code HTML/CSS
EDIT :
When I Hover on the first link (Michelle) it changes the background of my section as expected.
But when I hover on the second link (Franck) the top of my second link background begins under my first link. So the top of my default background is still visible.
My links are displayed vertically
It is possible but there will be too much HTML code and CSS workarounds.
if you still want in CSS only then refer this code - change css background on hover
HTML code
<div class=container>
<div class="link">
bg1
<div class=background></div>
bg2
<div class=background><div>
</div>
</div>
CSS Code
div.link > a {
displya: inline-block !important;
position: relative !important;
z-index: 5;
}
.bg1:hover + .background {
background: red;
}
.bg2:hover + .background {
background: green;
}
.background {
background: transparent;
position: absolute;
width:100%;
height: 100%;
top:0;
left: 0;
}
This will give you an idea of implementation but I'll suggest you go with JS that is a much better way of doing it.
Hope this might help you
HTML
<div class="container">
bg1
</div>
CSS
.bg1:hover::after {
content: "";
position: fixed;
top: 0;
left: 0;
background: red;
width: 100%;
height: 100%;
z-index: -1; /* index would get changed based on your need */
}
I am creating a landing page with HTML/CSS and using a little bit of bootstrap. I am having trouble resizing my main page to fit 100% height and width when the page is opened.
I want it to look like google docs' main page: https://www.google.com/docs/about/. If you go there, you'll see:
the nav is in fixed position and follows you everywhere. I got that part down.
The main image automatically resizes depending on your screen size. The icon-arrow-hint (the arrow on mid-bottom of page) can always be seen on the bottom of the image.
Two problems that I have:
Got this weird gap on the right side even though I set right: 0.
After page load, it looks like it fits about 90% of the height and I still need to scroll down. I placed this text on the bottom - theoretically, this should be shown on the bottom of the screen without scrolling, but I have to always scroll slightly down.
This is the JSfiddle: https://jsfiddle.net/iggyfiddle/DTcHh/35435/
I am using position: absolute and I 0-ed all 4 sides.
How can I fit the yellow div 100% height and 100% width like the google page nicely?
If you give an element height: 100%, but there's another element above or below in the same container, you need to adjust for the height of the other element, otherwise there will be an overflow.
Also, adjust for the -15px horizontal margins applied by Bootstrap.
Try this:
.primary-content {
position: absolute;
top: 10%;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 90%; /* ADJUSTMENT */
background: yellow;
margin: 0; /* NEW */
}
https://jsfiddle.net/DTcHh/35437/
Your .primary-content div has the bootstrap .row class on it which declares negative horizontal margins. A solution would be to remove the .row class from your div or to override the margins in css.
These are the default bootstrap .row styles:
.row {
margin-right: -15px;
margin-left: -15px;
}
Using the class of .row adds a margin of 15px. A quick fix is to remove the class from primary-content div like so.
<div class="primary-content">
<div class="col-md-12">
<h1>This is a super awesome product</h1>
<h4>Help me stackoverflow, you are my only hope!</h4>
</div>
or add a class and remove the margins.
The reason that your yellow div is going too far is that you need to set the height to 90%.
To fix the weird padding on the right side, add margin: 0 !important;.
.primary-content {
position: absolute;
top: 10%;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 90%; // change this
background: yellow;
margin: 0 !important; // add this
}
See this JSFiddle or run the snippet below
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.universal-header {
background: red;
border-radius: none;
height: 10%;
width: 100%;
position: fixed;
}
.color-brown {
color: #58482C;
text-decoration: none;
}
.primary-content {
position: absolute;
top: 10%;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 90%;
background: yellow;
margin: 0 !important;
}
.bottom {
position: absolute;
bottom: 0;
right: 0;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<nav class="navbar universal-header navbar-static-top">
<a class="navbar-brand navigation-title color-brown">
</a>
<span class="color-brown navbar-brand navigation-title">HELLO</span>
<span class="navbar-brand navigation-title pull-right color-brown">Login</span>
<span class="navbar-brand navigation-title pull-right color-brown">Features</span>
<span class="navbar-brand navigation-title pull-right color-brown">About</span>
</nav>
<div class="row primary-content">
<div class="col-md-12">
<h1>This is a super awesome product</h1>
<h4>Help me stackoverflow, you are my only hope!</h4>
</div>
<div class="bottom">
You should be able to see me without scrolling
</div>
</div>
Problem 1:
Got this weird gap on the right side
When using bootstrap's row class it will add a margin of -15px to the left and right of your div, see the second answer to this question if you want to understand better why.
Solution: don't use the row class for your primary-content div.
Problem 2:
this should be shown on the bottom of the screen without scrolling,
but I have to always scroll slightly down
you are using absolute positioning, remember that needs a relative positioned parent container, in your case, since you don't have any, everything is relative to the initial containing block, hence your viewport/window.
Quick fix: delete the height: 100%; css from .primary-content
Warning: using absolute positioning the way you are right now will bring you trouble if you want to add more content below your yellow container
Using slick: http://kenwheeler.github.io/slick/
HTML
<div class="carsoule" style="overflow:hidden; width: 300px; height: 200px; margin: 0 auto; background:red">
<div>
<img src="http://theheightsanimalhospital.com/clients/15389/images/playful-kitten-6683.jpg" width="250">
</div>
<div>
<img src="http://theheightsanimalhospital.com/clients/15389/images/playful-kitten-6683.jpg" width="250">
</div>
</div>
CSS
.slick-prev, .slick-next {
height: 55px;
width: 55px;
}
.slick-prev {
left: -80px;
/*plan to add button image*/
}
.slick-next {
right: -80px;
/*plan to add button image*/
}
Jsfiddle Demo
Tried to override, but the prev and next buttons stay stuck inside the carousel. Wanted to replace the css with button images and the buttons should be outside the carousel, just like the example on slick website. Couldn't figure where I went wrong.
Help appreciated!
UPDATE : $('.carsoule').slickNext(); won't work anymore.
Use $('.carsoule').slick("slickNext"); instead.
https://github.com/kenwheeler/slick/issues/1613
Looking at the css that this plugin uses, I noticed the parent has overflow:hidden applied to it, so your arrows wont show beyond the parents container.
You can mess with adding a extra overflow !important rule to the container, however, I've looked over at some methods that you can use to trigger next/prev slide, and turns out that you can call on your carousel to change slide, when clicked on a certain class/id outside of the carousel container.
So basically, after your carousel(or anywhere on the page if it helps you out), add two div/button/a/whatever tags, and add either a class or id to call upon the slider to change its slide using: slickNext() or slickPrev()
You can wrap everything in a master container, your carousel and those two extra tags and style them the way you want.
Check out the demo here, and the extra js/markup used bellow:
<div class='next-button-slick'>
next please
</div>
<div class='prev-button-slick'>
prev please
</div>
$('.next-button-slick').click(function(){
$('.carsoule').slickNext();
});
$('.prev-button-slick').click(function(){
$('.carsoule').slickPrev();
});
UPDATE 2
If you want to keep your markup, and not add any extra stuff, you can either remove the inline overflow: hidden rule from the container, or via css with overflow: visible !important, and set those 2 arrows to position absolute, and work you way from there.
Check out the demo here and the css bellow:
/*extra stuff*/
.carsoule{
overflow: visible !important;
}
.slick-prev, .slick-next {
position: absolute;
background: red;
}
<div class='next-button-slick'>
next please
</div>
<div class='prev-button-slick'>
prev please
</div>
$('.next-button-slick').click(function(){
$('#portfolio-carousel').slick("slickNext");
});
$('.prev-button-slick').click(function(){
$('#portfolio-carousel').slick("slickPrev");
});
This should solve your issue,
CSS
body {
background: #d7d7d7;
}
.carsoule {
background: yellow;
margin: 0 auto;
overflow: visible;
width: 250px;
}
.slick-prev,
.slick-next {
height: 55px;
width: 55px;
}
.slick-prev {
left: -80px;
/*plan to add button image*/
}
.slick-next {
right: -80px;
/*plan to add button image*/
}
HTML
<div class="carsoule">
<div>
<img src="http://theheightsanimalhospital.com/clients/15389/images/playful-kitten-6683.jpg" width="250" />
</div>
<div>
<img src="http://theheightsanimalhospital.com/clients/15389/images/playful-kitten-6683.jpg" width="250" />
</div>
</div>
The carsoule had overflow:hidden, so if you positioned it outside it was hidden.
The problem is the hover. Just add the block of code below to it and you'll be just fine.
.slick-next:hover,
.slick-prev:hover {
background-color: red;
color: white;
}
See working example here
You missed out the important slick-theme.css http://kenwheeler.github.io/slick/slick/slick-theme.css. I added this file and meddled with your codes and came up with this solution:
HTML
Re-styling your wrapper to include .slider class with proper margins:
class="carsoule slider"
Modified CSS
.slick-prev:before, .slick-next:before {
color:red;
}
.slick-prev, .slick-next {
height: 55px;
width: 55px;
}
.slick-prev {
left: -80px;
/plan to add button image/
}
.slick-next{
right: -80px;
/plan to add button image/
}
.slider {
margin:0 80px 0 80px;
width: auto;
}