22 replies [Last post]
achild
Offline
Regular
NM
Last seen: 12 years 40 weeks ago
NM
Joined: 2007-02-08
Posts: 18
Points: 0

Hey all,
Here is what I have created so far:
pure.css
body {
font-family: Arial,Helvetica,sans-serif;
font-size: small;
font-style: normal;
font-weight:bold;
background-color: #3f4c6b;
color: #3C3C3D;
margin-left: 250px;
}
table {
margin-left: 14px;
padding: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
td {
background-color: #B1B5BE;
border: solid;
border-width: 2px;
border-color: #BACDFB;
}
td.noborder {
border: none;
background-color: #B1B5BE;
}
td.samecolor {
border: solid;
border-width: 2px;
border-color: #B1B5BE;
}

default.html

<?xml version="1.0" encoding="iso-8859-1"?>


default.html

Column 1Main Column
ContentMain Body

I am trying to get the page to look like this but having problems with the Main body cell it is 2 px 2 long on each side. I have included a gif of what I am shooting for.

AttachmentSize
interface3.gif19.61 KB
thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 13 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

First thing's first, remove

First thing's first, remove the XML prolog, it's throwing IE into Quirks Mode.

Verschwindende wrote:
  • CSS doesn't make pies

achild
Offline
Regular
NM
Last seen: 12 years 40 weeks ago
NM
Joined: 2007-02-08
Posts: 18
Points: 0

Ok

Ok removed.

default.html


default.html

Column 1Main Column
ContentMain Body

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 5 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Don't remove the doctype,

Don't remove the doctype, just the XML prologue.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

achild
Offline
Regular
NM
Last seen: 12 years 40 weeks ago
NM
Joined: 2007-02-08
Posts: 18
Points: 0

Add the doctype back in

Add the doctype back in however I am still not seeing how to get my TD to lose the 2px border?

Also does anyone have any suggestions on a menu system?

I would like to get some opinions on the design itself?

Thanks
Amer

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

May I just enquire , before

May I just enquire , before you get too involved in this layout, why you are using tables ?

We're seeing an increase in table layouts when the aim is supposed to be to finally rid the world of them especially on a CSS orientated forum such as this.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

achild
Offline
Regular
NM
Last seen: 12 years 40 weeks ago
NM
Joined: 2007-02-08
Posts: 18
Points: 0

Mostly because I don't know

Mostly because I don't know what else to use. That is why I am asking for help. If you can suggest a better way by all means direct me to where I can learn. Like I said I used to do a lot in HTML years ago, so i guess my use of tables is dating me a bit. Again if you can direct me I would be grateful.

Thanks
Amer

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 13 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Could you post an image of

Could you post an image of what you want to achieve, and maybe a little description of it? (eg if anything expands with the window or has dynamic/fluid dimensions)

Then we can advise on a better way to construct it.

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Image is included on the

Image is included on the first post TPH, doesn't look that complicated a layout.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

achild
Offline
Regular
NM
Last seen: 12 years 40 weeks ago
NM
Joined: 2007-02-08
Posts: 18
Points: 0

I would like to create a 2

I would like to create a 2 column layout, with a footer and dynamic menus like on this site http://meyerweb.com/eric/css/edge/menus/demo.html. I am attaching a layout I did in Photoshop.

AttachmentSize
interface3.gif 19.61 KB
thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 13 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Hugo wrote:Image is included

Hugo wrote:
Image is included on the first post TPH, doesn't look that complicated a layout.

My mistake Laughing out loud

I'd code it with:

for the title

maybe for the title text

    for the navigation list

Main Content

etc

Verschwindende wrote:
  • CSS doesn't make pies

achild
Offline
Regular
NM
Last seen: 12 years 40 weeks ago
NM
Joined: 2007-02-08
Posts: 18
Points: 0

So in the style sheet I will

So in the style sheet I will use the margins utilizing pixels to define placement and such?

achild
Offline
Regular
NM
Last seen: 12 years 40 weeks ago
NM
Joined: 2007-02-08
Posts: 18
Points: 0

Here is what I think you I

Here is what I think you I should be doing to create the sidebar:

body {
font-family: Arial,Helvetica,sans-serif;
font-size: small;
font-style: normal;
font-weight:bold;
background-color: #3f4c6b;
color: #3C3C3D;
margin-left: 250px;
}
h1 {
border: solid;
background-color: #B1B5BE;
border-color: #BACDFB;
border-width: 2px;
}

div.sidebar {
background-color: #B1B5BE;
border: solid;
border-color: #BACDFB;
border-width: 2px;
width: 250px;
}
However I can not see the div.sidebar in the page.

Amer

achild
Offline
Regular
NM
Last seen: 12 years 40 weeks ago
NM
Joined: 2007-02-08
Posts: 18
Points: 0

Here is where I am stuck

Here is where I am stuck now.

Can tell me how to get my columns to even up.

default.html


default.html

Purenrgy.com

maybe for the title text

    for the navigation list

Main Content

etc

Column 1Main Column
ContentMain Body -->

pure1.css

body {
font-family: Arial,Helvetica,sans-serif;
font-size: small;
font-style: normal;
font-weight:bold;
background-color: #3f4c6b;
color: #3C3C3D;
margin-left: 250px;
}
h1 {
border: solid;
background-color: #B1B5BE;
border-color: #BACDFB;
border-width: 2px;
}
h3.col1 {
border: solid;
border-color: #BACDFB;
background-color: #B1B5BE;
border-width: 2px;
}

#sidebar {
background-color: #B1B5BE;
width: 200px;
}
#content
{
margin-left: 220px;
border: solid;
border-color: #BACDFB;
background-color: #B1B5BE;
border-width: 2px;
}

