SideBar does't how to change?

TheNoiseOfMenno · Post by **TheNoiseOfMenno** » Sun May 19, 2013 7:16 pm

Hello,

first I'm menno from The Netherlands ik have installed CMS Made Simple on my Site [url=hhtp://www.thenoiseofmenno.nl]LINK[/url] i'm running on 1.11.6

I have got one little problem with the code from my template the code is standing here below.

Code: Select all

 {process_pagedata}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>{sitename} - {title}</title>
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
{cms_stylesheet}
{metadata}
{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
</head>
</__body>
<div id="wrapper">
	<div id="header-wrapper">
		<div id="header">
			<div id="logo">
				<h1><a href="{root_url}">{sitename}</a></h1>
				<p> Een beetje van dit, en een beetje van dat! </p>
                                   <div id="socialicons">

                                           <a href="http://www.twitter.com/thenoiseofmenno"><img src="http://www.thenoiseofmenno.nl/uploads/images/Twitter%20round.png" width="48" height="48" alt="Twitter" /></a>

                                           <a href="http://www.instagram.com/thenoiseofmenno"><img src="http://www.thenoiseofmenno.nl/uploads/images/Instagram%20round.png" width="48" height="48" alt="Instagram" /></a>

                                           <a href="http://www.Facebook.com/mennovanholland"><img src="http://www.thenoiseofmenno.nl/uploads/images/Facebook%20Round.png" width="48" height="48" alt="Facebook" /></a> 

                                           <a href="http://youtube.com/idk"><img src="http://www.thenoiseofmenno.nl/uploads/images/Youtube%20round.png" width="48" height="48" alt="YouTube" /></a>
                                   </div>

			</div>
		</div>
	</div>
	<!-- end #header -->
	<div id="menu">
		{menu template="Mobility // minimal_menu" number_of_levels="1"}
	</div>

	<!-- end #menu -->
	<div id="page">
		<div id="page-bgtop">
			<div id="page-bgbtm">
				<div id="content">
					<div class="post">
						<h2 class="title">{title}</h2>
						
						<div class="entry">
							{content}
						</div>
					</div>
					<div style="clear: both;">&nbsp;</div>
				</div>
								<!-- end #sidebar -->
				<div style="clear: both;">&nbsp;</div>
			</div>
		</div>
                
	</div>
           
        <div id="sidebar">
          <div id="sidebar-h2">
              <li>
							<h2>Navigation</h2>
							{menu template="Mobility // minimal_menu" start_level="1" collapse="1"}
						 </li>
          </div>
        </div>
                
	<!-- end #page -->
</div>
<div id="footer">
	<p>Copyright (c)  {current_date format="%Y"} {sitename}. All rights reserved.</p>
</div>
<__body>
</__html>

the problem is that i want a sidebar with only a navigation on the page. but if i put that code in it it automaticly turns to the right of the screen and it must stand on the white side.

Below is the Code of the stylesheets i use

Code: Select all

 body {
	margin: 0;
	padding: 0;
	background: #000000 url(/cmsms/uploads/Mobility/img07.jpg) no-repeat left top;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000000;
}

h1, h2, h3 {
	margin: 0;
	padding: 0;
	font-family: 'Arvo', serif;
	font-weight: normal;
	color: #000000;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 2.4em;
}

h3 {
	font-size: 1.6em;
}

p, ul, ol {
	margin-top: 0;
	line-height: 180%;
}

ul, ol {
}

a {
	text-decoration: none;
	color: #FF9F04;
}

a:hover {
	text-decoration: underline;
}

img.border {
	border: 6px solid #EEE7DF;
}

img.alignleft {
	float: left;
	margin-right: 25px;
}

img.alignright {
	float: right;
}

img.aligncenter {
	margin: 0px auto;
}

#wrapper {
	margin: 0 auto;
	padding: 0;
}

/* Header */

#header-wrapper {
	height: 190px;
}

#header {
	width: 960px;
	height: 190px;
	margin: 0 auto;
}

/* Logo */

#logo {
	width: 980px;
	height: 100px;
	margin: 0px auto;
	padding: 70px 0px 0px 0px;
	color: #FFFFFF;
}

#logo h1, #logo p {
	display: block;
	margin: 0;
	padding: 0;
}

#logo h1 {
	margin: 0px;
	letter-spacing: -1px;
	text-align: center;
	text-transform: uppercase;
	font-size: 54px;
	font-weight: bold;
	color: #FFFFFF;
}

#logo h1 a {
	color: #FFFFFF;
}

#logo p {
	text-align: center;
	text-transform: uppercase;
	font-family: 'Arvo', serif;
	font-size: 20px;
}

#logo a {
	border: border: 1px solid black;
	background: none;
	text-decoration: none;
	color: #FFFFFF;
}

/* Search */

#search {
	float: right;
	width: 280px;
	height: 100px;
	padding: 0;
}

#search form {
	height: 41px;
	margin: 0;
	padding: 60px 0 0 30px;
}

#search fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

#search-text {
	width: 195px;
	padding: 6px 10px;
	border: none;
	background: #FFFFFF;
	text-transform: lowercase;
	font: normal 11px Arial, Helvetica, sans-serif;
	color: #7F7F81;
}

#search-submit {
	display: none;
}

/* Menu */

#menu {
	width: 940px;
	height: 56px;
	margin: 0px auto;
	padding: 30px 20px 0px 20px;
	background: #000000;
}

#menu ul {
	margin: 0;
	padding: 0px 0px 0px 0px;
	list-style: none;
	line-height: normal;
}

