Jump to content

Tables on the right...


Boxerman

Recommended Posts

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!

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.