i'm trying to have the height auto adjust based on the content that's in the div.. i realize to do this, I shouldn't have a height: xpx;.
my popover is:
.popover {
position: absolute;
top: 0;
left: 0;
height: 120px;
z-index: 1010;
display: none;
max-width: 276px;
text-align: left;
white-space: normal;
background: #fff;
padding: 10px;
font-size: 12px;
}
what's currently in the div of that popover is:
span.details{
display: block;
font-family: Georgia,serif;
margin: 0 0 15px 0;
color: #888;
}
span.status{
display: block;
margin-bottom: 10px;
margin-top: -7px;
}
span.status strong{
font-size:x-small;
vertical-align:top;
}
span.date{
display: inline-block;
float: right;
font-style: italic;
font-weight: bold;
font-size: 11px;
}
span.url{
display: inline-block;
font-style: italic;
font-size: 12px;
font-family: "Arial Black", Gadget, sans-serif;
margin-right: 5px;
}
what it looks like without the height: 120px;
http://sc-cdn.scaleengine.net/i/2952f44fb396097037f8f5eaeabc52cd.png
what it looks like with the height: 120px;
http://sc-cdn.scaleengine.net/i/614d383b7cba18a7f7a9bc017f53b9c4.png
any ideas here guys? i just want it to adjust to whatever is in the box!
.popover {
display:block;height:100%
}
try this
Related
I'm trying to remove the white space on the right and left side of my footer, it keeps making it when I put the code "max-width: 1200px; margin: auto;" to center the content. What other ways can I center the content and at the same time remove the white gaps on both sides?
I tried using margin-top, margin-left, margin-right, bootstrap's pull-left and pull-right, margin and padding set to 0, width:100% etc. Nothing worked.
Thanks.
My code is this:
body {
margin-left: 0;
padding: 0;
}
footer{
position: relative;
bottom: 0;
max-width: 1200px;
margin: auto;
overflow-x: hidden;
}
.footer-distributed{
background-color: #2c2c2c;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
width: 100%;
text-align: left;
font: normal 16px 'Varela Round';
padding: 20px 50px;
margin-top: 10px;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right, .mapouter .gmap_canvas{
display: inline-block;
vertical-align: top;
}
.footer-distributed .footer-left{
width: 40%;
}
.footer-distributed h3{
color: #ffffff;
font: normal 36px 'Varela Round', cursive;
margin: 0;
}
.footer-distributed h3 span{
color: #ffffff;
}
.footer-distributed .footer-links{
color: #ffffff;
margin: 20px 0 12px;
padding: 0;
}
.footer-distributed .footer-links a{
display:inline-block;
line-height: 1.8;
text-decoration: none;
color: inherit;
}
.footer-distributed .footer-company-name{
color: #8f9296;
font-size: 14px;
font-weight: normal;
margin: 0;
}
.footer-distributed .footer-center{
width: 35%;
padding-top:18px;
}
.footer-distributed .footer-center i{
background-color: #33383b;
color: #ffffff;
font-size: 25px;
width: 38px;
height: 38px;
border-radius: 50%;
text-align: center;
line-height: 42px;
margin: 10px 15px;
vertical-align: middle;
}
.footer-distributed .footer-center i.fa-envelope{
font-size: 17px;
line-height: 38px;
}
.footer-distributed .footer-center p{
display: inline-block;
color: #ffffff;
vertical-align: middle;
margin:0;
}
.footer-distributed .footer-center p span{
display:block;
font-weight: normal;
font-size:14px;
line-height:2;
}
.footer-distributed .footer-center p a{
color: #cd2030;
text-decoration: none;
}
.footer-distributed .footer-right{
width: 20%;
padding-top:18px;
}
.footer-distributed .footer-company-about{
line-height: 20px;
color: #92999f;
font-size: 13px;
font-weight: normal;
margin: 0;
}
.footer-distributed .footer-company-about span{
display: block;
color: #ffffff;
font-size: 17px;
font-weight: normal;
margin-bottom: 20px;
}
.footer-distributed .footer-icons{
margin-top: 25px;
}
.footer-distributed .footer-icons a{
display: inline-block;
width: 35px;
height: 35px;
cursor: pointer;
background-color: #33383b;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;
margin-right: 3px;
margin-bottom: 5px;
}
#media (max-width: 880px) {
.footer-distributed{
font: bold 14px 'varela round';
}
.copyright-info, .credit {
width: 100%;
text-align: center;
display: block;
vertical-align: middle;
margin-left: 0px;
margin-right: 0px;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: block;
width: 100%;
margin-bottom: 40px;
text-align: center;
}
.footer-distributed .footer-center i{
margin-left: 0;
}
.main {
line-height: normal;
font-size: auto;
}
}
Use flexbox. All the elements within your footer will automatically center within the parent.
footer {
background-color: #2c2c2c;
position: relative;
bottom: 0;
left: 0;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
}
.footer-distributed {
padding: 1em;
display: flex;
align-items: flex-start;
justify-content: center;
max-width: 1200px;
width: 100%;
}
As the title says, I'm having issues with the hover action. Not sure what's causing it.
body {
font-family: -apple-system-system-ui,BlinkMacSystemFont, "Gurmukhi MN Regular";
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
}
/* Global */
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
/* Header */
header{
background: #3e3e3e;
color: white;
padding-top: 15px;
min-height: 50px;
}
header a{
color: white;
text-decoration: none;
font-size: 21.73px;
}
header ul{
margin: 0;
padding: 0;
}
header li{
display: inline;
padding: 0 140px 0 140px;
margin-left: 40px;
margin-right: 40px;
text-align: center;
}
header .current a{
font-size: 21px;
font-weight: bold;
border-radius: 12px;
background-color: #2d2d2d;
padding: 8px;
height: 5px;
}
header li a:hover{
font-size: 21px;
font-weight: bold;
border-radius: 12px;
background-color: #2d2d2d;
padding: 8px;
height: 5px;
}
I'm working on my first website for my portfolio. I've done all the markup for the first page and I've started styling it, but I'm stuck on the navigation bar. It's only the hover action that isn't working as I want it to. I'm trying to make it so that there's a rounded box behind it in a darker shade than the navigation bar, but the hover effect moves the text to the right a little bit. I read somewhere that it could be padding but I'm not entirely sure.
Appreciate any help, I'm new to all this.
Alex
The tag in the default state doesn't have the same values of padding and font-size of when it's on hover.
Try correct your code like this:
header a{
color: white;
text-decoration: none;
font-size: 21px;
padding: 8px;
height: 5px;
}
Seems you are using header a for simple action and header li a for hovering kindly try to replace your code with the following, If there is any question feel free to ask, if it solves your problem , then vote up to acknowledge our combine effort.
Thank You.
Best Wishes,
body {
font-family: -apple-system-system-ui,BlinkMacSystemFont, "Gurmukhi MN Regular";
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
}
/* Global */
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
/* Header */
header{
background: #3e3e3e;
color: white;
padding-top: 15px;
min-height: 50px;
}
header a{
color: white;
text-decoration: none;
font-size: 21.73px;
}
header a:hover{
font-size: 21px;
font-weight: bold;
border-radius: 12px;
background-color: #2d2d2d;
padding: 8px;
height: 5px;
}
header ul{
margin: 0;
padding: 0;
}
header li{
display: inline;
padding: 0 140px 0 140px;
margin-left: 40px;
margin-right: 40px;
text-align: center;
}
header .current a{
font-size: 21px;
font-weight: bold;
border-radius: 12px;
background-color: #2d2d2d;
padding: 8px;
height: 5px;
}
AS the title says, I'm having trouble with a website footer, For whatever reason I can't seem to figure out why the footer breaks, i've tried a multitude of sticky footer options I've found via google but non seem to really work or throw off my code completely. Any help would be greatly appreciated, still learning as I go!
#import url("reset.css");
#font-face {
font-family: 'Maiandra';
src: url('fonts/MAIAN.TTF');
}
/* Static Header */
#header {
background-color: #676767;
height: 35px;
font-family: Maiandra;
color: #FFFFFF;
font-size: 12px;
margin: 0px auto;
text-align: center
}
/* Body */
html {
position: relative;
min-height: 100%;
}
body {
font-family: Maiandra;
font-size: 15px;
color: #333;
margin: 0 0 60px;
}
p {
padding: 10px;
}
p strong {
font-weight: bold;
}
#wrapper {
margin: 0 auto;
width: 800px;
overflow: visible;
height: 100%
}
/* Content Area */
.content {
float: right;
background: #FFFFFF;
width: 600px;
overflow: sroll;
padding-bottom: 100px;
}
.leftcolumn {
background: #ffffff;
width: 175px;
float: left;
}
.rightcolumn {
width: 175px;
float: right;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 2px;
}
h1 {
font-family: Maiandra
font-weight: bold;
font-size: 20px;
padding-top: 15px;
padding-left: 10px;
}
h2 {
font-family: Maiandra;
font-weight: bold;
font-size: 20px;
padding-top: 15px;
padding-left: 10px;
}
h3 {
font-family: Maiandra;
font-weight: bold;
font-size: 20px;
padding-top: 15px;
padding-left: 10px;
}
h4 {
font-family: Maiandra;
font-weight: bold;
font-size: 20px;
padding-top: 15px;
padding-left: 10px;
}
h6 {
font-family: Maiandra;
font-weight: bold;
font-size: 15px;
padding-top: 15px;
padding-left: 10px;
}
/* Static Footer */
.footer {
position: absolute;
left: 0;
bottom: 0;
height: 60px;
width: 100%;
background: #E8E8E8;
text-align: center;
font-family: Maiandra;
color: #000000;
font-size: 12px;
border-style: solid;
border-top: 1px solid #7F7D7D;
overflow: auto;
}
.footer p{
margin-top: 5px;
height: 10px;
}
I actually found the answer!
added this to my HTML..
<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">-->
<!--<!DOCTYPE HTML>-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I made have made my first CSS class, but I have got a little problem, the buttons are centered, but thats not what I want.
View: http://prntscr.com/6i30xg
I would like them so they start at the left side only. But when using float: left;to the .body class it will results in
View: http://prntscr.com/6i327q
But I would like that the buttons are on the edge like the homepage.
#import url(http://fonts.googleapis.com/css?family=Muli:300,400,300italic,400italic);
/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6
{
margin-top: 0;
margin-bottom: 2rem;
font-weight: 300;
}
h1
{
font-size: 4.0rem;
line-height: 1.2;
letter-spacing: -.1rem;
}
h2
{
font-size: 3.6rem;
line-height: 1.25;
letter-spacing: -.1rem;
}
h3
{
font-size: 3.0rem;
line-height: 1.3;
letter-spacing: -.1rem;
}
h4
{
font-size: 2.4rem;
line-height: 1.35;
letter-spacing: -.08rem;
}
h5
{
font-size: 1.8rem;
line-height: 1.5;
letter-spacing: -.05rem;
}
h6
{
font-size: 1.5rem;
line-height: 1.6;
letter-spacing: 0;
}
p
{
margin-top: 0;
}
/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.btn
{
display: inline-block;
height: 38px;
padding: 0 30px;
color: #555;
text-align: center;
font-size: 11px;
font-weight: 600;
line-height: 38px;
letter-spacing: .1rem;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border-radius: 4px;
border: 1px solid #bbb;
cursor: pointer;
box-sizing: border-box;
}
.btn
/* Form
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Programming :D
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
padding: .2rem .5rem;
margin: 0 .2rem;
font-size: 90%;
white-space: nowrap;
background: #F1F1F1;
border: 1px solid #E1E1E1;
border-radius: 4px;
}
pre > code
{
display: block;
padding: 1rem 1.5rem;
white-space: pre;
}
/* Content
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.content
{
border-width: 20px 20px 0px 20px;
border-radius: 28px 28px 0 0;
box-sizing: border-box;
margin-top: 120px;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
min-height: 100%;
}
.header
{
}
.header span
{
color: #fff;
float: left;
margin-left: 28px;
margin-top: 28px;
font-family: 'Muli', sans-serif;
font-weight: 300;
font-size: 24px;
}
.header ul
{
color: #fff;
float: right;
margin-right: 28px;
margin-top: 28px;
}
.header ul li
{
float: right;
border: 1px solid #fff;
padding: 5px 20px;
border-radius: 11px;
margin-right: 12px;
}
.header ul li a
{
color: #fff;
font-family: 'Muli', sans-serif;
font-weight: 300;
font-size: 11px;
text-decoration: none;
}
.body
{
padding-top: 148px;
}
.footer
{
}
Just remove margin-left: auto; and margin-right:auto; from your content class. OR You can replace auto with any fixed number of pixels like 10px. Setting the margins left and right to auto makes the content to align center of the page. So do not use auto.
You content class should look like,
.content
{
border-width: 20px 20px 0px 20px;
border-radius: 28px 28px 0 0;
box-sizing: border-box;
margin-top: 120px;
max-width: 1280px;
margin-left: <some value in pixels>;
margin-right: <some value in pixels>;
min-height: 100%;
}
Remove text-align: center; from .btn class
I just tested my new site with my android phone and I am not able to scroll anywhere on the page. On Firefox, opera, ie, and chrome desktop browsers I get vertical scroll when needed. In my html, body css rule I've got overflow-y to scroll; Width should not be scrolled. I'm probably missing something simple here but I've never come across this in any other sites I've done.
Here's my css for the site:
#charset "utf-8";
/* CSS Document */
#body{
min-width: 900px;
width: 75%;
background-size: cover;
background-image: url(../graphics/back2.jpg);
position: relative;
margin: 40px auto;
padding: 10px;
border-style: groove;
border-width: 5px;
border-color: #000;
background-repeat: repeat-y;
}
a:link, a:visited, a:active{
text-decoration: none;
color: inherit;
}
a:hover{
color: #FFF;
text-decoration: underline;
}
html, body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow-y: scroll;
background-image: url(../graphics/craig-smith-background.jpg);
line-height: 25px;
}
h1{
font-size: 36px;
font-family: "Times New Roman", Times, serif;
color: #000;
margin: 10px;
}
h2{
font-size: 30px;
font-family:"Times New Roman", Times, serif;
margin-left: 30px;
color: #333;
font-weight: 700;
margin: 20px;
}
h3{
font-size: 24px;
margin: 10px;
}
p{
font-size: 20px;
font-family: "Times New Roman", Times, serif;
color: #FFF;
text-indent: 1.5em;
margin-left: 1.5em;
}
#quote{
margin-left: 30px;
font-style: italic;
font-family: lucida;
font-size: 18px;
border-style: inset;
border-color: #333;
border-width: 2px;
height: 80px;
}
#header{
width: auto;
margin: 0 auto;
position: relative;
text-align: center;
}
#nav{
position: absolute;
z-index: 1;
left: 25%;
top: 150px;
}
.picture{
display: inline-block;
position: relative;
margin: 0 auto;
border-style: groove;
border-width: 5px;
border-color: #999;
}
.clear-left{
clear: left;
position: relative;
}
.clear-right{
clear: right;
position: relative;
}
.clear-all{
clear: both;
position: relative;
}
#left-col{
width: 25%;
min-width: 300px;
position: relative;
float: left;
text-wrap: normal;
overflow: hidden;
margin-bottom: 10px;
margin-top: 10px;
text-align: right;
}
#right-col{
min-height: 500px;
min-width: 500px;
width: 65%;
text-align: left;
float: right;
border-style: groove;
border-width: 5px;
border-color: #CCC;
margin-bottom: 10px;
margin-top: 10px;
text-wrap: normal;
text-indent: 10px;
}
#footer{
width: 85%;
height: 40px;
background-color: #999;
text-align: center;
margin: 10px auto;
padding: 0px;
padding-bottom: 10px;
border-style: groove;
border-width: 2px;
border-color: #999;
}
#project-description h1{
text-align: center;
font-size: 36px;
}
.project-description h2{
color: #333;
font-weight: bold;
}
.project-description{
border-style: inset;
border-width: 3px;
border-color: #333;
margin: 10px;
padding: 5px;
}
.project-description p{
margin-left: 70px;
text-indent: 0;
}
table{
border-spacing: 0;
border-collapse: collapse;
}
td, th, tr{
padding: 0;
line-height: 20px;
}
And here's a link the live site.
You don't need to give the body and html tags the overflow-y: scroll; style. That is resulting in a double scrollbar which is failing in mobile browsers. You don't even need to specify that as it is default behavior. You may want to set overflow-y: scroll; and overflow-x: hidden; on the body tag only.