Beginner in CSS help need with layout

dcjetski · #1 May 20th, 2008, 10:50

Hi,

Just want to say thank you in advance for any help you may be able to provide me.

I am currently re-building my site and decided to step away from tables and get used to coding in CSS.

The link to my site is dcjetski.co.uk

What I am trying to achieve is a template that will expand/contract to the amount of content and links I have on that page. As you can see in IE the top of the page and content is OK but the footer is pushed right down the page (it gets a bit worse in firefox). I could set the page up with fixed heights and widths to bring all back together as it is, but some of the pages I want to create will have large amounts of content or I might increase the links on the left and I need the page to adjust to that. Can this be achieved with CSS?

This is the CSS location www.dcjetski.co.uk/styles/stylesheet.css

Thanks again

Bocaj · #2 May 20th, 2008, 11:44

The way the content div is layed out needs some adjustments.... it should work then.

In the html change

Code: Select all

	<div id="content_head">
	</div>
	
	<div id="content_bg">
	  <p>&nbsp;</p>
	  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras a quam eu sapien elementum eleifend. Suspendisse ultrices sapien ac diam. Fusce arcu tellus, egestas eu, porta vitae, tristique nec, dui. Phasellus vel velit. Cras neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean molestie, lacus ac mattis adipiscing, magna risus imperdiet magna, eget ullamcorper arcu nulla tincidunt dolor. Vestibulum scelerisque eleifend nisi. Donec quam turpis, molestie id, consequat vel, cursus nec, massa.</p>
	  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras a quam eu sapien elementum eleifend. Suspendisse ultrices sapien ac diam. Fusce arcu tellus, egestas eu, porta vitae, tristique nec, dui. Phasellus vel velit. Cras neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean molestie, lacus ac mattis adipiscing, magna risus imperdiet magna, eget ullamcorper arcu nulla tincidunt dolor. Vestibulum scelerisque eleifend nisi. Donec quam turpis, molestie id, consequat vel, cursus nec, massa.</p>
	</div>
	
	
	<div id="content_footer">
	</div>

to

Code: Select all

    
   <div id="content_bg">
        <div id="content_head">
        </div>
           <p>&nbsp;</p>

           <p>Lorem ipsum dolor sit amet... </p>
          <div id="content_footer">
          </div>
    </div>

and then the css to something like...

Code: Select all

#content_head {
    position:relative;
    width:468px;
    height:9px;
    margin-top:-9px;
    background-image:url(../images/content_head.gif);
}

#content_bg {
    position:relative;
    left:211px;
    top: 180px;
    width:468px;
    margin-top:-400px;
    
    background-image:url(../mages/content_bgrd.gif);
    overflow: visible;
    
}

#content_footer {
    position:relative;
    bottom:0px;
    width:468px;
    height:12px;
    background-image:url(../images/content_foot.gif);
    
}

See if that works... if it does i'll explain what we did... if it doesn't i'll have another look at it

dcjetski · #3 May 20th, 2008, 13:38

Bocaj,

Thank you so much. When i looked at your code it made sense straight away. I guess its all about nesting with CSS. Have uploaded the amended code as you recommended and i'm nearly there.

Just trying to figure out how to nest the remainder of the document so it looks right.

I am a bit puzzle though why there is a gap below the header and navigation bar in firefox but not in IE

Thanks again Bocaj.

dcjetski · #4 May 20th, 2008, 14:27

Ok,

I really pickled now.

Any help would really be appreciated.

Struggling to get my head around how this css stuff works. Hopefully the more i use it the more i will get my head around it.

Thanks

Marc · #5 May 20th, 2008, 14:30

add to the top of your CSS:

HTML: Select all

* {
margin:0;
padding:0;

}

dcjetski · #6 May 20th, 2008, 15:09

Thanks Marc,

Have done that and it gets rid of my firefox glitch. Have uploaded the page and stylesheet again. Could you point me in the right direction as to get the footer of the page in the right place????

Thanks again

Bocaj · #7 May 20th, 2008, 16:35

in your css,

Code: Select all

#footer {
    position:relative;
    left:0px;
    top:458px;
    width:800px;
    height:69px;
}

Remove the

Code: Select all

top:458px;

and add

Code: Select all

   margin-left:-210px;

Nest the footer

Code: Select all

    <div id="content_footer">
    </div>
        <div id="footer">
        <img src="http://www.dcjetski.co.uk/images/index_11.gif" width="800" height="69" alt="" />
    </div>
    </div>
    

</div>
</body>
</html>

There are other ways to do it, but i think that's probably the quickest/easiest.

Marc · #8 May 20th, 2008, 16:42

Why, why, why are you using absolute positioning?! This could easily be done using faux columns....

Bocaj · #9 May 20th, 2008, 16:50

Oh i just noticed in your nav section

Code: Select all

	background-image: url(../images/nav_bg.gif);
	background-repeat:repeat-y
	overflow: visible;

You've missed off the semicolan at the end of repeat-y

Other than that you css completely validates... not bad

dcjetski · #10 May 20th, 2008, 18:47

Thanks Bocaj,

Im nearly there with it. Just need to get my nav bar to stretch with content. Other than that its startig to look like what im after. Your help has really been appreciated.

dcjetski · #11 May 20th, 2008, 18:48

Quote:

Originally Posted by Marc

Why, why, why are you using absolute positioning?! This could easily be done using faux columns....

Marc,

Sorry mate but ive never heard of faux columns. Im completly new to CSS always got by in the past by hacking tables. Will check it out though if you think its the answer to my layout.

Thanks

Darren

dcjetski · #12 May 21st, 2008, 10:34

Hi again,

I'm still stuck getting my nav column to stretch down/resize with my content column. Tried everything i can think off. Really struggling with CSS can anyone help??? Please???

Bocaj · #13 May 21st, 2008, 12:20

Like marc said try reading through this article on FAUX COLUMNS

It's probably the easiest method to do what you need to do..

Post any questions and i will or someone else probably will try to answer them.

Bocaj · #14 May 21st, 2008, 12:26

Oh yeah and i'm assuming you're using firefox,

Try this little plugin, its got dozens of useful things that you'll learn to use over time... but something beneficial to you right now would be under the CSS tab, you can edit the CSS of your page directly and look at the results without actually changing the css of your page (it's what i'm doing right now).

If that makes any sense, you can experiment with the css view it in real time without actually editing the site.

If that makes any sense, i was never any good at explaining things.... just try it and you'll see what i mean.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
beginner need help	shinesmithdas	PHP Forum	1	Jul 30th, 2007 00:41
Beginner needs help on image & caption layout	badger	Web Page Design	3	Jun 21st, 2007 11:32
Fluid layout - IE6 clichés the layout when resizing	cyberseed	Web Page Design	7	Jun 16th, 2007 05:14
The Most Versatile Layout (beginner)	TheLove	Web Page Design	2	Mar 24th, 2006 02:19
What makes a layout a good layout?	Miles Lombardi	Graphics and 3D	4	Jul 26th, 2005 03:22

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Beginner in CSS help need with layout