5 replies [Last post]
Culverin
Offline
newbie
Last seen: 17 years 20 weeks ago
Timezone: GMT-8
Joined: 2004-01-30
Posts: 4
Points: 0

i think that this is about the most basic question you can get

i want my site to split left and right.
left side - menu
right side content

this is what my page looks like now
http://culverin.creationsnet.com/

i'm currently using a frames based coding
and i heard that it could be simplified further? (as i have to change both my index.html AND my menu.html to change a link in my menu section)

i want to end up with just one page.
kinda like a table, but with the menu as the starting point.
so that content is just a pure simple html page.

and the menu will have all the references and page structure (along with my css page).
so that changes can be fairly swift and implemented with little headache.

yeah, i know that i'm missing something big here.
but the most basic php-based sites have the layout that i want.

a thanks all ahead of time.

- ron

mslibby
mslibby's picture
Offline
newbie
Last seen: 17 years 15 weeks ago
Timezone: GMT-8
Joined: 2004-03-08
Posts: 5
Points: 0

2 Column Site

Did you try the CSS Layout Generator? You can put in the parameters for the site layout you want and have the css and html pages auto-generated for you. It's a good place to start!

http://www.csscreator.com/version2/pagelayout.php

Culverin
Offline
newbie
Last seen: 17 years 20 weeks ago
Timezone: GMT-8
Joined: 2004-01-30
Posts: 4
Points: 0

2 Column Site

wow thanks.
that's really neat, but i'm really having problems deciphering it.

body           {
                 font-size: 10px;
                 color: #E6E6E6; 
                 background-color: #808080; 
                 font-family: verdana; 
                 margin:0; 
                 padding:5; 
                 scrollbar-face-color:#6699CC; 
                 scrollbar-arrow-color:''; 
                 scrollbar-track-color:black; 
                 scrollbar-shadow-color:black; 
                 scrollbar-highlight-color:black; 
                 scrollbar-3dlight-color:''; 
                 scrollbar-darkshadow-Color:black; 
               }





 
#pagewidth{ 
 width:100%; 
  min-width: 500px; 
  
} 
 
#leftcol{
 width:80px; 
 float:left; 
 position:relative; 
 margin-left:-80px; 
 margin-right:1px; 
 }
 
#outer{ 
 border:solid fuchsia 0px; 
  /*/*/ border-left-width: 80px ;  /* left column width. NN4 hack to hide borders */ 
border-left-color: #000000;   /* left column colour */ 
border-left-style: solid; 
background-color: #000000; /* center column colour */ 
width: auto; 
 } 
 

 
#maincol{ 
 float: left; 
 width: 100%; 
 position: relative; 
 margin: 0 -8px 0 -2px; 
 }
 
#outer>#inner { border-bottom: 1px solid #160000;  }
 
.clr{clear:both;}
 
.content{padding:5px;} /*padding for content */ 
 


 
 /*printer styles*/ 
@media print{ 
/*hide the left column when printing*/
#leftcol{display:none;} 
#outer{border-left:0;} 
}

what do the # <--- do?

what i've generated is a 2 column thing.
now i'm still not sure how i link it.
and where does my menu go?
where do i stick the link in for my news page.

i'm really confused :oops:

syrupcore
Offline
Enthusiast
Last seen: 12 years 19 weeks ago
Timezone: GMT-8
Joined: 2004-03-10
Posts: 108
Points: 0

2 Column Site

I'm pretty new at the stuff so take my advice with a shot of whiskey.

I think the # creates what's called a Class. You place the classes in side div tags. like this:

<body>
<div id="leftcol">

put all your menu stuff here

</div>
</body>

I just went through a great tutorial last night that helped spell some stuff out for me. it takes a coupla hours to do it well but I finally have a (mostly) working css layout.

http://www.maxdesign.com.au/presentation/process/

good luck
will

syrupcore
Offline
Enthusiast
Last seen: 12 years 19 weeks ago
Timezone: GMT-8
Joined: 2004-03-10
Posts: 108
Points: 0

2 Column Site

this might be useful as well.

http://nemesis1.f2o.org/articles

the heading is:

How do you make a two column CSS layout with color in either column that spreads to the full height of the page?

This article will show you how to build a basic two column layout that has:

* Liquid width (based on the browser window size or viewport)
* Full width header and footer
* Color in either or both columns
* Color that stretches the full height of the columns - no matter which of them is longer

/*hope this helps - Will*/

min
Offline
newbie
Last seen: 17 years 18 weeks ago
Joined: 2004-02-14
Posts: 3
Points: 0

quick clarification on #

You've probably figured it out by now, but ...

Styles that are defined with # apply to id's.
#style1{}

Styles that are defined with . apply to class.
.style2{}

Application example:
<div id="rule"></div>
<div class="rule2"></div>

Hope that helps.