Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 2 years ago.
Improve this question
In this image, how do I get rid of the gray background that automatically appears when I create my CSS header?
.header {
padding: 60px;
margin: 20px auto auto auto;
width: 1400px;
border-radius: 10px;
text-align: center;
background: #1abc9c;
color: white;
}
body {
background: #f2f2f2;
}
.search {
width: 100%;
position: relative;
display: flex;
}
.searchTerm {
width: 4500px;
border: 3px solid #1abc9c;
border-right: none;
padding: 5px;
height: 50px;
border-radius: 5px 0 0 5px;
outline: none;
color: #fff;
}
.searchTerm:focus {
color: black;
}
.searchButton {
width: 50px;
height: 50px;
border: 1px solid #1abc9c;
background: #1abc9c;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
/*Resize the wrap to see the search bar change!*/
.wrap {
width: 30%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 900px;
margin: auto;
}
<div class="header">
<h1 style="font-size: 100px;">HI</h1>
<p style="font-size: 30px;">
Hello
</p>
</div>
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" id="input_text" />
<button type="submit" class="searchButton" onclick="send_text()">
<i class="fa fa-search"></i>
</button>
</div>
</div>
<div class="search"></div>
Thanks!
When I add this CSS and HTML I start getting that gray background around the header. However when I comment out the code for the search bar the header does not have the gray background.
The reason is because you are using this in your css, it is creating greyish background in your html:
body {
background: #f2f2f2;
}
Сheck that the html has a class .header
Try changing the background-color of the .header and see what happens
Try setting the background-color for the body and see what happens
Related
This question already has answers here:
border curved css - circle with curved end
(2 answers)
Closed 2 years ago.
I want to have a tabs like image below, but I don't have any idea to make it.
Make the tab into a png image. Here is one I did really quick. I have a border on the top and no border on the bottom so it will overlay the existing border making appear as it curves up
Then combine it with some styling to get your result
*:focus {
outline: none;
}
.content {
box-sizing: border-box;
background-color: #F7F7F7;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border: 1px solid #d5d1d1;
}
.tabs {
margin-bottom: -1px;
background-color: white;
border: 1px solid #F4C949;
border-radius: 20px;
margin: -1px;
padding: 0px 20px;
padding-top: 8px;
text-align: right;
}
.tab {
position: relative;
z-index: 2;
display: inline-block;
width: 175px;
height: 30px;
margin-bottom: -6px;
padding-top: 8px;
text-align: center;
}
.tab:focus {
background: url(https://i.stack.imgur.com/45ecy.png);
background-size: contain;
background-position: top;
background-repeat: no-repeat;
}
.tab-content {
height: 175px;
}
<div class="content">
<div class="tabs">
<div class="tab tab-active" tabindex="0">
Tab 1
</div>
<div class="tab" tabindex="0">
Tab 2
</div>
</div>
<div class="tab-content">
Click tab to get the effect
</div>
</div>
This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed 5 years ago.
I'm trying to create the following form with the input fields having a diagonal side so they fit nicely together, see image below for more accurate description.
However i'm unable to achieve this as i have no idea on how to do this. I tried with transparant borders but without succes.
Anyone an idea on how to do this?
I love Ilya's skew solution. Super creative.
Here's an option using some :after pseudo-elements and CSS triangles to create the skewed effect. To achieve the desired effect we add :after pseudo elements to the right-side of the left inputs, and to the left-side of the right input/button.
Here's the end effect:
.container {
display: flex;
flex-direction: column;
background-color: #565452;
padding: 20px;
}
.row {
display: flex;
}
.row:not(:last-child) {
margin-bottom: 60px;
}
.field {
width: calc(100% - 10px);
position: relative;
background-color: #565452;
}
.field:first-child {
margin-right: 30px;
}
.field:after {
content: "";
display: block;
position: absolute;
top: 0;
width: 0px;
height: 0px;
}
.field:first-child:after {
right: -15px;
border-top: 60px solid #ffffff;
border-right: 15px solid transparent;
}
.field:last-child:after {
left: -15px;
border-bottom: 60px solid #ffffff;
border-left: 15px solid transparent;
}
.field.field--button {
flex-basis: 25%;
}
.field.field--button:after {
border-bottom: 60px solid #F9D838;
}
.input {
border: none;
line-height: 60px;
outline: none;
padding: 0 15px;
width: 100%;
box-sizing: border-box;
background-color: #ffffff;
font-size: 18px;
}
.input::placeholder {
color: #cccccc;
}
.button {
background-color: #F9D838;
color: #ffffff;
border: none;
outline: none;
line-height: 60px;
font-size: 30px;
width: 100%;
padding: 0 30px 0 20px;
text-transform: uppercase;
}
<form>
<div class="container">
<div class="row">
<div class="field">
<input class="input" placeholder="Voornaa m" />
</div>
<div class="field">
<input class="input" placeholder="Achternaa m" />
</div>
</div>
<div class="row">
<div class="field">
<input class="input" placeholder="E-mail" />
</div>
<div class="field field--button">
<button class="button" type="submit">Go</button>
</div>
</div>
</div>
</form>
You can apply transform: skewX for the container, "undo" it (by applying the same transform, but with the opposite sign of the angle) for the items, and hide the outer corners with overflow:hidden of the outer container, like this:
form {
margin: 20px;
overflow: hidden;
width: 350px;
}
.row {
display: flex;
transform: skewX(-15deg);
margin: 0 -5px;
}
.cell {
display: flex;
margin: 0 3px;
overflow: hidden;
}
.wide {
flex: 1;
}
.cell > * {
transform: skewX(15deg);
margin: 0 -5px;
border: none;
flex: 1;
}
input {
padding: 4px 5px 4px 15px;
background: yellow;
}
button {
padding: 4px 25px 4px 20px;
background: pink;
}
<form class="outer-container">
<div class="row">
<div class="cell wide"><input placeholder="enter something"></div>
<div class="cell"><button>Press me</button></div>
</div>
</form>
I'd add a seperate span element to the end and then use border-bottom/top/left/right and set them to the color that you need.
Something like this: http://jsfiddle.net/delnolan/3jbtf9f1/
<style>
.angled-input{
border: none;
height: 50px;
float: left;
display:block;
}
input:focus{
outline: none;
}
.add-angle{
display: block;
float:left;
border-right:30px solid transparent;
border-bottom: 50px solid #ffffff;
}
</style>
<form>
<input class="angled-input"/><span class="add-angle"></span>
</form>
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
.icon1 {
float: left;
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
.text1 {
float: right;
width: 0;
height: 0;
border-bottom: 100px solid transparent;
border-right: 100px solid red;
right: 50px solid red;
}
<div class="content">
<div class= "icon1"></div>
<div class= "text1"></div>
</div>
I want to make the text1 div expand to the right, I think a screenshot will help:
Can you guys help me? I want the left triangle to be a rectangle without the left-bottom-corner.
Not sure if this works for you, just hacked this together real quick:
.content {
overflow: hidden;
box-sizing: border-box;
display: inline-block;
height: 120px;
padding: 10px;
background: #fff;
}
.icon1 {
float: left;
}
.icon1::before {
content: " ";
float: left;
height: 0;
width: 0;
border-top: 100px solid transparent;
border-left: 100px solid #f00;
}
.icon1::after {
content: " ";
float: left;
width: 0;
height: 0;
margin-left: -70px;
border-right: 100px solid #f00;
border-bottom: 100px solid transparent;
}
.text1 {
float: left;
height: 100%;
padding: 0 1em;
line-height: 80px;
color: #fff;
background: #f00;
font-family: sans-serif;
font-weight: bold;
}
<div class="content">
<div class= "icon1"></div>
<div class= "text1"><p>I'm some text within a fancy box.</p></div>
</div>
Bazinga.
EDIT: Completely reworked this based on OP's newest picture reference. Didn't try it in any other browser, not sure if this will hold up well. Looking good for me on FF though.
hello just a quick question about overlapping two buttons with a div tag, how do i do it? i tried position and margin but both do not move the buttons.
heres the html:
<div class="container-fluid">
<div style="margin:auto;">
<button type="submit" class="btn-login">Log in</button>
</div>
<div class="signup-form">
<label style="text-align:center;margin-bottom:20px">Create an Account</label>
<div>
<button type="submit" class="btn-login">Sign Up Free</button>
</div>
<label style="text-align:center;margin-bottom:20px;margin-top:20px">or</label>
</div>
</div>
<div class="social_media">
<button type="submit" class="btn-facebook"></button>
<button type="submit" class="btn-gmail"></button>
</div>
</body>
heres the css:
.signup-form {
top:-40px;
position:relative;
box-sizing: border-box;
margin: 25px auto;
margin-bottom:0px;
width: 100%;
max-width:400px;
background-color: white;
padding: 50px 50px 50px 50px;
box-shadow: 1px 5px 2px #330000;
z-index: -1;
}
.social_media {
text-align:center;
}
.btn-facebook {
margin-bottom:60px;
padding-left:30px;
background-image: url(fb.gif);
background-color: #3b5998;
padding: 0px;
border: 3px solid white;
border-radius: 5px;
box-shadow: 1px 2px 2px grey;
background-size: contain;
background-repeat: no-repeat;
height: 70px;
width: 70px;
font-family: sans-serif;
font-size: 16px;
color: white;
}
.btn-gmail {
margin-bottom:60px;
top:50%;
padding-right:30px;
background-image: url(g+.gif);
background-color: #dc4a38;
padding: 0px;
border: 3px solid white;
border-radius: 5px;
box-shadow: 1px 2px 2px grey;
background-size: contain;
background-repeat: no-repeat;
height: 70px;
width: 70px;
font-family: sans-serif;
font-size: 16px;
color: white;
}
also the first screenshot is what it looks like now and the second is from a photoshopped image on what im trying to replicate
Set the position property value for the parent to relative (to control overlap) and that of the button DIV to absolute. Now place your button inside the button DIV, then use negative values for left, right, top or bottom to position the button DIV where you want.
.parent {
width: 150px;
height: 150px;
margin: 0 auto;
background: red;
position: relative;
}
.button {
width: 100px;
height: 45px;
line-height: 45px;
text-align: center;
position: absolute;
background: darkOrange;
border-radius: 5px;
bottom: -22.5px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
<div class="parent">
<div class="button">
<input type="button" value="my button" />
</div>
<div>
try adding to the btn classes
position: absolute;
then move them to desired position
you may need to change the z index also.
Set the position on the social_media div to relative and then use the top property to move them as needed. For example:
.social_media {
text-align:center;
position: relative;
top: -74px;
}
jsFiddle example
I'm building a calendar, and this is what I'm after:
http://postimg.org/image/vpd10bkqt/
So basically I want to show all the events as a small rectangle inside the
appropriate day's big rectangle.
The difficulty is the first element should be shown at the bottom right corner,
and should be filling form right to left and bottom to top.
I think the simplest solution would be if a rectangle would be a
span element with a solid border around it, and it contains a dot as text.
Here is a jsfiddle demo:
http://jsfiddle.net/jv392gmv/
CSS:
section#calendar {
width: 970px;
}
time {
display: inline-block;
width: 120px;
height: 120px;
margin: 4px;
text-align: right;
font-size: x-large;
font-weight: 900;
border: 1px solid #c3c7c7;
border-radius: 5px;
background: #fff;
}
time.notmonth {
background: #777;
}
section#calendar h1 {
text-align: center;
}
section#calendar time a {
display: inline-block;
width: 110px;
height: 110px;
margin: 5px 5px 0 0;
padding: 3px 3px 0 0;
color: #f55b2c;
text-decoration: none;
}
section#calendar time a:hover {
color: #000;
}
span.event {
top: 10%;
left: 7px;
position: relative;
border-color: #222;
border-style: solid;
border-radius: 5px;
border-width: 5px;
}
HTML:
<section id="calendar">
<h1>
←
July 2015
→
</h1>
<time datetime="2011-05-29">
29
<!-- <span class="event">.</span> -->
</time>
</section>
Anyone has any idea how to achieve it?
The original time tag idea came from here:
http://thenewcode.com/355/HTML5-Calendar-With-CSS3-and-Microdata
In the container, set a rotation of 180 deg.
In the children, rotate again to get them upright
.base {
width: 140px;
height: 140px;
border: solid 1px black;
position: relative;
}
.test {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
transform: rotate(180deg);
}
.children {
width: 40px;
height: 40px;
background-color: lightblue;
transform: rotate(180deg);
display: inline-block;
margin: 2px;
}
<div class="base">
<div >123</div>
<div class="test">
<div class="children">1</div>
<div class="children">2</div>
<div class="children">3</div>
<div class="children">4</div>
<div class="children">5</div>
<div class="children">6</div>
<div class="children">7</div>
</div>
</div>