18 replies [Last post]
BobMane
Offline
Regular
Last seen: 11 years 39 weeks ago
Timezone: GMT-6
Joined: 2008-11-02
Posts: 24
Points: 4

I have a .psd image that I am basing my site design on (so any part of the image can be "separated" on to its own layer and thus > into the design separately)

I have previously only used tables to design sites so I'm a total newbie using CSS/div to design.

With the little I've learned about using CSS/div I know I have to use and position several div elements by using a stylesheet- and I have haphazardly made a start in the example you see:

Live Example: http://s205480013.onlinehome.us/KM_Test/

Beyond what you see here, I'm stuck.

How do I make this design a "working one" (meaning the main/white content area is able to expand and contract vertically)

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 5 years 23 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

You might like to read some

You might like to read some of the tutorials at Max Design. Other folks here recommend http://htmldog.com

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

BobMane
Offline
Regular
Last seen: 11 years 39 weeks ago
Timezone: GMT-6
Joined: 2008-11-02
Posts: 24
Points: 4

thanks, I have been reading

thanks, I have been reading and working through quite a few tutorials and will continue to do so.

problem i have with the tutorials is they are not design specific, thats why i posted here....trying to work on this articular design.

scope1000
Offline
Regular
Last seen: 14 years 4 days ago
Joined: 2008-10-30
Posts: 33
Points: 0

Hi Bob,

Hi Bob,

You're trying to run before you can walk. As suggested go through those tutorials at the link provided, Max Design. Once you have the hang of them its not hard to adapt them to suit any layout.

A tip: stay away from absolutely positioned . Thats not going to get you anywhere fast.

Good luck.

A few hours spent now, getting to know the basics, will save a lot of frustration later.

BobMane
Offline
Regular
Last seen: 11 years 39 weeks ago
Timezone: GMT-6
Joined: 2008-11-02
Posts: 24
Points: 4

right...im trying to do 1

right...im trying to do 1 site---which tutorial would be closest to my design goal?

i get the basics of css- Im having trouble seeing what technique would be a good approach for the design posted.

scope1000
Offline
Regular
Last seen: 14 years 4 days ago
Joined: 2008-10-30
Posts: 33
Points: 0

Hi Bob, something as simple

Hi Bob, something as simple as the structure below will get you going. Dont use height on elements, let the content determine the height.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing</title>
<style type="text/css">
body {
background-image: url(images/bg_sample.jpg);
background-repeat: no-repeat;
background-position: center top;
background-color: #000000;
}
#wrapper {
width: 780px;
margin: 125px auto;
border: 1px solid #000;
color: #fff;
}
#mainContent {
background-color: #fff;
color: #000;
}
</style>
 
</head>
<body>
<div id="wrapper">
<div id="header">Header</div>
<div id="navigation">Navigation</div>
<div id="mainContent">Main Content</div>
<div id="footer">Footer</div>
</div>
</body>
</html>

BobMane
Offline
Regular
Last seen: 11 years 39 weeks ago
Timezone: GMT-6
Joined: 2008-11-02
Posts: 24
Points: 4

expanding div?

"Dont use height on elements, let the content determine the height."

does that mean if i use something like an accordion panel inside a div, the div/content will expand the page/design vertically?

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 years 11 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

dude, get a book.

I have a few books on CSS with XHTML. These books take you though the learning process and act as great references. lynda.com has a great selection of books.

BobMane
Offline
Regular
Last seen: 11 years 39 weeks ago
Timezone: GMT-6
Joined: 2008-11-02
Posts: 24
Points: 4

CupidsToejam wrote:I have a

CupidsToejam wrote:

I have a few books on CSS with XHTML. These books take you though the learning process and act as great references. lynda.com has a great selection of books.

tell me about your book

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 years 11 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

this was my first i think.

<a href="http://www.lynda.com/store/ProductInfo.aspx?productid=553" rel="nofollow">http://www.lynda.com/store/ProductInfo.aspx?productid=553</a>

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 5 years 23 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Bob I don't know the book

Bob I don't know the book Cupid is referring to, however...

Bob wrote:

problem i have with the tutorials is they are not design specific, thats why i posted here....trying to work on this articular design.

