I have a screenshot of the form (its in pc view) as shown below which I have to replicate in HTML/CSS.
I have created the fiddle for the above screenshot.
Problem Statement:
(1) I am wondering what changes I need to do in the fiddle so that I am able to expand the width of the form as marked by arrow in the screenshot above.
I tried playing with the margin and padding of the form class as shown below but it didn't work.
Whenever I increase the padding of the form, the input fields inside the form seems to go all over the place.
.form {
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24)
}
(2) Also, what changes I should make in the CSS, so that I can push the form (as marked with orange sign in the form) little bit towards the bottom.
Give the text input fields a width of 100% then you can use the paddings to control the size of the form elements.
.form {
background: #FFFFFF;
max-width: 360px;
margin: 150px auto 100px auto;
padding: 0px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24)
}
input[type="text"] {
width: 100%;
}
Note that I've modified the .form styles a little bit.
Related
I am able to use the transition attribute to make the width of a div change smoothly when switching from mobile to desktop view. I have two separate pages, index and about. When the user goes to the about page, the width of the div increases. I would like to animate this but I am not sure how since they are on two separate pages.
This is for my personal blog, running Apache2. I've tried using the transition element when the a tag is hovered over but this didn't work and looked weird.
div.container {
position: relative;
top: 50px;
width: 350px;
margin: 0 auto;
border-radius: 5px;
background-color: #f5f5f5;
vertical-align: middle;
transition: width 0.25s;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}
When going to a different html page there is no transition animation.
I am trying to upload an image on our webpage (https://www.palousebicycle.org/team.html) so that the person's face isn't cut off, while keeping the others the same (it is the last image).
I tried inline html:
#staff2 {
border: 10px solid white;
width: 45%;
min-width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.staff img {
border-radius: 50%;
width: 228px;
height: 228px;
object-fit: cover;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.staff figure {
display: inline-block;
padding: 30px 40px;
text-align: center;
}
#nick {
position: absolute;
top: -30px;
left: -30px;
align: top, left;
}
<img "#nick" src="pictures/nick.jpg" alt="Nick" align="left,top">
as well as assigning an image #id (#nick) and using the CSS properties "align", "left", and "top".
I also tried using a frame on the picture to move it top-left, but I couldn't get the image in the right place to not show the frame.
We are a small nonprofit, and it's been awhile since I wrote the webpage, so forgive me for being a bit rusty, and probably not asking the question correctly. Please let me know any other information or files I can post, and thank you so much for any help! I really appreciate your time and assistance!
I would first suggest that you simply crop the image to a 228px by 228px square with the person centered appropriately in the image. That would give you the most control in terms of the way the image is cropped.
If you want to do it with css, you can do something like this:
#nick {
background-image: url(https://www.palousebicycle.org/pictures/nick.jpg);
background-size: 300%;
border-radius: 50%;
width: 228px;
height: 228px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<div id="nick"></div>
Displaying the image with the background-image css property instead of with html <img> tag allows you to better control the way it is cropped. In this case, I just added a background-size: 300% which sized the background appropriately to fit the face in the circle.
Maybe you must replace ("#nick") to (id="nick") in img component.
Now the problem I'm seeing, table just grows and scrinks based on window size and data within, except for this one input box. It wants to be larger than the column itself. The column has no size set limit and the input has a 100% width, but for some reason it wants to be 110% width, so it seems. 100% has always been based on the outside, so padding and borders should only be taken based on specific px when set. Can someone tell me why and what I have to do to fix it?
I know for you table haters, you want to start telling me how to code this differently, but I like them and they still work better than a CSS display: table, table-row, table-cell.
.inputWidth {
width: 100%;
}
.textInput {
border: 5px solid white;
-webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1);
box-shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1);
padding: 5px;
background: hsl(120, 100%, 80%);
}
This looks like a box sizing issue. I would try adding box-sizing: border-box; to the input. This takes in account padding and border when having width: 100%;
I have a div with overflow: auto
.div {
overflow: auto;
}
and when i try to set the styles for the scrollbar, it doesnt work:
.div::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
.div::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
.div::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #555;
}
i tryed targeting with class, id, even the tag, but nothing works.
when i don't target anything before ::-webkit-scrollbar styles, the browser scrollbar acquires the styles, but i want to style the div scrollbar
I think you should use one of javascript plugin to display custom scroll bars. Not all browsers support that what you wrote in your question.
custom scrollbars examples
I have an ASP.Net Webforms page which has several controls on it, including several different sized asp.net buttons. There are certain times when I need to disable a button or buttons on this page, which I am able to do without issue, but the issue is that when I do disable them, the text on the button appears to have a carriage return in the text, making the text appear lower on the button then when the button is enabled. (Please see the image below...Edit, apparently I don't have enough points to post an image.)
The image I wanted to post shows the text of the disabled button aligned at the bottom with half the bottom half of the word missing with the text of the enabled button showing correctly.
Here is the CSS code I am using.
.big, .medium, .med-big, .small, .smaller{
display: inline;
text-align: center;
vertical-align:top;
font-family: 'Oswald',sans-serif;
/*text-shadow: 0 1px 0 rgba(109, 5, 5, 0.8);*/
color:black;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.big:active, .medium:active, .small:active, .med-bid:active, .smaller:active{
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
outline: 0 none;
}
.big:disabled, .medium:disabled, .med-big:disabled, .small:disabled, .smaller:disabled{
display: inline;
text-align:center;
vertical-align:top;
font-family: 'Oswald',sans-serif;
color:grey;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background-color:#CCCCCC
}
.big{
width: 200px;
height: 30px;
padding: 17px 10px 10px 10px;
font-size:24px;
}
I am disabling the buttons through server side code simply by setting the button's Enabled Property to false.
I'm in the process of moving from more of a Winforms developer (of many years) to a web developer, so any help would be greatly appreciated. I also did search the site for an answer to this issue, and although there are several posts regarding CSS styling a disabled, button, I could not find one for this specific issue.
Thanks.