Thanks
Amer

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You'll need to apply

You'll need to apply float:left to #sidebar then it should sit to the left alongside #content.

btw rules such as your border ones can be written in shorthand to conserve size:

border: solid #BACDFB 2px;

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 13 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

You also don't need to give

You also don't need to give your H

Verschwindende wrote:
  • CSS doesn't make pies

achild
Offline
Regular
NM
Last seen: 12 years 40 weeks ago
NM
Joined: 2007-02-08
Posts: 18
Points: 0

Thank you all. So by adding

Thank you all. So by adding the h3 to sidebar it only affects the h3 tag within sidebar correct?

achild
Offline
Regular
NM
Last seen: 12 years 40 weeks ago
NM
Joined: 2007-02-08
Posts: 18
Points: 0

Thank you. That fixed it.

Thank you. That fixed it.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 13 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

How are you getting on with

How are you getting on with the rest of it?

Verschwindende wrote:
  • CSS doesn't make pies

achild
Offline
Regular
NM
Last seen: 12 years 40 weeks ago
NM
Joined: 2007-02-08
Posts: 18
Points: 0

I used one of the site you

I used one of the site you referred to in another post for the menu. I am trying to figure out how to make vertical instead of horizontal see code below. Once I get them vertical I will try to code the border, bg, and dividers (once I figure those out) LOL.

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5
ul.list_one { list-style-type: none; /* remove the bullets */ margin:0; /* remove the automatic margin that some browsers use for the text-indent. */ padding:0; /* remove the automatic padding that other browsers use for the text-indent. */ }

Amer

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 13 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Vertical as in going down

Vertical as in going down the page one after the other? By default they should?

Verschwindende wrote:
  • CSS doesn't make pies

achild
Offline
Regular
NM
Last seen: 12 years 40 weeks ago
NM
Joined: 2007-02-08
Posts: 18
Points: 0

Sorry my stupidity I mean

Sorry my stupidity I mean horizontal now vertical....

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 13 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

http://cssplay.co.uk/menus/in

Verschwindende wrote:
  • CSS doesn't make pies