Basically any design is header - one, two or three columns - footer and learning to float. Get those under your belt at Max Design and work from there. As Scope said, walk before you can run but learn to reapply what you've learned in different settings. He has also given you the basic layout.

Anything you need to know about the basics can be found on the Internet (and probably more up to date) and folks here will point you in the right direction to trusted sites.

You just need to do the homework and try, try, try again Smile
What is the basic problem at this point?

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

BobMane
Offline
Regular
Last seen: 11 years 39 weeks ago
Timezone: GMT-6
Joined: 2008-11-02
Posts: 24
Points: 4

CupidsToejam

CupidsToejam wrote:

<a href="http://www.lynda.com/store/ProductInfo.aspx?productid=553" rel="nofollow">http://www.lynda.com/store/ProductInfo.aspx?productid=553</a>

Yes, but in your own word my friend...Im fascinated.

BobMane
Offline
Regular
Last seen: 11 years 39 weeks ago
Timezone: GMT-6
Joined: 2008-11-02
Posts: 24
Points: 4

Smee wrote:Bob I don't know

Smee wrote:

Bob I don't know the book Cupid is referring to, however...

Bob wrote:

problem i have with the tutorials is they are not design specific, thats why i posted here....trying to work on this articular design.

Basically any design is header - one, two or three columns - footer and learning to float. Get those under your belt at Max Design and work from there. As Scope said, walk before you can run but learn to reapply what you've learned in different settings. He has also given you the basic layout.

Anything you need to know about the basics can be found on the Internet (and probably more up to date) and folks here will point you in the right direction to trusted sites.

You just need to do the homework and try, try, try again Smile
What is the basic problem at this point?

thanks for the reply, i get what you are saying. the follow up questions was simply -do divs expand vertically if an elevator/accordion panel is used in them- thereby making the design/page vertically liquid. (only reason I have to ask is I dont have the panels to test yet- Im trying to decide if I want to buy the elevator/accordion panels (from P7) and use them in my design.

and yes, scope1000s help was greatly appreciated.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 years 11 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Bob tha man

Sorry Bob, I dont have time to go into dept about books I have, but I do feel you need one. The accordion nav will expand the container div if the div doesnt have any height attributes. I'm not familiar with P7.

BobMane
Offline
Regular
Last seen: 11 years 39 weeks ago
Timezone: GMT-6
Joined: 2008-11-02
Posts: 24
Points: 4

gotcha, thanks much for that

gotcha, thanks much for that tip...

scope1000
Offline
Regular
Last seen: 14 years 4 days ago
Joined: 2008-10-30
Posts: 33
Points: 0

Yes elevator/accordion

Yes elevator/accordion panels from P7 will expand. They have their own forum so you might want to ask some more pointed questions about the product there. I'm guessing you have Dreamweaver because that product is an extention for it. Not sure which version you have but CS3 comes with its own sprite accordion menu.

BobMane
Offline
Regular
Last seen: 11 years 39 weeks ago
Timezone: GMT-6
Joined: 2008-11-02
Posts: 24
Points: 4

good deal ,thanks....I have

good deal ,thanks....I have played with the CS3 sprite accordion menu but was looking at ready made options as possible alternatives.

Turns out the P7 stuff doesn't handle video well (without hacking it anyway), so Ive been reviewing the dozens of various players (modal or embedded)...actually http://beta.flowplayer.org looks kind of promising for video...jquery etc...ah...but i digress

clean CSS > then screw it up with JavaScript? oh well....

BobMane
Offline
Regular
Last seen: 11 years 39 weeks ago
Timezone: GMT-6
Joined: 2008-11-02
Posts: 24
Points: 4

a bit of tweaking

OK, I did a bit of tweaking but still need to get the footer into this design.

The current incarnation is here: http://s205480013.onlinehome.us/KM_Test/

and I attached an image that has the intended design.

AttachmentSize
designR2_3x_tall.jpg 211.63 KB
BobMane
Offline
Regular
Last seen: 11 years 39 weeks ago
Timezone: GMT-6
Joined: 2008-11-02
Posts: 24
Points: 4

any tips on getting a footer

any tips on getting a footer on this design?