I'm trying to overlay this card that says "A, Snare" with a 30% top and 30% left over the canvas but get this trailing white space to the right of the canvas. I've attached a picture with the "div.content" highlighted to show you what I mean. How can I get this card to float above the canvas without any resulting whitespace?
Trailing white space.
#canvas{
background:black;
width:100%;
height:100%;
position:absolute;
z-index: -1;
}
body, html{
height:100%;
margin:0;
}
.content{
display:inline-block;
width:100%;
left: 30%;
top:30%;
right:-30%;
position:relative;
}
.card{
background-color:green;
width:3%;
height 100%;
border: white solid 2px;
}
<body>
<canvas id="canvas" resize hidpi=off></canvas>
<div class="content">
<div class="card">
<h1 class="card__title">A</h1>
<p class="card__description">
Snare
</p>
</div>
</div>
</body>
You currently have the width of the content set to 100%. This means that this div has a width of 100% of the screen.
Your margin-left is 30%, making the total width 130%. Make your contenta width of 70% and the problem is solved, as that totals to 100%.
Edit: I made the card wider to show the text, just so you know.
#canvas{
background:black;
width:100%;
height:100%;
position:absolute;
z-index: -1;
overflow: hidden;
}
body, html{
height:100%;
margin:0;
}
.content{
display:inline-block;
left: 30%;
top:30%;
width: 70%;
position:relative;
}
.card{
background-color:green;
width:10%;
height 100%;
border: white solid 2px;
}
<body>
<canvas id="canvas" resize hidpi=off></canvas>
<div class="content">
<div class="card">
<h1 class="card__title">A</h1>
<p class="card__description">
Snare
</p>
</div>
</div>
</body>
Related
I'm making a kind of image gallery with buttons on the left which trigger the emergence of corresponding images on the right. I want whatever image emerges on the right side be stacked with its description at all times, since it will have position:sticky value. Is there a way, only using CSS, to retrieve the image height so I can use its value along with top property to keep them stacked?
I hope this helps:
<style>
.container{
display:flex;
flex-direction:row;
padding:0;
margin:0;
}
.left{
width:70%;
}
.right{
text-align:center;
flex:1;
}
#big{
width:16em;
margin-bottom:5em;
}
.right *{
position: -webkit-sticky;
position: sticky;
top:14em;
}
.right p{
margin-bottom:5em;
top:31em;
}
</style>
<body>
<div class="container">
<div class="left">This is where buttons go</div>
<div class="right"><img id="big" src="ThisImageWillChange.jpg"><p>This description will change according to the image</p></div>
</div>
</body> ```
One thing you could do is have an inner container, then put position: absolute; top: 100%; on the <p> tag. This would force it just outside the bounds of the inner container.
.container{
display:flex;
flex-direction:row;
padding:0;
margin:0;
}
.left{
width:70%;
}
.right{
text-align:center;
flex:1;
}
#big{
width:16em;
margin-bottom:5em;
}
.right *{
position: -webkit-sticky;
position: sticky;
top:14em;
}
.right p{
position: aboslute;
top:100%;
}
<body>
<div class="container">
<div class="left">This is where buttons go</div>
<div class="right">
<div class="inner">
<img id="big" src="https://www.fillmurray.com/200/200">
<p>This description will change according to the image</p>
</div>
</div>
</div>
</body>
I need to positionate several dots on one image with css.(see example)
I'm using the code below (for dot number 1):
<div id="photo1">
<div class="dot" style="left:calc(50px - 20px); top:calc(553px - 20px);">1</div>
<img id="big" src="/img/art/big32695-1.jpg" alt="example" title="example" />
</div>
and css :
#photo1 {position:relative; width:100%;}
.dot {position:absolute; width:40px; height:40px; background:#000; font-size:24px;line-height:40px; text-align:center; border-radius:50%; color:#fff; z-index:90;}
I don't have any problem still my picture width is 100% (e.g 580px). My coordinates x and y are calculted for that.
But, if I reduce my screen width (smartphone or tablet), the current image width is less than 100%.
If I supposing that the image width is 60%, how can I write something like this :
style="left:calc((60% * 50px) - 20px);top:calc((60% * 553px) - 20px);
to adjust position of my first dot regarding the current image width.
Do you have any ideas ?
Thanks a lot for all replies or suggestions.
Here is an example using percentage positioning:
https://codepen.io/lokase/pen/MWaxgjq
HTML:
<div class="con">
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
<img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" />
</div>
CSS:
.con {
max-width: 600px;
position: relative;
}
.dot {
background: red;
border-radius: 50%;
height: 20px;
position: absolute;
width: 20px;
}
.dot1 {
top: 10%;
left: 10%;
}
.dot2 {
top: 30%;
right: 20%;
}
.dot3 {
bottom: 40%;
left: 50%;
}
img {
width: 100%;
}
try positioning the elements using %. That would alter the width as the element's width changes.
Try something like this.
I have made it fixed to bottom.
For left I have given 10%, but you can change that to your requirements (580/30=19.33%).
#photo1 {position:relative; width:100%;}
.dot {position:fixed; width:40px; height:40px; background:#000; font-size:24px;line-height:40px; text-align:center; border-radius:50%; color:#fff; z-index:90;}
<div id="photo1">
<div class="dot" style="left:10%; bottom:0px;">1</div>
<img id="big" src="/img/art/big32695-1.jpg" alt="example" title="example" />
</div>
I´m trying to set a background color on a div that is stretched (using negative margins) to the full width of its outermost parent div.
Here´s a simplified example: http://jsfiddle.net/U5dnd/
The white div .featured-wrapper covers the full width of the black div .site, but its background color doesn´t. I suppose the margins are transparent.
Is there a way to make the whole .featured-wrapper div white, including its (negative) margins? (Or is there another way to accomplish this?)
Thanks!
.featured-wrapper {
background-color: white;
height:50px;
margin: 20px 0px 0 0px;
position:absolute;
width:100%;
z-index:100;
left:0;
}
Check this
JS Fiddle
CSS:
.site {
background-color:black;
padding: 0 40px;
height:300px;
width:320px;
}
.site-content {
width:100%;
overflow:hidden;
}
.wrapper {
overflow:hidden;
background-color:red;
height:100%;
}
.featured-wrapper {
background-color: white;
height:50px;
margin: 20px 0 0 -40px;
position: absolute;
width: 399px;
}
HTML:
<div id="page" class="site">
<div id="main" class="wrapper">
<div id="primary" class="site-content">
<div class="featured-wrapper">
<p>This is the featured wrapper</p>
</div>
</div>
</div>
</div>
First, check out a working example of the layout I have:
http://jsfiddle.net/EPC8c/2/
What I'm trying to do is adding a top margin to this. Since I have most of this built on 100% height, things get a little weird when trying this: http://jsfiddle.net/EPC8c/1/ (fixed link)
The fluid layout now leaves the footer being pushed down past 0 or 100% of the page. This is probably working as intended, but I'm trying to find a solution to not cause this.
Any help with this would be amazing.
HTML
<div id="container">
<header></header>
<div id="content"></div>
<footer></footer>
</div>
CSS
html, body {
background: #ff3333;
margin:0;
padding:0;
height:100%;
}
#container {
position:relative;
background: #FFF;
margin: 0 auto;
width: 200px;
min-height:100%;
}
header {
height: 60px;
background: #888;
}
#content {
background: #FFF;
min-height: 200px;
padding-bottom: 60px; /*FOOTER HEIGHT*/
}
footer {
position:absolute;
bottom: 0;
width: 200px;
height: 60px;
background: blue;
}
Here's a solution, courtesy of this question: CSS 100% height with padding/margin
JSFiddle:
http://jsfiddle.net/EPC8c/5/
HTML:
<div id="wrapper">
<div id="container">
<header></header>
<div id="content">
</div>
<footer></footer>
</div>
</div>
CSS:
#wrapper {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:20px;
}
It's admittedly not the best solution and it relies on percentage margins, but one route would be to wrap it all in an absolutely positioned div with a percentage upper padding and a negative (equal) percentage bottom padding. Like this:
http://jsfiddle.net/EPC8c/3/
<div id="wrapper">
<div id="container">
<header></header>
<div id="content">
</div>
<footer></footer>
</div>
</div>
CSS:
#wrapper {
position: absolute;
width: 100%;
height: 90%;
padding-top: 10%;
padding-bottom: -10%;
}
How to stretch image according to it's content horizontally with css.
//html code
<style>
html, body{
margin: 0;
padding: 0;
}
#cont {
width:100%;
height:125px;
background-color:#1ea1de;
}
.logo {
height:100px;
width:300px;
background: url(logo3.png) no-repeat;
margin-top:-105px;
}
#liniq {
height:2.5px;
width:100%;
background-color: #b5babc;
margin-top:5px;
}
#levo {
background: url(levo.gif) no-repeat;
width:64px;
height:104px;
margin-left:280px;
margin-top:-170px;
}
#middle {
background:url(middle.gif) repeat-x;
height:41px;
margin-top:-62px;
margin-left:321px;
border:1px solid red;
overflow:hidden;
}
</style>
</head>
<body>
<div id="cont"></div>
<div class="logo"></div>
<div id="liniq"></div>
<div id="buttons">
<div id="levo"></div>
<div id="middle"></div>
</div>
</body>
</html>
But it don't stretch according to the content...
I dont't understand the picture but it seems you're trying to stretch a background-image, which is impossible without using CSS3 property background-size.
Anyway you can place your image in html appliying width:100%, its height will automatically be resized.
(And width:100% is useless for block elements)