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.
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 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.
I am creating a full width website. The website appears full width on my computer but when I check it on other computers, the website appears to have free space on both left and right.
How can I make this website full width?
.wrapper_boxed {
width: 1000px;
margin: 0
background-color: #fff;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
One solution that I have read is I redevelop using percentage width.
Just change your main container :-
.wrapper_boxed {
width: 100%;
margin: 0
background-color: #fff;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
You will probably need to go through the elements within wrapper boxed to change any width pixel values to percentages.
Percentage is definitely the easiest way, if you post some code we can look at uaing what you have and extending divs to keep the design and essentially stretch the sides. However anyone would just use:
width: 100%;
I was trying make a transparent text background and the background should fill as far as any character goes.
If I use display:inline-block both line gets the same background width so filling text background effect is missing and that's not what I am trying to achieve.
getting on top one another can be fixed by increasing line height, or setting the line height normal but that makes huge gap between lines. Well I would like to have both line very close. which in this case is 55px line height with font-size of 47px.
Markup here:
.main {
width: 500px;
margin: 100px auto;
background: green;
padding: 30px;
}
.test {
width: 450px;
}
.main h2 {
color: #ffffff;
font-size: 47px;
line-height: 55px;
}
.main h2 span {
background: rgba(0, 0, 0, 0.2);
}
<div class="main">
<div class="test">
<h2><span>A title about your dream kitchen</span></h2>
Read MOre
</div>
</div>
Check in jsfiddle: http://jsfiddle.net/srmahmud2/ze4kpmuy/
not sure can I make you understand or not. here a screenshot for quick look
http://postimg.org/image/efnmpoiy1/
Another option, using drop shadows, courtesy of this blog. Here is the style for the .main h2 span:
.main h2 span {
background: rgba(0, 0, 0, 0.2);
box-shadow: 10px 0 0 rgba(0, 0, 0, 0.2),
-10px 0 0 rgba(0, 0, 0, 0.2);
}
jsfiddle: http://jsfiddle.net/slushy/mu8rwcjp/
In our website we have got this button:
Now we need to create link from that but without this tape on top of it.
The problem is that it also creates link in empty space (top left corner of tape).
What we tried
Make the tape straight and rotate it with CSS. It is quite good, except the thing that it is not supported in older browsers. Also it would be better to keep that link just in that white space (container div).
HTML
<div class="box-body buttons-text clearfix">
<a href="#">
<div class="tape"></div>
<img src="/images/fire.png" class="left">
<span>HOT JOB</span>
</a>
</div>
CSS
.box-body {
padding: 10px 20px;
position: relative;
background: #ffffff;
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}
.tape {
background: url("../images/tape.png") center 0 no-repeat;
width: 145px;
height: 54px;
position: absolute;
bottom: 46px;
left: 83px;
}
The problem is that it also creates link in empty space (top left corner of tape).
For modern browsers, you could use pointer-events:
.tape {
pointer-events: none;
}
You can use image map.
Use the button as an image.
Then use a correct image-map to define clickable area of the image.