Help with my footer css

  • mchlshkr

    (@mchlshkr)


    11 years, 4 months ago

    So before I start, I admit I am a WordPress novice and have limited knowledge of html and php. Most of the work I do is within the css file. I am learning though. I am trying to organize my footer into three columns, and currently they are vertically stacked and I’m pretty sure a few widgets might not even be showing. Here is the code. I really would appreciate any suggestions as to which parts of this css to modify. Thanks.

    footer {
	color: black;
	text-shadow: 0 0 1px #000;
	padding:20px 0;
	border-top: 5px solid #313131;
	-webkit-box-shadow: 0 -5px 0 rgba(0, 0, 0, .1);
	box-shadow: 0 -5px 0 rgba(0, 0, 0, .1);
	margin-top:20px;
	height: 100%;
	position:relative;
	clear:both;
}
	footer a{ display:inline; color:#fff;}
	footer a:hover{}

/* Footer Widgets */
#footer-widget-area{width:100%; display: block;}, .footer-bottom .container{
	margin: 0 auto;color:#fff;
}
	.footer-widgets-box{margin-right:4%;}

	.footer-1c .footer-widgets-box{	width:30%;}
	.footer-2c .footer-widgets-box{	width:30%;}
	.footer-3c .footer-widgets-box{	width:30%;}
	.footer-4c .footer-widgets-box{	width:30%;}

	.narrow-wide-2c #footer-first , .wide-narrow-2c #footer-second {width:32%;}
	.narrow-wide-2c #footer-second, .wide-narrow-2c #footer-first {width:64%;}

	.wide-left-3c #footer-first    ,.wide-right-3c #footer-third  {	width:46%;}
	.wide-left-3c .footer-widgets-box , .wide-right-3c .footer-widgets-box {	width:23%;}

	.footer-1c .footer-widgets-box,
	.narrow-wide-2c #footer-second,
	.wide-narrow-2c #footer-second,
	.footer-2c #footer-second,
	.footer-3c #footer-third,
	.footer-4c #footer-fourth,
	.wide-right-3c #footer-third,
	.wide-left-3c #footer-third{margin-right:0;}

	.footer-widget-top{
		border-bottom:0px solid #2C2C2C ;
		padding:10px 0;
	}
	.footer-widget-top h4{
		font-size: 22px;
		font-family: BebasNeueRegular,arial,Georgia, serif;
	}
	.footer-widget-container{
		padding: 5px;
		border-top:0px solid #525151; display:inline;
	}
		.footer-widget-container p {padding-bottom: 1.0em;}
		.footer-widget-container ul, footer .tabs-wrap ul{ border-bottom:1px solid #525151; }
		.footer-widget-container li, footer #tabbed-widget .tabs-wrap li {
			padding: 6px 12px 6px 0;
			line-height: 18px;
			overflow: hidden;
			border-bottom: 1px solid #2C2C2C !important;
			border-top: 1px solid #525151;
		}
		.footer-widget-container li:first-child , footer #tabbed-widget .tabs-wrap li:first-child { border-top:0 none;}
Viewing 4 replies - 1 through 4 (of 4 total)
  • WPyogi

    (@wpyogi)

    11 years, 4 months ago

    There’s really no way to help with issues like this without seeing the actual page live. Can you post a link to it?

    Thread Starter mchlshkr

    (@mchlshkr)

    11 years, 4 months ago

    Oops meant to include..

    http://www.nationlearn.com

    WPyogi

    (@wpyogi)

    11 years, 4 months ago

    You need to use “float: left;” on each of the widgets — that’s what puts them side by side. Start by changing to this code:

    .footer-4c .footer-widgets-box {
    float: left;
    width: 25%;
}

    Your widths add up to move than 100% too — you have to include the margins in the total width…

    Thread Starter mchlshkr

    (@mchlshkr)

    11 years, 4 months ago

    cool. Just changed it, thank you so much. I think I’ve got it from here, wow I knew I had to float something left. You are a saint.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Help with my footer css’ is closed to new replies.