12 replies [Last post]
jowy
jowy's picture
Offline
Regular
Last seen: 13 years 29 weeks ago
Joined: 2009-06-28
Posts: 11
Points: 0

Hey guys, I am just as new to CSS and I am to this forum. I am a pretty experienced layout designer, and I can make a killer website using tables. But I am starting to fall behind as I am not using any CSS.

So anyway, I was just wondering if someone here could give me some help.

If I am asking for too much, just try to point me in the correct direction on the internet, because I am unable to find much resource on template design and CSS from scratch.

The website I am trying to make looks as follows:

|                                                                |
|  link - link - link                #/$ Cart Items [checkout]   |
|________________________________________________________________|
 
|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯|
|                                                                |
|                                                                |
| banner                                                         |
|                                                                |
|                                                                |
|________________________________________________________________|
 
|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯|
| HOME - INFO - CONTACT - PRODUCTS (each is an image)            |
|________________________________________________________________|
|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯|¯¯¯¯¯¯¯¯¯|
| Content                                              |cart itms|
|                                                      |---------|
|                                                      |  news   |
|______________________________________________________|_________|
 
|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯|
| Footer                                                         |
|                                                                |

If someone could please help me with the very basic css div layout code.

Thanks!

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 49 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Really you have to start by

Really you have to start by forgetting everything you now "know" about html. To make html and CSS work together you have to change your entire approach to coding, especially to html markup.

I would start with the html tutorials at HTML Dog, Don't start with the CSS tutorials until you've gone through the html ones. To succeed with CSS you have to take a whole new approach to writing html markup, known generally as "semantic" html.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

jowy
jowy's picture
Offline
Regular
Last seen: 13 years 29 weeks ago
Joined: 2009-06-28
Posts: 11
Points: 0

Very nice! Thank you. I will

Very nice! Thank you. I will begin those tutorials immediately.

I wish google could have provided that haha

jowy
jowy's picture
Offline
Regular
Last seen: 13 years 29 weeks ago
Joined: 2009-06-28
Posts: 11
Points: 0

Ok, I think I have finally

Ok, I think I have finally grasped the idea of how divs work with CSS.

Anyway, running in to an issue!

I am trying to vertical align my top links...it is working fine, however the vertical align is taking in to account the margin of the top navigation as well, this is causing the alignment to be off. my CSS is as follows

#wrap
{
	margin-left: auto;
	margin-right: auto;
	width: 700px;
	height: 100%;
}
 
#topthing
{
	height: 48px;
	background: #4a4f72;
	margin-bottom: 8px;
}
 
#headerlinks
{
	float: left;
	margin-left: 20px;
}
 
#minicart
{
	float: right;
	margin-right: 20px;
}
 
.topstuff
{
	vertical-align: middle;
}

EDIT:

I guess what I could do is set my top and bottom margin on the banner...that should work!

jowy
jowy's picture
Offline
Regular
Last seen: 13 years 29 weeks ago
Joined: 2009-06-28
Posts: 11
Points: 0

Ok, now another issue since

Ok, now another issue since I have fixed the previous one. This one is bugging me and I can not find any answers!

Take a look at this:

http://impulse100.net/pms/index2.php

The a, b, c, d nav buttons need to be aligned at the bottom of the nav_container div. And they also need to be auto margin across the nav_container div.

I feel like I am getting close!

Here is my CSS:
http://impulse100.net/pms/css/style.css

PS: Any other tips from viewing the code would be appreciated!
PSS: Anyone who is curious, here is my idea for the website: http://impulse100.net/pms/proto_1.jpg
(it has been cleaned up a bit in the PSD since I have made that jpg.)

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 28 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Before we work on your

Before we work on your issues, let's get a few things fixed.

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fimpulse100.net%2Fpms%2Findex2.php

You need to be using a Strict doctype, not frameset or transitional.
Also, the doctype should be the VERY first thing in your HTML.

Get that fixed and then rerun that validator and see if you pass.
If you don't try to fix the rest of the errors or feel free to come back and ask us.

CSS is reliant on valid HTML. Without such, it's like building a house without a solid foundation.

Good job so far though!!
:thumbsup:

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

jowy
jowy's picture
Offline
Regular
Last seen: 13 years 29 weeks ago
Joined: 2009-06-28
Posts: 11
Points: 0

Finally valid! Now...To fix

Finally valid!
Now...To fix my css problems >:)

EDIT: this is proving to be very difficult. ugh! Sad

jowy
jowy's picture
Offline
Regular
Last seen: 13 years 29 weeks ago
Joined: 2009-06-28
Posts: 11
Points: 0

someone halp! I am unable to

someone halp! I am unable to figure it out Sad

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 28 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

jowy wrote:someone halp! I

jowy wrote:

someone halp! I am unable to figure it out Sad

Gotta give us more than a couple of hours. We all work full time jobs and check this site in our free time. We'll be along to help shortly...

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 28 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

jowy wrote:Finally

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

jowy
jowy's picture
Offline
Regular
Last seen: 13 years 29 weeks ago
Joined: 2009-06-28
Posts: 11
Points: 0

There, all better. I am

There, all better. I am currently playing around with it, and its breaking and fixing as I go...

My current problems that I am unable to fix:

    - Unable to use margin (left/right) :auto for the nav buttons.
    - Unable to stretch the height of the content_container to 100%.
    - The content_container is clipping off the background image.
    - The content_container does not show the background color.
    - The footer is not showing any of its style whatsoever.

Once I get these problems fixed, we'll be in business! Smile

BTW: This site is being made for free for a friend of mine, reason being: I am learning quite a bit of PHP and CSS doing this.

jowy
jowy's picture
Offline
Regular
Last seen: 13 years 29 weeks ago
Joined: 2009-06-28
Posts: 11
Points: 0

Getting closer if anyone

Getting closer if anyone wants to take a peak.

VERY close to done!

Just need to get the vertical stretch working and the content divs worked out.

jowy
jowy's picture
Offline
Regular
Last seen: 13 years 29 weeks ago
Joined: 2009-06-28
Posts: 11
Points: 0

Hey! I figured almost all of

Hey! I figured almost all of it out on my own! Could someone please check the website source and css source and verify the div/p/span and css structure is alright? Smile

THANKS!

http://impulse100.net/pms/index2.php