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;
}
Related
When I hover over search icon, div with class "forma" expands and pushes the list with links to the left. How can I prevent this? My guess is something to do with position, display or width, but I am not sure. This is probably not a complicated task, but I am not very good with CSS.
Here is HTML:
<nav>
<div class=logo>
<img src="images/logoicon.png" alt="sunce">
<img src="images/logotext.png" alt="outdoors" id="logotext"></a>
</div>
<ul class="nav-ul">
<li>Destinations</li>
<li>Travel style</li>
<li>Trabel deals</li>
<li>Gear</li>
</ul>
<div class="forma">
<input type="search" placeholder="search" class="pretraga">
<i class="fa fa-search"></i>
</div>
</nav>
Here is CSS:
nav {
background-color: steelblue;
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
position: sticky;
top: 0;
z-index: 2;
}
.nav-ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
/* background-color: #333; */
}
.nav-ul li {
display: inline;
float: left;
}
.nav-ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav-ul li:last-child {
float: right;
}
.nav-ul li a:hover:not(.active) {
background-color: #111;
}
.forma {
position: relative;
top: 20px;
left: 20px;
transform: translate(0, -50%);
transition: all 1s;
width: 50px;
height: 50px;
background: white;
box-sizing: border-box;
border-radius: 25px;
border: 4px solid white;
padding: 5px;
}
input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40px;
line-height: 30px;
outline: 0;
border: 0;
display: none;
font-size: 1em;
border-radius: 20px;
padding: 0 20px;
}
.fa {
box-sizing: border-box;
padding: 10px;
width: 40px;
height: 40px;
position: absolute;
top: 0;
right: 0;
border-radius: 50%;
color: black;
text-align: center;
font-size: 1.2em;
transition: all 1s;
}
.forma:hover {
width: 200px;
cursor: pointer;
}
.forma:hover input {
display: block;
}
Try below CSS here I have changed little bit code
Your Code
.forma {
position: relative;
top: 20px;
left: 20px;
transform: translate(0, -50%);
transition: all 1s;
width: 50px;
height: 50px;
background: white;
box-sizing: border-box;
border-radius: 25px;
border: 4px solid white;
padding: 5px;
}
input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40px;
line-height: 30px;
outline: 0;
border: 0;
display: none;
font-size: 1em;
border-radius: 20px;
padding: 0 20px;
}
.forma:hover {
width: 200px;
cursor: pointer;
}
.forma:hover input {
display: block;
}
Updated Code
Add this link in your HTML page for icon
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
.forma {
height: 50px;
width: 250px;
position: relative;
top: 20px;
left: 20px;
transform: translate(0, -50%);
}
input {
position: absolute;
right: 21px;
width: 90px;
max-width: 350px;
transition: all 1s;
height: 50px;
background: white;
box-sizing: border-box;
border-radius: 25px;
border: 4px solid white;
padding: 5px;
outline: 0;
}
input:focus{
outline: 0;
}
input:hover{
width: 350px;
}
You can check Live preview
nav {
background-color: steelblue;
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
position: sticky;
top: 0;
z-index: 2;
}
.nav-ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
/* background-color: #333; */
}
.nav-ul li {
display: inline;
float: left;
}
.nav-ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav-ul li:last-child {
float: right;
}
.nav-ul li a:hover:not(.active) {
background-color: #111;
}
.forma {
height: 50px;
width: 250px;
position: relative;
top: 20px;
left: 20px;
transform: translate(0, -50%);
}
input {
position: absolute;
right: 21px;
width: 90px;
max-width: 350px;
transition: all 1s;
height: 50px;
background: white;
box-sizing: border-box;
border-radius: 25px;
border: 4px solid white;
padding: 5px;
outline: 0;
}
.fa {
box-sizing: border-box;
padding: 10px;
width: 40px;
height: 40px;
position: absolute;
top: 5px;
right: 20px;
border-radius: 50%;
color: black;
text-align: center;
font-size: 1.2em;
transition: all 1s;
}
input:focus{
outline: 0;
}
input:hover{
width: 350px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav>
<div class=logo>
<img src="images/logoicon.png" alt="sunce">
<img src="images/logotext.png" alt="outdoors" id="logotext">
</div>
<ul class="nav-ul">
<li>Destinations</li>
<li>Travel style</li>
<li>Trabel deals</li>
<li>Gear</li>
</ul>
<div class="forma">
<input type="search" placeholder="search" class="pretraga">
<i class="fa fa-search"></i>
</div>
</nav>
you can check Here
NOTE : Better view on desktop you have to write code for mobile also with #media rule
I have a site and it has 2 sections. the left section is a navigation bar with menus below.
The section next to it is the main section or where the website content must be placed. My problem is the right section is positioned a few pixels from the header. How can i fix this? I provided some image to let you see how the website should look like.
/*WRITTEN USING SASS*/
#side-menu{
margin-top: 25px;
.side-menu-bg {
width: max-content;
h3 {
position: absolute;
color: white;
padding: 0px 18px;
font-size: 27px;
}
img {
display: -webkit-box;
}
}
.side-nav-bar {
width: 210px;
position: unset;
margin-top: -3px;
display: inline-flex;
z-index: 1;
flex-direction: column;
overflow-x: hidden;
background-color: #ffffff;
a {
display: inherit;
color: #707070;
text-decoration: none;
font-size: 15px;
padding: 10px 18px;
position: relative;
border-bottom: 1px solid #e8e8e8;
}
.active-link{
color: #a40022;
border-bottom: 2px solid #8a001c;
}
}
.right-contents {
float: right;
.title h3 {
font-size: 38px;
}
.body-content {
background-color: #d3d3d3;
height: 1094px;
width: 738px;
}
}
}
<div class="wrapper"> <!--to make contents center-->
<div id="side-menu">
<div class="side-menu-bg">
<h3>KU 스타트업</h3>
<img src="images/bg/bg_03.png">
</div>
<div class="side-nav-bar">
인사말
창업 비전
창업 프로세스
창업부서소개
찾아오시는 길
</div>
<div class="right-contents">
<div class="title">
<h3>인사말</h3>
<div class="body-content">
sample text
</div>
</div>
</div>
</div>
</div>
Add margin: 0 to your h3 tag.. h3 has margin-to and margin-bottom by default. thanks
.right-contents {
float: right;
.title h3 {
font-size: 38px;
margin: 0; /*add this*/
}
.body-content {
background-color: #d3d3d3;
height: 1094px;
width: 738px;
}
<style>
/*WRITTEN USING SASS*/
#side-menu{
margin-top: 25px;
.side-menu-bg {
width: max-content;
h3 {
position: absolute;
color: white;
padding: 0px 18px;
font-size: 27px;
}
img {
display: -webkit-box;
}
}
.side-nav-bar {
width: 210px;
position: unset;
margin-top: -3px;
display: inline-flex;
z-index: 1;
flex-direction: column;
overflow-x: hidden;
background-color: #ffffff;
}
a {
display: inherit;
color: #707070;
text-decoration: none;
font-size: 15px;
padding: 10px 18px;
position: relative;
border-bottom: 1px solid #e8e8e8;
}
.active-link{
color: #a40022;
border-bottom: 2px solid #8a001c;
}
}
.right-contents {
width: 65%;
margin-top: -3px;
display: inline-flex;
.title h3 {
font-size: 38px;
}
.body-content {
background-color: #d3d3d3;
height: 1094px;
width: 738px;
}
</style>
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’);
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.
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