How to move my side bar from the bottom to top?

zhuceyouxiang88 · September 5, 2023, 4:10am

Hi guys!

I am working on a WordPress website, and I made a custom template to create my page.

I want to display my sidebar to the right top of my page, but it stays at the bottom of the page.

how to improve it?

my code is below:

<?php /* Template Name: professionals_zhuliang_template */ ?> <?php /** * The template for displaying all pages * * This is the template that displays all pages by default. * Please note that this is the WordPress construct of pages * and that other 'pages' on your WordPress site may use a * different template. * * @link https://codex.wordpress.org/Template_Hierarchy * * @package customify */ get_header(); ?>

            <img src="http://xuzhousoft.com/wp-content/uploads/2020/12/eecaa824211b0b9f95e2210748ac82d3.jpg">
            <span style="color:#D0422C">朱良</span>
        </div>
        <div class="layui-col-md10 boss_about">
            <ul>
                <li class="boss_about_title">专职律师</li>
                <li class="boss_about_detail">江苏大泰律师事务所</li><li class="boss_about_title">过往经验</li><li class="boss_about_detail"><p style="line-height: 1.5em; text-align: justify;"><span style="font-size: 14px;">建筑工程、劳动仲裁、婚姻家事、交通事故相关诉讼与非诉讼业务</span></p></li>
                <li class="boss_about_title">个人简介</li>
                <li class="boss_about_detail"><p style="line-height: 1.5em; text-align: justify;"><span style="font-size: 14px;">
  				朱良律师，高级企业合规师，具有制药工程、法学学士双学位和海外留学背景，曾任职于民企500强维维集团，有丰富的企业管理经验，对于民商事纠纷有特别的视角和切入点。参与服务单位及案例：成功代理多起建筑工程、劳动仲裁、婚姻家事、交通事故等案件，为江苏德君建筑劳务有限公司、江苏润庚贸易有限公司等企业和个人提供法律顾问服务或专项法律服务。</span></p><p style="line-height: 1.5em; text-align: justify;"><span style="font-size: 14px;"></span></p></li>

会员

徐州市律师协会、江苏省律师协会、中华全国律师协会

资格证书

法律职业资格证书、高级企业合规师证书

工作语言

中文、英文

所获荣誉

暂无

        </div>
  	<?php get_sidebar('right'); ?>
    </div>

<?php get_footer(); ?>

Thanks in advance!

ralphm · September 5, 2023, 4:44am

Rather than post PHP, could you post the HTML and CSS that actually create the layout in the browser? We need to be able to see this in proactice if we’re to help.

zhuceyouxiang88 · September 5, 2023, 6:25am

Thank you for your reply.

  <section id="block-2" class="widget widget_block widget_search"><form role="search" method="get" action="http://localhost/lvqiang.xuzhousoft.com/" class="wp-block-search__no-button wp-block-search"><label for="wp-block-search__input-1" class="wp-block-search__label">搜索</label><div class="wp-block-search__inside-wrapper "><input type="search" id="wp-block-search__input-1" class="wp-block-search__input wp-block-search__input" name="s" value="" placeholder="输入关键字后请点击回车键" required=""></div></form></section><section id="block-3" class="widget widget_block">

近期文章

归档

分类

/*

Theme Name: Imperion

Template: business-architect

Version: 1.0.11

Requires PHP: 5.6

Tested up to: 6.1.1

Author: wpbusinessthemes

Author URI: https://wpbusinessthemes.com/

Description: Imperion is a Multipurpose and Bootstrap WordPress Theme. It is Gutenberg and WooCommerce Compatible, Full Responsive and customizable with Theme Options like Header, Footer, Slider, Colour and Animations. Imperion is very fast and SEO friendly. Imperion can be used by bloggers, magazine, portfolio, photography, newspaper, E-Commerce, Storefront, Shop, News or any business.

Tags: one-column,two-columns,left-sidebar,right-sidebar,custom-background,custom-colors,custom-header,custom-menu,featured-images,flexible-header,microformats,rtl-language-support,sticky-post,threaded-comments,translation-ready,blog,e-commerce,theme-options

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Text Domain:imperion

*/

/***************************

=>> Theme Breadcrumbs Area *

****************************/

.page-breadcrumb {

list-style: none;

margin: 0;

padding: 0.825rem 0 0;

font-weight: 600;

}

.page-breadcrumb.text-right {

padding-top: 0.713rem;

padding-bottom: 0.713rem;

}

.page-breadcrumb > li {

display: inline-block;

}

.page-breadcrumb > li + li:before {

font-family: fontAwesome;

content: “\f105”;

padding: 0 0.625rem 0 0.625rem;
font-weight: 600;
}

