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%;
Related
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.
I have a menu header. The drop shadow effects of it as present in the adobe photoshop are:
Blend Mode: Multiply
Opacity: 0.25 (25%)
Distance: 3px
Spread: 15%
Size: 9px
Color: #282829
I am trying to use the above code in my CSS for my menu header (adove) but unfortunately for some reasons I am unable to replicate it. The code which I am using for the menu header are:
position: relative;
top: -890px;
background-color: rgba(0, 0, 0, 0.5);
height: 89px;
border-bottom: 3px solid #EF7440;
overflow: hidden;
Try this and adjust the pixel values if necessary. The 4th value is the blur size, the 3rd value is the size of the spread. The 1st and 2nd values adjust the X and Y offsets of the dropshadow.
-webkit-box-shadow: 0px 0px 9px 3px rgba(41,41,41,.25);
-moz-box-shadow: 0px 0px 9px 3px rgba(41,41,41,.25);
box-shadow: 0px 0px 9px 3px rgba(41,41,41,.25);
I have a div with 0.5 transparency. This acts as a darkening rectangle over a bigger background slider image (an outer div) to make the text more readable over the slider background picture.
<div class="darken-rectangle">
<!-- inner text container divs go here -->
</div>
CSS:
.darken-rectangle {
padding: 30px 30px 30px 30px;
background-color: rgba(0, 0, 0, 0.5);
}
This works great, however I would like to a few pixel (3px-6px) gradient border for the rectangle which drives the alpha from the outer light to the inner darken.
Unfortunately I can not find how to do this, even does not know is it possible with pure CSS, or do I have to create 4 png images for the 4 "border and arrange the layout?
I think what you want is box-shadow, see jsFiddle
HTML
<div class="darken-rectangle">
Test Text
</div>
CSS
.darken-rectangle {
/* ... */
background-color: rgba(0, 0, 0, 0.5);
color: white;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 1);
}
.darken-rectangle {
padding: 30px 30px 30px 30px;
background-color: rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
border-radius: 3px;
}
EDIT: Thanks for all the help! Finished table is here: http://jsfiddle.net/MnLkD/
I am trying to get a shadow to appear inbetween the borders on this table:
http://jsfiddle.net/g2fy4/
I'm guessing it might not be possible but thought I'd ask the experts anyway :-P . I have tried setting a border-spacing of 2px, no border, and assigning the drop shadow to the th and td tags but it didn't work.
If anyone has any ideas I would be grateful for the input :-)
#content.postagepage table {
margin:0 auto 40px auto;
border-spacing:0;
-webkit-box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
}
What, you mean like this? (scratches head)
http://jsfiddle.net/g2fy4/2/
All I did was change the items that got shadow from table to td and made sure there was border spacing.
#content.postagepage table {
margin:0 auto 40px auto;
border-spacing:3px;
}
#content.postagepage td {
-webkit-box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
}
If you want shadows on the td elements, put it on the td elements!
It sounds like you want to do this?
http://jsfiddle.net/b9chris/sXQvp/
CSS:
div {
width: 100%; height: 100%;
-webkit-box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
}
HTML:
<table>
<tr><td><div>Hi</div></td><td><div>Hi</div></td></tr>
<tr><td><div>Hi</div></td><td><div>Hi</div></td></tr>
</table>
Basically the answer is, you can't make this happen with TD tags alone, but you can wrap the cell contents in a tag like divs and style those instead.
Do you want to achieve something like this:
http://img856.imageshack.us/img856/8865/tableim.jpg
?
My only idea currently is to set few absolute positioned divs in table (but then table cells width and heights should be set), and to add box-shadow to these divs...
so this is driving me crazy. I have two divs, floated left, the bottom one has a drop shadow box shadow, in this JS fiddle http://jsfiddle.net/q79Lg/ the shadow renders correctly, it covers the content, but when I copy literally the exact same thing to a page http://www.klossal.com/portfolio/index_backup2.html the shadow doesn't cover the content in the div above. Why is this happening??
Ultimately I'd like to use it here http://www.klossal.com/portfolio/index_backup5.html but it's just the same issue as listed in the first two sources, but I've taken all the other garbage out.
Thanks so much for helping me.
Try
<div align="center" style="background: #ffffff; position: absolute; bottom: 0px; left: 0px; z-index: 5; border:1px solid red; -webkit-box-shadow: 0px -7px 20px 0px rgba(0, 0, 0, 1); -moz-box-shadow: 0px -7px 20px 0px rgba(0, 0, 0, 1); box-shadow: 0px -7px 20px 0px rgba(0, 0, 0, 1); width:100%;height:200px;">
for the botttom div, see if that works :)