SourceDevelop
  • Home
  • Learn A Language
  • Articles & Tutorials
  • Forums
  • Other Resources
Visual Basic HTML/CSS PHP/MySQL
PHP MySQL More Resources
index Forums Index Search Search Member List Member List Help Help

  • Search
  • Member List
  • Calendar
  • Help

Welcome Guest ( Login | Register )


Latest News: We share our revenue with our members, click here for more details.
SourceDevelop > Programming and Web Design > HTMS/CSS/Javascript/PHP/MySQL > Multi-column Expandable Layouts

Partners:
TV & Dinner MorningStarr RustyWalrus Josechukkiri

Post Reply  Post Thread 
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
Find all posts by this user Quote this message in a reply
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
Find all posts by this user Quote this message in a reply
Sherrie


Beginner
*

Group: Members
Posts: 5
Joined: Dec 2007
Status: Offline
Reputation: 0
SD$: 5
Post: #3
RE: Multi-column Expandable Layouts

Brian Wrote:
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.


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
Find all posts by this user Quote this message in a reply
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
Find all posts by this user Quote this message in a reply
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
Visit this user's website Find all posts by this user Quote this message in a reply
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
Find all posts by this user Quote this message in a reply
« Next Oldest | Next Newest »
Post Reply  Post Thread 

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

Forum Jump:

Contact Us | SourceDevelop | Return to Top | Return to Content | Lite (Archive) Mode | RSS Syndication

Powered By MyBB
Copyright © 2002-2009 MyBB Group