Here is my css for my footer. It is supposed to be at the very bottom of the page, but for some reason in IE 7 .. i am getting about 10px of extra margin. Any fixes?
/* FOOTER ********************************************************************************************************************/
#footer-bg { margin: 0px auto; padding: 0px; width: 100%; text-align: center; background: url(../images/footer-bg.jpg) top left repeat-x #123800; }
#footer { margin: 0px auto; padding-bottom:30px; width: 900px; font:11px Verdana, Arial, Helvetica, sans-serif; background: #123800 url(../images/footer.jpg) top center no-repeat; color: #b8ceae; text-align: justify!important; }
#footer .footer-nav { margin: 0px; padding: 160px 0px 3px 0px; font-size:11px; color: #789a47; }
#footer p { color:#f9ffe9; margin: 0px; padding: 0px; }
#footer .devby { margin:0px; padding: 15px 0px 0px 40px; height:20px; background:url(../images/prosites.png) left center no-repeat; }
#footer br { display: none!important; } /* nuke coded breaks*/
Use negative margins.
Related
Note: becasue I am a new user, I cannot embed photos yet. The photos are in links generated by Stack overflow below.
The below is the design I am trying to achieve,
However, the below is currently what is happening
As you can see, the sidebar list is appearing to go outside the sidebar itself when the padding is added.
How can I manipulate my CSS to alter?
width: 100vw;
height: 100vh;
}
body {
margin: 0;
padding: 0;
}
.Sidebar {
height: 100%;
width: 250px;
background-color: white;
border-right: 1px solid;
padding-left: 15px;
}
.SidebarList {
height: auto;
width: 100%;
padding-left: 15px;
font-size: 18px;
border: 2px #FD954E;
border-right: 1px solid;
}
.SidebarList .row {
width: 100%;
height: 50px;
background-color: white;
list-style-type: none;
margin: 0%;
display: flex;
color: #A7ACB6;
justify-content: center;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
}
.SidebarList .row:hover {
cursor: pointer;
background-color: #E7E7E7 ;
}
.SidebarList #active {
background-color: white;
color: #FD954E
}
.row #icon {
flex: 30%;
display: grid;
place-items: center;
}
.row #title {
flex: 70%;
}
.Logo {
padding-left: 40px;
padding-top: 25px;
}
I wanted to put some space between scrollbar and edge of textarea and have this code:
export const Textarea = styled.textarea`
font-family: Open Sans, sans-serif;
font-size: 16px;
line-height: 24px;
border-radius: 14px;
width: 600px;
height: 200px;
border-width: 0px;
border: 1px solid #DCDCDC;
padding: 14px 16px;
left:-100px;
resize: none;
box-sizing: border-box;
::-webkit-scrollbar {
width: 8px;
height: 60px;
}
::-webkit-scrollbar-thumb {
background-color: #3AA4A4;
border-radius:2px;
border-right: 4px white solid;
background-clip: padding-box;
}
::-webkit-scrollbar-track {
margin-top: 20px;
margin-bottom: 20px;
}
:focus {
outline: none;
}
:placeholder {
color: #96a2ac;
}
`;
but the problem is the space was added but border radius of scrollbar of top right and bottom right is not added and visible.
I created a sort of div banner element on the top of my page and had a second transparent element overlayed in an absolute position over it. The problem is that the words in this absolute element will not resize as the page size decreases, in other words, they are not very responsive. How can I fix this?
CSS
.full{
min-height: 100%;
background-color: white;
/*background-image: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.3) 90%), url("america/cservice.jpeg");*/
/*background-blend-mode: lighten;*/
padding-top:25px ;
color: #5a5a5a;
/*color: black;*/
padding-bottom: 20px;
text-align: center;
align-items: center;
border-top: 5px solid rgba(0, 0, 102, 0.5);
border-bottom: 5px solid rgba(0, 0, 102, 0.5);
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.image{
width: 100%;
height: 280px;
background-image: url(america/news2.png);
background-size: cover;
background-repeat: no-repeat;
position: relative;
padding-top: 20px;
padding-bottom: 20px;
display: block;
margin: 0 auto;
}
.bor {
position: absolute;
border: 5px solid;
border-color: rgba(255, 255, 255, 0.5);
padding-top:15px;
padding-bottom:;
background-color: rgba(133, 133, 173, 0.4);
left: 0;
right: 0;
bottom: 20;
top: 20;
padding-left: 20px;
padding-right: 20px ;
margin-right: 250px;
margin-left: 250px;
}
h2 {
position: absolute;
width: 100%;
color: black;
font-size: 40px;
padding-top:15px;
font-weight: 900;
}
h4 {
position: relative;
width: 100%;
color: black;
font-size: 30px;
font-weight: 900;
padding-top: 95px;
padding-bottom: 25px;
font-stretch: ultra-expanded;
}
b{
border: 5px solid black;
padding-right: 25px;
padding-left: 25px;
margin-left: 20px;
margin-right: 20px;
color: white;
font-weight: 900;
font-size: 40px;
}
HTML
<div class="full">
<div id="section">
<h1 class="text-center">—News Feed—</h1>
<br>
<hr>
<div class="image">
<div class="bor">
<h2>Weekly<b>Report</b></h2>
<br>
<h4>—Catch up on all the latest news regarding the world—</h4>
</div>
</div>
</div>
</div>
Is this closer to what you are looking for?
https://codepen.io/panchroma/pen/WEygZE
The key change I made was this:
h2 {
/* position: absolute; */ /* new */
position:relative; /* new */
}
Search the css for 'new' to see other less important edits.
This still needs work but hopefully it will get you unstuck.
Good luck!
Boostrap dropdown is hidden inside other elements. When I try to click on pencil icon it shows dropdown but some other elements are overriding it. I made position of dropdown relative but it increases site of Div tag. attaching screenshot.
new
Christeen
Last modified 4-5-2016 at 23:16
Share
Edit
Delete
CSS
.listing-body ul.listbody {
margin: 0;
padding: 0;
display: block;
list-style: none;
}
.listing-body ul.listbody li {
margin: 0;
padding: 0;
list-style: none;
float: left;
width: 100%;
background: #FFF;
border: 1px solid #dadada;
border-top: none;
}
.listing-body .fourthli {
width: 25%;
float: left;
margin: 0;
padding: 0 1%;
color: #000;
font-family: 'robotoregular';
font-size: 12px;
line-height: 45px;
color: #333;
text-align: left;
box-sizing: border-box;
overflow: hidden;
max-width: 50%;
text-overflow: ellipsis;
white-space: nowrap;
}
.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
background-clip: padding-box;
}
The overflow:hidden in the .listing-body .fouthli was cropping off the dropdown menu. Removing it fixed it.
I have an image slider but need to have a link on one side. I have currently set the link where I want it on the image but it doesn't scale down when the screen is resized.
How do I get this absolute positioned element to scale down with the screen size and move with the image resizing?
here is a JSFiddle https://jsfiddle.net/s0v6j04a/
<div class="sliders">
<div class="slider"><div id="promo1">
<div id="promo-link">
TEST LINK
</div>
<img src="https://unsplash.imgix.net/photo-1434139240289-56c519f77cb0?fit=crop&fm=jpg&h=700&q=75&w=1050" />
</div>
</div>
</div>
#slider{
position:relative;
}
.div1, .div2 {
min-height: 400px;
background: #D25A1E;
position: relative;
width: calc(50% - 30px);
}
.div1 {
float: left;
background-image: url('https://ununsplash.imgix.net/photo-1433838552652-f9a46b332c40?fit=crop&fm=jpg&q=75&w=1050') !important;
background-repeat: no-repeat;
background-position: center center;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
}
.div2 {
float: right;
background-image: url('https://ununsplash.imgix.net/photo-1427805371062-cacdd21273f1?fit=crop&fm=jpg&q=75&w=1050') !important;
background-repeat: no-repeat;
background-position: center center;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
}
.div1:after, .div2:before {
content:'';
position: absolute;
top: 0;
width: 0;
height: 0;
}
.div1:after {
left: 100%;
border-top: 400px solid #D25A1E;
border-right: 50px solid transparent;
}
.div2:before {
right: 100%;
border-bottom: 400px solid #D25A1E;
border-left: 50px solid transparent;
}
#promo1{width:100%; position:relative;}
#promo1 img{width:100%;}
#promo-link{
position: absolute;
z-index: 100000;
left: 25%;
top: 50%;
font-size: 30px;
padding: 20px 40px;
border: 2px solid #fff;
}
#promo-link a{
text-decoration:none;
color:#fff;
font-family:"Times New Roman", Times, serif
}