Ok so i've made a simple webpage with an external CSS, now it appears fine on my computer but when i send it to my friend the bottom buttons are not together?
My Monitor
http://i.imgur.com/ektmF.png
Friends Monitor
http://i.imgur.com/RmB3t.png
HTML Code
<body>
<style type="text/css">
body {
overflow:hidden; <!-- Setting body overflow to hidden -->
}
<!-- Background image -->
</style>
<div id="backgroundWrapper">
<img src="background.png" />
</div>
<!-- Home button -->
<div id="homebtn">
<a href="..\home.html" onmouseover="SwapOut()" onmouseout="SwapBack()"><img name="homebtn" src="homebuttonup.png"/>
</a>
</div>
<!-- Shop Button -->
<div id="shopbtn">
<a href="shop.html" onmouseover="SwapOutshop()" onmouseout="SwapBackshop()"><img name="shopbtn" src="shopbuttonup.png"/>
</a>
</div>
</body>
CSS Code
#backgroundWrapper{width:100%;height:100%;z-index:-1;position:absolute;}
#backgroundWrapper img{width:100%;height:100%;z-index:-1; position:absolute;}
#homebtn {width:100%;height:100%;z-index:1; position:absolute;top:90%; left:35.3%;}
#shopbtn {width:100%;height:100%;z-index:1;position:absolute; top:90%; left:50%;}
#text {
color:black;
font-size:15;
text-align:center;
position:relative;
top:20%;
font-family:verdana;
font-weight:bold;
}
#myform {
position:absolute;
left:10%;
top:30%;
}
#submitbuttons {
position:relative;
text-align:center;
top:80%;
}
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px
}
You are using position: absolute; so you need to wrap the child elements inside a position: relative; container so they don't flow out in the wild
For example
<div class="container">
<div class="firstbtn"></div>
<div class="secondbtn"></div>
</div>
<style>
.container {
position: relative;
height: 200px;
width: 500px;
}
.firstbtn {
position: absolute;
left: /* whatever */;
top: /* whatever */;
}
.secondbtn{
position: absolute;
left: /* whatever */;
top: /* whatever */;
}
</style>
So now both button won't flow out of the container element
change this css as
#backgroundWrapper{width:100%; z-index:-1;position:absolute;}
#backgroundWrapper img{width:100%;height:100%;z-index:-1; position:absolute;}
#button-wrapper{width:30%; margin:0 auto;top:90%;z-index:1;}
#homebtn {position:relative;top:90%;float:left;}
#shopbtn {float:right;}
#button-wrapper adjust the width accordingly
create button-wrapper and put both btns in html
Related
I have blog posts each with a cover image. I want to use these images in my post listing page as an experiment to see if it will liven up the page a little bit.
The images are too bright. I either want the opacity lowered or an overlay must be added.
Changing the opacity will change the opacity of the text. Adding an overlay has positioned itself on top of the anchors rendering them useless.
I am using the Gatsby Casper Starter Kit in the event that you are interested.
PostListing.jsx
...
<PostFormatting className={className} key={title} cover={cover}>
<PostHeader>
<h2 className="post-title">
<Link to={path}>{title}</Link>
</h2>
...
PostFormatting.jsx
...
const style = cover ? { backgroundImage: `url(${cover})` } : {};
return <article className={className} style={style}>{children}</article>;
...
Generated HTML
<article class="post" style="background-image: url("https://picsum.photos/1280/500/?image=800");">
<header class="post-header">
<h2 class="post-title">
Test Post
</h2>
</header>
<section class="post-meta">
<span>
<span class="tag">Mindset</span>
<span class="tag">Productivity</span>
</span>
<time class="post-date" datetime="2017-06-27">27 June 2017</time>
</section>
<section class="post-excerpt"><p>...</p></section>
</article>
CSS
All the styles I have for the post element.
<element.style> {
background-image: url(https://picsum.photos/1280/500/?image=800);
}
.home-template .content .post,
.tag-template .content .post {
background-color: rgba(0, 0, 0, .1);
padding: 30px 50px 50px 50px;
}
.post {
position: relative;
width: 80%;
max-width: 710px;
margin: 4rem auto 0em auto;
padding-bottom: 4rem;
border-bottom: #1a232c 3px solid;
word-wrap: break-word;
}
I know about this method but I don't know how to get the image into the after pseudo element.
div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(image.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Note: Try Radium for pseudo classes
U will have to put the overlay as a sibling of the content, and make it absolute.And also u will have to increase the z-index of the the content, so that it can be interactive.
In your case, all the elements inside the article should be grouped and put inside the content class.
Try this
.parent{
height:300px;
padding:50px;
position:relative;
}
.overlay{
position:absolute;
top:0;right:0;left:0;bottom:0;
background-color:rgba(0,0,0,0.5);
z-index:0;
}
.content{
position:relative;
z-index:1;
font-size:25px;
color:white;
}
<div class="parent" style="background-image:url(http://via.placeholder.com/350x150)">
<div class="overlay"></div>
<div class="content">Test Test</div>
</div>
I have an ion slide box and it displays images. I want to add a button, ion-plus-round, to the bottom right side of the image. I don't want to add it to the bottom right of the slider, but rather to the bottom right side of the img only.
<ion-slide-box class="item-slide-box">
<ion-slide ng-repeat="image in vm.item.images" ng-cloak >
<img ng-src="{{image}}">
</ion-slide>
</ion-slide-box>
<a class="button icon ion-plus-round myButton"></a>
I have done the following but I am wondering how I can get the button to be float: right inside of the img:
.slider {
height: 60vh;
background-color: #76838f;
position: relative;
}
.slider-slide {
color: #000;
background-color: #76838f;
height: 100%;
}
.slider .slider-slide .img-ng {
display: block;
margin-left: auto;
margin-right: auto;
height: 100%;
max-width: 100%;
position: relative;
}
.slider .slider-pager {
bottom: 45px;
}
.myButton {
position: absolute;
bottom: 0px;
right: 0px;
}
codepan: http://codepen.io/anon/pen/gPYBpR
I have just edited you code, you can try this in code pane and check whether it is fulling your requirements.
Html code:
<ion-slide-box class="item-slide-box">
<ion-slide ng-cloak class="content">
<img class="img-ng" ng-src="http://geomorph.sourceforge.net/fourier/Bouboule256.jpg">
<a class="button icon ion-plus-round myButton"></a>
</ion-slide>
</ion-slide-box>
add some css line like:
.content{
position:relative;
}
.content a{
position:absolute;
bottom:5px;
right:5px;
}
Note:remove ".myButton" css from css and place button after the image source as shown in code,Hope this would exactly what you want.
For example if you really want the button exactly on the image just follow the example code and you can implement this code in your code.
HTML:
<div class="main">
<img src="http://placehold.it/182x121"/>
Can be BUTTON/LINK
</div>
CSS:
.main{
width: 182px; /*328 co je 1/3 - 20margin left*/
height: 121px;
line-height: 20px;
margin-top: 0px;
margin-left: 9px;
margin-right:0px;
display:inline-block;
position:relative;
}
.content a {
position:absolute;
bottom:5px;
right:5px;
background:blue;
color:#FFF;
}
above code will can help you give button on the image.
I do NOT want a FIXED footer, I need a STICKY footer.
My sticky footer worked fine at first but when the content is at a certain height, there is a margin between the footer and bottom of the page.
Try messing with the browser height and content div height, and you should see where the problem is.
It leaves an awkward margin between the footer and the bottom of the page.
Thank you in advance.
CSS Code:
html, body {
height:100%;
margin:0;
}
body {
color:#FFF;
font:16px Tahoma, sans-serif;
text-align:center;
}
a {
text-decoration:none;
}
#wrapper {
height:100%;
margin:0 auto;
min-height:100%;
padding-bottom:-30px;
width:985px;
}
#content {
background:#F00;
height:950px;
}
#footer {
background:#000;
border-top:1px solid #00F0FF;
clear:both;
height:30px;
margin-top:-30px;
padding:5px 0;
width:100%;
}
#footer span {
color:#FFF;
font-size:16px;
padding-right:10px;
}
#push {
clear:both;
height:30px;
}
HTML Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Bad Footer</title>
<link rel="stylesheet" href="badfooter.css" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="content">
<span>The footer leaves extra space at the bottom when you scroll all the way down. It starts out at the bottom for only the "Above the Fold" section (before scrolling it's at the bottom).</span>
</div>
<div id="push"></div>
</div>
<div id="footer">
<span>About Us</span>
<span> | </span>
<span>Contact Us</span>
<span> | </span>
<span>Home</span>
</div>
</body>
Just add position: fixed; to your footer class in your css:
#footer {
background:#000;
border-top:1px solid #00F0FF;
clear:both;
height:30px;
margin-top:-30px;
padding:5px 0;
width:100%;
position: fixed; /*add this new property*/
}
-----UPDATE-----
If you need a footer that stays at the bottom you need two things:
#wrapper {
/*height:100%;*/ /*you need to comment this height*/
margin:0 auto;
min-height:100%;
padding-bottom:-30px;
width:985px;
position: relative; /*and you need to add this */
}
#footer {
background:#000;
border-top:1px solid #00F0FF;
height:30px;
margin-top:-30px;
padding:5px 0;
width:100%;
position: relative; /*use relative position*/
}
#wrapper {
/*height:100%;*/ /*you need to comment this height*/
margin: 0 auto;
min-height: 100%;
min-height: 700px; /* only for Demo purposes */
padding-bottom: -30px;
width: 985px;
position: relative; /*and you need to add this */
}
#footer {
background: #000;
border-top: 1px solid #00F0FF;
height: 30px;
margin-top: -30px;
padding: 5px 0;
width: 100%;
position: relative; /*use relative position*/
}
<div id="wrapper">
<div id="content">
<span>The footer leaves extra space at the bottom when you scroll all the way down. It starts out at the bottom for only the "Above the Fold" section (before scrolling it's at the bottom).</span>
</div>
<div id="push"></div>
</div>
<div id="footer">
<span>About Us</span>
<span> | </span>
<span>Contact Us</span>
<span> | </span>
<span>Home</span>
</div>
Add position: fixed to the footer class. Note it doesn't work in certain old versions of Internet Explorer. http://jsfiddle.net/kAQyK/
#footer {
background:#000;
border-top:1px solid #00F0FF;
clear:both;
height:30px;
margin-top:-30px;
padding:5px 0;
width:100%;
position: fixed;
bottom: 0px;
left: 0px;
}
See http://tagsoup.com/cookbook/css/fixed/ for examples how to make it also work in IE
I was having the same issue for ages and nothing seemed to work then I realised that the whitespace I was seeing under my footer was not actually whitespace at all but the overflow from my footer with white text on a white background. All I had to do was to add:
overflow:hidden
to my footer in my css.
If anyone wants the solution that worked for me then it is the same as http://getbootstrap.com/2.3.2/examples/sticky-footer.html but with the added overflow:hidden
DISPLAY TABLE = NO JS and NO fixed height!
Works in modern browsers ( IE 8 + ) - I tested it in several browser and it all seemed to work well.
I discovered this solution because I needed a sticky footer without fixed height and without JS. Code is below.
Explanation: Basically you have a container div with 2 child elements: a wrapper and a footer. Put everything you need on the page ( exept the footer ) in the wrapper. The container is set to display: table; The wrapper is set to display: table-row; If you set the html, body and wrapper to height: 100%, the footer will stick to the bottom.
The footer is set to display: table; as well. This is necessary, to get the margin of child elements. You could also set the footer to display: table-row; This will not allow you to set margin-top on the footer. You need to get creative with more nested elements in that case.
The solution: https://jsfiddle.net/0pzy0Ld1/15/
And with more content: http://jantimon.nl/playground/footer_table.html
/* THIS IS THE MAGIC */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html,
body {
margin: 0;
padding: 0;
}
html,
body,
#container,
#wrapper {
height: 100%;
}
#container,
#wrapper,
#footer {
width: 100%;
}
#container,
#footer {
display: table;
}
#wrapper {
display: table-row;
}
/* THIS IS JUST DECORATIVE STYLING */
html {
font-family: sans-serif;
}
#header,
#footer {
text-align: center;
background: black;
color: white;
}
#header {
padding: 1em;
}
#content {
background: orange;
padding: 1em;
}
#footer {
margin-top: 1em; /* only possible if footer has display: table !*/
}
<div id="container">
<div id="wrapper">
<div id="header">
HEADER
</div>
<div id="content">
CONTENT
<br>
<br>some more content
<br>
<br>even more content
</div>
</div>
<div id="footer">
<p>
FOOTER
</p>
<br>
<br>
<p>
MORE FOOTER
</p>
</div>
</div>
I have and I want that div has the same dimensions as the width of the browser less 30px in height and width to give an idea to have a white border. Whenever these divs resize the browser will adjust accordingly.
I did not use the border: 15px solid white because it will create scroll-bars and I do not want
I tried this but it creates also an scroll-bars.
<body>
<div id="background-wrapper">
<div id="main-wrapper">
<!-- <img src="bla bla" /> -->
</div>
</div>
</body>
#background-wrapper{
background-color:#FFF;
position:absolute;
width:100%;
height:100%;
background-color:#FFF;
}
#main-wrapper{
background-color:#F00;
position:relative;
float:left;
width:100%;
height:100%;
top:15px;
left:13px;
}
Any Ideas??
Why not get rid of the #background-wrapper element and then do this instead?
#main-wrapper {
position: absolute;
left: 15px;
right: 15px;
top: 15px;
bottom: 15px;
}
An example can be found here.
You could try some padding on your inner div
<body>
<div id="background-wrapper">
<div id="main-wrapper">
<!-- <img src="bla bla" /> -->
</div>
</div>
</body>
#background-wrapper{
background-color:#FFF;
position:absolute;
width:100%;
height:100%;
background-color:#FFF;
}
#main-wrapper{
background-color:#F00;
position:relative;
float:left;
width:100%;
height:100%;
padding: 30px /*This shouldn't create scrollbars, but provide padding inside your divs*/
}
Try this:
body {
background-color: #fff;
}
#main-wrapper {
margin: 30px;
}
No need for background-wrapper.
I have an image inside a span tag, the span has a set width and height, and is set to overflow hidden. so it only reveals a small portion of the image. This works but the small portion of the image that is visible is the top left corner. I would like it to be the center of the image that is visible. I think I need to absolutely position the image, but the size of the image can vary though. Does anyone know how to do what I am trying to do?
Thanks!
Here is the HTML:
<div class="lightbox_images">
<h6>Alternate Views</h6>
<span>
<a href="http://www.kranichs.com/mothers_rings/mothers_rings_txt2.jpg" rel="lightbox[product_alternate_views]" title="This is my captions 1">
<img src="http://www.kranichs.com/mothers_rings/mothers_rings_txt2.jpg" />
</a>
</span>
<span>
<a href="https://www.kranichs.com/product_images/Simon-G#346_M_346_M.jpg" rel="lightbox[product_alternate_views]" title="This is my captions 2">
<img src="https://www.kranichs.com/product_images/Simon-G#346_M_346_M.jpg" />
</a>
</span>
<span>
<a href="http://www.kranichs.com/images/simong/sim_banner_01.jpg" rel="lightbox[product_alternate_views]" title="This is my captions 3">
<img src="http://www.kranichs.com/images/simong/sim_banner_01.jpg" />
</a>
</span>
<span>
<a href="http://www.kranichs.com/images/psu/psu_banner.jpg" rel="lightbox[product_alternate_views]" title="This is my captions 4">
<img src="http://www.kranichs.com/images/psu/psu_banner.jpg" />
</a>
</span>
</div>
Here is the CSS:
.lightbox_images{
background-color:#F9F9F9;
border:1px solid #F0F0F0;
}
.lightbox_images h6{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#333333;
font-size:14px;
font-weight:bold;
font-style:italic;
text-decoration:none;
margin:0px;
}
.lightbox_images span{
padding:5px;
padding-bottom:15px;
background-color:#DFDFDF;
margin:5px;
display:inline-block;
border:1px solid #CCC;
}
.lightbox_images a{
display:inline-block;
width:60px;
height:60px;
overflow:hidden;
position:relative;
}
.lightbox_images a img{
position:absolute;
left:-50%;
top:-50%;
}
.lightbox_images span:hover{
border:1px solid #BBB;
background-color:#CFCFCF;
}
As proposed in https://stackoverflow.com/a/14837947/2227298 by Billy Moat, there is a solution without knowing the image height and width.
Try it here: http://jsfiddle.net/LSKRy/
<div class="outer">
<div class="inner">
<img src="http://3.bp.blogspot.com/-zvTnqSbUAk8/Tm49IrDAVCI/AAAAAAAACv8/05Ood5LcjkE/s1600/Ferrari-458-Italia-Nighthawk-6.jpg" alt="" />
</div>
</div>
.outer {
width: 300px;
overflow: hidden;
}
.inner {
display: inline-block;
position: relative;
right: -50%;
}
img {
position: relative;
left: -50%;
}
Given this sort of HTML:
<span><img src="..." width="..." height="..." alt="..." /></span>
You could use CSS like this:
span {
position: relative;
display: block;
width: 50px; /* Change this */
height: 50px; /* Change this */
overflow: hidden;
border: 1px solid #000;
}
span img {
position: absolute;
left: -10px; /* Change this */
top: -10px; /* Change this */
}
You can then center the image based on its exact dimensions.
Alternatively, if you're able to modify the HTML, you could instead use something like this:
<div>
[name of picture]
</div>
Then, match it with this CSS:
div {
width: 50px;
height: 50px;
background: transparent url(...) center center no-repeat;
border: 1px solid #000;
}
div a {
display: block;
height: 100%;
text-indent: -9999em; /* Hides the link text */
}
In this case, the background will be automatically centered regardless of its dimensions, and it'll still be clickable.
This example, the images are at the center of the element, regardless of its size
HTML:
<div class="box">
<img src="example.jpg">
</div>
CSS:
div.box{
width: 100px;
height: 100px
overflow: hidden;
text-align: center;
}
div.box > img{
left: 50%;
margin-left: -100%;
position: relative;
width: auto !important;
height: 100px !important;
}
If the width and height of the image varies, I think the only way to do this is with javascript.
Style the image to left:50%; top:50%; and then, use javascript (image onload event maybe) to add margin-left:-imageWidth/2 px; margin-top:-imageHeight/2 px;
So basically you have
span img {
position: absolute;
left: 50%;
top: 50%;
}
and the following js
window.onload = function() {
var images = document.getElementsByTagName('img');
for(i=0; i<images.length; i++)
images[i].onload = centerImage(images[i]);
function centerImage(img) {
img.style.marginLeft = -(img.width/2) + "px";
img.style.marginTop = -(img.height/2) + "px";
}
}
PS. If you're using a javascript framework/library the code could simplify a bit, but I didn't make that assumption.
You can set the image as the background of the element and set x,y axis as in the following example:
#mySpan {
background-image: url(myimage.png);
background-repeat: no-repeat;
background-attachment:fixed;
background-position: -10 -10
}