Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
The community reviewed whether to reopen this question 7 months ago and left it closed:
Original close reason(s) were not resolved
Improve this question
I am trying to create a table which header is divided in 2 with a diagonal line like in the image below. This would be useful for "combination tables", for example.
How can I do this?
.background {
width: 100px;
height: 50px;
padding: 0;
margin: 0;
}
.line {
width: 112px;
height: 47px;
border-bottom: 1px solid red;
transform: translateY(-20px) translateX(5px) rotate(27deg);
position: absolute;
z-index: -1;
}
.background>div {
position: relative;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.bottom {
position: absolute;
bottom: 1px;
left: 1px;
}
.top {
position: absolute;
top: 1px;
right: 1px;
}
<table>
<th class="background">
<div><span class="bottom">First</span>
<span class="top">Second</span>
<div class="line"></div>
</div>
</th>
</table>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 10 months ago.
This post was edited and submitted for review 10 months ago and failed to reopen the post:
Original close reason(s) were not resolved
Improve this question
I created an animate Android logo bot using HTML, CSS and JavaScript, which is 100% in place in zoom mode, but by resizing the web page, everything falls apart and disappears.
Although in CSS I used percentages for positions, not pixels
Some tags, such as bot's eyes and ears, were added and removed to reduce the size of the code
body {
display: flex;
}
.hand-leg {
box-sizing: border-box;
position: relative;
width: 25px;
height: 75px;
border-radius: 50px;
background-color: rgb(147, 221, 50);
}
#body {
box-sizing: border-box;
position: relative;
width: 100px;
height: 100px;
top: 40%;
left: 32.2%;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
background-color: rgb(147, 221, 50);
}
#head {
box-sizing: border-box;
position: relative;
top: 32%;
left: 25.7%;
width: 100px;
height: 50px;
border-top-right-radius: 100px;
border-top-left-radius: 100px;
background-color: rgb(147, 221, 50);
}
<div class="hand-leg" id="right-hand">
</div>
<div class="hand-leg" id="left-hand" style="transform: rotate(0deg); transition: all 2s ease 0s;">
</div>
<div class="hand-leg" id="right-leg">
</div>
<div class="hand-leg" id="left-leg">
</div>
<div id="body">
</div>
<div id="head">
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
They asked me to edit the banner area. My intern and frontend knowledge is not very good. The banners in the photo I posted below are two separate photos. I have to fit the pictures of the products at the same value and give a separate link to each photo. But I couldn't create the layout in my head and I don't know how to do it. I would be very grateful if you could give an idea.
This is the order that should be:
This is how I did it:
Here, it is necessary to put the photos of the products separately and go to the separate links when they come to the top. I can make no problem with them, but I couldn't make the order in this way. Currently, there are two photos in total, so they are not separate products, they are all one picture. I would be very grateful if you could give me an idea how to do this.
HTML code:
#{
Layout = null;
}
<link href="~/Content/bscarousel.css" rel="stylesheet" />
<script src="~/Scripts/Home/Slider.js"></script>
<div ng-controller="SliderController">
<div>
<table border="0" bordercolor="#aaa" cellspacing="0" cellpadding="0" style="background-color:#4C8C9E;">
<tr>
<td>
<a href="https://www.arkadasgrup.com/ListeArama/311/Seri">
<img class="img-responsive" src="~/images/ShamanKing.jpg" width="60%" height="120px;" /><p style="color:white;">Shaman King</p>
</a>
</td>
.
.
.
</td>
</tr>
</table>
</div>
</div>
How can I organize all the photos? I'm trying to make them all the same size but I couldn't.
Css:
.carousel {
position: relative;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel-item {
position: relative;
display: none;
align-items: center;
width: 100%;
#include transition($carousel-transition);
backface-visibility: hidden;
perspective: 1000px;
}
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
display: block;
}
.carousel-item-next,
.carousel-item-prev {
position: absolute;
top: 0;
}
.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {
transform: translateX(0);
#supports (transform-style: preserve-3d) {
transform: translate3d(0, 0, 0);
}
}
.carousel-indicators {
position: absolute;
right: 0;
bottom: 10px;
left: 0;
z-index: 15;
display: flex;
justify-content: center;
padding-left: 0; // override <ol> default
margin-right: $carousel-control-width;
margin-left: $carousel-control-width;
list-style: none;
li {
position: relative;
flex: 0 1 auto;
width: $carousel-indicator-width;
height: $carousel-indicator-height;
margin-right: $carousel-indicator-spacer;
margin-left: $carousel-indicator-spacer;
text-indent: -999px;
background-color: rgba($carousel-indicator-active-bg, .5);
&::before {
position: absolute;
top: -10px;
left: 0;
display: inline-block;
width: 100%;
height: 10px;
content: "";
}
&::after {
position: absolute;
bottom: -10px;
left: 0;
display: inline-block;
width: 100%;
height: 10px;
content: "";
}
}
.active {
background-color: $carousel-indicator-active-bg;
}
}
.carousel-caption {
position: absolute;
right: ((100% - $carousel-caption-width) / 2);
bottom: 20px;
left: ((100% - $carousel-caption-width) / 2);
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: $carousel-caption-color;
text-align: center;
}
It's very hard to understand your question/problem given that there is no reproducible code.
If your aim is to display multiple items side by side with even spacing, you can do it like this:
HTML:
<div class="items">
<img src="...">
<img src="...">
...
</div>
CSS:
.items {
display: flex;
justify-content: space-evenly; /* this gives even space between items as shown in your image in the question */
}
.items img {
width: 100px; /* you may want to define a fixed with here so that they all look the same */
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am using Ionic 3 and i want to achieve the following effect mention in the image on the image card component in Ionic 3
By using ion-card,
<ion-content class="has-header">
<ion-card class="myCard">
<img src="https://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg"/>
<div class="myOverlay">
<div class="card-title">San Francisco</div>
<div class="card-subtitle">72 Listings</div>
</div>
</ion-card>
</ion-content>
and change CSS to
img{
width:100%;
height:100%;
}
.myCard{
position:relative;
}
.myOverlay{
width: 100%;
height: 60px;
position: absolute;
z-index: 99;
bottom: 0px;
opacity: 0.5;
background: #000;
color: #fff;
}
by using CSS ?
<div class="img-container">
<img src="wolf.png">
<div class="img-description"></div>
</div>
.img-container {
position: relative;
overflow: hidden;
width: 400px;
height: 350px;
}
img {
width: 100%;
height: auto;
}
.img-description {
position: absolute;
bottom: 0;
height: 100px;
widht: 100%;
background-color: rgba(0,0,0,0.5);
color: #fff;
padding: 20px;
}
I guess it could works...
Have fun :)
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I created a burger menu in pure CSS, but the problem is that for some reason it's centred by its left side, not middle. I don't really understand why.
Markup:
<section id="header">
<a href="#menu" class="box-shadow-menu" id="navTrigger">
<div class="navicon">
</div>
</a>
</section>
CSS:
#header {
width: 100%;
height: 45px;
background-color: #4dc1df;
position: fixed;
z-index: 100;
}
.navicon {
position: fixed;
height: 45px;
left: 50%;
margin-left: -17.5px;
}
.box-shadow-menu {
position: relative;
display: block;
height: 45px;
}
.box-shadow-menu:before {
content: "";
position: absolute;
top: 10px;
width: 35px;
height: 4px;
background: white;
box-shadow: 0 10px 0 0 white, 0 20px 0 0 white;
}
Demo: http://jsfiddle.net/jLhnr12p/1/.
Any help to centre this properly would be appreciated!
Your code:
.navicon {
position: fixed;
left: 50%;
right: 50%;
}
You can't center like this, you can do it by setting left property to 50% and setting negative margin-left (half of the navicon which is 17.5px);
.navicon {
left: 50%;
margin-left: -17.5px; // or transform: translateX(-50%);
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have to do the integration of a mockup. But I am wondering if there is a way to do it only in CSS.
We have a (diagonal) triangle section separator, and I don't know how to make them in CSS (except with image or svg). And if this is even possible?
My separator looks like this:
.
(It's a huge rectangle triangle at the top of the section).
I'm speaking of the part at the top of the blue line here:
.
Do you know if it's possible to do it with CSS rules?
And if so, how can I do this?
Something like this should do. Using vw (viewport-width) to span the entire container.
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 30px 100vw;
border-color: transparent transparent #007bff transparent;
}
<div class="triangle"></div>
You can attach this to a :before pseudo-selector on your container.
You will have to do some work for cross-browser compatibility however. See the caniuse on this for more information and updates on supported browsers.
Here's a CSS3 method:
JSFIDDLE
HTML
<section class="diagonal">
CSS
body {
background: #333;
margin: 0px;
}
section {
position: relative;
margin-top:100px;
}
section:before {
position: absolute;
content:'';
}
.diagonal {
background: teal;
z-index: 1;
padding: 3em;
}
.diagonal:before {
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
-webkit-transform-origin: 3% 0;
transform-origin: 3% 0;
top: 0;
left: -25%;
z-index: -1;
width: 150%;
height: 75%;
background: inherit;
}
Use an absolutely positioned border offset off the top of your container:
https://jsfiddle.net/Levde3kj/1/
HTML:
<div class="container">
<div class="triangle"></div>
</div>
CSS:
.container {
float: left;
width: 400px;
height: 200px;
margin-top: 25px;
background-color: blue;
position: relative;
}
.container .triangle {
position: absolute;
top: -25px;
left: 0;
border-style: solid;
border-width: 0 0 25px 400px;
border-color: transparent transparent blue transparent;
}