I am new to CSS and I have created a website but after whole work is done my all css elements are getting disordered on screen while minimizing the browser window..how to solve this?
I thought I should have provided the % value instead of pixels value...bt its also not working...
Please Help!
One of the stylesheet having this problem is...
.card-panel{
transition: box-shadow .25s;
padding: 20px;
padding-left: 150px;
margin: 0.5rem 0 1rem 0;
border-radius: 2px;
background-color: #f0f8ff ;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
position:absolute;
top: 100px;
left: 300px;
bottom:300px;
right: 300px;
font-family: calibri;
font-size: 18px;
color: #708090;
z-index: 2;
}
body{
background: #dcdcdc;
}
.profile{
float: right;
position: absolute;
left: 50px;
top: 33px;
bottom:40px;
padding-top: 0px;
padding-left: 0px;
border: 5px solid #708090;
}
.name{
color: #3299cc;
font-weight: bold;
font-size: 30px;
position: relative;
top: 10px;
left: 60px;
font-family: cambria;
}
.profession{
color: #3299cc;
font-size: 15px;
position: relative;
top: 16px;
left: 60px;
font-family: cambria;
}
span{
color: #708090;
}
You should try to use any Front-end frameworks like bootstrap, foundation, skeleton, frame etc. This will solve your problem.
As you've mentioned you're new to css, I strongly recommend you to use skeleton or frame
Related
I have two html elements. The second element is hidden. But when hovering on first element the second one will be visible. These are two separate elements not linked. I'm trying to do this using css variables. On hover it's not getting visible.
CSS
#copyright-ft
{
position: absolute;
overflow: visible;
font-family: roboto, cus-roboto, sans-serif;
font-size: 70px;
padding-left: 25px;
padding-right: 22px;
color: rgba(0,0,0,0.45);
border: 4px rgba(236,96,202,0.24) solid;
border-radius: 80px;
top: 14px;
left: 25px;
padding-top: 10px;
padding-bottom: 7px;
}
#copyright-ft-details
{
position: absolute;
overflow: visible;
font-family: roboto, cus-roboto, sans-serif;
font-size: 40px;
padding-left: 35px;
padding-right: 35px;
color: rgba(255,255,255,0.7);
border: 0px rgba(236,96,202,0.24) solid;
border-radius: 10px;
top: 325px;
left: 120px;
padding-top: 15px;
padding-bottom: 15px;
background: rgba(0,0,0,0.7);
visibility: var(--copy-vsb);
--copy-vsb: hidden;
}
#copyright-ft:hover
{
--copy-vsb: visible;
}
HTML
<span id="copyright-ft"> <p>©</p> </span>
<div id="copyright-ft-details">
<span> elomymelo.com </span>
</div>
Can I do this with css without javascript event?
This is similar to a tooltip. You don't need to use a CSS variable. Here's the code:
#copyright-ft {
position: absolute;
overflow: visible;
font-family: roboto, cus-roboto, sans-serif;
font-size: 70px;
padding-left: 25px;
padding-right: 22px;
color: rgba(0, 0, 0, 0.45);
border: 4px rgba(236, 96, 202, 0.24) solid;
border-radius: 80px;
top: 14px;
left: 25px;
padding-top: 10px;
padding-bottom: 7px;
}
#copyright-ft-details {
position: absolute;
overflow: visible;
font-family: roboto, cus-roboto, sans-serif;
font-size: 40px;
padding-left: 35px;
padding-right: 35px;
color: rgba(255, 255, 255, 0.7);
border: 0px rgba(236, 96, 202, 0.24) solid;
border-radius: 10px;
top: 325px;
left: 120px;
padding-top: 15px;
padding-bottom: 15px;
background: rgba(0, 0, 0, 0.7);
visibility: hidden;
}
#copyright-ft:hover ~ #copyright-ft-details {
visibility: visible;
}
<span id="copyright-ft">
<p>©</p>
</span>
<div id="copyright-ft-details">
<span> elomymelo.com </span>
</div>
From MDN:
Custom properties are scoped to the element(s) they are declared on,
and participate in the cascade: the value of such a custom property
is that from the declaration decided by the cascading algorithm.
So I guess you can't alter the "global" variable even if you declare it on :root or body first; #copyright-ft:hover{--copy-vsb} may just make a local variable with the same name (notice the example in the MDN document).
CSS selectors mostly works only in descendant direction: from parent to child and from first child to last child. So if your #copyright-ft-details is ALWAYS a late sibling and/or child of #copyright-ft, you can try something like this:
#copyright-ft
{
position: absolute;
overflow: visible;
font-family: roboto, cus-roboto, sans-serif;
font-size: 70px;
padding-left: 25px;
padding-right: 22px;
color: rgba(0,0,0,0.45);
border: 4px rgba(236,96,202,0.24) solid;
border-radius: 80px;
top: 14px;
left: 25px;
padding-top: 10px;
padding-bottom: 7px;
}
#copyright-ft-details
{
position: absolute;
overflow: visible;
font-family: roboto, cus-roboto, sans-serif;
font-size: 40px;
padding-left: 35px;
padding-right: 35px;
color: rgba(255,255,255,0.7);
border: 0px rgba(236,96,202,0.24) solid;
border-radius: 10px;
top: 325px;
left: 120px;
padding-top: 15px;
padding-bottom: 15px;
background: rgba(0,0,0,0.7);
visibility: hidden;
}
#copyright-ft:hover ~ #copyright-ft-details,/* late sibling */
#copyright-ft:hover #copyright-ft-details,/* child */
#copyright-ft:hover ~ * #copyright-ft-details/* late sibling and child */
{
visibility: visible;
}
<span id="copyright-ft"> <p>©</p> </span>
<div id="copyright-ft-details">
<span> elomymelo.com </span>
</div>
You can use the General Sibling Combinator ~ to target the id you want to display on hovering your other ID.
#copyright-ft {
position: absolute;
overflow: visible;
font-family: roboto, cus-roboto, sans-serif;
font-size: 70px;
padding-left: 25px;
padding-right: 22px;
color: rgba(0, 0, 0, 0.45);
border: 4px rgba(236, 96, 202, 0.24) solid;
border-radius: 80px;
top: 14px;
left: 25px;
padding-top: 10px;
padding-bottom: 7px;
cursor: pointer;
}
#copyright-ft-details {
position: absolute;
overflow: visible;
font-family: roboto, cus-roboto, sans-serif;
font-size: 40px;
padding-left: 35px;
padding-right: 35px;
color: rgba(255, 255, 255, 0.7);
border: 0px rgba(236, 96, 202, 0.24) solid;
border-radius: 10px;
top: 325px;
left: 120px;
padding-top: 15px;
padding-bottom: 15px;
background: rgba(0, 0, 0, 0.7);
visibility: hidden;
}
#copyright-ft:hover~#copyright-ft-details {
visibility: visible;
}
<span id="copyright-ft">
<p>©</p>
</span>
<div id="copyright-ft-details">
<span> elomymelo.com </span>
</div>
First of all excuse me for explanation if I am not up to the mark, as this is my first post in this platform, Well, I am working on overlay where it has to be shown in right side of the page with given width of say 416px and 100vh of height, but things are getting cut if I do decrease the browser window and as I am decreasing the size of the browser window the button at bottom start appearing on content of overlay which has to remain at bottom even the height is getting decreased, here is the my code as below:
.advanced-overlay {
width: 100%;
min-height: 100vh;
background-color: rgba(35, 0, 18, 0.5);
position: fixed;
z-index: 100002;
top: -41px;
left: 0;
bottom: 0;
.advance-overlay-footer {
display:flex;
justify-content: space-between;
align-items:center;
position: fixed;
right: 24px;
width:156px;
bottom: 24px;
height:6%;
}
.advanced-overlay-content {
position: relative;
// min-height: 83vh;
width: 416px;
margin-top: 108px;
margin-left: auto;
margin-right: 6px;
opacity: 1;
z-index: 100004;
border-radius: 16px 16px 16px 16px;
background-color: #f5f4f6;
box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.07),
0 19px 18px 0 rgba(0, 0, 0, 0.05), 0 8px 12px 0 rgba(0, 0, 0, 0.05),
0 1px 5px 0 rgba(0, 0, 0, 0.04), 0 0 2px 0 rgba(0, 0, 0, 0.03);
.close-advance-overlay {
position: absolute;
background-color: #fff;
width: 110px;
height: 40px;
display: flex;
border-radius: 20px;
padding: 5px 22px;
top: -18px;
right: 155px;
opacity: 1;
cursor: pointer;
img {
height: 20px;
width: 20px;
align-self: center;
}
.button-text {
align-self: center;
margin-left: 5px;
font-weight: 600;
font-size: 16px;
color: #000000;
}
}
.advnaced-overlay-content-secion {
//min-height:89vh;
width: 100%;
bottom:10%;
// height:100vh;
.select-box {
margin-top: 40px;
margin-bottom: 40px;
}
.accordinan-filter {
margin-bottom: 24px;
}
.accordian-title {
font-weight: 900;
}
.accordian-content {
margin: 0;
font-size: 16px;
}
}
}
}
.is-maximum {
height: 73vh;
overflow-y: auto;
overflow-x: hidden;
&::-webkit-scrollbar {
width: 4px;
background-color: #fff;
}
&::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: #d3d3d3;
}
}
<div class="advanced-overlay" v-if="toggleFilter">
<div class="advanced-overlay-content">
<div class="close-advance-overlay" #click="toggleAdvanceFilterOverlay">
<img class src="../assets/icons/close.svg" />
<span class="button-text">Close</span>
</div>
<div class="advnaced-overlay-content-secion is-maximum">
<div class="select-box"></div>
<div class="accordinan-filter"></div>
</div>
<div class="advance-overlay-footer">...two buttons</div>
</div>
</div>
So, I what I would like to achieve eventually is that, I want respsonsive overlay at right side of the browser window, provided if I am decreasing height of the browser the buttons at bottom should stay there (fixed position) and content should be within limit of .advnaced-overlay-content-secion
for a responsive design I recommend you to read into the use of grid and espacially for mobile designs also the use of #media breakpoints.
for having some thing to stick at the bottom simply use:
position: fixed;
bottom: 0;
I have a requirement of displaying the image/icon on top of the modal box in a semicircle. Though I have achieved it with the help of below code, but the only issue is whenever my form in the modal box goes for a validation check, displaying any error, my semicircle doesn't get adjusted accordingly, rather it stays at its position. Here, I have attached the screen shot of what exactly I am looking for and HTML/css code I have used to display the semicircle with image/icon at the top.
.modal {
font-family: Avenir-Medium;
font-size: 16px;
font-weight: 900;
font-style: normal;
font-stretch: normal;
display: block;
/*Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.3);
/* Black w/ opacity */
-webkit-animation-name: slideIn;
/* Fade in the background */
-webkit-animation-duration: 2.0s;
/* Fade in the background */
;
}
/* Modal Content */
.modal-content {
position: fixed;
bottom: 0;
background-color: #fefefe;
width: 92%;
left: 14px;
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 0.5s;
border-radius: 16px 16px 0px 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: none;
top: auto;
}
.modal-wrapper {
line-height: 45px;
border: 1px solid #e7e9ea;
border-radius: 6px 6px 0px 0px;
background-color: white;
margin: auto;
}
.modal-wrapper::after {
background: url("../../../../images/mobile/img-payment_38.png") no-repeat 22px 10px;
background-size: 50%;
background-color: #fff;
content: '';
width: 78px;
height: 45px;
position: absolute;
left: 0;
right: 0;
margin: auto;
border-radius: 78px 78px 0 0;
border-left: 1px solid #e7e9ea;
border-top: 1px solid #e7e9ea;
border-right: 1px solid #e7e9ea;
border-bottom: 3px solid white;
bottom: 300px;
}
.close-btn {
position: absolute;
vertical-align: top;
top: 4px;
left: 320px;
width: 18px;
height: 18px;
}
.container-div-creditCard {
margin: 12px 20px 0px 20px;
}
.container-div-creditCard>img {
position: absolute;
bottom: 154px;
right: 30px;
}
.credit-card-modal-label {
font-family: AvenirHeavy;
font-size: 13px;
color: #1d3444;
text-align: center;
font-weight: 200;
height: 24px;
margin-left: 31px;
}
.input-modal {
width: 100%;
height: 44px;
}
.input-spacing {
margin-top: 15px;
}
.credit-input-modal {
border: solid 1px #e7e9ea;
border-radius: 5px;
font-family: Avenir-Book;
font-size: 14px;
font-weight: normal;
color: #8589a1;
line-height: initial;
padding: 13px 42px 12px 15px;
}
.credit-expiry-input-modal {
padding: 13px 27px 12px 10px;
border: solid 1px #e7e9ea;
border-radius: 5px;
font-family: Avenir-Book;
font-size: 14px;
font-weight: normal;
color: #8589a1;
display: inline-block;
line-height: initial;
width: 65%;
height: 44px;
}
.credit-cvc-input-modal {
width: 30%;
padding: 17px 5px 12px 10px;
border: solid 1px #e7e9ea;
border-radius: 5px;
font-family: Avenir-Book;
font-size: 14px;
font-weight: normal;
color: #8589a1;
line-height: initial;
height: 44px;
}
.cvvDisc {
-webkit-text-security: disc;
}
.credit-submit-button {
width: 100%;
padding: 13px;
margin-top: 15px;
border: solid 1px #e7e9ea;
border-radius: 5px 5px 5px 5px;
background: linear-gradient(to right, #e32490, #ed1a3d);
color: white;
margin-bottom: 20px;
font-family: Avenir-Book;
font-weight: normal;
font-size: 14px;
line-height: initial;
}
.errorMsg {
font-family: Avenir-Book;
font-weight: normal;
color: #ED1A3D;
font-size: 12px;
}
<div id="modalCCDetails" class="modal">
<div class="modal-content modal-wrapper">
<div class="container-div-creditCard">
<label class="credit-card-modal-label">ENTER YOUR CREDIT CARD DETAILS</label>
<input name="cc_name" class="input-modal credit-input-modal" type="text" placeholder="Name printed on Credit Card" onChange={this.handleUserInput} />
<span class="errorMsg"></span>
<input name="cc_number" class="input-modal credit-input-modal input-spacing" type="tel" maxLength="16" onKeyPress={(e)=> this.handleCCOnKeyPress(e)} placeholder="16 digit credit card number" />
<span class="errorMsg"></span>
<input name="cc_expDate" class="credit-expiry-input-modal" type="text" placeholder="Expiry MM-YYYY" />
<div class="device-divider" />
<input name="cc_cvc" class="credit-cvc-input-modal cvvDisc" type="tel" placeholder="CVC" maxLength="3" />
<span class="errorMsg"></span>
</div>
<button class="credit-submit-button">Submit Payment</button>
</div>
</div>
</div>
NOTE: This is a mobile view screenshot
Just adjust your css code into something like this:
.modal-wrapper::after {
background: url("../../../../images/mobile/img-payment_38.png") no-repeat 22px 10px;
background-size: 50%;
background-color: #fff;
content: '';
width: 78px;
height: 45px;
position: absolute;
left: 0;
right: 0;
margin: auto;
border-radius: 78px 78px 0 0;
border: 1px solid #e7e9ea;
border-bottom: 3px`enter code here` solid white;
top: -48px;
}
Just remove the bottom: 300px; and replace with top: -48px; or any value that you want.
please add top:-15px; and removed bottom:300px; in class .modal-wrapper::after { top: -15px; }, u will see the image move up
I want to put a button that is fixed on the right hand side of my webpage however as it stands right now, there is too much spacing between each letter.
Here is my html
<i class="style-switcher-btn">B
l
o
g
</i>
And this is the css class I am using:
i.style-switcher-btn {
right: 0;
top: 60px;
color: #fff;
font-size: 18px;
cursor: pointer;
z-index: 555555;
position: fixed;
padding: 7px 19px;
background: #585f69;
border-radius: 6px 0 0 6px !important;
white-space: pre;
}
The letters are too spaced out as of right now and I would like them to be more compact... Any suggestions?
Just add line-height: 17px; to your CSS. Or whatever number is best for your needs
i.style-switcher-btn {
right: 0;
top: 60px;
color: #fff;
font-size: 18px;
cursor: pointer;
z-index: 555555;
position: fixed;
padding: 7px 19px;
background: #585f69;
border-radius: 6px 0 0 6px !important;
white-space: pre;
line-height: 17px;//ADD THIS
}
DEMO
Not 100% sure what you're asking but play around with letter spacing:
i.style-switcher-btn {
right: 0;
top: 60px;
color: #fff;
font-size: 18px;
cursor: pointer;
z-index: 555555;
position: fixed;
padding: 7px 19px;
background: #585f69;
border-radius: 6px 0 0 6px !important;
white-space: pre;
letter-spacing: 2px;
}
Please help me solve this problem, Google Follow only shows the bubble but not the word "Follow", it seems like the width is automatically set to "0" when I check using Firebug.
Only shows the bubble:
Width=0:
Currently this is the CSS code that I use:
/* header : social
/* ------------------------------------ */
.toggle-social { color: #fff; font-size: 18px; line-height: 24px; cursor: pointer; padding: 13px 20px 13px 20px; display: block; position: absolute; right: 60px; top: -50px;
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,0.1);
box-shadow: -1px 0 0 rgba(255,255,255,0.1);}
.toggle-social:hover,
.toggle-social.active { background: rgba(0,0,0,0.15); color: #fff; }
.social-expand { display: none; background: #26272b; position: absolute; top: 0; right: 58px; width: 320px;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.1);
box-shadow: 0 1px 0 rgba(255,255,255,0.1); }
.social-expand-inner { background: rgba(0,0,0,0.15); font-size: 18px; line-height: 24px; padding: 13px 20px 13px 20px; display: block; position: relative;}
.follow-social {font-size: 1px;}
/* This gets Facebook to fall into place */
.follow-social iframe { vertical-align: middle; }
/* Set an optional width for your button wrappers */
.follow-social span { display: inline-block; width: 90px; }
/* Adjust the widths individually if you like */
.follow-social .followgoogle { width: 75px; }
This is the Google Follow button:
developers.google.com/+/web/follow/
I tried to view it using Google Chrome, it render correctly:
http://s11.postimg.org/i1wh1nudf/work_on_chrome.png
When using Firefox, the problem still exists.