PDA

View Full Version : Library Items / CSS


Jim_Shady
05-27-2005, 09:46 AM
Hi there,

Please see the webpate:

http://www.nottingham.ac.uk/clinical-oncol...ology/index.htm ('http://www.nottingham.ac.uk/clinical-oncology/MSc_Oncology/index.htm')

I'm developing it. It used to be completly text/tables based. I've now made the menu on the left using list-o-rama. It looks nice. I've saved it as a library item and then inserted it into most of the pages. The list sits inside a column of a table, the info on the right of the page is in the next column of the table.

However as you can see there is a big gap between the two bits of info? This isn't present in design view.

Any ideas please guys and gals?

I suppose I should convert it all to CSS really but I'm not quite good enough with it to do it. In CSS how do you have two DIV's that are next to each other rather than below each other?!

Sorry - lots of questions!

Jim Shady.

Jim_Shady
05-27-2005, 11:12 AM
I'm trying to get a bit more into CSS today....

So would someone mind explaining the below to me:

#menubar {
font-size: 85%;
background: #EAE39E;
text-decoration: none;
border: 1px solid #666666;
list-style: none;
padding-left: 0px;

The above code is from this page that GMCRONE did for all of us at here ('http://www.enorc.com/club/index.htm').

I don't understand how the positioning of the box is prescribed. From the code above should it just not appear on the far left of the page?

I think I'm being thick.

Shady.

domedia
05-27-2005, 12:47 PM
It will appear where you insert it, it will follow the normal flow of the document. In this case it's outputting within another block element, #sidebar, which is floatet to the left.#sidebar {
float: left;
width: 172px;
margin: 0 0 0 0;
padding: 20px;
font-size: 100%;
text-decoration: none;
list-style: none;
color: #000000;
}

Jim_Shady
05-27-2005, 01:37 PM
Thanks Domedia. I'm starting to get there.... playing around with things and trying stuff.....

Do you think that you could break this down for me in terms of the page above from GMCRONE? Tell me what each section of the CSS refers to and does?

#pagewrapper{} ? Thw white border?
#masthead {} The green bar along the top?
#menubar {} The bit with the links in?
#mainbox {} The pink box with all the text in?
#sidebar { float: left; width: 172px; } So this is the box that the menu box is inside? Why isn't it far left against the edge of the browser? What is placing it?

Cheers - Jim Shady.

gmcrone
05-30-2005, 03:37 AM
I have commented parts of the CSS style sheet for you.


*//This creates a box within the page using div id=pagewrapper to enclose/center all your content//
#pagewrapper{
margin: 0 0 0 0;
min-width: 720px;
border: 0px none;
background: #FAF0E6;
}

*//This creates your header div (div id=masthead), background graphic repeated horizontally only, padding is added to keep the text more or less centerd in the background//
#masthead {
background: url(headbgd.jpg) repeat-x;
border: 1px solid #000000;
font: italic bold normal large Georgia, "Times New Roman", Times, serif;
text-decoration: none;
padding-top: 10px;
padding-bottom: 10px;
}


*//This creates your navigation menu or list items (div id=menubar), list-style:none tells any list items to be flush left with no decoration on the list items, the padding-left moves the menu items 20 pixels in from the left//
#menubar {
font-size: 85%;
background: #EAE39E;
text-decoration: none;
border: 1px solid #666666;
list-style: none;
padding-left: 20px;
}

*// This creates another container box for your navigation, sidebar & main content area, mainly used to create the border around this area and to keep all columns equal length//
#mainbox {
border-right: 1px solid #666666;
border-left: 1px solid #666666;
border-bottom: 1px solid #666666;
font-size: 100%;
text-decoration: none;
background: repeat-y 212px 0px;
list-style: none;
}

*//This creates the left column inside the mainbox area where you house the navigation menubar area.
The float left makes this column keep to the left of the main content inside the mainbox div//
#sidebar {
float: left;
width: 172px;
margin: 0 0 0 0;
padding: 20px;
font-size: 100%;
text-decoration: none;
list-style: none;
color: #000000;
}

*// This creates your main content area inside the mainbox area//
#maincontent {
margin: 0 0 0 212px;
padding: 20px 30px;
font-size: .9em;
line-height: 1.5em;
}

*// This creates your footer at the bottom of the page, because it is outside the mainbox,
it always stays below that area and is fully across the bottom of your page.//
#footer {
padding: 16px 0 0 18px;
font-size: .7em;
background: #F1EDA0;
border: 1px solid #000000;
}

*// You basically have 4 areas to your page. First the pagewrapper which encloses all of your page keeping it centered.
Second the masthead div above all other areas.
Third the mainbox which encloses your navigation, left column and main content area. The left column is always the same width whereas the maincontent area expands & contracts with changes to the users browser page size.
And finally the fourth area which houses your footer division. It is placed outside the
mainbox div so that it stays at the bottom of the page.

All the rest of the CSS markup is just styling of text and links, etc.//


Mike...

Jim_Shady
05-30-2005, 04:25 PM
Dear GMCRONE,

Just to say - thank you very much!

A really nice explanation and has helped me loads in understanding how CSS works. I think that I can see how you build up a page now and I should be able to work on something myself.

Cheers - Shady

gmcrone
05-30-2005, 08:08 PM
Your welcome Shady.

Now lets see a template from ya....

Mike...

Jim_Shady
05-31-2005, 11:07 AM
Will do in a few weeks once site is built....!

Jim_Shady
06-06-2005, 07:28 PM
Hi Mike...

In the 'MastHead' section, or what I call 'Titlebar'... can you set a background colour as well as a background image? As the image that I want to place in that section will not go right accross the page? It will only be on the left? So how do I tell them rest of the section to be grey background?

At the moment....

#titlebar{
margin: 10 10 10 10;
border: 1px solid black;
background: url(Images/MGF_Main_Logo.png repeat-x);
}

Cheers - Shady.

domedia
06-06-2005, 07:41 PM
http://www.google.com/search?q=css+background+color ('http://www.google.com/search?q=css+background+color')

Jim_Shady
06-06-2005, 08:20 PM
Thanks Domedia, figured it now!

#titlebar{
margin: 10 10 10 10;
border: 1px solid black;
background:url(Images/MGF_Main_Logo.png) repeat-y #c0c0c0;
}

Any way of getting the image to centre inside the area though?

Thanks for the ongoing support.... really appreciated....!

Shady.

Jim_Shady
06-06-2005, 08:27 PM
Oops! figured it!

For anyone that was wondering....

#titlebar{
border: 1px solid black;
background-image: url(Images/MGF_Main_Logo.png);
background-repeat: no-repeat;
background-position: center;
background-color: #c0c0c0;
}

Shady