I am attempting to create the following design in Ionic:
Currently, I am specifically trying to push the top half of an image past the top of the card and have the image be about 80% of the width of the card.
How can I push the top half of the image outside of the card?
I have created a StackBlitz for this issue.
Edit: I have been able to make the image protrude the top half of the card but the image is overlapping text and other images. How can I push the card down where the top half contains the bottom half of the image and the bottom half contains the additional text, images, etc.?
Here is my CSS:
.card {
margin-left: 30px;
margin-right: 30px;
width: auto;
border-radius: 8px;
position: relative;
display: block;
margin-top: 100px;
overflow: visible;
div {
position: absolute;
top: -95px;
width: 100%;
text-align: center;
}
img:not(.castImg) {
width: 80%;
border-radius: 8px;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
display: block;
margin: -100px auto 0;
}
}
looking at the code here Made 2 changes in the home.scss file... play around with 17% which is an arbitrary number on both places
.card {
margin-left: 30px;
margin-right: 30px;
width: auto;
border-radius: 8px;
margin-top: 17%; /* Change 1a */
overflow: visible; /* Change 1b */
img:not(.castImg) {
width: 80%;
margin: auto;
margin-top: -17%; /* Change 2 */
border-radius: 8px;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
ion-card-title {
font-weight: bold;
text-align: center;
}
}
Related
i want to add box-shadow only to the bottom of the div element using css.
below is the picture of what i am trying to do?
i want to get the line marked in red.
below is my code,
<div class="wrapper">
<div class="container"> //this needs box-shadow bottom
<span class="text">sometext</span>
<div class="description">some big description</div>
</div>
</div>
.wrapper {
position: absolute;
bottom: 32px;
width: 316px;
height: 225px;
background: white;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.29);
border-radius: 16px;
display: flex;
flex-direction: column;
opacity: 1;
}
.container {
height: 101px;
width: 316px;
padding-top: 16px;
padding-left: 16px;
border-radius: 16px 16px 0 0;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.29); //this adds boxshadow to all sides
}
.description {
height: 42px;
width: 289px;
margin-top: 8px;
color: black;
display: flex;
font-size: 12px;
font-weight: 400;
margin-bottom: 16px;
`;
As you see the container class adds boxshadow to all sides. i want to add only for the bottom how can i do it? could someone help me with this. thanks.
Try making your .container CSS like this:
.container {
height: 101px;
width: 316px;
padding-top: 16px;
padding-left: 16px;
border-radius: 16px 16px 0 0;
-webkit-box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.75);
}
Let me know how it goes.
I created a horizontal timeline with dots for each information, however if enough "dots/information" are created the body width needs to be able to expand to make the dots continue on the same line of the timeline instead of moving down a line because of the limited width of the page.
I tried giving the body a larger width, it does fix the problem but I would much rather have the width working dynamically to correspond with the timeline's dots. So if there is only a few dots on the timeline, the page wont have to be any wider, but if there is a lot then the page width should expand.
Here is the css of my timeline.
The time is implemented with PHP and HTML. The dots are created through a simple php sql loop.
div#timeline3 {
background-color: lightblue;
margin-top: 150px;
height: 12px;
width: 100%;
top: 0px;
position: relative;
}
div#timeline3 .inside {
position: absolute;
height: 4px;
background-color: #fff;
width: 0%;
top: 3px;
left: 0;
}
div#timeline3 .dot {
z-index: 99;
transition: 0.3s ease-in-out;
width: 52px;
height: 52px;
border-radius: 50%;
position: relative;
top: -20px;
margin-left: 220px;
float: left;
text-align: center;
cursor: pointer;
-webkit-box-shadow: 8px 0px 05.3px -8px black, -8px 0px 05.3px -8px black;
-moz-box-shadow: 8px 0px 05.3px -8px black, -8px 0px 05.3px -8px black;
box-shadow: 8px 0px 05.3px -8px black, -8px 0px 05.3px -8px black;
}
div#timeline3 .dot:nth-child(1) {
left: 1%;
background-color: lightblue;
}
I have tried to add margin to my buttons but it makes the last button jump down a row. I think I know what is happening here but I'm not positive on how I should fix it. Here is what I have, what should I do?
.button {
width: calc(100% / 3);
height: max-content;
background: white;
-webkit-box-shadow: 0 8px 6px 10px black;
-moz-box-shadow: 0 8px 6px 10px black;
box-shadow: 0 8px 6px -1px grey;
margin: auto;
margin-top: 10px;
float: left;
margin: 0px;
font-family: sans-serif;
font-weight: 100;
text-align: center;
padding-top: 10px;
}
Page1
Page2
Page3
You can use a .button + .button rule to add a left margin when one button follows another. Like this, for example:
.button {
width: calc(80% / 3);
height: max-content;
background: white;
-webkit-box-shadow: 0 8px 6px 10px black;
-moz-box-shadow: 0 8px 6px 10px black;
box-shadow: 0 8px 6px -1px grey;
margin: auto;
margin-top: 10px;
float: left;
margin: 0px;
font-family: sans-serif;
font-weight: 100;
text-align: center;
padding-top: 10px;
}
.button + .button {
margin-left: calc(10%);
}
Page1
Page2
Page3
Here, the three buttons are allocated 80% of the parent containter's width, and the remaining 20% is shared equally between the second and third buttons.
a {
margin:12px;
}
Page1
Page2
Page3
Please take a look at my site http://kaniamea.com/2/ I am trying to get the contentarea appear correctly behind the three Attractions boxes. My css is:
#attractions {
width: 290px;
height: auto;
display: block;
padding-right: 20px;
float: left;
}
and this is the code of my main container:
#main {
margin: 10px auto 0px;
width: 950px;
max-width:100%;
background: none repeat scroll 0% 0% #FBFBFB;
padding: 10px;
background-color: #FFF;
border: 2px solid #FFF;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
}
When I remove float: left; from #attractions and replace it it with display: inline-block; it works but I need to figure out another solution with float: left; so this will float correctly on mobile. Is there another way to make the contentarea styles appear behind the boxes?
I've recently published my new website but on larger resolution monitors my 2nd content div which comes under my navigation and a small piece of text only expands to the size of the content within it which is fine except from one page where there is very little content meaning there is a large white section between it and the page footer.
Here's a demo: http://jsfiddle.net/XUuVL/
I was wondering how I could make it so that the grey area would fill that whitespace left underneath it.
Cheers.
html,body
{
background: #FFFFFF;
font: 0.74em Arial;
height: 100%;
}
#wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto 0;
}
#content
{
width: 90%;
min-width: 1000px;
height: 100%;
padding: 20px 5% 20px 5%;
padding-bottom: 30px;
margin-left: auto;
margin-right: auto;
}
#content2
{
width: 90%;
min-width: 1000px;
height: auto;
min-height: 100%;
padding: 60px 5% 20px 5%;
background: #808080;
overflow: hidden;
}
In this case, since body and #wrapper have 100% height, you cannot give height in percentage to children elements. It would work if you give fixed height i.e. height in percentage to #wrapper.
You can give gray color to body and give white color to #content.
Check this out: http://jsfiddle.net/XUuVL/2/
.
Using position: absolute; and bottom: 0; solving your problem
You can give the wrapper element the same background and the bottom box-shadow as content2. Then it will look like content2 extends to the bottom. You must also give it the same width
#wrapper {
width: 90%;
min-width: 1000px;
background: #808080;
-moz-box-shadow: inset 0 -8px 8px -8px #000000;
-webkit-box-shadow: inset 0 -8px 8px -8px #000000;
box-shadow: inset 0 -8px 8px -8px #000000;
}
Now you remove the bottom box-shadow from content2 and give a white background to the content element
#content {
background: #FFFFFF;
}
#content2 {
-moz-box-shadow: inset 0 8px 8px -8px #000000;
-webkit-box-shadow: inset 0 8px 8px -8px #000000;
box-shadow: inset 0 8px 8px -8px #000000;
}
See modified JSFiddle
add position: absolute in your content2 ... i hope you will want like this...
#content2
{
position:absolute;
width: 90%;
min-width: 1000px;
height: auto;
min-height: 100%;
padding: 60px 5% 20px 5%;
background: #808080;
overflow: hidden;
}