For the life of me, I cannot tell where is my extra space coming from on my footer as you see it looks about near 20 30px on the url below
http://innovativeapps.dk/
But my footer code only has this so I don't understand where the extra space is coming from below my social icons.
footer {
background: #fff none repeat scroll 0 0;
color: #ffffff;
float: left;
padding: 30px 0;
width: 100%;
}
It's from section#services. Padding: 50px 0.
section#services have a padding: 50px 0 you can change it with padding: 50px 0 0 0
#bartek_zet was faster than me ;)
Replace the section#services with this code.
section#services {
float: left;
padding: 50px 0 0;
width: 100%;
background: #fff;
}
Related
.container {
background: red;
width: 450px;
height: 500px;
margin: 20px 0 20px 20px;
border: 25px solid;
border-color: blue grey yellow green;
box-shadow: 20px 20px 0 10px purple, 20px -20px 0 10px purple
}
.container-text {
padding: 20px;
color: white;
}
I tried the outline property but it remains the same on all sides of a box.So, I'm using box-shadow. I'm trying to recreate this style. But with my code above, I'm getting this. I can't seem to figure out how would I get equal solid box-shadow on top-bottom and on right-left. Need some help here.
Just set the spread value in the box-shadow property.
Try this box-shadow: 0 0 0 20px purple;
I'm trying to add some styling in <p-calendar> tag of primeng 6.1.1. I want a blue circle on the month item on hover.
I'm expecting this:
But instead, I'm getting this:
Why it is oval and not perfectly round. I'm using border-radius: 50% !important.
Here is my datepicker.scss
.ui-monthpicker-month {
border-radius: 50% !important;
text-decoration: none;
margin-top: 10px;
color: #73767b;
font-family: 'Muli', sans-serif;
padding: 0px 20px 0 20px;
}
.ui-monthpicker-month:hover {
background-color: #1474A4;
color: white;
}
Please correct me.
That is because the element is not square. Check with chrome debugger what is the width and height and make sure that both match.
My guess is that if you change padding: 0px 20px 0 20px; to padding: 20px 20px 20px 20px; it will be square.
Try to specify in ui.monthpicker-month equal height and width then change border-radius: 100%
padding: 0px 20px 0 20px;
Try by removing padding, or if you want that padding then keep same padding for all 4 sides
Please try this one
width: 50px;
height: 50px;
I'm terrible at styling but after making these changes in css:
.ui-monthpicker-month {
border-radius: 100% !important;
text-decoration: none;
margin-top: 10px;
color: #73767b;
font-family: 'Muli', sans-serif;
height: 50px !important;
width: 50px !important;
padding: 20px 20px 20px 20px;
}
I'm getting this:
but the month name is still somewhat pushed towards top, how to make this in exact mid position?
Try to remove margin-top: 10px; to margin-top: 0;
I have a small issue with a website I'm creating.
The page has a background and a white body in the center, in the white body there is padding for the text so it doesn't start at the border.
#content
{ width: 900px;
overflow: hidden;
margin: 0 auto 0 auto;
padding: 20px 30px 20px 31px;
background: #FFFFFF;
text-align: left;}
So the problem is I have a jquery gallery in the top of the content body, but I don't want the gallery to have the padding around it, I mean, the white body. I want the gallery to start at the border of the body and end at the other end.
So I figured I have to make a new CSS tag without padding or negative padding but that isn't working.
How can I fix this?
You can use negative margins that match the padding amount to make the gallery flush with the edges.
body {
background: #eee;
}
#content {
width: 900px;
overflow: hidden;
margin: auto;
padding: 20px 30px 20px 31px;
background: #FFFFFF;
text-align: left;
}
.flush {
background: #171717;
color: #fff;
margin: 0 -30px 0 -31px;
}
<div id="content">
<div>normal</div>
<div class="flush">flush</div>
</div>
I've integrated an image to line up with and other image at the top (lines)and there is 6px difference in Firefox compare to Chrome or Safari. I don't understand where the difference comes from since all my other images (lines) are lining up perfectly in all browsers. my website: beta.zenniel.ca
Here is my css:
.BlogueTop {
float: right;
background: url(http://beta.zenniel.ca/wp-content/uploads/2014/07/blogueTop.jpg) no-repeat;
width: 12px;
height: 268px;
margin: -269px 79px 0px 0px;
padding: 0;
border: 0;
}
By the way, the image at the top is the same place in Firefox and Chrome (140px from the right).
Thanks for your help!
at top of your .css file add
*{
margin: 0;
padding: 0;
}
Each browser does have his own default values. Therefore there are css files that set all default values of the browsers to your own default values. Such css files you can find on the web.
Here's an example: http://meyerweb.com/eric/tools/css/reset/
Why not changing your margin to this
.BlogueTop {
background: url("http://beta.zenniel.ca/wp-content/uploads/2014/07/blogueTop.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 0 none;
float: right;
height: 268px;
margin: -269px 84px 0 0;
padding: 0;
width: 12px;
}
instead of this
.BlogueTop {
float: right;
background: url(http://beta.zenniel.ca/wp-content/uploads/2014/07/blogueTop.jpg) no-repeat;
width: 12px;
height: 268px;
margin: -269px 79px 0px 0px;
padding: 0;
border: 0;
}
Had the same issue.
Setting line-height: 0px worked for me.
Ok this is my problem:
The left float and right float are somehow not put into my container and the footer only pays attention to the middle content part. What am I doing wrong?
I could show it with a picture but I cannot add one because I don't have 10 rep.
It must be a simple fix, I have read about clear:both etc but that all does not work unfortunately.
#container
{
position: relative;
width: 58.5%;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #336600;
text-align: left;
}
#header
{
height: 160px;
background-image:url(images/bannerboven.jpg);
}
#sideleft
{
position: absolute;
top: 160px;
left: 0;
float: left;
width: 22%;
background: #CCFFFF;
padding: 15px 10px 15px 20px;
}
#sideright
{
position: absolute;
top: 160px;
right: 0;
float:right;
width: 23%;
background: #CCFFFF;
font-size: 0.8em;
padding: 15px 10px 15px 20px;
}
#mainContent
{
margin: 0 26% 0 26%;
padding: 0 10px;
background: #0F0;
}
#footer
{
padding: 0 10px 0 20px;
background: #DDDDDD;
text-align: center;
font-weight: bold;
}
I'm not sure what you are trying to achieve without knowing your html structure, but the problem stems from the fact that you have absolute positioning on your left and right containers as well as a floted positioning.
The default positioning for a html element is static, so you either float everything or absolute position everything. Here's something to help you understand positioning better, it's very easy and you'll be on your way in 5 minutes: http://www.barelyfitz.com/screencast/html-training/css/positioning/
Also, you should post a jsfiddle link with the html included so we'll understand better what you are trying to achieve if you need further help. My guess is that Rohit Azad's solution is correct, you just have trouble understanding positioning.
Hi i check to your code i think you want to this
HTML
<div id="container">
<div id="header">Header</div>
<div id="mainContent">
<div id="sideleft">Left</div>
<div id="sideright">Right</div>
</div>
<div id="footer">Footer</div>
</div>
Css
#container
{
width: 58.5%;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #336600;
}
#header
{
height: 160px;
background:red;
background-image:url(images/bannerboven.jpg);
}
#sideleft
{
float:left; width: 22%;
background: #CCFFFF;
padding: 15px 10px 15px 20px;
}
#sideright
{
float:right;
width: 23%;
background: #CCFFFF;
font-size: 0.8em;
padding: 15px 10px 15px 20px;
}
#mainContent
{
padding: 20px 10px;
background: green;
overflow:hidden;
}
#footer
{
padding: 0 10px 0 20px;
background: #DDDDDD;
text-align: center;
font-weight: bold;
}
Live demo