I need to create this type of shape, the green part is a button.
This design is for smartphone only and the rectangle must cover whole width of screen.
Maybe try this one. Hope it helps you.
Note: Just change the element of button if you are using anchor tag instead.
.placeholder-box {
position: relative;
display: block;
width: 300px;
min-height: 150px;
margin-top: 50px;
padding: 30px;
border: 1px solid #888;
border-radius: 10px;
box-sizing: border-box;
box-shadow: 0 0 8px 0 rgba(0,0,0,0.25);
}
.placeholder-box p {
text-align: center;
margin: 0 0 15px;
}
.placeholder-box ul {
margin: 0;
}
/* Button */
button {
display: block;
border: solid white;
border-width: 0 10px;
border-radius: 0;
background: green;
color: white;
font-size: 18px;
margin: -60px auto 15px;
padding: 15px;
}
<div class="placeholder-box">
<button type="button"> Button Text Here </button>
<p>Nunc condimentum mauris elit</p>
<ul>
<li>Duis quis eros felis</li>
<li>Nulla facilisi</li>
</ul>
</div>
<div style="padding:100px;" align="center">
<a style=" background-color:#01B901;background-color: #01B901;padding: 50px;color: white;padding-top: 20px;padding-bottom: 20px;">hello btn</a>
</div>
is this what u wan?
Related
I'm trying to put some buttons onto some flex containers for a sort of middle-of-the-page dropdown menu. I need four buttons that fill the space of the flex container, that appear on hover. I can get the hover action working, but my buttons don't show up and are a little off. I'm very new at this and have really hit a wall here.
Essentially, I need a box that splits into 4 other clickable boxes on hover, all contained inside the original box.
.nav-box-container {
width: 220px;
margin: 15px 7px 0px 7px;
flex-grow: 1;
}
#media (max-width: 767px) {
.nav-box-container {
width: auto;
}
.nav-box-citations {
color: #282828;
background-color: #fff;
outline: 3px solid #bbb;
margin: 0px;
padding: 25px 25px 30px 25px;
padding-right: 19px;
min-height: 160px;
font-size: 17px;
font-weight: 500;
height: 100%;
}
.nav-box-citations-buttons {
display: none;
width: 100%;
background-color: #fff;
outline: #282828 solid;
text-decoration: none;
}
.nav-box-citations:hover,
.nav-box-citations:focus+.nav-box-citations-buttons,
.nav-box-citations-buttons:hover {
display: inline;
}
<div class="nav-box-container">
<div class="nav-box-citations">
<h3 class="nav-box-title">Citation Guides</h3>
<p class="nav-box-desc">Get help on formatting citations and bibliographies.</p>
<div class="btn-grp">
<button type="button-group" class=nav-box-citations-buttons>APA</button>
<button type="button-group" class=nav-box-citations-buttons>MLA</button>
<button type="button-group" class=nav-box-citations-buttons>AMA</button>
<button type="button-group" class=nav-box-citations-buttons>Chicago</button>
</div>
</div>
</div>
Produces this:
The trick is to target just the children of the hovered parent:
.nav-box-citations:hover .nav-box-citations-buttons {
display: inline;
}
.nav-box-container {
width: 220px;
margin: 15px 7px 0px 7px;
flex-grow: 1;
}
#media (max-width: 767px) {
.nav-box-container {
width: auto;
}
.nav-box-citations {
color: #282828;
background-color: #fff;
outline: 3px solid #bbb;
margin: 0px;
padding: 25px 25px 30px 25px;
padding-right: 19px;
min-height: 160px;
font-size: 17px;
font-weight: 500;
height: 100%;
}
.nav-box-citations-buttons {
display: none;
width: 100%;
background-color: #fff;
outline: #282828 solid;
text-decoration: none;
}
.nav-box-citations:hover .nav-box-citations-buttons {
display: inline;
}
<div class="nav-box-container">
<div class="nav-box-citations">
<h3 class="nav-box-title">Citation Guides</h3>
<p class="nav-box-desc">Get help on formatting citations and bibliographies.</p>
<div class="btn-grp">
<button type="button-group" class=nav-box-citations-buttons>
APA
</button>
<button type="button-group" class=nav-box-citations-buttons>
MLA
</button>
<button type="button-group" class=nav-box-citations-buttons>
AMA
</button>
<button type="button-group" class=nav-box-citations-buttons>
Chicago
</button>
</div>
</div>
</div>
Looking for improving my css skills, I created small site, the idea is to get best practice when creating responsive web sites. following simple HTML markup:
<section class="bg-image">
<img src="https://placehold.it/1606x1189" alt="imagem"/>
<div class="title">
<h2>I'm Title, <br />Sub Title</h2>
<button class="button-type-1">Click Me 1</button>
</div>
<div class="box">
<p class=".box-type-1">
There’s no magic pill you can take that will somehow attract rich people to your cause like moths to a flame.</p>
<p class=".box-type-2">
There’s no magic pill you can take that will somehow attract rich people to your cause like moths to a flame.</p>
<br />
<button class="button-type-2">Click Me 2</button>
<button class="button-type-3">Click Me 3</button>
</div>
</section>
I created in order to be responsive..
When I zoom in and zoom out, the title div and the box div, they just got off the viewport on different directions.
.image{
position: relative;
max-width: 100%;
height: 1189px;
width: 1606px;
opacity: 0.75;
}
.title h2 {
position: absolute;
color: rgb(37, 37, 78);
padding: 10px;
top:132px;
left:32%;
font-size: 80px;
letter-spacing: -0.1px;
line-height: 70px;
}
.title .button-type-1 {
position: absolute;
background-color: rgb(177, 166, 9);
height: 48px;
width: 265px;
border: 1px solid #FFFFFF;
border-radius: 34px;
left:43%;
top: 33%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1), 0 10px 20px 0 rgba(0,0,0,0.05);
}
.box {
position: absolute;
left:150px;
top: 550px;
height: 270px;
width: 60%;
left:23%;
border-radius: 4px;
background-color: #FFFFFF;
box-shadow: 0 0 30px 0 rgba(0,0,0,0.05), 0 4px 8px 0 rgba(0,0,0,0.08);
}
.box .box-type-1 {
height: 26px;
width: 315px;
color: #1E1C1A;
font-family: ".SF NS Display";
font-size: 25px;
line-height: 26px;
}
.box .box-type-2 {
height: 56px;
width: 1017px;
color: #535355;
font-family: ".SF NS Display";
font-size: 20px;
line-height: 28px;
text-align: center;
}
.button-type-2 {
height: 48px;
width: 224px;
border-radius: 34px;
background-color: #3d8b49;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1), 0 10px 20px 0 rgba(0,0,0,0.05);
}
.button-type-3 { height: 48px; width: 209px; border-radius: 34px;
background-color: #B8455a;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1), 0 10px 20px 0 rgba(0,0,0,0.05);
}
So how can I fix the issue when I zoom in the div tags content sticks to being responsive and not just go off the viewport.
What is the best practice I should be looking in when creating responsive app.
Use flexbox for making website responsive.here is the link
I'm almost done, but my problem is the background of the text , I even try the opacity but the underline of the box appear.
.block {
display: inline-block;
border: 2px solid white;
padding: 5px;
margin-top: 1em;
}
.paddingbox{
padding: 60px;}
.boxed {
float: left;
color: white;
padding: 0 5px;
margin-top: -2em;
}
<div class="paddingbox"><center>
<div class="block">
<span class="boxed">
<h1 style="color:white;"><?php echo get_the_title(); ?></h1></span>
</div></center></div>
With backgroun color
without background color
I'm trying to achive is like this, but it have a back ground like in the picture above
I tried fieldset and this happen
The behavior can be achieved with a fieldset tag.
.block{
display: inline-block;
border: 2px solid white;
}
.title{
color: white;
font-size: 1.5em;
text-align: center;
}
body{
background: purple;
}
<fieldset class="block">
<legend class="title">
Services
</legend>
</fieldset>
I get help of positions for solve this question!
div {
position: relative;
width: 400px;
padding: 10px;
border: 1px solid;
}
span {
position: absolute;
top: -10px;
left: 40%;
background-color: #FFF;
font-weight: bold;
}
<div>
<span>About Us</span>
</div>
I have a prompt-box div that has a max-height of 80% of the screen.
Inside of it, I have a ul which holds a bunch of li elements depending on how many the user adds.
How do I configure this so that once that prompt-box hits a certain size, new items can be added to the list but the contents just scroll instead of overflowing like this?
Thanks!
Edit: Adding html & css
<div className='prompt-box'>
<p className='title'>What's in your future?</p>
<ul className='options-holder'>
{
this.state.items.map(item => (
<li key={item.id} className='option'>
<div className='circle' />
<p className='item-text'>{ item.text }</p>
</li>
))
}
<li key={0} className='option form'>
<div className='circle' />
<form className='new-item-form' onSubmit={this.handleSubmit}>
<input className='new-item-input' placeholder='Type something and press return...' onChange={this.handleChange} value={this.state.text} />
</form>
</li>
</ul>
<button className='confirm-button'>Continue</button>
</div>
.prompt-box {
#include absolute-center;
background: #1E1E1E;
width: 35%;
margin: 0 auto;
border-radius: 7px;
border: 1px solid rgba(255, 255, 255, 0.1);
color: #ccc;
font-family: 'Circular Book';
max-height: 80%;
overflow-y: auto;
}
.prompt-box .title {
text-align: center;
font-size: 30px;
margin-top: 30px;
margin-bottom: 25px;
}
.prompt-box .options-holder {
list-style: none;
border-radius: 3px; // not currently working
padding: 0;
width: 95%;
margin: 12px auto;
}
.prompt-box .option {
background: #303030;
padding: 18px;
border-bottom: 1px solid rgba(196, 196, 196, 0.1);
}
.prompt-box .option.form {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.prompt-box .item-text {
color: white;
font-size: 24px;
margin: 0;
display: inline-block;
padding: 0 18px;
}
.prompt-box .new-item-form .new-item-input {
background: transparent;
border-style: none;
font-size: 24px;
padding-left: 18px;
color: white;
width: 80%;
&:focus { outline: none; }
}
.prompt-box .confirm-button {
width: 95%;
margin: 22px auto 18px auto;
}
You haven't shown us any HTML/CSS code for us to reproduce and test a fix for the issue, but adding something like this should work, to allow that container to scroll vertically when its height is exceeded:
.prompt-box {
overflow-y: auto;
}
Try a overflow: scroll; style rule on your div.prompt-box. (You're already giving it a max height, so the extra contents should have a vertical scroll bar).
I threw a max-height and an overflow-y: scroll on the ul and it did the trick.
I'm currently trying to add some simple padding to the bottom of my testimonial element, so that it doesn't end right after the text.
It seems that no matter what value I enter in padding or padding-bottom, the bottom padding expands a set amount. I'm wondering how to fix this so it displays padding that is specific to the value I set.
/****
GENERAL
****/
* {
margin: 0;
padding: 0;
font-family: sans-serif;
color: black;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 120px;
}
li {
list-style: none;
}
a, a:visited {
text-decoration: none;
color: black;
cursor: pointer;
}
a:hover {
color: #009999;
}
.divide {
width: 75%;
border: 1px solid grey;
margin: 20px auto;
}
/****
NAVIGATION
****/
.navigation {
display: flex;
flex-direction: row;
justify-content: center;
z-index: 1000;
}
.navigation li {
display: inline-block;
padding: 5px;
}
.navigation li a {
padding: 8px 10px;
display: block;
}
.submenu {
position: relative
}
.sub-hover {
position: absolute;
width: 106.42px;
display: none;
}
.sub-hover a {
font-size: 1em;
}
.submenu:hover ~ .sub-hover,
.sub-hover:hover {
display: block;
background-color: rgba(38, 12, 12, 0.04);
border-bottom-left-radius: 5%;
border-bottom-right-radius: 5%;
}
/****
LOGO
****/
.circle {
border: 1px solid gray;
border-radius: 100%;
height: 90px;
width: 90px;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
clear: both;
}
/****
IMAGE SLIDER
****/
.main-gallery {
background-color: rgba(38, 12, 12, 0.03);
border-radius: 5px;
height: 450px;
clear: both;
margin-bottom: 25px;
}
/****
TESTIMONIAL
****/
.testimonial {
clear: both;
display: block;
margin: 10px 0;
padding: 0 5%;
background-color: rgba(50, 173, 140, 0.82);
}
/****
SOCIAL
****/
.insta {
height: 50px;
width: 90%;
background-color: blue;
margin: 10px auto;
}
/****
FOOTER
****/
.footer {
background-color: grey;
height: 100px;
clear: both;
bottom: 0;
position: absolute;
}
.footer p {
text-align: center;
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/normalize.css">
<link type="text/css" rel="stylesheet" href="css/skeleton.css">
<link type="text/css" rel="stylesheet" href="css/main.css">
</head>
<body>
<ul class="navigation six columns offset-by-three">
<li>HOME</li>
<li>PORTFOLIO
<div class="sub-hover">
Photos
Physical
Write
Studies
</div>
</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
<div id="logo">
<div class="circle">
</div>
</div>
<div class="main-gallery eleven columns offset-by-half">
<div id="main-images">
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
</div>
</div>
<div class="testimonial">
<div class="test-text">
<p><b>Joe Blogs</b></p>
<p>Distinguished Person</p>
<p><i>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et orci sit amet nibh aliquam auctor eu eget turpis. Quisque quis leo lacus. Etiam vitae magna eu arcu gravida tincidunt. Ut consectetur mi id enim."</i></p>
</div>
</div>
<div class="divide"></div>
<div class="insta">
</div>
<div class="footer twelve columns">
<p>Jacob Riman Design</p>
</div>
</body>
</html>
How padding shorthand works....
default declaration of padding looks like this:
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
You can abbreviate that and apply padding to all sides equally:
padding: 10px;
You can abbreviate a little less and apply different values to top and bottom, and right and left.
This equates to padding: top/bottom right/left;
padding: 10px 20px;
You can use full abbreviations to apply different values to each of the 4 sides independently:
This equates to padding: top right bottom left; or:
padding: 10px 20px 5px 20px;
In your CSS you have no top or bottom padding applied to the testimonial class, you only have right/left padding applied:
.testimonial {
padding: 0 5%;
}
You basically have (pseudo code as example):
.testimonial {
padding: top=0 right=5% bottom=0 left=5%;
}
If you want a the same padding all the way around, remove the first 0 in the property:
.testimonial {
padding: 5%;
}
If you want a similar top/bottom padding, then merely adjust the padding property to add top/bottom values:
.testimonial {
padding: 10% 5%;
}
If you want different padding on the top and bottom, then adjust the padding property to add all the values:
.testimonial {
padding: 0 5% 10% 5%;
}
You don't have any bottom padding. Changing to padding: 10px 5% adds 10px padding to the top and bottom, 5% to the left and right.
/****
GENERAL
****/
* {
margin: 0;
padding: 0;
font-family: sans-serif;
color: black;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 120px;
}
li {
list-style: none;
}
a, a:visited {
text-decoration: none;
color: black;
cursor: pointer;
}
a:hover {
color: #009999;
}
.divide {
width: 75%;
border: 1px solid grey;
margin: 20px auto;
}
/****
NAVIGATION
****/
.navigation {
display: flex;
flex-direction: row;
justify-content: center;
z-index: 1000;
}
.navigation li {
display: inline-block;
padding: 5px;
}
.navigation li a {
padding: 8px 10px;
display: block;
}
.submenu {
position: relative
}
.sub-hover {
position: absolute;
width: 106.42px;
display: none;
}
.sub-hover a {
font-size: 1em;
}
.submenu:hover ~ .sub-hover,
.sub-hover:hover {
display: block;
background-color: rgba(38, 12, 12, 0.04);
border-bottom-left-radius: 5%;
border-bottom-right-radius: 5%;
}
/****
LOGO
****/
.circle {
border: 1px solid gray;
border-radius: 100%;
height: 90px;
width: 90px;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
clear: both;
}
/****
IMAGE SLIDER
****/
.main-gallery {
background-color: rgba(38, 12, 12, 0.03);
border-radius: 5px;
height: 450px;
clear: both;
margin-bottom: 25px;
}
/****
TESTIMONIAL
****/
.testimonial {
clear: both;
display: block;
margin: 10px 0;
padding: 10px 5%;
background-color: rgba(50, 173, 140, 0.82);
}
/****
SOCIAL
****/
.insta {
height: 50px;
width: 90%;
background-color: blue;
margin: 10px auto;
}
/****
FOOTER
****/
.footer {
background-color: grey;
height: 100px;
clear: both;
bottom: 0;
position: absolute;
}
.footer p {
text-align: center;
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/normalize.css">
<link type="text/css" rel="stylesheet" href="css/skeleton.css">
<link type="text/css" rel="stylesheet" href="css/main.css">
</head>
<body>
<ul class="navigation six columns offset-by-three">
<li>HOME</li>
<li>PORTFOLIO
<div class="sub-hover">
Photos
Physical
Write
Studies
</div>
</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
<div id="logo">
<div class="circle">
</div>
</div>
<div class="main-gallery eleven columns offset-by-half">
<div id="main-images">
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
</div>
</div>
<div class="testimonial">
<div class="test-text">
<p><b>Joe Blogs</b></p>
<p>Distinguished Person</p>
<p><i>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et orci sit amet nibh aliquam auctor eu eget turpis. Quisque quis leo lacus. Etiam vitae magna eu arcu gravida tincidunt. Ut consectetur mi id enim."</i></p>
</div>
</div>
<div class="divide"></div>
<div class="insta">
</div>
<div class="footer twelve columns">
<p>Jacob Riman Design</p>
</div>
</body>
</html>
.testimonial {
clear: both;
display: block;
margin: 10px 0;
padding: 0 5% 5% 0;
background-color: rgba(50, 173, 140, 0.82);
}
Adding all of the values ( even if 0 ) solved the problem right away.
Also, I am aware that if only two values are given the 1st represents top and bottom.
You don't currently have padding on the bottom of the testimonial div.
.testimonial {
clear: both;
display: block;
margin: 10px 0;
padding: 1% 5%;
background-color: rgba(50, 173, 140, 0.82);
}
Change the padding to the above ... padding: 1% 5%; or to target specifically the bottom ... padding 0 5% 1%; ... do that and you should be good to go, unless I'm misunderstanding your question. Good luck!
Found that having the last set of text in .testimonial in a paragraph tag, it was inserting a line break. So simply took that away and now it seems to be working fine.