CSS layout help please

PsychomIKE · 24 Feb 2009 at 19:39

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

Confused · 25 Feb 2009 at 09:09

It sounds like a fairly simple layout, which shouldn't take you too long to sort.

The one thing you may wish to look into is "CSS tabbed menu", but other than that, it's standard borders, images, and positioning.

Scottland · 25 Feb 2009 at 13:38

Have a look through some of the videos on CSS-Tricks.com, the first three in particular should get you started

PsychomIKE · 25 Feb 2009 at 18:52

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.

suarve · 25 Feb 2009 at 20:22

PsychomIKE said:
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.

I personally wouldn't use the css that ps generates. I always slice the layout using the ps slicing tool and work from there.

PsychomIKE · 25 Feb 2009 at 22:18

Ok, well here's my menu mockup

How would you guys slice this and then CSS it to make each tab 'come to the front' when that page is selected?

suarve · 26 Feb 2009 at 03:09

you should really try to use text for the menu and not images.

Would personally (and other peeps may do it different) slice the two far ends of the menu and the section between each item.

When to emphasise the menu you could add a bit of simple css to the link (E.g. something like, li a:hover). For the selected part (E.g. when a user has clicked a linkm and is on that page), you could use the :active pseudo class (see w3schools) or add a class called something like .Current, that is set for the current page. Either way would work.

Tripnologist · 26 Feb 2009 at 07:38

I would use image replacement with that and then sprites for the backgrounds.

Save each image combined with default, hover and selected states. (safety and assets is currently how I would have it selected. The rest are default. I would add a bit of a color change to the default ones for hover... probably a very very light grey or very light greenishgrey to match the bg)

PsychomIKE · 1 Mar 2009 at 14:46

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>