Runboard.com
Слава Україні!



🙂       Use the black navigation bar to log in or create your account.

Jump to Page:  1  2  3  4 

 
Morwen Oronor Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 01-2008
Province: South Africa
Posts: 2604
Karma: 57 (+58/-1)
ReplyQuote
I have a question about a sidebar


I got myself a new board with the standard black/blue design which I'm playing around with to learn CSS.
I can't believe how much I know after all the boards I've created.
Now I have this one board that is very boring, and I want to do something exciting with it.
It is meant for parties and fantasy - called Fantasy Island if you look in the forums you'll see that all the very wealthy people have bought wonderful assets that we'd never afford in real life.
I go looking for all the new buildings in Dubai and then I post them on the board for us to talk about.
Here's my question:
I'd like to put a box on left side of the screen, like some other boards have with a link to the more spectacular pictures, i.e. so that they'll open in a new link.
How do I do that, if you can help me with some code I can play around with in my CSS learning board, that will be really great. I'll get the idea of what to do once I actually see it working for myself.
Please Lesa, I would appreciate some help with that.


Edit to add "sidebar" to the title for search reasons

Last revised by Lesigner Girl, 8/12/2008, 12:49 am
8/11/2008, 4:35 pm Link to this post PM Morwen Oronor Read Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
ReplyQuote
Re: I have a question


Maybe this topic will help, Mo:

Tableless Sidebar Layout

There are other ways to do it, too. Instead of using "absolute" positioning as described in the link above, you could "float" the sidebar like the Asphalt Skin v2 and other skins do.

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
8/12/2008, 12:48 am Link to this post PM Lesigner Girl Read Blog
 
Morwen Oronor Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 01-2008
Province: South Africa
Posts: 2604
Karma: 57 (+58/-1)
ReplyQuote
Re: I have a question about a sidebar


Thank you so much. I'll come back later today and work through all of that must just finish my rounds right nw. I hope I'll have something to show you tonight.

 emoticon
8/12/2008, 3:49 am Link to this post PM Morwen Oronor Read Blog
 
Morwen Oronor Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 01-2008
Province: South Africa
Posts: 2604
Karma: 57 (+58/-1)
ReplyQuote
Re: I have a question about a sidebar


oooh I made a big mess.
I added the header in the CSS, then it tiled it across the page, so I placed it in the HTML inside then it worked.
Then I added the 'sidebar' as you suggested now it overlaps the main table, I am still very insecure about what I'm doing, I think I need to go back to the very first lesson with this stuff.

Please look at this and tell me what to do

What I want to do is to create something like the sidebar in The Neutral Zone, that will link to the pictures of our fancy houses on Fantasy Island.

Please help me. No hurry, when you have time. I'm very patient I promise I won't nag to get it done, it can wait until you have time.

Thank you Lesa, its very much appreciated.
8/12/2008, 10:52 am Link to this post PM Morwen Oronor Read Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
ReplyQuote
Re: I have a question about a sidebar


Hi Mo emoticon

I have time for this post, but may have to save discussion in the upper forums for tomorrow, since I got online a little late tonight.

You have to end the content div in the footer so it surrounds the rest of the board.

Right now you have this in your header, followed by some other stuff:

<div id="content">

<p>Something interesting to say</p>

</div><!-- end content -->


Do you see how "Something interesting to say" isn't overlapped by the sidebar? That's because it's in the content div. But if you look at the next line in your HTML after "Something interesting to say," that content div was closed prematurely.

A quick way to see what's happening is to temporarily change that HTML to this:

<div id="content" style="border: 1px solid #000000;">

<p>Something interesting to say</p>

</div><!-- end content -->


Refresh your board, and the border represents your entire content div, which should be around all of your board content, not just around that one line.

Check out this thread again, and see which part goes into the header and which goes into the footer.

Near the end of your HTML Header, you need to start the content div, then put anything that you want above your board stuff next. Then in the HTML footer, you end the content div, start and end the sidebar, start and end the footer, then end your container div.

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
8/13/2008, 2:03 am Link to this post PM Lesigner Girl Read Blog
 
Morwen Oronor Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 01-2008
Province: South Africa
Posts: 2604
Karma: 57 (+58/-1)
ReplyQuote
Re: I have a question about a sidebar


Thank you. I've got all of that, and it looks better. But I put the header graphic where you said, instead of in the 'wizard' now it's not showing.
Have a look at the board now and please help me with the next step.
It's getting there.
 emoticon
8/13/2008, 4:25 am Link to this post PM Morwen Oronor Read Blog
 
Morwen Oronor Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 01-2008
Province: South Africa
Posts: 2604
Karma: 57 (+58/-1)
ReplyQuote
Re: I have a question about a sidebar


I'm editing this to update on my latest doings.
I have sidebar showing more or less what I want.
But this is what I want to achieve:

1. The sidebar is huge on the home page but then on the next page it's small and then huge again.
I need to get a standard size.

2. I copied everything from the actual board to the testboard to see how it would working. I'm getting there, but firstly the header is tiled in the middle, why is it doing that when I said, center?

3. I want the sidebar lower down in the page.

4. I want the forum box to be substantially bigger than it is now.

5. I want to be able to post links in the sidebar, if you look at the headings, you'll see what I mean, for instance, 'Mo's beach house' will mean, "click here to look at a large picture of Mo's beach house on a new tab". How do I do that.


 emoticon

I promise I won't bother you with my nonsense anymore once I have the board looking the way I want it to.
You've been such a great help, I can't believe what I've learned from you, Skokey and Corey in only 6 months. And it's so much fun seeing people enjoy the finished job.

