Forums

TheN00b

Hi Guys

Just to get my web design skills stronger, I have decided to tackle a PSD web layout and turn it into a perfectly valid HTML5 / CSS Layout.

I would greatly appreciate any help. Here is the layout:

http://i54.tinypic.com/2rdjjuu.jpg

As you can see, I have divided the layout in Photoshop. The coloured boxes are my proposed divs. Before I go and create the Divs in Coda, I want to know .. Is my division of the layout OK ? Can I make it better, easier to work with ?

I would greatly appreciate some help.

Thank You.

N00b

Cyanoxide

This seems like a good place to start, I would advise that you separate the two main content sections as well just for ease of access

make something similar to this

Over-header
Header
Feature
Main-content
additional-content
footer

I personally would make the header sections then footer then set out some space for the feature for later then add in the content and finish up with the feature. Hope that helps, you may need more divs as you go on but starting with these would be a good start.

TheN00b

Cool, I'll do that now and get back with the result.

Cya Later :D

TheN00b

Hi Cyanoxide

I am BACK ! :) Here are the divs. Do they look OK ? is there anything that needs changing ?

The next thing that I want to do is center the web page, while at the same time having bits that extend outwards ! if that makes sense.

e.g. the { #overhead } needs to be full width, but the text within { #overhead } needs to be where it is Here in the layout.

I'd greatly appreciate some help.

Thank you.

srkD

As a fan of utility classes, I would make a wrapper class and apply it to the content you want centered.

Something like:

css

.page-wrap { width: 960px; margin: 0 auto; }

html

<header>
	 <nav class="page-wrap">
	      <h1>Grapfpedia</h1>
	      <ul>
	           ...
	      </ul>
	 </nav>
</header>

and so on.

TheN00b

So every single thing that I want centered, I would give it the { .page-wrap } class ??

I'm sure there was a way where I would only apply a style to a wrapper div and it will centre the whole thing ! though I can't remember the code :(

srkD

Not everything so to speak just a wrapper in each section. Depending on how you do your backgrounds you could get away with 2 or 3 wrappers. The way I described it you would need 5, which I know is more code, but makes the most sense to me and gives a bit more flexibility.
Also, it's the same code for the single wrapper, its just how its used if that makes any sense the margin: 0 auto; is whats doing the centering (needs a width to work obviously).

virtual

margin: 0 auto;
is what you are looking for to center, and also give it a width.

What srkD is saying is to put the larger bg image within a centered wrapper say #grafpedia, then within that div put another div say #maincontent with bg image, which you also center relative to its containing div.

Read this it might help you
http://css-discuss.incutio.com/wiki/Centering_Block_Element

TheN00b

Hello Virtual I missed ya :D

How come the forum has changed by the way ? It is like a Complex Commenting System now !!

Anyways here is what I have done:

<body>

          <div id="wrap">

               <!-- Content Omitted -->

          </div><!-- End Wrap -->

</body><!-- End Body -->

CSS:

#wrap {

  text-align: left;
  width: 1220px;
  margin: 0 auto;
  
}

Result:

ScreenShot

Is that OK ? I mean is it a good way of achieving the goal ? Also Is the Width a sensible value ?

jamy_za

It looks good to me.

Websites default the text-align to left so you can leave that out. Also, why the 1220px width? 960px - 980px would be fine for 1024x760 monitors.

Note: You have closed off the body element with </div>.

TheN00b

Thanks for that Jamy-Za

Here is what I have so far:

http://www.webpagescreenshot.info/img/5335-96201090916PM

Before moving on .. do you see anything wrong ? anything that I can do in a better way ?

Can someone tell me how I can do the bottom (transparent) bit of the [ #feature ] block please :( I know it'll have to be CSS3 but I don't know what code to use :(

Thanks

Bob

You can either create a gradient image in photoshop, or indeed use CSS3 gradients.

TheN00b

Hi Bob

There is no gradient for the bit that I am talking about ! It is just a transparent black bar !

Where it says { Premium, Graphics, Tutorials ..etc } ... to the base of the iMac vector. That's the bar I am talking about.

Isn't there a way to get that with CSS3 ?

Thanks

virtual

I think this is what you are looking for
http://www.w3schools.com/Css/css_image_transparency.asp

TheN00b

Thanks Virtual it is looking a lot better.

I have uploaded the site to my server to make things easier.

The next thing I can't figure out is how do I get these separators between my lists !

http://i53.tinypic.com/w8ot9j.png

I'd greatly appreciate any help.

Thanks

virtual

You could do this

#featureBar #navlist li {
border-right:1px solid #FFFFFF;

or use a background image on the same tag.

TheN00b

Thanks Virtual, that works fine, although it doesn't have the cool effect of the image ... it still works well enough. Thank You :D

I want your opinion on something: How should I handle the background of the Header (where it says Grafpedia logo) ?

At the moment I have an image that keeps repeating. But wouldn't it be better to use new technology and use the CSS3 Gradients ?

I've got the same (image approach) to the footer as well.

Thanks

virtual

Hi,
You didn't see the rest of my comment - you can use a small background image on the same tag, just make sure the image is the same height as the li tag.

The bg image works just fine and has no cross-browser issues, I would stick with it. At your level of skill I would use the simple uncomplicated solutions.

TheN00b

Ok Virtual I shall do that. Although I did the bottom box with CSS3 Gradients and it wasn't really complex, infact .. it was less work than doing images. But I shall leave the images since they are already done.

My next challenge is finding an easy way to achieve this:

http://i56.tinypic.com/10o1gdv.jpg

In the SubContent Div. What would be the best method ?

Sorry about all the questions, but you guys are the best in the business of helping n00bs. I'd greatly appreciate it.

Thank You.

TheN00b

Anyone ?

I have drawn what I have in mind in Photoshop, but what I want to know is ... is it the best approach ?

http://i54.tinypic.com/k3n6np.jpg

Note: The Coloured Boxes are Divs

Is there some other method that requires less work, and give more flexibility ?

I would greatly appreciate any help.

Thank You.

virtual

A lot depends on whether the text in those boxes is going to change, and possibly expand. Only you know the answer to that question. Just try and code it yourself, try different solutions, experience is the best learning curve. The more you code the better you understand, hopefully :-)

TheN00b

I'm thinking of turning it into a wordpress theme after I've done the static HTML and CSS.

The text will remain of that size, so that no overflow of texts occur ..etc

I can do that, but it could take ages, then at the end I find out .. there was a better way to do .. lol I'll be upset that all the word I had done was useless in terms of what I'm trying to achieve.

Anyways I'll give it a go.

Thanks

Bob

I think that using a wrapper div for those 9 boxes would be a good thing to start with, and then use maybe 3 divs inside that (where each div is 3 boxes high) or maybe even 9 divs, one for each box.
But I'm not expert in this, so there are probably better ways to do this :)

TheN00b

Yep that is what I went with.

You can see the result Here.

What do you guys think ? Did I make the right choices ?

I've just got the 3 boxes on the right to do now.

TheN00b

Ok All Done.

However I'm stuck again.

Can someone please tell me how I can extend the header and footer bits to full width ?

Thank You

mark7568

thanks for this help..

virtual

Put them outside the wrapper div....otherwise they are limited in width by the wrapper.

TheN00b

Thanks Virtual, I did that, but the content of the div is not centered anymore ! :(

How do I get them centered again ?

Thanks

Bob

Wrap the content in a div with id="wrap". Like this:


<div id="overhead">
 <div id="wrap">
  <p>Welcome to Grafpedia</p>
 </div>
</div>

<div id="header">
 <div id="wrap">
  <img>
				
  <ul>
  </ul>
 </div>			
</div>

TheN00b

so should I change the wrap ID to a wrap Class ... since IDs are only suppose to be used once ?

TheN00b

That Worked Wonderfully Bob. Thank You.

However in a couple of places there are certain errors. The bottom feature bar (transparent) doesn't go full width !

Also the iMac images is behind the bar. How do I bring it to the front ?

I greatly appreciate you guys's help.

Thank You.

TheN00b

Anyone ?

Argeaux

put it in a div and play around with the css z-index of that div and the div of the bar.

zackw

whats your question and whats a link to see the problem? ill help u if i know what u need

TheN00b

@Argeaux: Do I have to place it in a Div ? Can't I use the css cascade ? for example

#feature img {

	float: right;
	margin-top: 20px;
	z-index: 1;

}

TheN00b

Never mind it worked !! :D

before it wasn't working because I didn't have anything for the position attribute.

One last thing and I'll be finally done with this.

How do I get the transparent featureBar to extend the whole width of the page ?

The { featureBar } is the transparent bit behind the iMac image, where it says { premium ..etc }

How do I get that to be full width please ?

All your help so far has been greatly appreciated.

Thank YOU.

ak-i

Because the #featureBar is inside the #wrap so the width will stuck with the #wrap width. It will be inside the wrapper you make. I don't really know how to do that, but maybe you can bring it out from the #wrap and let it be under the #feature div.

TheN00b

Thanks Ak-i

I am aware of the reason, and I have thought of that already, but then I got confused.

If I move it under the feature div, would I then use negative margins to move it up ? or is there another, better way ?

Thanks

ak-i

Bring what up? You mean the #featureBar? Maybe you put it out after the closing #wrap. I think it would be fine. It will follow the #feature margin and width.

virtual

Take the whole "featureBar" div out of the "wrap" and put it back in after the "wrap" so that it stretches across the whole page. Then you need to wrap it's contents to get them to sit where you want them. So you need to give "navlist" a width (same as the previous "wrap") and margin: 0 auto; to center it.

These are very basic layout elements which you need to understand, that and floats and clearing them, which can be difficult to grasp.

treehouse : what would you like to learn today?

Forums

PSD to HTML5/CSS