Multi-column Expandable Layouts

Partners:

Threaded Mode | Linear Mode

Multi-column Expandable Layouts

Author Message

Sherrie

Beginner

Group: Members
Posts: 5
Joined: Dec 2007
Status: Offline
Reputation: 0
SD$: 5

Post: #1

Multi-column Expandable Layouts

I found this article to be just what I was looking for since I have not been able to get my two columns to align. However, now I cannot get the menu in the right hand column to stay at the top of the page. I've been working at trying to rectify this for 3 days now. What on earth am I doing wrong? I appreciate the help!

Here's my website: http://www.moonwomenspirituality.com

12-20-2007 08:08 PM

Brian

Member

Group: Administrators
Posts: 289
Joined: Feb 2006
Status: Offline
Reputation: 0
SD$: 328

Post: #2

RE: Multi-column Expandable Layouts

I will be able to take a closer look at this in a couple of days when I have a little more time.

However, to get you started. First of all it appears as though your html code might not be properly formed. For instance, it looks like you start more <div> than you actually end. Perhaps some of the starting tags need to be removed.

This might be of some help to you: http://validator.w3.org/

Sorry I can't be of more help right now, but I will look at it hopefully in 3-4 days to see what i might be able to find.

Brian

12-27-2007 11:29 AM

Sherrie

Beginner

Group: Members
Posts: 5
Joined: Dec 2007
Status: Offline
Reputation: 0
SD$: 5

Post: #3

RE: Multi-column Expandable Layouts

Brian Wrote:

Thanks. In our course it was suggested that we use TIDY prior to Validator? To me this seems like a duplication of services, but I don't know enough to evaluate it. TIDY has reconfigured their website and I haven't figured out how to use it yet!!

I'll be exploring this in depth next week. So any insights you have I would be grateful for!

12-28-2007 08:16 PM

Brian

Member

Group: Administrators
Posts: 289
Joined: Feb 2006
Status: Offline
Reputation: 0
SD$: 328

Post: #4

RE: Multi-column Expandable Layouts

I haven't ever used TIDY, or heard of it, but I will definitely look into it now, as looking at it, it seems like it could be a great resource.

As for if it is a duplication of services, I am not sure. It seems like TIDY might clean up your code a little bit, and then the validator will just be an extra check to make sure that there are no errors that need fixing? Although I am not 100% sure on this.

Also I started looking at your code and playing around with it, but I haven't found what exactly is wrong yet. One thing though, is it seems as if your code might be a little on the messy side, with css code in both the html file and in the css file. That makes it harder to find where the issue is. So maybe look into putting all of the code into the css file.

Another thing that sometimes helps with cleaning up code a ton, especially non-working code. Is simply save a copy of what you have now somewhere.

And then start almost completely over. First start with the layout you are trying to achieve, with simply content saying something like 'this is where the main content goes' and 'this is the sidebar', and nothing that adds any style to the content. Once you have boxes that are positioned where you would like them, with the borders that you would like and background colors. Add the images, such as background images, and images like the ones right below the header.
Then add the content to your sidebar. Once you add the content to the sidebar, adjust the width of the sidebar, and the margin of the left hand content box so that it still fits.
Once you have done that, add the style information for the sidebar. And make sure the page still works.
Then add the content to your header, and the style information that goes with that. And after this, again check to make sure that the page still works.
Then add the content to your footer, and check that the page still works.
Then finally add the content to the main part of the page, and the style information.

By following an order like that, starting with the layout first, and then building the page one section of the layout at a time, it'll be easier to get the layout of the page correct, and keep it working as features of the page are added. This is just a suggestion that I think might help a lot, and is something I will do when I run into trouble with a page.

Remember though, save your work in chunks, if you have something that works...save a backup copy somewhere, before going on to add the next thing.

If you do take this suggestion, and you run into trouble with any step along the way just post, with the before and after code (if possible, or at least what you added), and hopefully I can help.

Otherwise, I will keep looking at your code to see if I can find something here.

Brian

12-31-2007 01:32 PM

TVDinner

Gold Junior Member

Group: Members
Posts: 131
Joined: Jun 2007
Status: Offline
Reputation: 0
SD$: 128

Post: #5

RE: Multi-column Expandable Layouts

Could you post the code of your style sheet? It looks like you're using CSS and XHTML so the problem lies in the style sheet.

POLITICAL DISGUST - http://www.politicaldisgust.com
TV and DINNER - http://www.TVandDINNER.com/forums

01-21-2008 10:04 AM

Brian

Member

Group: Administrators
Posts: 289
Joined: Feb 2006
Status: Offline
Reputation: 0
SD$: 328

Post: #6

RE: Multi-column Expandable Layouts

I pulled the code from the stylesheet of the website, however there is also a ton of code that appears to be in the html code itself overridding some of this.

Code:

/* Table of Contents: each section in alphabetical order

    1. Typography:  body text and page layout

    2. Header Layout

    3. Main Content Column layout

    4. Right Sidebar Column Layout

    5. Footer Layout

*/