Thank you Lesa, again when you have time, there really is no rush.

Last revised by Morwen Oronor, 8/13/2008, 6:00 pm
8/13/2008, 9:47 am Link to this post PM Morwen Oronor Read Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
ReplyQuote
Re: I have a question about a sidebar


It's my pleasure, Mo! emoticon


In your marquee, you are missing a quote and a space, and I've marked in red how the browser will read that. Also, you have two <font> tags but you didn't close either of them off.

<marquee direction="left" behavior="scroll" scrollamount="5" width="100%height="10px" bgcolor=""><font color="#c4654f"><font size="5">
<b>Fantasy Island's makeover is in progress, watch this space</b></marquee>


But instead of just fixing the errors I mentioned, <b> and <font> tags are obsolete and shouldn't be used anyway. I always separate content from style, which you can do too, like this:

<marquee scrollamount="5" class="welcomemarquee">Fantasy Island's makeover is in progress, watch this space</marquee>

See that I gave it a class, named "welcomemarquee". In your CSS, you can define that class like this:

.welcomemarquee {
   font-weight: bold;
   font-size: 15px;
   color: #c4654f;
   height: 10px;
}


I guessed on the font size, but you should be able to tweak it easily.
   

I also happened to notice an error here, which could affect any CSS that comes after it (such as font-size)...

.box {
  border: 1px solid #994c46;
  margin: 1px; padding: 3px;.
  font-size: 10px;
  font-color: #000000;
  text-align: center;
}


It's a very small error, a period that shouldn't be there, but that one period can wreak a lot of havoc. emoticon


Hopefully one of the above fixes will take care of your peek-a-boo sidebar. If not, let me know.


For your header, add this below your #header h1 background-image definition:

background-repeat: no-repeat;
   


To lower the sidebar, change its top: positioning to a bigger number.

#sidebar { width: 150px; position:absolute; top: 100px; left: 0; }


Your sidebar headings aren't showing up because the font color is the same color as the background.

.box h2 {
  background-color: #91e0fe;
  color: #91e0fe;
  margin: 0;
  font-size: 10px;
}



The width of the "forum box" (if you mean the forum list and topic list) can actually be changed in your layout/colors screen, where you currently have them set to 80%. This means that the master table is 80% of its available width, and the part that you are actually seeing is 80% of the master table's width, which makes the part you are seeing only 64% of the width between the sidebar and the right side of the page.

Forum list master table width (percents): 80
Forum list table width (percents): 80

Topic list master table width (percents) : 80
Topic list table width (percents) : 80


For request #5, are you wanting a tooltip to show up when you hover on a link? If so, just edit the part in red below:

<a href="URL_TO_BEACH_HOUSE" title="Click here to look at a large picture of Mo's beach house on a new tab." target="_blank">Mo's Beach House</a>

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
8/14/2008, 1:57 am Link to this post PM Lesigner Girl Read Blog
 
Morwen Oronor Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 01-2008
Province: South Africa
Posts: 2604
Karma: 57 (+58/-1)
ReplyQuote
Re: I have a question about a sidebar


Woooohoooo - perfect.

All I need to do now is to put a box around it with bevelling like other people have on theirs but a it is it's working so I'll put it in place like that and watch my members marvel at my brilliance, They now it's still a work in progress but it will keep them coming back.
I can do the 'prettying' up on the actual site.
Now you can look at it, and then give me some suggestions about how to make it look really lovely.

Fantasy Island

Thank you, thank you. I've learned such a lot from you this week.

 emoticon emoticon
8/14/2008, 3:38 am Link to this post PM Morwen Oronor Read Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
ReplyQuote
Re: I have a question about a sidebar


You're welcome, Mo. emoticon

Your sidebar headings look much bigger in IE than they do in Firefox, so I went through your CSS and found this:

.welcomemarquee {

   font-weight: bold;
   font-size: 36px;
   color: #c4654f;
   height: 36px;
}


.box {
  border: 1px solid #994c46;
  margin: 1px; padding: 3px;
  font-size: 10px;
  font-color: #000000;
  text-align: center;
}
.box h2 {
  background-color: #91e0fe;
  color: #91e0fe;
  margin: 0;
  font-size: 10px;
}
.box p {
  margin: 1em auto;
}


Your CSS is missing that first }, creating an error that causes the CSS definitions that follow it not to work. After you fix that error, you will find that your sidebar headings have a light turquoise background behind light turquoise text, making those headings unreadable.

If you don't want a background color behind those headings, just take out the whole background-color line above. If you want the text to be the page's default color instead of light blue, just remove the whole color line for .box h2.

You will also see that you already have borders defined in your sidebar, but they are thin and dark red. This is defined under .box.

Speaking of font colors, I didn't highlight this other mistake in your code above. font-color doesn't do anything and should just be color.

Another difference between IE and Firefox is the text-alignment in your sidebar. In IE, the text is centered within your sidebar, while FF shows it left-aligned. This is because FF ignores the <center> tags that are in the board's default code, while IE doesn't.

To fix this, add text-align to #sidebar. Depending on whether you want it centered or left-aligned, it would be:

text-align: center;
or
text-align: left;

Skokey is better with ideas than I am, but if he doesn't beat me to it, I can attempt it this weekend. emoticon

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
8/14/2008, 11:29 pm Link to this post PM Lesigner Girl Read Blog
 


Add to this discussion

Jump to Page:  1  2  3  4 



You are not logged in (login)
Back To Top

This board's time is GMT.