.page-breadcrumb > li a { }

.page-breadcrumb > li a:hover,

.page-breadcrumb > li.active {

}

.post {
border: initial;
}

/***************************

=>> Theme Page Header Area *

****************************/

.theme-page-header-area {

position: relative;

padding: 4rem 0;

width: 100%;

height: 100%;

}

.theme-page-header-area:after {

background: url(“img/shadow.png”) no-repeat;
z-index: 1;

background-position: center bottom;

content: '';

position: absolute;

bottom: -31px;

left: 0;

right: 0;

height: 31px;
}

.theme-page-header-area {

padding: 0.5rem 0 1.2rem 0;

background-color: #f9f9f97d;

}

.site .theme-page-header-area .page-header-title,

.site .theme-page-header-area .page-breadcrumb {
color: initial;
}

.theme-page-header-area .overlay {
position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

height: 100%;

width: 100%;
}

#masthead .overlay {

background-color: initial;

}

.page-header-title { position: relative; word-wrap: break-word; }

.page-header-title h1 { font-size: 3.2rem; margin: 0; }

/* WooCommerce styles */

.woocommerce a.button.yith-wcqv-button {

color:#1fb5ff;

background-color: transparent;

padding: 5px;

font-weight:400;

}

.woocommerce ul.products a.compare {

text-decoration: initial;

box-shadow:initial;

}

.woocommerce ul.products a.added_to_cart {

text-decoration: initial;

box-shadow:initial;

}

.woocommerce a.button.yith-wcqv-button:hover,

.woocommerce a.button.yith-wcqv-button:focus,

.woocommerce ul.products a.compare:hover,

.woocommerce ul.products a.compare:focus,

.woocommerce ul.products a.added_to_cart:focus,

.woocommerce ul.products a.added_to_cart:hover {

text-decoration: underline;

color:#1fb5ff;

}

.cart-contents-count span {
left: 19px;
padding: 2px 5px;

}

.post-widget-content .call-to-action {
color: #FFF;

padding: 6px 20px;
}

.post-widget-content .widget-title {
font-size: 21px;
}

#featured_slider .custom-settings .slider-title {
font-weight: 800;
}

#featured_slider .carousel-navigation a {
background-color: #25c2ff;
}

.call-to-action {
font-weight: 500;
}

#featured_slider .carousel-navigation .carousel-prev {
left: 24px;
}

#featured_slider .custom-settings {
background-color: #826b6b00;
}

#masthead .header-search-form {

background-color: #ffffff69;

}

#masthead input.header-search-input {

background-color: transparent;

}

/*****************

General style *

*****************/

.center-text {

text-align:center;

}

.box-layout-style #top-banner img {

width:100%;

}

.top-banner {

margin-bottom:10px;

}

.menu-social-container {
display: flex;

justify-content: center;
}

.social-navigation {
float: initial;
}

.site-footer {
padding: 1em 0 1em;
}

.site-footer .social-navigation {

padding-top:15px;

padding-bottom:15px;

}

.site-header .contact-info .fa {
font-size: 1.2em;

vertical-align: middle;

border: 2px solid white;

padding: 5px;

border-radius: 50%;

min-width: 32px;

margin: 0px;

text-align: center;
}

.error-404.not-found {

text-align:center;

}

#secondary .widget {

border: 0px solid #e8e8e8;

}

#featured_slider .carousel-navigation .carousel-next {
right: 24px;
}

#featured_slider .carousel-navigation a {

background-color: #eeecec5e;
border-radius: 24px;
}

.site-header .contact-ribbon {
min-height: 34px;
}

@media (max-width: 768px) {

.page-header-title,

.page-breadcrumb.text-right {
  text-align: center !important;
}

}

@media (min-width: 768px) {

#featured_slider .custom-settings {
  max-width: 50%;
}

}

@media (max-width: 768px) {

#featured_slider .custom-settings {
  max-width: initial;
}

}

.site-header .contact-info .fa {

border:initial;

border-radius: 0px;

}

/*****************

shape devider *

*****************/

.custom-shape-divider-bottom-1598097848 {
position: absolute;

bottom: 0;

left: 0;

width: 100%;

overflow: hidden;

line-height: 0;

transform: rotate(180deg);
}

.custom-shape-divider-bottom-1598097848 svg {
position: relative;

display: block;

width: calc(100% + 1.3px);

height: 55px;
}

.custom-shape-divider-bottom-1598097848 .shape-fill {
fill: #FFFFFF;
}

.hero-callout .call-to-action {
border-radius: 24px;
}

