b2evolution question Options

[YaWeaveIzOnFiyah]

Right now I'm trying to customize my layout so there's a header on top and the blog and sidebar and all that below it.

I've tried to enter my header on the 'header' section of my CSS but it moves the navigation bar to the top of the page & the header to the bottom

Ex. HERE

<!-- begin code provided by createblog.com --><br />body {<br />  font-family: arial;<br />  font-size: 11px;<br />  color: #6e0e2e;<br />  background: url(http://www.urban-esque.com/b2/skins/uneven/images/LilKimPattern.jpg); <br />}<br /><br />acronym {<br />  cursor: help;<br />  border-bottom: 1px solid #006DA6;<br />}<br /><br />/* -- Layout classes -- */<br /><br />#mainContainer {<br />  width: 760px;<br />  margin-left: auto;<br />  margin-right: auto;<br />}<br /><br />/* -- Content container -- */<br /><br />#content {<br />  float: right;<br />  width: 550px;<br />  margin-right: 10px;<br />}<br />#content a {<br />  text-decoration: none;<br />  border-bottom: 1px solid #DEFF00;<br />  color: #FFFFFF;  <br />}<br /><br />#content a:hover {  <br />  border-bottom: 1px solid #DEFF00;<br />  color: #DEFF00;<br />}<br /><br />#content a img {<br />  border: 0px;<br />}<br /><br />#sideBar li {<br />list-style: none;<br />}<br /><br />#sideBar ul {<br />  margin:0;<br />  padding:0;<br />}<br /><br />#content h1 {<br />  clear: both;  <br />  font-size: 1.0em;<br />  letter-spacing: 1px;<br />  text-transform: uppercase;<br />  text-indent: 10px;<br />  margin: 0px;<br />  border-top: 10px solid #000000; <br />  color: #DEFF00;<br />  background-color: #006DA6;<br />}<br />#content .postBox img {<br />margin:5px;<br />}<br />/* -- Content header and footer -- */<br /><br />#header {<br />  display: table-cell;  <br />  height: 404px;<br />  width: 550px;<br />  text-align: right;<br />  vertical-align: bottom;<br />  margin-bottom: 0px;<br />  background: url(http://www.urban-esque.com/b2/skins/uneven/images/LighersUp.jpg) no-repeat top left;  <br />}<br /><br />#footer {<br />  float: left;<br />  height: 75px;<br />  width: 550px;  <br />  font-size: 0.8em;<br />  text-transform: uppercase;<br />  text-align: center;  <br />  margin-top: 10px;<br />  margin-bottom: 10px; <br />  background: #333333 url(images/round_corner.gif) no-repeat bottom right;  <br />}<br /><br />#footer a {<br />  border: 0px;<br />  color: #DEFF00;  <br />}<br /><br />#footer a:hover {<br />  border: 0px;<br />  color: #AAAAAA;  <br />}<br />/* -- Boxes and tops -- */<br />.boxTop {<br />  clear: both;  <br />  font-size: 1.0em;<br />  letter-spacing: 1px;<br />  font-weight: bold;<br />  text-transform: uppercase;<br />  padding-left: 10px;<br />  margin: 0px;<br />  border-top: 10px solid #000000;<br />  color: #FFFFFF;<br />  background-color: #ff216c;<br />}<br />.postBox {<br />  margin-top: 0px;<br />  margin-bottom: 0px;<br />  padding: 8px;<br />  background: url(http://www.urban-esque.com/b2/skins/uneven/images/Ivory.jpg);<br />  border-top: 10px solid #333333;<br />}<br />.menuBox {<br />  margin-top: 0px;<br />  margin-bottom: 0px;<br />  background: url(http://www.urban-esque.com/b2/skins/uneven/images/Ivory.jpg);<br />  font-size: 11px;<br />  font-face: arial;<br />  color: #6e0e2e;<br />  text-transform: none;<br />  border-top: 10px solid #333333;<br />}<br /><br />/* -- Menu & news container -- */<br /><br />#sideBar {<br />  float: right;  <br />  width: 200px;<br />  margin: 0px;<br />  padding: 0px;  <br />  background-color: #333333;<br />}<br /><br />#sideBar p {    <br />  margin: 0px;<br />  padding: 5px 5px 10px 5px;<br />  background-color: #555555;<br />}<br /><br />#sideBar .postBox a {  <br />  text-decoration: none;<br />  border-bottom: 1px solid #DEFF00;<br />  color: #FFFFFF;<br />}<br /><br />#sideBar .boxTop a {  <br />  text-decoration: none;<br />  color: #DEFF00;<br />}<br />#sideBar .boxTop a:hover {<br />  color: #FFFFFF;<br />}<br /><br />#sideBar a:hover {<br />  color: #DEFF00;<br />}<br /><br />#sideBar a img {  <br />  vertical-align:middle;<br />  padding: 0 5px 0 5px;<br />  border: 0px;<br />}<br />#sideBar .menuBox a {<br />  border: 0px;<br />}<br /> <br />#sideBar a.menuItem, li.menuItem {<br />  display: block;<br />  clear: both;<br />  font-size: 11px;<br />  text-transform: uppercase;<br />  text-decoration: none;<br />  margin-top: 1px;<br />  padding: 0 0 0 25px;<br />  border: 0px;<br />  color: #FFFFFF;<br />  background: #6e0e2e url(images/relaxed_icn_menu.gif) no-repeat center left;<br />}<br />#sidebar a.boxTop {<br /> border: 0px;<br />  display: block;<br />}<br />#sideBar a:hover.menuItem, li:hover.menuItem {<br />  color: #FFFFFF;<br />  background: #d81c51 url(images/relaxed_icn_menu_on.gif) no-repeat center left;<br />}<br /><br />#sideBarHeader {<br />  height: 100px;<br />  background: #333333 url(images/relaxed_hdr_bg.gif) repeat-x bottom right;;<br />}<br /><br />#sideBarFooter {  <br />  height: 70px;<br />  border-top: 10px solid #000000;<br />  background: #333333 url(images/round_corner.gif) no-repeat bottom right;<br />}<br /><br />/* -- Title and sub-headings -- */<br /><br />.highLight {<br />  color: #DEFF00;<br />}<br /><br />/* -- IE CSS2 selector hack.  This still validates, but IE ignores the class defined<br />      with the [id].  The result is you set the IE specific value in the first class<br />      definition, and the standard compliant browser value in the second class -- */<br /><br />#title {<br />  font-size: 36px;<br />  padding: 48px 4px 0px 0px;  <br />}<br /><br />#title a, a:hover {<br />  border:0px;<br />}<br />#title[id] {<br />  padding-top: 0px;<br />  padding-bottom: 3px;<br />}<br /><br />#subtitle{<br />  display: block;  <br />  font-size: 10px;<br />  text-transform: uppercase;<br />  margin-top: -4px;<br />  border: 0px;<br />  color: #DEFF00;  <br />}<br /><br /><br />strong, .subHeading {<br />  font-size: 0.8em;<br />  text-transform: uppercase;  <br />  color: #DEFF00;  <br />}<br /><br />.subHeading {<br />  display: block;<br />}<br /><br />/* -- Images styles -- */<br /><br />.imgRight, .imgLeft {<br />  border: 1px solid #888888;<br />}<br /><br />.imgRight {<br />  float: right;<br />  margin: 0 0 10px 10px;<br />  <br />}<br /><br />.imgLeft {<br />  float: left;<br />  margin: 0 10px 10px 0;  <br />}<br /><br />/* -- Takes care of the 'jump to top' arrow -- */<br /><br />.upArrow {<br />  clear: both;<br />  display: block;<br />  text-align: right;<br />}<br /><br />.upArrow a img {  <br />  margin-top: 10px;<br />  border-bottom: 0px;<br />  background-color: #DEFF00;<br />}<br /><br />.upArrow a:hover img {  <br />  border: 0px;<br />  background-color: #BBBBBB;<br />}<br /><br />/* -- Quote block styles -- */<br /><br />.quote, blockquote {<br />  display: block;<br />  margin: 10px 20px 10px 20px;<br />  padding: 4px;  <br />  border: 1px solid #888888;<br />  background-color: #666666;<br />}<br /><br />.author {<br />  display: block;<br />  font-size: 0.8em;<br />  text-transform: uppercase;<br />  color: #DEFF00;<br />}<br />.bSmallPrint {<br />  font-size: 0.8em;<br />}<br /><br />fieldset {<br />  border: 0px;<br />}<br />/* Calendar: */<br />caption.bCalendarCaption {<br /> border: 0px solid #ccc;<br /> background-color: #eee;<br /> border-bottom: 0;<br /> font-size: 105%;<br /> font-weight: bold;<br /> margin: auto;<br /> padding: .5ex 0;<br /> white-space: nowrap;<br />}<br />table.bCalendarTable {<br /> border: solid 0px #ccc;<br /> border-collapse: separate;<br /> margin: 0 auto 1em auto;<br /> font-size: 77%;<br /> border-spacing: 0px; <br />}<br />table.bCalendarTable tfoot td {<br /> border-top: 1px solid #ccc;<br />}<br />table.bCalendarTable tfoot a {<br /> text-decoration: none;<br />}<br />table.bCalendarTable tfoot a:hover {<br /> background-color: #78a;<br /> color: #fff;<br />}<br />th.bCalendarHeaderCell {<br /> color: #abc;<br />  font-size:0.7em;<br />}<br />#bCalendarToday {<br /> background: url(http://www.urban-esque.com/b2/skins/uneven/images/Ivory.jpg);<br />}<br />tr.bCalendarRow {<br /> text-align: center;<br />}<br />th.bCalendarHeaderCell {<br /> font-size: 84%;<br /> width: 4ex;<br />}<br />td.bCalendarCell {<br /> width: 4ex;<br /> height: 3.5ex;<br />}<br />.bCalendarLinkPost {<br /> font-weight: bold;<br />}<br />td#prev,<br />td#next {<br /> font-weight: bold;<br /> font-size: 105%;<br /> padding: .5ex;<br /> white-space: nowrap;<br />}<br />td#prev a,<br />td#next a {<br /> padding: 0 .5ex;<br />}<br />td#prev {<br /> text-align: left;<br />}<br />td#next {<br /> text-align: right;<br />}<br /><br /><br /><!-- end code provided by createblog.com -->

^^ Those are my codes, could anybody tell me what's wrong with it?

[freeflow]

^ I think that might just be something with your css maybe , What i do is i align the main image, and the sidebar in my header.php , and just include it on the pages because that was way easier and less codes , but if you changed your css when taking out the header it might have did that, its all so funky. Otherwise you can do the align center in your header.php , and have a link to your css in your header.php and add your sidebar in header.php and see if that makes it aligned right.


oh , and make sure your css is linked in the codes you showed me above.