当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Main site content stuck under left navigation menu

问题描述:

This is my first time really trying to design something on my own. I'm using the Underscores Wordpress base theme. I have the basics of my main menu pretty much figured out, but my main site content is stuck under it. The menu should be on the left and the content to the right of it.

Link:

http://robkaufmanshow.com/strictlyecw/?page_id=2

Code of menu;

.main-navigation {

clear: both;

display: block;

width: 170px;

float: left;

background-image: url('http://robkaufmanshow.com/strictlyecw/wp-content/uploads/2014/02/menubg.png');

}

.main-navigation ul {

list-style: none;

margin: 0;

padding-left: 0;

}

.main-navigation li {

float: left;

position: relative;

}

.main-navigation a {

font-family: chiller;

font-size: 18px;

color: #fff;

display: block;

text-decoration: none;

padding: 2px;

line-height: 20px;

width: 155px;

vertical-align: middle;

text-align: center;

}

.main-navigation ul ul {

box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);

display: none;

float: left;

left: 0;

position: absolute;

top: 1.5em;

z-index: 99999;

}

.main-navigation ul ul ul {

left: 100%;

top: 0;

}

.main-navigation ul ul a {

width: 170px;

}

.main-navigation ul ul li {

}

.main-navigation li:hover > a {

background-image: url('http://robkaufmanshow.com/strictlyecw/wp-content/uploads/2014/02/menubg02.png');

}

.main-navigation ul ul :hover > a {

}

.main-navigation ul ul a:hover {

}

.main-navigation ul li:hover > ul {

display: block;

}

.main-navigation .current_page_item a,

.main-navigation .current-menu-item a {

}

/* Small menu */

.menu-toggle {

cursor: pointer;

display: none;

}

@media screen and (max-width: 600px) {

.menu-toggle,

.main-navigation.toggled .nav-menu {

display: block;

}

.main-navigation ul {

display: none;

}

}

.site-main [class*="navigation"] {

margin: 0 0 1.5em;

overflow: hidden;

}

[class*="navigation"] .nav-previous {

float: left;

width: 50%;

}

[class*="navigation"] .nav-next {

float: right;

text-align: right;

width: 50%;

}

网友答案:

use this.

#masthead{
   float:left;
}

For future purposes, use for side menus. Header is supposed to be for headers.

网友答案:

Try adding this to your css:

#site-navigation{
float:left;
clear:none;
}

#main{
float:left;
clear: left;
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: