CSS layout help please

Associate
Joined
20 Oct 2005
Posts
112
Hi,

I've been tasked with throwing together some online case studies for work over the next couple of days. I studied basic HTML at college many years ago, and am competant with tables for layout purposes, but no nothing of CSS so I would like to use the opportunity to delve into some learning :) I'm aware of w3schools, and am sat here with a nice book, but time is of the essence so would appreciate some direction on this.

It requires a formal presentation style so the layout I'm mocking up in Photoshop has a subtle beige BG colour with a centered white area, 4 tabs across the top (like the tabs in Google Chrome) that just go to each of the 4 case studies. This all has a subtle drop shadow to imitate a paper document. At the top of the document is the company logo and the bottom has a watermark.

The actual document itself, between the logos, just needs a heading, a simple 4 x 3 table for specifications and below this is a large image with 3-5 thumbnails below this that, when clicked, change the large image.

Now, I can slice this up in Photoshop and generate the CSS from PS itself, but it specifies everything as 'absolute' positioning, and being that each table and image will vary in size, I'm not sure this is the correct way to go about things.

Essentially the sides of the document should stretch to accomodate the size of the content.

Any pointers or directly relating tutorials out there?

Thank you :)
 
Thanks guys, I will look into that :)

The one thing that concerns me is that PS throws out every single sliced imaged as a seperate <div> with its own absolute positioning. Surely that's not the way to do things?

I'm working on something else right now but, when I've time, I'll upload what I'm working with.
 
Ok, well here's my menu mockup

Header_Example.jpg


How would you guys slice this and then CSS it to make each tab 'come to the front' when that page is selected?
 
Thanks guys, not had much time to look into this but I will give that a shot :)

Trip, I think I understand the theory of whta you're saying, but will that work when the tabs are overlapping? In my head it only works if they are spaced apart (of course I can do that, it's just a little asthetic thing).

Btw, css-tricks seems like a great site. I've been checking out the first video tutorials, but when I try them the results are a bit crappy... my header-bg seems to have padding from the top of the page and, in IE, the UL staggers down the further right the list goes. What's up with that?

Code:
* {
	margin: 0;
	padding: 0;
}
body {
	font-size: 62.5%;
	font-family: helvtica, sans-serif;
	background: url(images/body_bg.png) repeat-x top #f5ecd4;
}
ul#nav {
	height: 236px; width: 800px;
	margin: 0 auto;
	background: url(images/Header_bg.jpg) no-repeat;
	list-style: none;
	}
	ul#nav li a {
		display: block;
		width: 130px;
		float: left;
		margin-top: 170px;
	}

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
  <title>Mike's webpage!</title>
  <link href="style.css" type="text/css" rel="STYLESHEET">
  <meta content="Evrsoft First Page" name="GENERATOR">
</head>

<body>
  <ul id="nav">
    <li><a href="#">Project</a></li>

    <li><a href="#">Team</a></li>

    <li><a href="#">Contact</a></li>

    <li><a href="#">Download</a></li>

    <li><a href="#">History</a></li>
  </ul>
</body>
</html>
 
Back
Top Bottom