Tables on the right...

[Boxerman]

Hi guys,

 

Firstly take a look at this once seen you can understand the following:

http://www.truvibefm.com

 

Notice the menu bars on the left hand side...

 

How do i go about getting them to fit in on thr right hand side aswell?

 

CSS code:

* {
padding:0;
margin:0;
text-decoration:none;
list-style:none;
font-family:Tahoma;
font-size:11px;
outline:none;
}
body {
background: #FFFFFF;
}
#container {
margin:0px auto;
width:822px;
}
h1 {
width:321px;
height:34px;
background:url(images/logo.jpg) no-repeat;
text-indent:-999999px;
}
#header {
margin:0px auto;	
width:840px;
height:140px;
background:url(images/header.jpg) no-repeat;
}
#topmenu {
margin:0 0 0 12px;
width:812px;
height:34px;
}
#topmenu li {
margin:0 5px 0 5px;
display:inline;
line-height:32px;
color:#000000;
}
#topmenu a {
color:#000000;
font-weight:bold;
}
#topmenu a:hover {
color:#CCCCCC
}
#menucontent {
width:832px;
margin:0px auto;
background:#FFFFFF;
}
#links {
float:left;
width:205px;
margin:5px 0px 0px 5px;
}
#menu {
margin:0 0 5px 0;
width:205px;
}
#menu h3 {
background:url(images/menukopje.jpg);
width:190px;
height:28px;
padding:0 0 0 15px;
line-height:28px;
color:#FFFFFF;
font-weight:bold;
}
#linksmenu {
width:205px;
}
#linksmenu li {
width:205px;
height:21px;	
line-height:21px;
padding-bottom: 2px;
padding-top: 0px;	
}
#linksmenu li a {
height:21px;
width:190px;
padding:0 0 0 15px;
display:block;
background-color: #d1eaf8;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #9DCFFF;	
color:#326DA6;
}
#linksmenu li a:hover {
height:21px;
width:190px;
background-color: #d1eaf8;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #9DCFFF;	
}

#linksmenucontent {
width:205px;		
margin:0px 0px 0px 0px;
background:#FFFFFF;	
color:#326DA6;
}
#linksmenucontent p {
width:190px;		
margin:3px 0px 3px 5px;
color:#326DA6;
}

#menulast {
background:url(images/menuvoet.jpg);
font-size:0px;
height:3px;
}
#rechts {
float:right;
width:598px;
margin:5px 5px 0px 0px;
}
#rechtscontent {
margin:0px 0px 5px 0px;
width:598px;
}
#rechtscontent h2 {
background:url(images/contentkopje.jpg);
width:583px;
height:28px;
padding:0 0 0 15px;
line-height:28px;
color:#FFFFFF;
font-weight:bold;
}
#rechtscontent ul {
padding:3px 3px 3px 0px;
background:#FFFFFF;
color:#243c00;
}
#rechtscontentlast {
background:url(images/contentvoet.jpg);
font-size:0px;
height:3px;
}
#rij { 
    width : 592px;
    height : 100px;
    padding-left : 5px;
    background-image : url(images/rij.gif);
    background-repeat : no-repeat;
}
#rijad { 
    width : 592px;
    height : 100px;
    margin-left : 0px;
    background-image : url(images/rijad.gif);
    background-repeat : no-repeat;
}
#ad { 
    width : 468px;
    height : 60px;
    float : left;
    margin-top : 17px;
    margin-left : 62px;
}
#rz { 
    width : 110px;
    height : 80px;
    float : left;
    margin-top : 5px;
    padding-left : 5px;
    background-image : url(images/imgb.gif);
    background-repeat : no-repeat;
} 
#imgrz { 
    width : 96px;
    height : 66px;
    margin-top : 7px;
    padding-left : 2px;
}

#footer {
width:822px;
height:41px;
}
#footer p {
margin:0px 10px 0px 10px;
line-height:50px;	
color:#000000;
font-weight:bold;
text-align:left;	
}
#footer p a (
line-height:50px;	
color:#000000;
font-weight:bold;
text-align:left;
}
#footer p a:hover (
line-height:50px;	
color:#CCCCCC;
font-weight:bold;
text-align:left;
}

 

Without messing the middle up and widing the page a bit how do i go about getting a menu bar type on the right?

 

Advise is always welcome.. if i need to post my index contents please advise!

[Boxerman]

Any advise guys?

[Drongo_III]

Hi boxer

 

Am i understanding you right - you want to add your nav bar to the right as well as the left? Or move it altogether? Or are you just trying to setup a bar on the right to use for other content but styled like your nav bar?

 

I'll help if i can understnad your question

[Boxerman]

Hi Drongo!

 

Thanks for your reply,

 

I wish to leave the menu on the left and add the one on the right for centent etc...

 

If you need anything else please just let me know!

 

Thank you!

[Drongo_III]

Hi mate

 

The thing is everything currently aligns nicely with your header image which is a solid image and not scalable.

 

So if you added a box on the right you'd end up with it overhanging and that would look a bit crap. Is that what you want to happen tho? Or do you want to fit the box into the empty white space next to your twitter feed?

 

 

 

 

Hi Drongo!

 

Thanks for your reply,

 

I wish to leave the menu on the left and add the one on the right for centent etc...

 

If you need anything else please just let me know!

 

Thank you!

[Boxerman]

I would like to make the site look more packed if you get me... more stuff..

 

How would you advise i do this with the display and css?

[Drongo_III]

I think the least disruptive way would be to slip a div in next to your facebook feed. Looking at the code it’s a bit messy – I assume you’ve built this with some sort of website builder. You have a UL tag that doesn’t nest anything correctly.

 

Anyway you can edit your template file as per the below and it should work - obviously where my html/css incorprates content that is otherwise included via your cms you might wish to delete it.  I’m working off the source from the website here and not the template that generates the source but it might point you in the right direction.

 

So inside #rechtscontent div (which is your central content area) I’ve wrapped your facebook feed in another div tag and floated this left. Then I've added another div below for your new content and floated this left. Then I added a div to clear the float. So if you past the below code into your template below the H2 tag you should get your extra small content area - make sure you backup first.

 

 

I’ve used inline styles so you’ll probably want to give these divs classes or Ids and paste my inline styles to your style sheet.

 

Let me know if this works for ya or if it causes any isssues.

 

<div style="width: 292px; float: left;">

<br />

<br />
<br />
    <b>Welcome back guys!</b><br />   
    <p>TruVibe 24/7 providing 24/7 music - Click the miniplayer to the left or one of the icons in the top right to start listening</p>
<p>  <br>
<iframe 

src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FTruVibeFM%2F176625075754610&width=292&color

scheme=light&show_faces=false&border_color&stream=true&header=false&height=395&appId=127811827320277" scrolling="no" 

frameborder="0" style="border:none; overflow:hidden; width:292px; height:395px;" allowTransparency="true"></iframe></p>
<br />
<br />
<br />

</div>			


<!-- this is the extra content area you want -->

<div style="190px; float: left;">
YOUR CONTENT GOES HERE

</div>	

<div style="height: 0px; width: 100%; clear: both;"></div>

 

[Drongo_III]

PS if you want to post your actual template file I can try edit it from there for you