PDA

View Full Version : Basic question - But I'm new


GSPDC
10-10-2010, 07:33 PM
Hi guys

I'm sort of new to dreamweaver and I'm struggling with a few basic things. If you look at my main page at ( www.gspdesignconsultancy.co.uk ) you can see Ive the basic information I am after. But what I would really like is the header and the footer to stay static and only the middle section to be able to scrolled up and down.

Can someone help me?

Gareth

gentleone
10-10-2010, 07:51 PM
Here is an example for what you want, but you'll have to dive into the code to see how it's done.
http://www.cssplay.co.uk/layouts/fixit.html

GSPDC
10-10-2010, 07:56 PM
Here is an example for what you want, but you'll have to dive into the code to see how it's done.
http://www.cssplay.co.uk/layouts/fixit.html


thats just what I'm looking for,

thanks for the help.

gentleone
10-10-2010, 08:06 PM
thats just what I'm looking for,

thanks for the help.

You're welcome, but better to thank the old Stu :)

http://www.cssplay.co.uk/graphic/stu.jpg

GSPDC
10-10-2010, 08:14 PM
Yer its great what he has done there BUT, Ive just dropped some of the code in my page and nothing happens to the design.

header {
position:absolute;
top:0;
left:0;
width:100%;
height:116px;
overflow:auto;
background:#53829d;
border-bottom:4px solid #73a2bd;
}
* html #header {height:120px;}

Thats what I put in

Gareth

gentleone
10-10-2010, 08:29 PM
You need a lot more. In the source you see the following bit with all the CSS rules. Copy that and you have the CSS that does the magic.

<head>
<style type="text/css">
/* the bit that does the work */

al these CSS rules

/* end of bit that does the work */
</style>
</head>
And this is your HTML structure

<body>

<div id="container">

in here is the scrolling content

</div> <!-- end of container -->

<div id="header">

fixed header

</div> <!-- end of header -->

<div id="footer">

fixed footer

</div> <!-- end of footer -->

</body>

GSPDC
10-10-2010, 08:49 PM
You need a lot more. In the source you see the following bit with all the CSS rules. Copy that and you have the CSS that does the magic.

<head>
<style type="text/css">
/* the bit that does the work */

al these CSS rules

/* end of bit that does the work */
</style>
</head>
And this is your HTML structure

<body>

<div id="container">

in here is the scrolling content

</div> <!-- end of container -->

<div id="header">

fixed header

</div> <!-- end of header -->

<div id="footer">

fixed footer

</div> <!-- end of footer -->

</body>


Think Ive bitten off more than I can chew......

Just tried that text and all I get is 3 boxes at the top of the page with text in it.

Gareth

gentleone
10-10-2010, 08:56 PM
I didn't copy all the CSS rules from the page source to my previous post. I tried, but it screwed up the post so you'll have to do that yourself. So where i have written 'all these CSS rules' you'll have to replace that with the CSS rules from the page source.

But I have to agree... if you're new to HTML & CSS this can be a hard bite.

GSPDC
10-10-2010, 08:57 PM
I didn't copy all the CSS rules from the page source to my previous post. I tried, but it screwed up the post so you'll have to do that yourself. So where i have written 'all these CSS rules' you'll have to replace that with the CSS rules from the page source.

Ok thanks again for the help.

I will give it a go now.

GSPDC
10-10-2010, 09:02 PM
now Ive cut the whole header section plus the css rules and dropped into another document but still nothing is displayed on the design page, its totally blank

gentleone
10-10-2010, 09:14 PM
can you post your code so i can see what you have so far?