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



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

Jump to Page:  1  2  3 

 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 07-2005
Province: Texas
Posts: 619
Karma: 11 (+12/-1)
ReplyQuote
CSS Basic sidebar layout


Hi LeSigner Girl,

Since Josh deleted all of his skins I have been attempting to create a super basic no-frills layout using the sky-blue theme and just adding the sidebar and header with text labels to show what goes where.

The problem of course is I still don't know all that much myself so I am somewhat mystified by my results current incantation found here.

I think part of the problem is using the table to define/create the sidebar but a quick look shows:
1. the header area is coming down into the table area and
2. the table border doesn't match the headers border.

My vision is a layout with the borders defined and displayed as the headers is and all elements correctly and simply defined so that new runboard owners could use this layout as a foundation to create their own boards.

 


Last revised by Pastor Rick, 4/7/2007, 1:14 pm


---

Advertise Boards On TRDConceptsDE
4/7/2007, 5:02 am Link to this post PM Pastor Rick 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: CSS Basic sidebar layout


Hi Pastor Rick.

Pulling that page up with Firefox and then viewing the source code from there, Firefox will colorize the code on the page. One line, when viewed this way, looks like this:

<div id="header"><h1>banners and other stuff in the header goes here</h1></ div></ br>

I know you have Firefox, so you might find this feature useful. The green italics means the code is incorrect. In this case, it should be </div><br />. Once that is fixed, the layout problem will work itself out.

As for the table border color, I'm guessing you're referring to the ak_msg_master_table. In your CSS, I see this:

.ak_msg_master_table {border:none;width:98%;font-family:verdana;font-size:14px}

The border you are seeing is not the ak_msg_master_table border, but rather the table you created for your sidebar layout. However, I don't see where you have defined your own table's border color anywhere, and what you currently see is the default behavior of a table whose border is simply defined with border="1" in the HTML. To give it different styling, you can use classes in that table, then define those classes in your css:

HTML HEADER:
<table border="0" width="100%"...>
<tr>
<td class="sidebar">
....sidebar contents...
</td>
<td class="main">

HTML FOOTER:
</td></tr></table>

CSS:
.sidebar, .main { vertical-align: top; border: 1px solid #09f; } /* same as #0099ff */
.sidebar { width: 15%; }

Disclaimer: I prefer to use CSS rather than tables for layout for several different reasons (loading speed, search engines, accessibility, etc), but since the CSS method is more advanced and tables are easier to construct, I'll reserve that for people who show an interest in learning it.

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
4/7/2007, 8:15 pm Link to this post PM Lesigner Girl Read Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 07-2005
Province: Texas
Posts: 619
Karma: 11 (+12/-1)
ReplyQuote
Re: CSS Basic sidebar layout


Thanks LeSigner Girl,

Guess I'll have to start wearing my reading glasses while doing this emoticon...

As you know I learned about tables first but I would really like to get this theme/layout done using CSS as much as possible for two reasons:
1. I am really trying to figure it out and advance enough to be able to put together themes and skins without bumping into the "I don't know that yet" wall.
2. One of the major and constant critiques against RunBoard has always been its speed in loading time so anything I can do with my own themes to speed things up for everyone is something I view as a desirable goal emoticon.

---

Advertise Boards On TRDConceptsDE
4/7/2007, 9:02 pm Link to this post PM Pastor Rick 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: CSS Basic sidebar layout


2. I hope Thor will someday change the ak_msg_master_table into a div as requested, because it would really help on loading speed. I won't knock him for taking so long in doing so, though, because changing it into a div could really screw up a few boards, depending on how each board's admin has customized it.

I uploaded a couple of CSS layout how-to's a while back, but never got around to making them publicly available. Due to your interest in learning, I've decided it's about time to publicize them, so I started a new thread for it here.

Incidentally, I've decided to revamp the purpose of the "Design" and "Tech" forums. Previously, the "Design" forum was limited to Runboard while "Tech" also included more generalized design questions, but it wasn't Runboard-specific.

Instead of my previous configuration, "Design" will now be for design, whether it's Runboard-specific or general design questions, and "Tech" will include anything computer- and internet-related that isn't coding-related. I'm considering also adding a graphics forum, but I have yet to come up with an "Illusia" name for one. Any ideas? emoticon

Last revised by Lesigner Girl, 4/8/2007, 1:25 am


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

Citizen

Registered: 07-2005
Province: Texas
Posts: 619
Karma: 11 (+12/-1)
ReplyQuote
Re: CSS Basic sidebar layout


Hmmm... Graphic Illusians emoticon

---

Advertise Boards On TRDConceptsDE
4/8/2007, 10:48 am Link to this post PM Pastor Rick 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: CSS Basic sidebar layout


I already have "Illusion" in one of the forum names, but I like it. emoticon Especially since one of my favorite things to do with graphics is superimpose one pic onto another. emoticon

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
4/9/2007, 1:03 am Link to this post PM Lesigner Girl Read Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 07-2005
Province: Texas
Posts: 619
Karma: 11 (+12/-1)
ReplyQuote
Re: CSS Basic sidebar layout


OK, how about Graphic Illusionists?

---

Advertise Boards On TRDConceptsDE
4/9/2007, 3:37 am Link to this post PM Pastor Rick 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: CSS Basic sidebar layout


I think Illusions is fine. emoticon

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
4/9/2007, 11:03 pm Link to this post PM Lesigner Girl Read Blog
 
The Wizard3 Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 06-2006
Province: Castle Belgalor
Posts: 22
Karma: 0 (+2/-2)
ReplyQuote
Re: CSS Basic sidebar layout


I am trying to get a basic CSS script for a sidebar in a forum I'm helping with.

I've seen the sidebar in Posters Heaven forum http://com3.runboard.com/bpostershaven

That is the height and width style I am looking, I've looked in source codes and cannot fathom it all out. I know how to insert a table using HTML but it sits on top of the forum and not on the side.

How would a CSS script look or start like for adding, let's say 3 boxes so I can add content to them ?

I've looked in W3Schools for a sidebar layout and can't find one. I am fairly new to CSS but it only took me 2 weeks to learn HTML coding. Once I get to see basic layout etc I learn fast by trying out new stuff

Can you or anyone help me with this please ?

Thanks

Wiz
4/29/2007, 5:26 pm Link to this post PM The Wizard3 Read Blog
 
The Wizard3 Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 06-2006
Province: Castle Belgalor
Posts: 22
Karma: 0 (+2/-2)
ReplyQuote
Re: CSS Basic sidebar layout


OK, I've managed to get a sidebar into a brand new forum, basically my test board.

I've added ALL the coding into the CSS script area, what I'm not sure on is I think maybe I should be entering some in the CSS area and some in the HTML area. I have some coding which is being displayed at the top of my board which I can find

Can you take a look >> http://com2.runboard.com/bwizbits
4/29/2007, 8:23 pm Link to this post PM The Wizard3 Read Blog
 


Add to this discussion

Jump to Page:  1  2  3 



You are not logged in (login)
Back To Top

This board's time is GMT.