dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: CSS Styling Help

  1. #1
    Join Date
    Oct 2017
    Posts
    1

    CSS Styling Help

    Hi,

    So I have been making a website for myself in a style I haven't used before and I can't seem to find what is making the style change from what I want it to. The contact, terms of service and footer show next to the main content of the website and I wanted it to be underneath.

    I am not sure what is causing it so I will include the CSS code so you can review it. (All the files are uploaded to here. There are also some tags that are not used as I have not added the content yet.)


    Code:
    @import url('https://fonts.googleapis.com/css?family=Ubuntu');
    
    body, html, iframe, embed, object, h1, h2, h3 {
    	
    	border:0;
    	margin:0;
    	
    }
    
    * {
    	
    	font-family: 'Ubuntu', sans-serif !important;
    	
    }
    
    .container {
    	
    	max-width: 1200px;
    	margin: 0 auto;
    	
    }
    
    .NavigationBar {
    	
    	float: right;
    	margin-top: -20px;
    	
    }
    
    .fa-mr {
    	
    	margin-right: 5px;
    	
    }
    
    header .Logo {
    	
    	font-size: 28px;
    	text-decoration: none;
    	margin-top: 5px;
    	color: #333;
    	display: inline-table;
    	
    }
    
    header {
    	
    	padding: 20px 40px;
    	color: #545454;
    	margin: 0 auto;
    	height: 83px;
    	border-bottom: 1px solid #eee;
    	box-sizing: border-box;
    	position: fixed;
    	z-index: 50;
    	background: white;
    	width: 100%;
    	top: 0;
    	box-shadow: 0px 5px 0px #eee;
    	
    }
    
    header nav {
    	
    	line-height: 30px;
    	
    }
    
    header nav a {
    	
    	padding: 24px 14px;
    	float: left;
    	text-decoration: none;
    	transition: 0.3s all ease-in-out;
    	color: #333;
    	box-sizing: border-box;
    	border-top: 4px solid transparent;
    	
    }
    
    header nav a:hover {
    	
    	text-decoration: none;
    	border-top: 4px solid steelblue;
    	background: #f7f7f7;
    	
    }
    
    body {
    	
    	background: white;
    	padding: 0px;
    	margin: 0px;
    	font-size: 19px;
    	line-height: 1.6em;
    	
    }
    
    * {
    	
    	outline: none;
    	
    }
    
    .clearfix {
    	
    	clear: both;
    	
    }
    
    hr {
    	
    	height: 1px;
    	background: #eee;
    	border: none;
    	border-bottom: 1px solid #f7f7f7;
    	
    }
    
    #home {
    	
    	margin-top: 82px;
    	
    }
    
    .hero {
    	margin-top: 70px;
    	display: block;
    	position: relative;
    	width: 100%;
    	background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url('/images/herobackground.jpg');
    	background-position: top;
    	padding: 60px 0;
    	
    }
    
    .hero .caption {
    	
    	text-align: center;
    	width: 100%;
    	
    }
    
    .hero .caption h1 {
    	
    	color: white;
    	font-size: 34px;
    	font-weight: bold;
    	display: inline-block;
    	margin: 10px 0;
    	
    }
    
    .hero .caption p {
    	
    	color: white;
    	line-height: 30px;
    	margin: 0;
    	
    }
    
    .hero .mainbutton {
    	
    	display: inline-table;
    	margin: 0 17px;
    	margin-top: 24px;
    	width: 130px;
    	text-align: center;
    	
    }
    
    .section {
    	
    	padding: 70px 0;
    	text-align: center;
    	
    }
    
    .section .odd {
    	
    	background: #f7f7f7;
    	
    }
    
    .break {
    	
    	height: 10px;
    	
    }
    
    .section h2 {
    	
    	margin-bottom: 18px;
    	
    }
    
    h1, h2 {
    	
    	font-weight: 300;
    	
    }
    
    .quote::after, .quote::before {
    	
    	content:'"';
    	color: #ccc;
    	font-size: 16px;
    
    }
    
    .third {
    	
    	width: 360;
    	display: inline-block;
    	vertical-align: top;
    	
    }
    
    @media screen and (max-width: 768px) {
    	
    	header {
    		
    		position: initial;
    		text-align: center;
    		height: 244px;
    		
    	}
    	
    	header .Logo {
    		
    		text-align: center;
    		float: none;
    		
    	}
    	
    	.NaviagtionBar {
    		
    		float: none;
    		margin-top: 32px;
    		
    	}
    	
    	header nav a {
    		
    		display: block;
    		width: 100%;
    		
    	}
    	
    	.third {
    		
    		width: 80%;
    		
    	}
    	
    	.scrollToTop {
    		
    		display: none;
    		
    	}
    	
    	.noOutlineBox {
    		
    		margin: 20px !important;
    		
    	}
    	
    }
    
    @media screen and (max-width: 1200) {
    	
    	.mainbody, .sidebar {
    		
    		width: 80% !important;
    		float: none !important;
    		margin: 20px auto !important;
    		text-align: center !important;
    		
    	}
    	
    	.pricecard p {
    		
    		margin: 12px auto !important;
    		
    	}
    	
    	.sidebar .mainbutton {
    		
    		margin: 0 auto !important;
    		
    	}
    	
    	.mainbutton {
    		
    		margin: 0 auto !important;
    		
    	}
    	
    }
    
    .mainbutton {
    	
    	color: white;
    	background: #222;
    	padding: 12px;
    	text-decoration: none;
    	transition: .3s all ease-in-out;
    	display: table;
    	cursor: pointer;
    	border-radius: 3px;
    	
    }
    
    .mainbutton:hover {
    	
    	background: steelblue;
    	color: white;
    	
    }
    
    .mainbutton i, header nav a i {
    	
    	margin-right: 7px;
    	width: 1.28571429em;
    	text-align: center;
    	
    }
    
    .mainlink {
    	
    	color: steelblue;
    	padding: 3px 6px;
    	background: #f3f3f3;
    	text-decoration: none;
    	border-radius: 3px;
    	
    }
    
    .mainlink:hover {
    	
    	text-decoration: underline;
    	color: #396a93;
    	
    }
    
    .mainbody {
    	
    	width: 800px;
    	display: inline-block;
    	vertical-align:top;
    	text-align: left;
    	float: left;
    	
    }
    
    
    .sidebar {
    	
    	float: right;
    	vertical-align: top;
    	width: 270px;
    	padding: 30px 35px;
    	border-bottom-left-radius: 3px;
    	border-bottom-right-radius: 3px;
    	border: 1px solid #eee;
    	background: #fdfdfd;
    	border-top: 4px solid steelblue !important;
    	text-align: left;
    	
    }
    
    .sidebar p em {
    	
    	font-style: normal;
    	font-weight: bold;
    	
    }
    
    .h1h {
    	
    	font-weight: bold;
    	color: steelblue;
    	display: inline-block;
    	padding: 8px 12px;
    	border-radius: 3px;
    	background: #f7f7f7;
    	
    }
    
    .h1h {
    	
    	background: white;
    	
    }
    
    .pricecard {
    	
    	margin: 42px 0;
    	
    }
    
    .pricecard h2 {
    	
    	margin: 10px 0;
    	color: #333;
    	font-size: 24px;
    	display: inline-block;
    	vertical-align: middle;
    	font-weight: bold;
    	
    }
    
    .pricecard span {
    	
    	display: block;
    	
    }
    
    .pricecard p {
    	
    	color: steelblue;
    	font-weight: bold;
    	
    }
    
    .pricecard img {
    	
    	margin-right: 10px;
    	vertical-align: middle;
    	display: inline-block;
    	
    }
    
    .shadow {
    	
    	box-shadow: 0px 0 5px #eee;
    	border: 1px solid #eee;
    	
    }
    
    .portfolioCard {
    	
    	margin: 10px;
    	
    }
    
    .portfolioCard p {
    	
    	margin: 5px 0;
    	
    }
    
    .portfolioCard span {
    	
    	margin: 0;
    	color: #9a9898;
    	font-size: 14;
    	
    }
    
    .portfolioScreenshot {
    	
    	background-repeat: no-repeat;
    	background-size: cover;
    	background-position: top center;
    	height: 230px;
    	border: 1px solid #eee;
    	margin-bottom: 12px;
    	
    }
    
    .portfolioScreenshot .siteOne {
    	
    	background-image: url('');
    	
    }
    
    .portfolioScreenshot .siteTwo {
    	
    	background-image: url('');
    	
    }
    
    .portfolioScreenshot .siteThree {
    	
    	background-image: url('');
    	
    }
    
    .portfolioScreenshot .siteFour {
    	
    	background-image: url('');
    	
    }
    
    .portfolioScreenshot .siteFive {
    	
    	background-image: url('');
    	
    }
    
    .portfolioScreenshot .siteSix {
    	
    	background-image: url('');
    	
    }
    
    .quoteToolBox {
    	
    	padding: 20px 24px;
    	border: 1px solid #eee;
    	background: #f7f7f7;
    	border-radius: 3px;
    	font-size: 18px;
    	margin: 5px 0 15px 0;
    	
    }
    
    .quoteToolBox .slidertoptext, .quoteToolBox .sliderbottomtext {
    	
    	margin: 25px 0;
    	line-height: 1.5em;
    	
    }
    
    .quoteToolBox .sliderbottomtext {
    	
    	font-size: 23px;
    	
    }
    
    .quoteToolBox input[type=range] {
    	
    	width: 400px;
    	margin: 0 auto;
    	
    }
    
    .quoteToolBox #totalQuoteDaysBy {
    	
    	margin: 25px 0 0 0;
    	
    }
    
    .quoteToolBox .totalQuotePrice {
    	
    	margin: 10px 0 20px 0;
    	font-size: 40px;
    	
    }
    
    input[type=range] {
    	
    	-webkit-appearance: none;
    	margin: 18px 0;
    	width: 100%;
    	
    }
    
    input[type=range]:focus {
    	
    	outline: none;
    	
    }
    
    input[type=range]::-webkit-slider-runnable-track {
    	
    	width: 100%;
    	height: 8.4px;
    	cursor: pointer;
    	animation: 0.2s;
    	background: steelblue;
    	border-radius: 1.3px;
    	border: 0.2px solid #010101;
    	
    }
    
    input[type=range]::-webkit-slider-thumb {
    	
    	border: 1px solid #000000;
    	height: 36px;
    	width: 16px;
    	border-radius: 3px;
    	background: #ffffff;
    	cursor: pointer;
    	-webkit-appearance: none;
    	margin-top: -14px;
    	
    }
    
    input[type=range]:focus::-webkit-slider-runnable-track {
    	
    	background: steelblue;
    	
    }
    
    input[type=range]::moz-range-track {
    	
    	width: 100%;
    	height: 8.4px;
    	cursor: pointer;
    	animation: 0.2s;
    	background: steelblue;
    	border-radius: 1.3px;
    	border: 0.2px solid #010101;
    	
    }
    
    
    input[type=range]::-moz-range-thumb {
    	
    	border: 1px solid #000000;
    	height: 36px;
    	width: 16px;
    	border-radius: 3px;
    	background: #ffffff;
    	cursor: pointer;
    	
    }
    
    input[type=range]::-ms-track {
    	
    	width: 100%;
    	height: 8.4px;
    	cursor: pointer;
    	animation: 0.2s;
    	background: transparent;
    	border-color: transparent;
    	border-width: 16px 0;
    	color: transparent;
    	
    }
    
    input[type=range]::-ms-fill-lower {
    
    	background:#2a6495;
    	border:0.2px solid #010101;
    	border-radius:2.6px;
    	
    }
    
    input[type=range]::-ms-fill-upper {
    	
    	background:#3071a9;
    	border:0.2px solid #010101;
    	border-radius:2.6px;
    	
    }
    
    input[type=range]::-ms-thumb {
    	
    	border:1px solid #000000;
    	height:36px;
    	width:16px;
    	border-radius:3px;
    	background:#ffffff;
    	cursor:pointer;
    	
    }
    
    input[type=range]:focus::-ms-fill-lower {
    
    	background:#3071a9;
    	
    }
    
    input[type=range]:focus::-ms-fill-upper {
    	
    	background:#367ebd;
    	
    }
    
    footer {
    
    	padding:80px 60px;
    	background:#F7F7F7;
    	font-size:23px;
    	text-align:center;
    	
    }
    
    footer span {
    	
    	font-size:18px !important;
    	
    }
    
    .scrollToTop {
    	
    	position:fixed;
    	bottom:25px;
    	right:25px;
    	padding:4px 10px;
    	background:#f8f8f7;
    	color:steelblue;
    	border-radius:3px;
    	border:1px solid #eee;
    	transition:.3s all;
    	font-size:12px
    	
    }
    
    .scrollToTop:hover,.scrollToTop:active {
    	
    	background:steelblue;
    	border-color:steelblue;
    	color:white;
    	
    }

    Thanks.

  2. #2
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,924
    It is a lot easier for other members to help you if you could provide
    relevant HTML and any JS used beside the CSS provided.

  3. #3
    Join Date
    Mar 2012
    Posts
    3,963
    Hi and welcome to the site. As has already been said, we need to see the HTML as well, and JS (if relevant). However, I am concerned at the sheer quantity of CSS (700 lines). That, and more, is commonplace if you use bloated CMSs, but I doubt that that much CSS is needed in what appears to be bespoke code? It certainly makes solving your problem far more difficult than it might otherwise be...

    It would be helpful if you extract the relevant HTML and CSS in a single file and embed that in your post, rather than the whole CSS file. Indeed, in doing that, you might well solve the problem yourself!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center