#menu li {
	float: left;
}

#menu a {
	display: block;
	float: left;
	height: 56px;
	margin: 0px;
	padding: 0px 30px 0px 30px;
	line-height: 56px;
	letter-spacing: -1px;
	text-decoration: none;
	text-transform: uppercase;
	font-family: 'Arvo', serif;
	font-size: 14px;
	font-weight: normal;
	color: #FFFFFF;
	border: None;
}

#menu .current_page_item a {
	background: #FF0000 url(/cmsms/uploads/Mobility/img02.gif) no-repeat right bottom;
	color: #FF0000;
}

#menu a:hover {
	text-decoration: none;
	color: #FF0000;
}

/* Page */

#page {
	width: 980px;
	margin: 0 auto;
	padding: 0;
	background-color: #FFFFFF;
}

#page-bgtop {
        border: 1px gray;
}

#page-bgbtm {
	margin: 0px;
	padding: 40px 30px 0px 30px;
        border: 1px gray;
}

/* Content */

#content {
	float: left;
        background-color: #FFFFFF;
	width: 600px;
	padding: 0px 0px 0px 0px;
       }

.post {
	clear: both;
	padding-bottom: 10px;
}

.post .title {
	
	letter-spacing: -2px;
}

.post .title a {
	color: #FFFFFF;
	border: none;
}

.post .meta {
	padding-bottom: 10px;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: italic;
}

.post .meta a {
}

.post .entry {
	text-align: justify;
	margin-bottom: 25px;
	padding: 10px 0px 0px 0px;
}

.links {
	display: block;
	width: 96px;
	padding: 2px 0px 2px 0px;
	background: #FFFFFF;
	text-align: center;
	text-transform: uppercase;
	font-size: 10px;
	color: #000000;
}

/* Sidebar */

#sidebar {
	float: right;
        background: #FFFFFF
	width: 240px;
	padding:  0px 800px 0px1800px;
}

#sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#sidebar li {
	margin: 0;
	padding: 0;
}

#sidebar li ul {
	margin: 0px 0px;
	padding-bottom: 30px;
}

#sidebar li li {
	padding-left: 30px;
	line-height: 35px;
	background: url(/cmsms/uploads/Mobility/img01.gif) no-repeat left 5px;
}

#sidebar li li span {
	display: block;
	margin-top: -20px;
	padding: 0;
	font-size: 11px;
	font-style: italic;
}

#sidebar h2 {
	height: 38px;
	margin-bottom: 20px;
	padding: 12px 0 0 0px;
	border-bottom: 1px solid #000000;
	text-transform: uppercase;
	letter-spacing: -1px;
	font-size: 20px;
	color: #000000;
}

#sidebar p {
	margin: 0 0px;
	padding: 0px 20px 20px 20px;
	text-align: justify;
}

#sidebar a {
	border: none;
}

#sidebar a:hover {
	text-decoration: underline;
}

/* Calendar */

#calendar {
}

#calendar_wrap {
	padding: 20px;
}

#calendar table {
	width: 100%;
}

#calendar tbody td {
	text-align: center;
}

#calendar #next {
	text-align: right;
}

/* Footer */

#footer {
	width: 960px;
	height: 55px;
	margin: 0px auto 40px auto;
	border-top: 1px solid #B6BFD0;
	font-family: Arial, Helvetica, sans-serif;
}

#footer p {
	margin: 0;
	padding-top: 18px;
	line-height: normal;
	text-align: center;
	color: #FFFFFF;
        font-size:11px;
}

#footer a {
	color: #404040;
}

/* Social Media icons */

#socialicons {
        margin: 0;
	padding-top: 18px;
	line-height: normal;
	text-align: center;
	 
}

i hope someone here can help me with this problem.
sorry, for my rubbish Englisch!

Menno,
if you need more information leave a comment

staartmees · Post by **staartmees** » Mon May 20, 2013 5:41 am

In your css you have under sidebar "float:right". Change it to float:left

TheNoiseOfMenno · Post by **TheNoiseOfMenno** » Mon May 20, 2013 11:07 am

staartmees wrote:In your css you have under sidebar "float:right". Change it to float:left

it does't make a different see it yourself, www.thenoiseofmenno.nl

Rolf · Post by **Rolf** » Mon May 20, 2013 1:13 pm

Set a width for #wrapper i.e. 950px

TheNoiseOfMenno · Post by **TheNoiseOfMenno** » Tue May 21, 2013 5:46 am

Rolf wrote:Set a width for #wrapper i.e. 950px

Okey Only English is approved on this site. than i will do it again. Rolf, on my site i have did what you said and its one step better. but i want the navigation on the white field besides the content. where do i change that?

Rolf · Post by **Rolf** » Tue May 21, 2013 7:19 am

For Dutch help go to this board: http://forum.cmsmadesimple.org/viewforum.php?f=13

The div "sidebar" has to be *in* the div "page".
The clear:both at the bottom will push the white background down.

Good read (in Dutch) http://sceneone.nl/positionering/div.php

Rolf

andre_designer · Post by **andre_designer** » Tue May 21, 2013 7:45 pm

welkom menno

you using to match divs to reach your goal this is enough to reach goal (if i had it right)

CMS Made Simple Forums

SideBar does't how to change?

SideBar does't how to change?

Re: SideBar does't how to change?

Re: SideBar does't how to change?

Re: SideBar does't how to change?

Re: SideBar does't how to change?

Re: SideBar does't how to change?

Re: SideBar does't how to change?