.hero-callout .call-to-action:hover {
background-color: #1fb5ff;
border: 1px solid #1fb5ff;

color:#fff;

}

/*

Preloader

*/

.preloader-wrap {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index:9999999;

background-color: #01182bdb;

opacity: 1;

filter: alpha(opacity=100);

}

.burger-header #woocommerce-layout-menu .main-navigation .primary-menu > li > a {
font-size: 17px;

font-weight: 600;
}

.sk-chase {

width: 90px;

height: 90px;

position: absolute;

top: 48%;

left: 48%;

animation: sk-chase 2.5s infinite linear both;

}

.sk-chase-dot {

width: 100%;

height: 100%;

position: absolute;

left: 0;

top: 0;

animation: sk-chase-dot 2.0s infinite ease-in-out both;

}

.sk-chase-dot:before {

content: ‘’;

display: block;

width: 25%;

height: 25%;

background-color: #fff;

border-radius: 100%;

animation: sk-chase-dot-before 2.0s infinite ease-in-out both;

}

.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }

.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }

.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }

.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }

.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }

.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }

.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }

.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }

.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }

.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }

.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }

.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }

@keyframes sk-chase {

100% { transform: rotate(360deg); }

}

@keyframes sk-chase-dot {

80%, 100% { transform: rotate(360deg); }

}

@keyframes sk-chase-dot-before {

50% {
transform: scale(0.4); 
} 100%, 0% {
transform: scale(1.0); 
}

}

body:not(.search-results) article:not(.sticky) .posted-on {

margin-right: 8px;

}

.widget {
margin-bottom: 1em;

padding: 1em 1em 1em;
}

#secondary .widget {

border-radius: 4px;

}

/* Header styles */

.burger-header .site-header {
height: 100vh;
}

.header-main-menu {

display:block;

clear: both;

}

.normal-header .site-header {

background-image:none;

}

.burger-header .site-header-main {

padding: 0px 15px;

max-width: initial;

margin: initial;

position: absolute;

top: 37%;

width: 100%;

}

.burger-header .site-title a,

.burger-header .site-description,

.burger-header #woocommerce-layout-menu .main-navigation .primary-menu > li > a {

color:#FFFFFF;

}

.burger-header #woocommerce-layout-menu .main-navigation .primary-menu > li > a {

font-size: 20px;

}

.burger-header #woocommerce-layout-menu .main-navigation .primary-menu {

padding-top:20px;

}

.burger-header .menu-toggle {
border-color: #fff;
color: #fff;

}

.burger-header .site-title a {

color: #fff;

font-size: 60px;

line-height: inherit;

font-weight: 800;

text-shadow: -1px 0 black, 0 1px black, 2px 0 black, 0 -2px black;

}

.burger-header .site-description {

padding-top: 10px;

font-size: 20px;

text-shadow: -1px 0 black, 0 1px black, 2px 0 black, 0 -2px black;

}

.archive-wrap .post {

border: 1px solid rgba(174, 174, 174, 0.1);

}

#secondary .wp-block-search .wp-block-search__button {
background: #2271b1;

border: 1px solid #575757;

padding: .375em .625em;

color: #fff;

margin-left: -1px;

word-break: normal;
}

.normal-header .site-description {
max-width: 400px;
}

nav.social-navigation a:hover:before, nav.social-navigation a:focus:before, div.site-info a:hover { color: #fff;}

@media screen and (max-width: 56.875em) {

.burger-header .site-header-menu.toggled-on {
  z-index: 999999;

  background-color: #131313eb;

  position: relative;

  border-radius:4px;
}

.burger-header .main-navigation ul ul a {
	color: #fff;
}

}

zhuceyouxiang88 · September 5, 2023, 7:47am

@ralphm

Hello sir,

I did this:

element.style {
position: absolute;
float: right;
top: 20;
right: 0;
}

and, the result is this:

The text of my sidebar and the text of my page content overlapped.
How to fix this problem?

Gandalf · September 5, 2023, 9:00am

Hey @zhuceyouxiang88 when you post code to the forums, you need to format it. Either highlight the code and press the </> button or enter 3 backticks ``` on a separate line before the code and 3 backticks on a separate line after the code.

ralphm · September 5, 2023, 10:38am

Position: absolute takes an element “out of the flow” so that other elements don’t see it’s there. It’s not right for this purpose. But you are stabbing in the dark here, and I recommend you learn a bit more about HTML and CSS before diving in the deep end.

The reason float: right didn’t give you what you wanted was because the element came after the content it was supposed to float next to. You would have to put it before in the HTML. But it’s still a lousy way to do layout. We now have display: flex and display: grid which are far superior for layout.

system · December 5, 2023, 5:39pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.