/*  Constant Colors to use for this website 

cream    #faf2d1  or #f7f0d4

pink inside boxes #ffb7ee

purple-blue Dark (headings, border) #b266ff 

purple Dark  #e2d6fs 

purple Medium (header2) # ccadeb

purple Light  (background, top navigation tabs) #e1d1fa 

off-white off-white background #fafafa  

dark grey #333333  text 

yellow light #ffffdd 

*/

/* Page header put outside large container */

 #header {background-image: url("pix/purpleflower2.jpg");

    background-repeat: repeat;

    border: thin solid #c299ff;

    height: 150px;

    margin: 1em;

    padding: 1em 1em;

    width: 95%;    

}

/* Class position for expandable left column 1-1CSS page & column size*/

container {

position: relative;

width: 90%;

}

.centerbar {

margin-right: 210px;

margin-left: 0px;

float:left

width: 75%

}

.rightbar{

position: absolute;

top: 240px;

right: 0px;

width: 175px;

}

#container {

  margin-right: 5%;

  margin-left: 5%;

}

/* Style for main content column content body text and page background */ 

#main { background-color: ##fafafa;

    border: thin solid #c299ff; 

    color: #333333;

    float: left;    

    font-family: 'Comic Sans MS', Arial Rounded MT Bold;

    font-size: large;

    line-height: 1.20em;

    padding: 1em 1em;

    text-align:justify; 

    width: 70%;

}

/* Style for rightsidebar column */

#rightsidebar {

    background-color:#e1d1fa;

    border: thin solid #c299ff;      

        margin-left: 75%;

    padding: 3px;

    text-align: left;

}

/* Page footer put outside large container. see L9 pg 17 re clear both; see tutorial on float info */

#footer {background-image: url("pix/purpleflower2.jpg");

    background-repeat: repeat;        

        border: thin solid #c299ff;

    clear: both;

        width: 100%;

}

/* Headings general - all headings are in comic sans and centered*/

h1,h2,h3,h4 {font-family:"comic sans ms", verdana}

h1,h2,h3,h4 {font-weight:bold}

h1,h2,h3,h4 {text-align: center}

h2,h3,h4 {font-size: x-large}

/* Level-1 Headings */

h1{

    color: #995cd6;

    font-size: xx-large;

}

/* Level-2 Headings */

h2{

    color: #c299ff;    

}

/* Level-3 Headings */

h3{

    color: #b266ff;

}

/* Blockquote */

blockquote{

    color: #333333;

    font-family: verdana, 'comic sans ms';

    font-size: large;

    text-align: justify;

}

/* Blockquote with creamy yellow background */

blockquote.quote{

    background-color: #ffffdd

    font-family: verdana, 'comic sans ms';

    font-size: large;

    text-align: justify;

}

/* box border thin solid #c299ff unless specified */

.box{border:1px#c299ff}

.box{margin:.5em 1em}

/* Div class for ordering charts or counselling L7 pg 29*/

div.chart{

    background-color: #ffb7ee;

    border-style: outset    

    font-family: Comic Sans MS, verdana;

    font-size: large;

    padding: 20px;

    text-align: justify;

}

/* Float image to left of paragraph */

img.floatLeft{

   float: left;

   margin-right: 5px;

}

/* Float image to right of paragraph */

img.floatRight{

   float: right;

}

/* Center image between margins */

div.center{

   width: 100%;

   text-align: center

}

/*Joy Moments of Joy box style for */ 

#joy{     background-image: url("pix/bkg/purpleflower2.jpg");

    background-repeat: repeat;

    border: thick solid #c299ff;

    font-family: ‘comic sans ms’,arial;

    font-color: #995cd6;        

    font-size: x-large;

    font-weight: bold;

    margin: .5em;

    padding: 1em;

    text-align: justify; 

    width: 100%; 

    /* total width is 37em */  

}

/* links see CSS sizing your text pg 16 Try these!!!  */

a:link {color: #696; text-decoration: none; background-color: transparent } a:visited { color: #699; text-decoration: none; background-color: transparent } a:hover { color: #c93; text-decoration: underline; background-color: transparent } a:active { color: #900; text-decoration: underline; background-color: transparent }

/* padding see web building:CSS Style Rules page 7 for changes */

p {padding: 1em 1em;} 

/* Style for main content birth chart */ 

#birthchart{ 

    background-color:#ffb7ee;

    margin: .5em;

    padding: 1em;

    text-align: justify; 

    width: 34em; 

    /* total width is 37em */  

}

/* Style for main content horary chart */ 

#horarychart{ 

    background-color:#ffb7ee;

    margin: .5em;

    padding: 1em;

    text-align: justify; 

    width: 34em; 

    /* total width is 37em */  

}

/* Style for main content synastry chart */ 

#synastrychart{ 

    background-color:#ffb7ee;

    margin: .5em;

    padding: 1em;

    text-align: justify; 

    width: 34em; 

    /* total width is 37em */  

}

Brian

01-21-2008 10:30 AM

« Next Oldest | Next Newest »

View a Printable Version
Send this Thread to a Friend
Subscribe to this Thread | Add Thread to Favorites