So essentially I am writing a game in javascript. I have a canvas on the left, a canvas in the middle, a textarea topright, and a canvas bottom right. But I can't seem to get the right CSS code to figure out this layout like the picture. I want the middle to take up about 50-60% of the middle of the page, and the left and right columns taking the rest of the space. Would be nice if it auto resized with browser window. Any help would be appreciated.
Set a container to hold all the elements and then make smaller containers inside. Target each with CSS and set its properties.
Here I set a general CSS class .generalStyles just to simplify the code.
You would use something like this: (run the snippet)
.generalStyles
{
position:relative;
float:left;
background-color:#000;
border-radius:4px;
box-sizing:border-box;
color:#f00;
height:100px;
padding:5px;
text-align:center;
}
.container
{
width:100%;
background-color:#FFF;
}
.leftPanel
{
width:24%;
margin:0 1% 0 0;
}
.rightPanel
{
width:24%;
margin:0 0 0 1%;
background-color:#FFF;
padding:0;
}
.middlePanel
{
width:50%;
margin:0;
}
.topPanel
{
width:100%;
margin:0;
height:49.5%;
}
.bottomPanel
{
width:100%;
margin:1% 0 0 0;
height:49.5%;
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div class="container generalStyles">
<div class="leftPanel generalStyles">left stuff goes here<br/>and more here<br/>and more here<br/>and more here</div>
<div class="middlePanel generalStyles">middle goes here<br/>and more here<br/>and more here<br/>and more here</div>
<div class="rightPanel generalStyles">
<div class="topPanel generalStyles">top stuff<br/>and more here</div>
<div class="bottomPanel generalStyles">bottom stuff<br/>and more here</div>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
h2 {
text-align:center;
font-family:arial;
color:red;
font-weight:normal;
}
.left {
background-color: #000;
border-radius:10px;
float: left;
width: 20%;
padding: 10px;
margin:10px;
height: 300px;
}
.middle {
background-color: #000;
border-radius:10px;
float: left;
width: 60%;
padding: 10px;
margin:10px;
height: 300px;
}
.right {
float: left;
width: 20%;
margin: 10px;
height: 300px;
position: relative;
top: 0;
}
.top {
background-color: #000;
border-radius:10px;
width: 100%;
height: 47%;
padding: 10px;
}
.bottom {
background-color: #000;
border-radius:10px;
width: 100%;
height: 47%;
padding: 10px;
position: absolute;
bottom: 0;
right: 0;
}
.row {
box-sizing:border-box;
display: flex;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<div class="row">
<div class="left">
<h2>left</h2>
</div>
<div class="middle">
<h2>middle</h2>
</div>
<div class="right">
<div class="top">
<h2>top right</h2>
</div>
<div class="bottom">
<h2>bottom right</h2>
</div>
</div>
</div>
<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right">
<div class="rightDiv"></div>
<div class="rightDiv"></div>
</div>
</div
and css
.container{display:block;width:100%}.left,.middle,.right{width:100px;display:inline-block}.left{border:1px solid red;height:100px}.middle{border:1px solid green;height:100px}.rightDiv{border:1px solid #ff0;height:40px;margin:10px 0}
Fiddle
I develop under Laravel 5.4. There is a top menu show as in the picture 1. top menu
However, I want to the menu show like picture 2 ideal top menu show,show in any size screen only in one row. Is there any good solution to make it? Like by change the menu font auto?
.venus-menu {
width: 100%;
margin: 0;
padding: 0;
position: relative;
float: left;
font-family: 'Open Sans', sans-serif;
list-style: none;
background: #fff;
box-shadow: 0 1px 3px #dedede;
}
<div class="navbar-header">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#" style="display: block;"><i class="fa fa-bars"></i> </a>
<div class="content">
<ul class="venus-menu" id="top_bar">
<li>首页</li>
<li>title1</li>
<li>title2</li>
<li>title3</li>
<li>title4</li>
<li>title5</li>
<li>title6</li>
<li>title7</li>
<li>title8</li>
<li>title9</li>
<li>title10</li>
</ul>
</div>
</div>
Check working fiddle to get the same, but you have to change css part
NOTE - As you mansion that "top menu display only in one row"
Working fiddle
fiddle code
.navbar-minimalize {
margin:5px 50px 5px 15px;
display: inline-block;
}
.content {
width:100%;
display:flex;
width: 100%;
margin: 0;
padding: 0;
position: relative;
float: left;
font-family: 'Open Sans', sans-serif;
list-style: none;
background: #fff;
box-shadow: 0 1px 3px #dedede;
}
.content ul.venus-menu {
width:100%;
margin:0px;
padding:0px;
list-style:none;
border-left: 1px solid #ddd;
display:flex;
flex-flow:row nowrap;
justify-content:space-around;
}
.content ul.venus-menu li {
display:flex;
justify-content:space-around;
align-items:center;
flex-flow:row wrap;
}
.content ul.venus-menu li a {
display:block;
padding:10px 15px;
font-size:15px;
text-decoration:none;
color:#505050;
}
.content ul.venus-menu li a:hover {
background:#eee;
}
<div class="content">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
<ul class="venus-menu" id="top_bar">
<li>首页</li>
<li>title1</li>
<li>title2</li>
<li>title3</li>
<li>title4</li>
<li>title5</li>
<li>title6</li>
<li>title7</li>
<li>title8</li>
<li>title9</li>
<li>title10</li>
</ul>
</div>
I am trying to develop a HTML5 app for mobile.
The layout is pretty basic header,content.
Header (red rectangle),content (green rectangle) are absolute divs.
The content must be scrollable if the height is bigger than the screen.
My problem begin when I'am trying to have the scrollbar on the orange rectangle div only (and not on orange and blue rectangle).
The orange rectangle div must begin at the end of the blue rectangle div and end at the end of the screen. The height of blue rectangle div is unknow and can change.
Actually blue and orange rectangle divs are correctly placed but the scrollbar is not positionned where I want.
So if I try to move the scrollbar with absolute positionning on orange rectangle div, it's overlap the blue rectangle div, if I use relative div to wrap the orange rectangle, the height of the wrapper equal zero cause of absolute children or the div run out of window and is unscrollable.
If someone has a solution, It will be nice.
EDIT 1 :
Here is the html and css code.
html :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="lib/font-awesome/4.3.0/css/font-awesome.min.css">
<title>YAOSWA</title>
</head>
<body>
<header class="header_no_back_button" id="header" ng-controller="HeaderCtrl" ng-show="getShowHeader()">
<span class="header_icon pull-left ng-hide" ng-show="getShowBackButton()">
<a href="#home">
<i class="fa fa-chevron-left"></i>
</a>
</span>
<span id="headertitle" class="pull-left ng-binding">
YAOSWA
</span>
<span class="header_icon pull-right" ng-show="getShowAboutButton()">
<a href="#about">
<i class="fa fa-info-circle"></i>
</a>
</span>
<span class="header_icon pull-right" ng-show="getShowSettingsButton()">
<a href="#settings">
<i class="fa fa-cog"></i>
</a>
</span>
</header>
<!-- ngView: -->
<div class="content main_content ng-scope" id="content" ng-view="" afkl-image-container="">
<div class="home_template ng-scope">
<div class="view container">
<div ng-hide="errorOverlay()">
<div class="weather_header" ng-show="currentWeather.city && currentWeather.country">
<div class="weather_header_wrapper">
<div>
<span class="current_weather_location ng-binding">New York / US</span>
</div>
<div class="separator">
<span></span>
</div>
<div class="weather_chooser">
<span class="weather_type ng-binding">Hourly Weather</span>
<span class="header_icon pull-left" ng-show="!isMinTab()">
<a ng-click="prevTab()">
<i class="fa fa-chevron-left"></i>
</a>
</span>
<span class="header_icon pull-right" ng-show="!isMaxTab()">
<a ng-click="nextTab()">
<i class="fa fa-chevron-right"></i>
</a>
</span>
<div class="clear_both"></div>
</div>
</div>
</div>
<div class="tab_list">
<div class="tab ng-hide" ng-show="isActiveTab(0)">
....
</div>
<div class="tab" ng-show="isActiveTab(1)">
<div class="weather_data_wrapper">
<!-- ngRepeat: weather in hourlyWeather.list -->
<div class="hourly_weather weather_data weather_803 day" ng-repeat="weather in hourlyWeather.list" ng-click="toggleWeatherDetail($event)">
<div class="summary_info_hourly_weather summary_info_weather">
<div class="row row_weather">
<div class="col-xs-4">
<div>
<div class="hourly_weather_logo_wrapper">
<div afkl-lazy-image-loaded="done" class="hourly_weather_logo" afkl-lazy-image-options="{"offset": 150}" afkl-lazy-image="img/weather_icon_animate/icon_weather_hard_cloud.svg?numhourly=0"><img alt="" class="afkl-lazy-image" src="img/weather_icon_animate/icon_weather_hard_cloud.svg?numhourly=0"></div>
</div>
</div>
</div>
<div class="col-xs-4">
<div>
<span class="hourly_weather_date_day ng-binding">Fri 31</span>
<span class="hourly_weather_date ng-binding">11:00</span>
</div>
</div>
<div class="col-xs-4">
<div class="vcenter">
<div class="align-left">
<span class="hourly_weather_desc ng-binding">broken clouds</span>
<span class="hourly_weather_temp ng-binding">294.2 K</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end ngRepeat: weather in hourlyWeather.list -->
<div class="hourly_weather weather_data weather_804 day" ng-repeat="weather in hourlyWeather.list" ng-click="toggleWeatherDetail($event)">
<div class="summary_info_hourly_weather summary_info_weather">
<div class="row row_weather">
<div class="col-xs-4">
<div>
<div class="hourly_weather_logo_wrapper">
<div afkl-lazy-image-loaded="done" class="hourly_weather_logo" afkl-lazy-image-options="{"offset": 150}" afkl-lazy-image="img/weather_icon_animate/icon_weather_hard_cloud.svg?numhourly=1"><img alt="" class="afkl-lazy-image" src="img/weather_icon_animate/icon_weather_hard_cloud.svg?numhourly=1"></div>
</div>
</div>
</div>
<div class="col-xs-4">
<div>
<span class="hourly_weather_date_day ng-binding">Fri 31</span>
<span class="hourly_weather_date ng-binding">14:00</span>
</div>
</div>
<div class="col-xs-4">
<div class="vcenter">
<div class="align-left">
<span class="hourly_weather_desc ng-binding">overcast clouds</span>
<span class="hourly_weather_temp ng-binding">297.91 K</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end ngRepeat: weather in hourlyWeather.list -->
....
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="js/angular-sanitize.min.js"></script>
<script type="text/javascript" src="js/angular-translate.min.js"></script>
<script type="text/javascript" src="js/lazy-image.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
css :
#font-face {
font-family: 'UbuntuM'; /*a name to be used later*/
src: url('../fonts/ubuntu-font-family/0.80/Ubuntu-M.ttf'); /*URL to font*/
}
#font-face {
font-family: 'UbuntuR'; /*a name to be used later*/
src: url('../fonts/ubuntu-font-family/0.80/Ubuntu-R.ttf'); /*URL to font*/
}
#font-face {
font-family: 'ubuntu-light'; /*a name to be used later*/
src: url('../fonts/ubuntu-font-family/0.80/ubuntu-light.woff'); /*URL to font*/
}
* {
font-size:1em;
box-sizing: border-box;
}
*:after, *:before {
box-sizing: border-box;
}
html,body {
height:100%;
width:100%;
margin:0;
}
body {
color:#5c5c5c;
font-family: 'UbuntuR';
}
.clear_both {
clear:both;
}
.mediumfont {
font-family: 'UbuntuM';
}
header {
box-sizing: border-box;
height:60px;
line-height:45px;
text-align:center;
position: absolute;
top:0;
left:0;
right:0;
width:100%;
background-color:#ecedec;
color:#5c5c5c;
padding:5px;
border-bottom: 10px solid #d7d7d7;
}
#headertitle,
.weather_header {
font-family: 'ubuntu-light';
padding-left: 10px;
font-size:20px;
line-height:42px;
}
.header_icon > a{
font-size: 25px;
padding: 0 7px;
color: #5c5c5c;
}
#content {
box-sizing: border-box;
position: absolute;
top:60px;
bottom:0px;
left:0;
right:0;
width:100%;
background-color:#ecedec;
color:#000000;
overflow-y: auto;
padding:5px;
}
#content .tab {
overflow: hidden;
position:relative;
margin:5px;
}
#content .tab_list {
/*
position: absolute;
bottom: 0;
top: 0px;
left: 0;
right: 0;
*/
}
#content .tab,
.weather_data_wrapper {
/*position: absolute;
top: 0;
bottom: 0;
overflow-y: auto;
right: 0;
left: 0;
*/
}
/*
footer {
height:30px;
line-height:30px;
text-align:center;
position: absolute;
bottom:0;
left:0;
right:0;
width:100%;
background-color:red;
padding:5px;
}
*/
.about_logo_wrapper {
text-align: center;
margin-top:10px;
}
.about_logo_wrapper > img {
width:33%;
height:auto;
display:inline-block;
}
.about_text_wrapper {
text-align:center;
}
.about_title {
display: block;
margin: 10px;
font-size: 1.5em;
margin-bottom: 2px;
}
.about_template ul {
list-style: none;
padding:0;
}
.about_template ul li{
margin:5px;
}
.about_desc {
margin-top:35px 0px;
}
#errorOverlay,
#loadingOverlay {
background-color:rgba(255, 255, 255, 0.5);
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:100
}
.error_overlay_wrapper{
position: absolute;
left: 50%;
top: 50%;
text-align: center;
width:100%;
height:10%;
margin-left: -50%; /*half width*/
margin-top: -5%; /*half height*/
}
.loading_overlay_wrapper{
position: absolute;
left: 50%;
top: 50%;
text-align: center;
width:100px;
height:100px;
margin-left: -50px; /*half width*/
margin-top: -50px; /*half height*/
}
img {
max-width:100%;
max-height:100%;
}
/*
.hourly_weather_date_day,
.daily_weather_date_day,
.hourly_weather_desc,
.daily_weather_desc,
.detail_info_weather
*/
.hourly_weather_desc,
.daily_weather_desc {
font-size:0.75em;
}
.weather_data,
.detail_info_weather,
.summary_info_weather {
color: #FFFFFF;
}
.hourly_weather > .detail_info_weather,
.daily_weather > .detail_info_weather
{
display:none;
}
.hourly_weather.show_weather_detail > .detail_info_weather,
.daily_weather.show_weather_detail > .detail_info_weather
{
display:block;
}
.weather_data {
padding: 5px;
}
.hourly_weather.weather_data,
.daily_weather.weather_data
{
margin-bottom:5px;
}
.current_weather_desc,
.hourly_weather_desc,
.daily_weather_desc {
text-transform: capitalize;
}
.detail_temp_min_max_group {
display:inline-block;
}
.detail_icon {
height:1em;
}
.detail_icon_bkg {
background-size: 18px;
padding-left:20px;
background-repeat: no-repeat;
background-position: left center;
}
.detail_icon_sunrise_bkg {
background-image:url(/img/details_icon/icon_sunrise.svg);
}
.detail_icon_sunset_bkg {
background-image:url(/img/details_icon/icon_sunset.svg);
}
.detail_icon_temp_bkg {
background-image:url(/img/details_icon/icon_temp.svg);
}
.detail_icon_temp_min_max_bkg {
background-image:url(/img/details_icon/icon_temp_min_max.svg);
}
.detail_icon_pressure_bkg {
background-image:url(/img/details_icon/icon_pressure.svg);
}
.detail_icon_humidity_bkg {
background-image:url(/img/details_icon/icon_humidity.svg);
}
.detail_icon_cloud_bkg {
background-image:url(/img/details_icon/icon_cloud.svg);
}
.detail_icon_rain_bkg {
background-image:url(/img/details_icon/icon_rain.svg);
}
.detail_icon_wind_orientation_bkg {
background-image:url(/img/details_icon/icon_wind_orientation.svg);
}
.detail_icon_wind_speed_bkg {
background-image:url(/img/details_icon/icon_wind_speed.svg);
}
.summary_info_current_weather {
text-align:center;
}
.current_weather_logo {
width: 50%;
display:inline-block;
}
/*black*/
.weather_data.weather_200,
.weather_data.weather_201,
.weather_data.weather_202,
.weather_data.weather_210,
.weather_data.weather_211,
.weather_data.weather_212,
.weather_data.weather_221,
.weather_data.weather_230,
.weather_data.weather_231,
.weather_data.weather_232,
.weather_data.weather_900,
.weather_data.weather_901,
.weather_data.weather_902,
.weather_data.weather_903,
.weather_data.weather_904,
.weather_data.weather_905,
.weather_data.weather_906,
.weather_data.weather_950,
.weather_data.weather_951,
.weather_data.weather_952,
.weather_data.weather_953,
.weather_data.weather_954,
.weather_data.weather_955,
.weather_data.weather_956,
.weather_data.weather_957,
.weather_data.weather_958,
.weather_data.weather_959,
.weather_data.weather_960,
.weather_data.weather_961,
.weather_data.weather_962
{
background-color:#000000;
}
/*blue*/
.weather_data.weather_300,
.weather_data.weather_301,
.weather_data.weather_302,
.weather_data.weather_310,
.weather_data.weather_311,
.weather_data.weather_312,
.weather_data.weather_321,
.weather_data.weather_500,
.weather_data.weather_501,
.weather_data.weather_502,
.weather_data.weather_503,
.weather_data.weather_504,
.weather_data.weather_511,
.weather_data.weather_520,
.weather_data.weather_521,
.weather_data.weather_522,
.weather_data.weather_531,
.weather_data.weather_600,
.weather_data.weather_601,
.weather_data.weather_602,
.weather_data.weather_611,
.weather_data.weather_621
{
background-color:#55AAFF;
}
/*gray*/
.weather_data.weather_701,
.weather_data.weather_711,
.weather_data.weather_721,
.weather_data.weather_731,
.weather_data.weather_741,
.weather_data.weather_751,
.weather_data.weather_761,
.weather_data.weather_762,
.weather_data.weather_771,
.weather_data.weather_781,
.weather_data.weather_802,
.weather_data.weather_803,
.weather_data.weather_804
{
background-color:#808080;
}
/*yellow*/
.weather_data.weather_800,
.weather_data.weather_801
{
background-color:#E0B000;
}
/*night*/
.weather_data.night {
background-color:#41403b;
}
.daily_weather_logo,
.hourly_weather_logo {
width: 100px;
display:inline-block;
}
.weather_header {
padding:0px;
position: relative;
}
.weather_header_wrapper {
margin:5px;
background-color:#d7d7d7;
}
.weather_header_wrapper > div {
text-align:center;
}
.row_weather > div {
text-align:center;
}
.row_weather {
display: table;
width:100%;
table-layout: fixed;
}
.row_weather > div span {
display: inline-block;
width:100%;
}
.row_weather [class*="col-"] {
float: none;
display: table-cell;
vertical-align: middle;
}
.align-left {
text-align:left;
}
.weather_data .separator
{
margin-top: 10px;
padding-bottom: 10px;
}
.separator {
text-align:center;
line-height: 1px;
height: 1px;
position: relative;
background-color:transparent;
}
.separator > span {
display: inline-block;
border-top: 1px solid #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 10%;
left: 10%;
}
.weather_type {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.weather_chooser {
position:relative;
}
.container-centered {
height: 100%;
text-align: center; /* align the inline(-block) elements horizontally */
font: 0/0 a; /* remove the gap between inline(-block) elements */
}
.container-centered:before { /* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.elem-centered {
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
font: 16px/1 Arial sans-serif; /* <-- reset the font property */
}
I don't find a correct answer with html and css.
But javascript do the job. Just need to calculate the height of the header and add a "top" to the absolute div.
I'm struggling to get a font-awesome icon alongside a heading and paragraph like in the picture below:
How can I achieve this?
You can do something like this:
HTML:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
<div id="contenedor">
<div class="left">
<h2>Nice Work</h2>
<p>We possess within us two</p>
<p>winds. So far I have written</p>
<p>only of the conscious mind.</p>
</div>
<div class="right">
<i class="fa fa-search"></i>
</div>
</div>
CSS:
#contenedor {
font-family: 'Roboto', sans-serif;
width: 500px;
height: 500px;
background: #FFF;
float: left;
display: block;
}
.left {
float: left;
margin-right: 20px;
text-align: right;
}
.left h2 {
font-weight: bold;
}
.left p {
line-height: 18px;
color:#BDC3C7;
}
.right {
padding-top: 20px;
}
.right i {
background: #1DCFD1;
padding: 20px;
border-radius: 30px;
color:#FFF;
}
Working Demo
I´m trying to put the navigation bar in the header div but its being pushed out of it.. so the navigation bar is appearing in the center of the page.
Do you have any suggestions on how to fix this? Thanks for the help!
Here´s my HTML
<body>
<div class="fondo">
<div class="header"> <!--barra de navegacion -->
<div class="logo">
<object data="/Users/MaxRuizTagle/Desktop/guardado por illustrator/been.svg" type="image/svg+xml" alt="logo">
<!--[if lte IE 8 ]-->
<img src="/Users/MaxRuizTagle/Desktop/guardado por illustrator/images/been.png" alt="Logo"/>
<!--[endif]-->
</object>
</div>
<div class="container">
<div class="sixteen columns">
<ul id="nav">
<li> HOME</li>
<li>SPEISEKARTE</li>
<li>RESERVIERUNG</li>
<li>LOCATION</li>
<li>JOBS</li>
<li>KONTAKT</li>
<li>DJs</li>
</ul>
</div>
</div>
<div class="footer">
</div>
</div>
</div>
</body>
and CSS
body {
margin: 0 0 0 0;
height:1000px;
font-family: 'Myriad Pro', 'Helvetica Neue', Arial, sans-serif;
}
.fondo {
min-width:100%;
min-height: 80%;
background-image: url('../Img/imagenes/fotoportada.jpg');
background-size: cover;
position: absolute;
background-repeat: no-repeat;
}
.header {
min-width: 100%;
min-height: 100px;
max-height:100px;
background-color:rgb(255,255,255);
}
.footer {
background-color:rgb(28,92,144);
min-width: 100%;
height:400px;
position: absolute;
top: 100%;
}
ul#nav {
margin: 147px 0 0 120px;
float: left;
}
ul#nav li{
margin-right: 30px;
font-size: 1.1em;
display: inline;
}
.logo {
max-width: 20%;
}
.logo object, img {
min-width:100%;
float:left;
position: relative;
top:-25px;
}
You've set a top margin of 147px to the ul#nav element. that's why it's pushed down. change that and set a proper value.
ul#nav {
/* margin: 147px 0 0 120px; */
float: left;
}
JSBin Demo.
You're pushing the element down to the middle of the page with margin, and your float:left is causing it to appear below the logo.
Try this CSS:
ul#nav {
margin-left: 20%;
}
I had same kind of issue, turned out to be an extra closed tag without an opening tag.