I have a problem converting html page into wordpress theme. When loading theme i just see white screen but other previously installed theme looks normal. I read earlier similar subject on stackoverflow but it seems that it doesnt help me. Can somebody help me solve this problem?
These are my theme files:
Theme Name: Vesti
Theme URI: www.komunalacbecej.com
Author: Aljosa Boskovic
Author URI: www.komunalacbecej.com
Description: Twenty Seventeen brings your site to life with immersive featured images and subtle animations. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
*/
* {
margin: 0;
padding: 0;
}
body{
width: 960px;
margin: 0 auto;
background-color: #faf6d0;
padding: 0;
//background-image: url('images/green.png');
background-size: cover;
}
header{
display: block;
width: 100%;
margin: 0 auto;
}
#uppermenu{
float: right;
margin-top: 4px;
}
#uppermenu ul{
margin-right: 15px;
}
#uppermenu ul li{
display: inline;
padding: 5px;
font-size: 15px;
color: grey;
font-weight: 540;
font-family: 'Oswald', sans-serif;
cursor: pointer;
}
#uppermenu ul li:hover{
color:#156038;
}
#flags{
float:right;
margin-top: 4px;
}
#flags img{
width: 20px;
height: 20px;
margin-right: 7px;
cursor: pointer;
}
#logo{
vertical-align: middle;
float: left;
height: 70px;
}
#naziv{
float: left;
color: #1a7645;
height: 70px;
width: 300px;
box-sizing: border-box;
padding: 5px;
font-family: sans-serif;
}
nav{
width: 100%;
background: #3d874d;
text-align: center;
position: relative;
z-index: 11;
border: 2px solid #a4a41b;
margin: 0 auto 10px auto;
clear: both;
border-radius: 2px;
}
nav ul{
list-style: none;
}
nav ul li{
display: inline-block;
padding: 15px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
}
nav ul li a{
text-decoration: none;
color: #fff;
display: block;
font-size: 1.1em;
}
nav ul li:hover{
background: #150;
}
nav ul li a:hover{
color: #fdf742;
}
nav ul ul {
position: absolute;
width: 150px;
background: #2a562c;
opacity: 0.8;
margin-top: 15px;
margin-left: -15px;
text-align: left;
display: none;
}
nav ul ul li{
display: block;
text-align: left;
border-bottom: 1px solid #5b7e5d;
}
nav ul li:hover > ul{
display: block;
}
#slide{
width: 100%;
height: 500px;
position: relative;
z-index: 2;
margin: 0 auto;
}
#slidephoto{
width: 100%;
height: 500px;
position: relative;
z-index: 2;
border-radius: 5px;
}
#leftbutton{
width: 5%;
height:500px;
position: absolute;
left: 0;
top: 0;
background: #b3b0b0;
opacity: .5;
line-height: 500px;
z-index: 4;
border-radius: 5px;
}
#rightbutton{
width: 5%;
height:500px;
position: absolute;
right: 0;
top: 0;
background: #b3b0b0;
opacity: .5;
line-height: 500px;
z-index: 4;
border-radius: 5px;
}
#leftarrow {
vertical-align: middle;
cursor: pointer;
}
#rightarrow {
vertical-align: middle;
cursor: pointer;
}
#leftarrow:hover{
background: grey;
}
#rightarrow:hover{
background: grey;
}
#naslov{
width: 100%;
text-align: left;
margin-left: auto;
margin-right: auto;
letter-spacing: 1px;
text-indent: 30px;
font-size: 20px;
color: #1a7645;
font-family: Georgia;
border-top: 1px solid #1a7645;
background: #639665;
color: #e6f3d1;
padding: 10px 0;
}
#firsttext{
width: 100%;
margin: 30px auto 0 auto;
font-family: 'Times New Roman';
line-height: 1.4em;
font-size: 19px;
text-align: justify;
padding-top: 10px;
box-sizing: border-box;
padding: 40px 90px;
color: white;
background: #6eae49;;
border-radius: 4px;
}
#firsttext span{
font-size: 28px;
font-weight: bold;
color: #1a7645;
}
#delatnosti {
width: 100%;
position: relative;
text-align: center;
background-color: #e6f3d1;
margin: 0px auto;
box-sizing: border-box;
border: 1px solid #6d9e6f;
padding: 20px ;
}
.boxes div {
display: inline-block;
border: 1px solid #a2b6c0;
width: 200px;
height: 210px;
vertical-align: top;
text-align: center;
background-color: white;
color: #46545b;
margin: 20px 10px;
cursor: pointer;
border-radius: 4px;
}
.boxes div:hover{
border: 1px solid green;
background-color: #dfdede;
}
.boxes a img{
width: 200px;
height: 110px;
}
.boxes a p, h3{
//margin: 5px;
text-decoration: none;
}
.boxes div a{
text-decoration: none;
color: black;
}
#obavestenja{
width: 100%;
height: 40px;
//border: 1px solid black;
font-size: 2em;
line-height: 40px;
text-indent: 210px;
}
#mainnews-banner{
width: 100%;
margin: 0 auto;
}
#mainnews-banner h1{
text-indent: 210px;
font-family: serif;
letter-spacing: 3px;
}
#sadrzaj{
width: 75%;
background-color: white;
display: inline-block;
box-sizing: border-box;
text-align: justify;
border: 1px solid black;
}
#vestikolone{
width: 80%;
}
#glavnavestslika{
width: 100%;
height: 430px;
background: url("images/slika4.jpg");
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
#glavnavesttekst{
width: 100%;
height: 180px;
background: black;
position: absolute;
bottom: 0;
opacity: .6;
}
#glavnavesttekst p{
color: #ded8d8;
opacity: 1;
padding: 10px;
font-size: 18px;
font-family: Georgia;
line-height: 23px;
}
#glavnavesttekst h2{
color: white;
font-weight: bold;
opacity: 1;
font-family: Georgia;
text-indent: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
#glavnavest {
font-size: 1.2em;
font-family: 'Oswald', sans-serif;
}
#datum{
width: 100%;
padding: 10px;
box-sizing: border-box;
color: white;
background: black;
}
#banner{
width: 25%;
float: right;
text-align: center;
//border: 3px solid green;
//background: #f1f1f1;
}
#banner img{
width: 120px;
height: 100px;
background: #9ac0f6;
border: 1px solid #9ac0f6;
cursor: pointer;
}
#banner p{
font-size: 1em;
font-family: Arial;
background: #fecd61;
width: 60%;
margin: 0 auto;
margin-bottom: 8px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
}
#pastnewspara{
text-transform: uppercase;
background-color: black;
color: white;
width: 75%;
box-sizing: border-box;
padding-left: 10px;
margin-bottom: 1px;
opacity: .9;
}
#pastnews{
border-top: none;
position: relative;
text-align: center;
width:75%;
height: 140px;
float: left;
border: 1px dashed black;
border-top: none;
}
.column{
width: 25%;
height: 140px;
display: inline-block;
margin-left: -4px;
background-color: white;
box-sizing: border-box;
vertical-align: top;
box-sizing: border-box;
}
.column img{
width: 100%;
height:140px;
}
.column h3,p{
text-align: left;
padding: 5px;
}
#prognoza{
clear: both;
width: 75%;
background: brown;
color: #a2b6c0;
border-bottom: 2px solid white;
}
.weatherwidget-io{
width: 100%;
display: block;
height: 20px;
text-align: left;
}
#footer{
width: 100%;
height: 130px;
background: white;
background: #a2b6c0;
text-align: center;
position: relative;
border-top: 3px solid white;
}
#icons{
line-height: 130px;
}
#footer i{
color: #554f4f;
font-size: 36px;
padding: 26px;
vertical-align: middle;
}
#footer span {
position: absolute;
right: 50px;
color: grey;
font-family: sans-serif;
}
#footer span i{
padding: 6px;
color: grey;
font-size: 0.6em;
}
/* stranica zelenilo.html */
#submenu ul li{
list-style: none;
font-size: 1.1em;
padding-bottom: 5px;
border-bottom: 2px solid green;
margin-bottom: 13px;
background: rgba(96,96,96,0.4);
}
#submenu {
margin-top: 30px;
width: 22%;
background: url('images/leaf3.jpg');
background-size: cover;
opacity: .9;
font-family: 'Oswald', sans-serif;
text-align: center;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
padding: 10px 0;
color: #cfcf05;
border: 2px solid green;
float: left;
}
#submenu ul {
opacity: 1;
padding: 40px 20px;
font-size: 16px;
}
#zelenilobody{
background: url('images/goranski.jpg');
background-size: cover;
height: 1000px;
}
#submenu ul li:hover{
background-color: grey;
background: rgba(96,96,96,0.7);
color: white;
cursor: pointer;
}
#navigation nav{
background-color: #61a239;
}
#zelenilo-naziv #naziv{
color: #60a23a;
background-color: rgba(96,96,96,0.7);
}
#zelenilo-uppermenu #uppermenu li{
color: #60a23a;
background-color: rgba(96,96,96,0.8);
}
#zelenilo-tekst{
width: 75%;
float: right;
margin-top: 30px;
border: 1px solid white;
background: rgb(246, 241, 241, 0.8);
box-sizing: border-box;
padding: 20px;
}
#zelenilo-tekst p{
line-height: 20px;
margin-top: 10px;
font-size: 17px;
}
#zelenilo-tekst ol{
padding-left: 20px;
line-height: 24px;
margin-top: 15px;
font-size: 17px;
}
/* stranica vesti.php */
#blognews {
background-color: white;
margin-top: 20px;
padding: 10px;
border: 1px solid black;
}
#article {
border: 1px solid black;
margin-top: 20px 0;
}
#article h2 {
margin-left: 15px;
margin-top: 10px;
}
#datumclanka{
display: block;
margin-left: 15px;
}
#article img{
height: 120px;
display: inline-block;
width: 180px;
vertical-align: middle;
margin-top: 10px;
margin-left: 10px;
padding-bottom: 10px;
}
#article p{
display: inline-block;
width: 650px;
vertical-align: middle;
font-size: 1.1em;
margin-left: 10px;
}
header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><?php bloginfo('title'); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
<?php wp_head(); ?>
</head>
<body>
<header>
<img src="images/logofirme.jpg" id="logo">
<div id="naziv">
<h1><?php bloginfo('name'); ?></h1>
<p>Javno preduzeće za komunalne usluge</p>
</div>
<div id="flags">
<img src="images/serbia.png">
<img src="images/hungary.png">
</div>
<div id="uppermenu">
<ul>
<li>Najčešća pitanja</li>
<li>Korisni linkovi</li>
</ul>
</div>
<?php wp_nav_menu(); ?>
</header>
footer.php
<div id="footer">
<div id="icons">
<i class="fa fa-phone"></i>
<i class="fa fa-envelope-o"></i>
<i class="fa fa-facebook-official"></i>
<span><i class="fa fa-copyright"></i>Design by Aleksey</span>
</div>
</div>
</body>
</html>
index.php
<?php get_header(); ?>
test
<?php get_footer(); ?>
Can you try following solutions?
In first line of style.css add "/*" before "Theme Name: Vesti". So it will be like
/*
Theme Name: Vesti
Disable/deactivate all plugins to check if confliction happens between your active theme and plugins. And then enable it one by one if issue happens because of it.
Add following line in wp-config.php file for increasing PHP memory limit.
define(‘WP_MEMORY_LIMIT’, ’64M’);
Related
How can I make this textarea (the one with class="proxi-output" responsive?
When I try to resize the page it overlaps div (class="resi-gen") and it breaks the whole web.
*{
font-family: 'Montserrat', sans-serif;
}
body,
html{
margin: 0px;
padding: 0px;
background-image: url(../img/agreya-bg.png);
background-repeat: no-repeat;
background-size: cover;
background-color: #0E0E0E;
}
.side-panel{
background-color: #050707;
height: 100vh;
width: 250px;
margin: 0px;
z-index: 10;
position: absolute;
}
.logo{
margin: 0px;
color: #FFFFFF;
padding: 35px 20%;
letter-spacing: 2px;
}
.sub-pages{
text-align: center;
justify-content: center;
margin: 150px auto;
}
.sub-pages a{
display: block;
font-size: 20px;
text-decoration: none;
color: #FFFFFF;
margin: 45px 0px;
}
.sub-pages a:hover{
color: #E1E777;
}
#current{
color: #E1E777;
}
.heading{
color: #FFFFFF;
text-align: center;
font-weight: 500;
letter-spacing: 2px;
}
.wrapper{
float: right;
width: 100vw;
height: 100vh;
margin: 0px;
}
.resi-gen{
position: relative;
background-color: #050707;
margin-top: 20%;
width: 70%;
height: 45%;
border: 2px solid transparent;
border-radius: 50px;
/* width: 1100px;
height: 400px; */
margin-left: 290px;
}
.resi-gen h2{
display: inline-block;
color: #FFFFFF;
margin-top: 20px;
margin-left: 30px;
font-weight: 500;
letter-spacing: 1.5px;
}
#proxi-output{
position: absolute;
margin-top: 2%;
margin-left: 5%;
height: 85%;
width: 70%;
resize: none;
background-color: #818181;
cursor: pointer;
outline: none;
border: 2px solid transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/residental.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/29441bec37.js" crossorigin="anonymous"></script>
<title>Agreya - Register</title>
</head>
<body>
<div class="wrapper">
<div class="side-panel">
<h1 class="logo">AGREYA</h1>
<div class="sub-pages">
<a id="current" href="residental.html">Residental</a>
Datacenter
Purchase
Settings
</div>
</div>
<h1 class="heading">Residental proxies</h1>
<div class="resi-gen">
<h2>Generate Proxies</h2>
<textarea id="proxi-output" name="output"></textarea>
</div>
</div>
</body>
</html>
I am working on web page layouts. I created this one.
https://codepen.io/iamgonge/pen/paOxxb
I dont understand why the .container .left-side and .right-side elements start at the top of the browser and not below the header. Shouldn't the layout out be header->section(hero)->section(one)? I would think that the top of any of those three divs would be underneath the header but they are not. What amy I not understanding here?
body {
font-family: Verdana, Geneva, sans-serif;
margin: 0;
padding: 0;
}
.container {
background: #333338;
display: inline-block;
width: 60%;
height: 800px;
}
header {
position: fixed;
background: #10105f;
width: 100%;
height: 150px;
}
.main-links a {
text-decoration: none;
color: #fff;
font-size: 20px;
text-transform: uppercase;
}
.main-links a:hover {
color: #00843d;
}
.main-links a:active {
color: red;
}
.left-side {
display: inline-block;
width: 20%;
background: #4C4C59;
height: 800px;
float: left;
}
nav {
position: absolute;
bottom: 0;
left: 0;
height: 50px;
width: 100%;
text-align: center;
}
nav ul {
margin: auto;
padding: 0;
display: inline-block;
list-style: none;
color: #fff;
// border: 1px solid #00843D;
width: 60%;
;
}
nav li {
display: inline-block;
margin: 5px -3px;
padding: 5px 10px;
// border: 1px solid#fff;
}
nav li:hover {
background: rgba(255, 255, 255, 0.25);
}
nav li:active {
border-bottom: 2px solid red;
color: red;
}
.nav-left {
float: left;
height: 50px;
width: 20%;
padding-bottom: 96px;
// border: 1px solid #00843D;
}
.nav-right {
float: right;
height: 50px;
width: 20%;
padding-bottom: 96px;
//border: 1px solid #00843D;
}
.nav-center {
position: relative;
padding-bottom: 21px;
margin: 0 auto;
height: 75px;
width: 300px;
// border: 1px solid #00843D;
}
.nav-right p a {
font-size: 16px;
text-decoration: none;
color: #fff;
}
.nav-right p a:hover {
color: #00843d;
}
.nav-right p {
margin: 20px;
padding: 0;
color: #fff;
}
.one {
display: block;
width: 100%;
height: 800px;
background: #080853;
}
.right-side {
display: inline-block;
width: 20%;
background: #4C4C59;
height: 800px;
float: right;
}
.rss-title,
.rss-date {
margin: 0px!important;
}
.rss-feed {
margin: 10px 5px 20px 0px;
}
.rss-date {
padding: 0;
font-size: 12px;
font-style: italic;
}
.hero,
.one {
position: relative;
height: 100%;
}
.success {
display: block;
text-align: center;
margin-top: 20%;
font-size: 69px;
color: #00843d;
// margin-left: auto;
// margin-right: auto;
}
.success:hover {
font-size: 71px;
}
#timestamp {
margin: 10px 5px 20px 0px;
text-align: center;
color: #fff;
font-size: 16px;
}
#timestamp,
.rss-feed {
background: #080853;
padding: 10px;
height: 110px;
}
#media (min-width:1530px) {}
<body>
<header>
<div class="nav-left">
<div id="timestamp"></div>
</div>
<div class="nav-right"></div>
<div class="nav-center"></div>
<nav>
<ul class="main-nav">
<li class="main-links">home</li>
<li class="main-links">about</li>
<li class="main-links">projects</li>
<li class="main-links">portal</li>
<li class="main-links">links</li>
</ul>
</nav>
</header>
<section="hero">
<div class="left-side"></div>
<div class="right-side"></div>
<div class="container">
<div class="success"></div>
</div>
<!--***Container***-->
</section>
<section class="one"></section>
</body>
The reason is that you have applied position: fixed; to your <header> tag. When you do this you must account for the height of the header and push down other elements to restore the layout.
Observe the following banner I have:
I want the "My Website" and "Your Go To Stop!" text to align both vertically and horizontally but I'm having difficulty getting that to happen.
JS Fiddle: http://jsfiddle.net/z63234p1/
masthead {
top: 32px;
padding-right: 0px;
background: #000;
padding-left: 0;
max-height: 100px;
border-bottom: none;
position: fixed;
z-index: 3;
width: 100%;
min-height: 73px;
color: #000;
display: block;
box-sizing: inherit;
}
.sidebar-toggle {
float: left;
border: 3px solid grey;
border-right: none;
height: 82px;
margin-right: 0;
width: 5%;
overflow: hidden;
padding: 0;
color: #000;
text-align: center;
}
button {
border-radius: 0;
transition: all 125ms ease-out;
cursor: pointer;
-webkit-appearance: button;
font-size: 100%;
margin: 0;
max-width: 100%;
vertical-align: baseline;
line-height: 1.5;
display: inline-block;
align-items: flex-start;
}
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.sidebar-toggle:before {
content: "\f419";
height: 24px;
width: 16px;
color: inherit;
font-size: 16px;
line-height: 24px;
speak: none;
text-decoration: inherit;
vertical-align: top;
font-style: normal;
font-weight: normal
display: inline-block;
font-family: Genericons;
-webkit-font-smoothing: antialiased;
}
.site-branding {
width: 95%;
display: inline-flex;
margin-top: 0;
margin-bottom: 0;
float: left;
max-width: 100%;
}
#sitelogo {
display: inline-flex;
vertical-align: middle;
text-align: center;
}
.site-title {
border: 3px solid grey;
font-family: Impact, Charcoal, sans-serif;
font-weight: normal;
margin: 0 auto;
text-align: center;
line-height: normal;
min-width: 150px;
padding: 3px 8px;
font-size: 6vh;
height: 100%;
color: white;
float: left;
max-width: 100%;
}
h1 {
clear: both;
}
.site-description {
background: #fff500;
color: black;
display: block;
font-family: Impact, Charcoal, sans-serif;
margin: auto auto;
text-align: center;
height: 100%;
border-left: none;
border-top: 3px solid grey;
border-bottom: 3px solid grey;
border-right: 3px solid grey;
display: block;
padding: 0 16px;
font-size: 3vh;
line-height: 2.3;
float: left;
clear: none;
}
<header id="masthead" class="site-header" role="banner">
<button class="sidebar-toggle" aria-expanded="false" ><span class="screen-reader-text"><?php _e( 'Toggle Sidebar', 'boardwalk' ); ?></span></button>
<div class="site-branding">
<div id="sitelogo" class="clear">
<h1 class="site-title">My Website</h1>
<h2 class="site-description">Your Go To Stop</h2>
</div>
</div>
</header>
I'm aware that the image above doesn't look at all like the output of JS Fiddle and I know that what I'm getting on my test site is a fluke rather than the actual output.
Can someone help me get my CSS worked out so that all of the text is vertically aligned within their cells and horizontally aligned accross the logo?
Thank you in advance.
Use this Css:
<style type="text/css">
#masthead {
top: 32px;
padding-right: 0px;
background: #000;
padding-left: 0;
max-height: 100px;
border-bottom: none;
position: fixed;
z-index: 3;
width: 100%;
min-height: 73px;
color: #000;
display: block;
box-sizing: inherit;
}
.sidebar-toggle {
float: left;
border: 3px solid grey;
border-right: none;
height: 73px;
margin-right: 0;
width: 5%;
overflow: hidden;
padding: 0;
color: #000;
text-align: center;
}
button {
border-radius: 0;
transition: all 125ms ease-out;
cursor: pointer;
-webkit-appearance: button;
font-size: 100%;
margin: 0;
max-width: 100%;
vertical-align: baseline;
line-height: 1.5;
display: inline-block;
align-items: flex-start;
}
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.sidebar-toggle:before {
content: "\f419";
height: 24px;
width: 16px;
color: inherit;
font-size: 16px;
line-height: 24px;
speak: none;
text-decoration: inherit;
vertical-align: top;
font-style: normal;
font-weight: normal
display: inline-block;
font-family: Genericons;
-webkit-font-smoothing: antialiased;
}
.site-branding {
width: 95%;
display: inline-flex;
margin-top: 0;
margin-bottom: 0;
float: left;
max-width: 100%;
}
#sitelogo {
display: inline-flex;
vertical-align: middle;
text-align: center;
}
.site-title {
border: 3px solid grey;
font-family: Impact, Charcoal, sans-serif;
font-weight: normal;
margin: 0 auto;
text-align: center;
line-height: normal;
min-width: 150px;
padding: 4px 8px;
font-size: 6vh;
height: 100%;
color: white;
float: left;
max-width: 100%;
}
h1 {
clear: both;
}
.site-description {
background: #fff500;
color: black;
font-family: Impact, Charcoal, sans-serif;
margin: auto auto;
text-align: center;
height: 100%;
border-left: none;
border-top: 3px solid grey;
border-bottom: 3px solid grey;
border-right: 3px solid grey;
display: block;
padding: 6px 16px;
font-size: 3vh;
line-height: 2.3;
float: left;
clear: none;
}
</style>
New css for #sitelogo:
display: inline-flex;
align-items: stretch;
New css for .site-title:
border: 3px solid grey;
font-family: Impact, Charcoal, sans-serif;
font-weight: normal;
min-width: 150px;
padding: 3px 8px;
font-size: 6vh;
color: white;
display: flex;
align-items: center;
justify-content: center;
New css for .site-description:
background: #fff500;
color: black;
font-family: Impact, Charcoal, sans-serif;
border-left: none;
border-top: 3px solid grey;
border-bottom: 3px solid grey;
border-right: 3px solid grey;
padding: 0 16px;
font-size: 3vh;
display: flex;
align-items: center;
justify-content: center;
Besides that I strongly suggest to not use vh for font-size.
I messed around with your line height of site-title as well as line height and height of site-description. Here's my result:
masthead {
top: 32px;
padding-right: 0px;
background: #000;
padding-left: 0;
max-height: 100px;
border-bottom: none;
position: fixed;
z-index: 3;
width: 100%;
min-height: 73px;
color: #000;
display: block;
box-sizing: inherit;
}
.sidebar-toggle {
float: left;
border: 3px solid grey;
border-right: none;
height: 82px;
margin-right: 0;
width: 5%;
overflow: hidden;
padding: 0;
color: #000;
text-align: center;
}
button {
border-radius: 0;
transition: all 125ms ease-out;
cursor: pointer;
-webkit-appearance: button;
font-size: 100%;
margin: 0;
max-width: 100%;
vertical-align: baseline;
line-height: 1.5;
display: inline-block;
align-items: flex-start;
}
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.site-branding {
width: 95%;
display: inline-flex;
margin-top: 0;
margin-bottom: 0;
float: left;
max-width: 100%;
}
#sitelogo {
display: inline-flex;
vertical-align: middle;
text-align: center;
}
.site-title {
border: 3px solid grey;
font-family: Impact, Charcoal, sans-serif;
font-weight: normal;
margin: 0 auto;
text-align: center;
line-height: 58px;
min-width: 150px;
padding: 3px 8px;
font-size: 6vh;
height: 100%;
color: white;
float: left;
max-width: 100%;
}
h1 {
clear: both;
}
.site-description {
background: #fff500;
color: black;
display: block;
font-family: Impact, Charcoal, sans-serif;
margin: auto auto;
text-align: center;
height: 108%;
border-left: none;
border-top: 3px solid grey;
border-bottom: 3px solid grey;
border-right: 3px solid grey;
display: block;
padding: 0 16px;
font-size: 3vh;
line-height: 3.7;
float: left;
clear: none;
}
.sidebar-toggle:before {
content: "\f419";
height: 24px;
width: 16px;
color: inherit;
font-size: 16px;
line-height: 24px;
speak: none;
text-decoration: inherit;
vertical-align: top;
font-style: normal;
font-weight: normal display: inline-block;
font-family: Genericons;
-webkit-font-smoothing: antialiased;
}
Here's a diff compare to see the differences: http://www.mergely.com/vGQedH1p/ Is this what you were looking for?
I am designing a homepage template. When I finished with my center content I started making the footer. I quickly realized my footer is not at the bottom of the page but instead inside the center content and cannot figure out why.
HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="file://C:/Workspace/MyWeblogicWorkspace/Purify/WebContent/CSS/index.css">
<link href='https://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="navigationBar">
<ul id="navigationBarList">
<li><a id="test" href="http://www.google.com">Home</a></li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div><!-- end of navigationBar -->
</div><!-- end of header -->
<div id="center">
<p id="title">*******************</p>
<p id="slogan">*******************</p>
<div id="centerContent">
<div id="contentOneBox">
<p id="contentOneTitle">*******************</p>
<p id="contentOneText">*******************!</p>
</div><!-- end of contentOneBox -->
<div id="contentTwoBox">
<p id="contentTwoTitle">*******************</p>
<p id="contentTwoText">**************************************.</p>
</div><!-- end of contentTwoBox -->
<div id="contentThreeBox">
<p id="contentThreeTitle">*******************</p>
<p id="contentThreeText">**************************************.</p>
</div><!-- end of contentThreeBox -->
<div id="contentFourBox">
<p id="contentFourTitle">*******************</p>
<p id="contentFourText">**************************************.</p>
</div><!-- end of contentFourBox -->
</div><!-- end of centerContent -->
</div><!-- end of center -->
<div id="footer">
<p id="contact">*******************</p>
<p id="copyright">*******************</p>
</div><!-- end of footer -->
</body>
</html>
CSS:
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 62.5%;
font-family: 'PT Sans', sans-serif;
color: #221F51;
}
#header {
display: block;
position: relative;
top: 0;
right: 0;
left: 0;
z-index: 9999;
margin: 0;
width: 100%;
min-width: 1024px;
height: 48px;
max-height: 44px;
background: #333;
background: rgba(0,0,0,0.8);
font-size: 18px;
-webkit-user-select: none;
}
#navigationBar {
display: block;
margin: 0 auto;
padding: 0 auto;
position: relative;
text-align: center;
}
#navigationBar ul li {
display: inline-block;
margin: 0 auto;
padding: 10px;
padding-left: 20px;
padding-right: 20px;
}
#navigationBar ul li a {
color: white;
margin: 0 auto;
padding: 0 auto;
text-decoration: none;
}
#navigationBar ul li a:hover {
color: gray;
}
#center {
display: block;
font-size: 18px;
position: relative;
}
#title {
display: block;
font-size: 48px;
letter-spacing: 3px;
margin-top: 25px;
padding: 25px;
position: relative;
text-align: center;
}
#slogan {
display: block;
font-size: 22px;
margin: 0 auto;
padding: 0 auto;
position: relative;
text-align: center;
}
#centerContent {
display: block;
font-size: 22px;
margin: 0 auto;
padding: 0 auto;
position: relative;
width: 990px;
}
#contentOneBox {
border: 1px solid black;
border-radius: 15px;
display: block;
float: left;
margin: 50px;
padding: 0px;
position: relative;
width: 350px;
}
#contentOneTitle {
background: #333;
background: rgba(0,0,0,0.8);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
color: white;
display: block;
letter-spacing: 2px;
margin: 0;
padding: 2px;
position: relative;
text-align: center;
}
#contentOneText {
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
display: block;
height: 97px;
padding: 5px;
position: relative;
text-align: center;
}
#contentTwoBox {
border: 1px solid black;
border-radius: 15px;
display: block;
float: right;
margin: 50px;
padding: 0px;
position: relative;
width: 350px;
}
#contentTwoTitle {
background: #333;
background: rgba(0,0,0,0.8);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
color: white;
display: block;
letter-spacing: 2px;
margin: 0;
padding: 2px;
position: relative;
text-align: center;
}
#contentTwoText {
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
display: block;
height: 97px;
padding: 5px;
position: relative;
text-align: center;
}
#contentThreeBox {
border: 1px solid black;
border-radius: 15px;
display: block;
float: left;
margin: 50px;
padding: 0px;
position: relative;
width: 350px;
}
#contentThreeTitle {
background: #333;
background: rgba(0,0,0,0.8);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
color: white;
display: block;
letter-spacing: 2px;
margin: 0;
padding: 2px;
position: relative;
text-align: center;
}
#contentThreeText {
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
display: block;
height: 97px;
padding: 5px;
position: relative;
text-align: center;
}
#contentFourBox {
border: 1px solid black;
border-radius: 15px;
display: block;
float: right;
margin: 50px;
padding: 0px;
position: relative;
width: 350px;
}
#contentFourTitle {
background: #333;
background: rgba(0,0,0,0.8);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
color: white;
display: block;
letter-spacing: 2px;
margin: 0;
padding: 2px;
position: relative;
text-align: center;
}
#contentFourText {
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
display: block;
height: 97px;
padding: 5px;
position: relative;
text-align: center;
}
#footer {
background-color: #f2f2f2;
display: block;
position: relative;
margin: 0;
width: 100%;
min-width: 1024px;
font-size: 14px;
-webkit-user-select: none;
}
#contact {
display: block;
position: relative;
text-align: center;
}
#copyright {
display: block;
position: relative;
text-align: center;
}
Here's fiddle : https://jsfiddle.net/c74dy9dj/
Try to add clear: both; to footer CSS:
#footer {
background-color: #f2f2f2;
display: block;
position: relative;
margin: 0;
width: 100%;
min-width: 1024px;
font-size: 14px;
-webkit-user-select: none;
border: 1px gray dotted;
background-color: rgba(120,120,120,.5);
clear: both; /* <-- check this out! */
}
You're using floats which causes elements after a floating element to flow around it.
Here is a good explanation
https://css-tricks.com/almanac/properties/c/clear/
You can fix this by adding "clear: both" to #footer
#footer {
clear:both;
}
Is there a way to have a responsive container, so all items inside of that container are in the middle of the page, no matter what screen dimension?
Thanks :)
Images are obviously missing, but here's the code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sharpturn Network</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:500' rel='stylesheet' type='text/css'>
<meta content="width=device-width; initial-scale=1; maximum-scale=1" name="viewport">
<link href="stylesheet.css" rel="stylesheet"><!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<img id="logo" src="img/upload.png">
<nav>
<ul>
<li><a class="active" href="index.html">HOME</a></li>
<li><a class="nav" href="#">UPLOAD</a></li>
<li><a class="nav" href="support.html">SUPPORT</a></li>
<li><a class="nav" href="#">FAQS</a> </li>
</ul>
</nav>
</header><img class="banner" src="img/banner.jpg">
<h1 class="title">SIMPLE AS 1, 2, 3!</h1>
<div class="steps">
<img src="img/form.png">
<h2 class="subtitle">Complete our form</h2>
<p>A form diversly designed to take you upto no more than 5 minutes to complete and submit.</p>
</div>
<div class="steps">
<img src="img/wait.png">
<h2 class="subtitle">Patience is a virtue</h2>
<p>Allow upto 72 hours for an submission review and response from our team.</p>
</div>
<div class="steps">
<img src="img/uploaded.png">
<h2 class="subtitle">Viola! All done.</h2>
<p>Your talent is now being promoted and showcased world wide.</p>
</div>
<img class="banner" src="img/grande.jpg">
</body>
</html>
CSS
/*MAIN*/
body {
line-height: 1.25em;
font-family: 'Roboto',sans-serif;
background: url(img/banner.png);
background-size: cover;
/* For flexibility */
color: #505050;
margin: 0;
padding: 0;
}
header {
background: #505050;
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
border-bottom: 1px solid #fff;
z-index: 100;
padding-bottom: 10px;
margin-bottom: 5px;
}
#logo {
margin-top: 20px;
margin-left: 60px;
float: left;
width: 80px;
height: 60px;
display: block;
padding-bottom: 25px;
}
nav {
float: right;
padding: 20px;
color: #fff;
}
nav .active {
font-size: 20px;
color: #cc293f;
}
nav a {
margin-right: 20px;
font-size: 20px;
color: #fff;
text-decoration: none;
}
#menu-icon {
width: 40px;
height: 40px;
background: #fff url(img/menu-icon.png) center;
}
a:hover {
color: #cc293f;
}
a:hover#menu-icon {
background-color: #fff;
border-radius: 4px 4px 0 0;
}
ul {
list-style: none;
}
li {
color: #fff;
display: inline-block;
float: left;
}
.banner {
width: 100%;
height: 300px;
border-bottom: 1px solid #000;
}
.supportbox1 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
border: 3px solid #505050;
float: left;
margin: 50px 70px 25px 10px;
max-height: 500px;
max-width: 300px;
min-height: 500px;
min-width: 300px;
}
.supportbox1 p {
padding-left: 8px;
padding-right: 8px;
}
.supportbox1 img {
padding-left: 41%;
padding-top: 50px;
}
.supportbox2 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
border: 3px solid #505050;
float: left;
margin: 50px 70px 25px 10px;
max-height: 500px;
max-width: 300px;
min-height: 500px;
min-width: 300px;
}
.supportbox2 p {
padding-left: 8px;
padding-right: 8px;
}
.supportbox2 img {
padding-left: 41%;
padding-top: 40px;
}
.supportbox3 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
border: 3px solid #505050;
float: left;
margin: 50px 70px 25px 10px;
max-height: 500px;
max-width: 300px;
min-height: 500px;
min-width: 300px;
}
.supportbox3 p {
padding-left: 5px;
padding-right: 5px;
}
.supportbox3 img {
padding-left: 41%;
padding-top: 50px;
}
.supportbox3 a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #505050;
border: 3px solid #505050;
color: #cc293f;
font-size: 20px;
margin: 90px 0 55px;
padding: 5px 10px;
position: absolute;
text-decoration: none;
}
.imgicon {
margin-left: -117px;
max-height: 80px;
max-width: 80px;
min-height: 80px;
min-width: 80px;
}
h1.title {
text-align: center;
font-size: 30px;
color: #cc293f;
margin-top: 25px;
margin-bottom: 45px;
}
h1.sub {
font-size: 24px;
color: #cc293f;
text-align: center;
padding-bottom: 50px;
}
h2.subtitle {
color: #cc293f;
text-align: center;
padding-top: -5px;
}
p {
font-family: 'Roboto',sans-serif;
margin-bottom: 20px;
}
.steps {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
float: left;
margin: 0 100px 10px -5px;
max-height: 3500px;
max-width: 300px;
min-height: 350px;
min-width: 300px;
}
.steps p {
font-size: 19px;
padding-left: 5px;
padding-right: 5px;
text-align: center;
}
.steps img {
display: block;
margin-left: auto;
margin-right: auto;
}
/****Responsive ****/
#media only screen and (max-width:640px) {
header {
position: absolute;
}
.banner {
width: 100% !important;
height: 300px;
border-bottom: 1px solid #000;
}
#menu-icon {
display: inline-block;
}
nav ul,nav:active ul {
display: none;
position: absolute;
padding: 10px;
background: #505050;
border: 5px solid #fff;
right: 20px;
top: 60px;
width: 50%;
border-radius: 4px 0 4px 4px;
}
nav li {
font-color: #fff;
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover ul {
background-color: #505050;
display: block;
}
nav ul {
background: #505050;
}
Set the container property
text-align:center;
and in the element inside the container ( like a paragraph or img) specify
display:inline-block