PDA

View Full Version : Where to start . . . css layout.


Rob_Che
05-22-2008, 07:40 PM
Ok, just for fun really...

I have this mock-up (unfinished, just a sketch if you like)

http://i3.photobucket.com/albums/y71/robche/Site-1-.jpg

Where would you start when planning a layout.
I know what I would do but I'm interested in other's thoughts...

Rob

Death Dream
05-22-2008, 08:28 PM
Well I would start with setting up your body tag and the background in CSS first. Ignoring the photos ...


body {
background: url (imagelocation/image.jpg);
color: #000000; /*font color*/
/*other body stuff fonts and blah*/
}
#wrapper { /*Everything will be in side here*/
margin: 0 auto; /*centers page*/
}
#pink { /*div for everything pink?*/
width:000px;
height:000px;
background: url();
}
.adobe {
width:00px;
height:00px;
background:#00000;
}
.adobe p {
font-size:12px; /*or whatever*/
color: #000000; /*can't remember redish hex*/
}That is all rather quick jotting down of code but that is how I would start.

Rob_Che
05-22-2008, 08:38 PM
Cheers DD...
yeah, it will just be a simple 2column/Header/Footer layout...

For the NAV on the right I was thinking of having a hand written 'set list' - with it being a music site... & some music bits (plectrums etc) on the footer..

Jittor
05-22-2008, 08:49 PM
I agree with Death, kinda. I would start with thinking about how often I would be updating this site and its potential for growth. I like to use a lot of includes for things like the menu and footers so I can change them very easily, so I would keep that in mind too. Then background first. The body, wrapper, the header, which would contain all the photos, and the footer would come next.

What is interesting to me is the first white bar, the top is semi-transparent. So that would be an extra Div just for that top bar, and then another div for the others. what would you do for this?

domedia
05-22-2008, 09:05 PM
Semantically speaking the PDF list should be an unordered (maybe even unordered) list. The same with the navigation. Remember to use DIV only for containers. Use the correct markup when possible.

After the wrapper I would do this:
<h1><a>Doncaster Magazine</h1>
<ul id="download">
<li><a>PDF1</a></li>
<li><a>PDF2</a></li>
<li><a>PDF3</a></li>
</ul>
<ul id="nav">
<li><a>Navitem</a></li>
<li><a>Navitem</a></li>
<li><a>Navitem</a></li>
<li><a>Navitem</a></li>
</ul>

And that's the basic structure. Some additonal hooks might be needed for some of the backgrounds.

It might be that your question is how to plan a website project. Is that what you're after?

Rob_Che
05-22-2008, 09:39 PM
Cheers for all replies...

It might be that your question is how to plan a website project. Is that what you're after?

Not really, I'm just interested in how people see how they would go about building it...No surprises (but then it's a very straightforward layout)

Re; ordered and unordered lists...What's the difference ?
I know ordered is numbers and unordered is bullets but how does that translate when you're looking at an image based list ?

Jittor: what white bar are you looking at ?

Just noticed actually when I was laying it up... The header image will be a little lower than it is... there will be breathing space between the images and the top of the page.

Rob

I'll start laying it up and I'll build it 'live' ! (over the course of about 30 weeks! lol)... i will then add a Wordpress blog to the main content area...

Death Dream
05-22-2008, 10:22 PM
There really isn't any diff I think with unordered or ordered, think its just a search engine friendly thing.

I wasn't sure what bar Jittor was talking about either.

Hell, at least your on track lol, I'm on root with a 52 week plan lol. Wordpress is really easy to skin once you get use to it. You got my MSN addy, got a quick question and I'm online go ahead and hit me up.

~Death Dream~

Rob_Che
05-22-2008, 10:36 PM
Cheers DD...
hopefully we can bounce some ideas around (as we planned 3 weeks ago - lol!)

I've been a bit busy with new baby this end to get cracking on personal work.

Death Dream
05-22-2008, 10:37 PM
Hah well good for you with the new kid but sucks for you on the other hand.

I'm almost done skinning wordpress, I will be moving onto java script or php next after this.

Hey look at the bright side! You know how to install wordpress now HAHAHA

~Death Dream~

domedia
05-22-2008, 10:42 PM
Re; ordered and unordered lists...What's the difference ?
I know ordered is numbers and unordered is bullets but how does that translate when you're looking at an image based list ? Your list of PDF's is just that, a list, so you mark it up with the correct markup :-)
ordered/unordered. the difference lies in that one is a list where the order is important (1 is before 2 etc), while in an unordered list the order is not important. In your case the order is important, it would not make sense to list them in any other order than what you have now (1, 2, 3), so ordered list would be the right way to go imho.

There really isn't any diff I think with unordered or ordered, think its just a search engine friendly thing. They convey different semantical meaning, per my post above. The beauty of using semantic HTML is that the markup convey meaning about your content.

This is not only smart for search engines, but any device or system that is going to read your document.

Rob_Che
05-22-2008, 11:34 PM
Thanks Dom, good explanation.

Re; DD Wordpress comment. He talked me through the 1 Click install on my server... haha. Didn't take long strangely...

Rob_Che
05-27-2008, 11:17 PM
OK - I've been having a play... HERE (http://doncasterlivemag.co.uk/main.htm)

Waddya think ? Is the top bar too messy when it scrolls ?
(my screen has a prism-like effect)

How do I get the content & side bar divs to fill available space (vertical)
ie; with tables *spit* I would set height 100%
I've googled it and added:

height: 100%;

to the body and div tags but no joy.

Any comments / critique always welcome.

Rob

domedia
05-28-2008, 12:13 AM
Instead of having a separate background for #content and #sidebar, why not use one background for #wrapper instead? :)

Rob_Che
05-28-2008, 06:43 AM
hmmm... You might have something there... :smile:
It's strange because that's what I would do with a table layout but say "CSS" and I just assume it's A: Different & B: Difficult.

Just getting into the right mind set.

I'll get it.

domedia
05-28-2008, 01:53 PM
CSS is way easier. You're just accustomed to use the grid layout that tables are made with :) Let me know how you progress on this. Did you get my PM btw?

Death Dream
05-28-2008, 02:16 PM
height: 100%;
to the body and div tags but no joy.

Any comments / critique always welcome.

Rob


I had that problem as well: http://www.dreamweaverclub.com/forum/showpost.php?p=138783&postcount=107

~Death Dream~

Rob_Che
05-29-2008, 12:31 PM
Ok then . . .
I've done something crayzee...

Take a look: HERE (http://www.doncastermusicmag.co.uk/main.htm)

I've added "#content-wrapper"
Do you think it is fot for purpose... it works!?
IE6 has the double take problem as I forgot to add this AGAIN!
Is this responsible for the massive horizontal scroll in IE 6 too ?

I've added a footer too. Links need to be padded correctly still.

Cheers
Rob

Rob_Che
05-29-2008, 01:47 PM
edit: FIT for purpose...

domedia
05-29-2008, 02:31 PM
#content-wrapper {
background:transparent url(../images/paper-main.png) repeat scroll 0px;
margin-left:45px;
width:710px;
overflow:hidden;
height:1%;
}

Removed the float, you're not floating this element next to anything. This makes sure we don't have a double margin bug in IE6.
In order to clear the 2 floated elements inside #content-wrapper so the background span behind them both, I added height:1% and overflow: hidden; so it works in both browsers.

Rob_Che
05-29-2008, 04:05 PM
Great stuff. Still using copy and paste a fair bit so I need to watch what I'm leaving in (ie; float)...

So, I guess it's ok to do what I'm doing then?
I'm not breaking any rules ? :smile:

domedia
05-29-2008, 04:29 PM
remove the height: 100% we well, it's meaningless. The content-wrapper will wrap around your content. Rest looks good :)

Rob_Che
05-30-2008, 09:41 PM
Okie...
I've implemented the changes
The only one that didn't work was the float: inline for #content - it seemed to blow up when I did that... ?

I would like help with one aspect please...
On the original mock-up you will see I have 3 lines of text next to the PDF logo... how can I achieve this?

It's really coming along now - I'll have full working pages this weekend I hope.

Cheers
Rob

PS: the footer image isn't finished - just noticed its the rough version.

Rob_Che
05-30-2008, 09:47 PM
ahh... do I need to float it?

Rob_Che
05-30-2008, 11:38 PM
Ok - sorted that aspect.

There's a space between the H2 tag and the paragraph text - Why?
Is it a natural element of a header tag?

Also - the fonts show as different sizes in Firefox & IE... help!

I'm pretty pleased so far...

Heres how she looks now (http://www.doncasterlivemag.co.uk/main.htm)

Cheers
Rob :)

domedia
05-30-2008, 11:54 PM
All headers and paragraphs have default margins. You can set their margins in CSS to override them.

Rob_Che
05-31-2008, 06:17 PM
Great Domedia, thanks...

I've just discovered how to use Firebug for finding margins and padding... what a great tool!

So... I have these codes:

.Body font tags:

font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666;And then a P tag font:

p.page{
color:#333333;
font-family:Georgia,"Times New Roman",Times,serif;
font-size: 12px;
margin-left: 40px;
margin-top: 0px;
}Can someone explain why, when I use the P tag for text, the fonts are different sizes in different browsers? I assumed that a pixel height would be reliable ?? no ?

Rob

domedia
05-31-2008, 06:41 PM
Firebug CSS will tell you exactly where it gets it's size from.
Can you put this temporarily online? Very easy to debug then :)

Font size is 100% reliable if implemented right.

You might want to check of your browser has overridden the font size by displaying the font size larger.

Rob_Che
05-31-2008, 07:56 PM
I'm still learning all that firebug has to offer!

Yeah, it's still here (http://www.doncasterlivemag.co.uk/main.htm)

Cary
05-31-2008, 09:02 PM
Also, make sure you validate your css. For instance, in the main-layout.css you're missing some semi-colons for your h1 and h2 styling, and you're pointing to background images, but not wrapping them in url().

Rob_Che
05-31-2008, 09:39 PM
you're pointing to background images, but not wrapping them in url().

Cheers Cary...
Oh yeah, not sure how that happened?

I will check my css through the validator and report back ;)

Rob_Che
06-02-2008, 11:30 AM
Hi All...

Here's the latest version (http://www.doncasterlivemag.co.uk)

I'm having trouble with IE6.
I've attached a screen shot from IE6:
Problems:-
i] Background not repeating down (have I deleted something while clearing up?)
ii] There appears to be an enormous scroll to the right... any ideas ?

Thanks
Rob

edit: I'd made a few amends to the CSS and hadn't checked it since... I have a few errors that need resolving. These may resolve the problems as they are background related.
Sorry...

Death Dream
06-02-2008, 03:03 PM
Your link takes me to the splash page and nothing else ....

Do you got the div that has the gray background to have a repeat-y in it?

~Death Dream~

Rob_Che
06-02-2008, 03:48 PM
Sorry... TRY THIS LINK (http://www.doncasterlivemag.co.uk/main.htm)

Yeah I have background background-repeat: repeat y;...
Take a look DD - I will be checking my CSS when I get back this evening and see if validating it makes a difference - it's only annoying as I can't view IE6 at home...

I installed IE7 over the top of IE6; Anyone know where I can download it on it's own ?

Cheers
Rob

domedia
06-02-2008, 04:08 PM
Yes, get Microsoft's virtual machine (Microsoft Virtual PC), which is free, and then get IE6 for MS virtual machine, also free.
Your other option is to have a separate box with IE6 installed. Not having IE6 is not an option yet I think ;-)

Death Dream
06-02-2008, 05:45 PM
I work with IE6 and FF2.0 .. now with the release of FF3.0 I got to keep standard with that too and would advise you look into that when it is fully released. (I have seen problems with my site on FF3.0 RC1).

I'll take a look at it in an hour, got something I got to take care of first.

~Death Dream~

Death Dream
06-02-2008, 07:00 PM
Looks like you got it fixed?

~Death Dream~

Rob_Che
06-02-2008, 07:53 PM
Nope... Here's how it looks... :S

http://api.browsershots.org/png/512/93/93ffcd28a59d226799accb37812c9059.png

Death Dream
06-02-2008, 07:54 PM
Oh I was looking at it in FF and it was working lol.

I'll take a look and see what I can find.

~Death Dream~

Rob_Che
06-02-2008, 08:01 PM
Smart - cheers old chap.

Death Dream
06-02-2008, 08:03 PM
Try this on your background for your content wrapper for the body: url(../images/paper-main.png);

I don't know what transparent and the 0px is doing there so I just took it out. I didn't have a chance to test it as I was just looking at it with Firebug on Firefox taking out things that had no meaning to me. As far as I can tell it didn't affect anything on FF but might change something on IE. Tell me if it does.

Edit: Hell take everything out but the background. I don't even know why scroll was in there.

Edit2: If that doesn't work add repeat-y to the background part.. I only saw it saying repeat. url(../images/paper-main.png) repeat-y;

~Death Dream~

Rob_Che
06-02-2008, 08:09 PM
This is my code for the content-wrapper:

#content-wrapper {
float:left;
width:710px;
margin-left: 45px;
display: inline;
background: url(../images/paper-main.png);
background-position: 0px 0px;
background-repeat: repeat y;
}


Does it show differently to you ?
The trans part may be the png fixer...

Death Dream
06-02-2008, 08:28 PM
This is my code for the content-wrapper:

background: url(../images/paper-main.png);
background-position: 0px 0px;
background-repeat: repeat y;
}
Does it show differently to you ?

Yeah, I forgot firebug adds new code >.<

do:
background: url(../images/paper-main.png) repeat-y;Delete the other background ones.

~Death Dream~

Rob_Che
06-02-2008, 09:12 PM
Done. Can't check it tho !

Death Dream
06-02-2008, 09:19 PM
Done. Can't check it tho !

Lol didn't work. Give your div a height of whatever it is and see what that does XD I hate IE only errors, they are so hard to find without Firebug.

~Death Dream~

Rob_Che
06-02-2008, 09:23 PM
argh. lol!

No worries... I'll find some ie6 soft ware / emulator and keep trying.
I can't keep asking you to check it !
I'll beback - cheers DD !

Death Dream
06-02-2008, 09:26 PM
argh. lol!

No worries... I'll find some ie6 soft ware / emulator and keep trying.
I can't keep asking you to check it !
I'll beback - cheers DD !

Nah no worries. Just wait till I get home and when I am on MSN, only takes a few seconds to check.

~Death Dream~

domedia
06-02-2008, 09:29 PM
http://www.microsoft.com/windows/products/winfamily/virtualpc/default.mspx

Rob_Che
06-02-2008, 10:08 PM
Sorry Domedia, I wasn't ignoring our advice...
I couldn't find any mention of IE6, only 7.
I'll download and see where I end up.

This is clever tho: Browser Shots (https://browsershots.org/http://www.doncasterlivemag.co.uk/main.htm)

domedia
06-02-2008, 10:16 PM
After you download the virtual machine, download IE6 here :-)
http://www.microsoft.com/downloads/details.aspx?FamilyId=21EABB90-958F-4B64-B5F1-73D0A413C8EF&displaylang=en

Rob_Che
06-03-2008, 08:33 AM
Great stuff.. I get it now. It's big isn't it?
I'm going to move on from solving these IE6 problems for the time being as they are sapping my will to live and i'm not getting anything done!
I'll have to come back to them later down the line.

I'll have to add a "Currently de-bugging foe IE6 disclaimer"... lame tho :S

Rob

domedia
06-03-2008, 05:09 PM
I'll have to add a "Currently de-bugging foe IE6 disclaimer"... lame tho :S I must be missing something.. why don't you install the virtual machine? :(

Rob_Che
06-03-2008, 05:50 PM
I'm not the World's hottest PC operator :)

I will do it but it's eating into my valuable (and in short supply) time.

I spent 3 hours last night trying different sites and trying to solve the problem - in that time I couldhave finished the nav and footer links.

I WILL sort it. I have it downloaded and ready to install.

At the end of the day I have nothing to show the client - who is viewing the site in IE7...


Not dramatic or silly - just tellin it like it is ! :)

Rob

Death Dream
06-03-2008, 06:10 PM
At the end of the day I have nothing to show the client - who is viewing the site in IE7...


Does he know the bug exist in IE6?

~Death Dream~

Rob_Che
06-03-2008, 06:37 PM
Nope.
Obviously it NEEDS solving... and it will... soon.

Death Dream
06-03-2008, 08:34 PM
Nope.
Obviously it NEEDS solving... and it will... soon.

I can see your resorting back to tables lol! Goodluck!

~Death Dream~

Rob_Che
06-04-2008, 12:32 PM
Hey all...
Here's how she looks at the moment ||Click HERE|| (http://www.doncasterlivemag.co.uk/main.htm)

Here's how she looks in IE6. I couldn't get the Virtual PC to work, kept telling me "You are not running on a supported operating system"... XP, hmmm...

http://512.png.browsershots.org/bfcaa502b58c5a95865ee2177b489497.png

m1a2x3x7
06-04-2008, 01:50 PM
Here's a little trick i picked up.

In your #content-wrapper, add a new div class before closing the div.

.footer {
clear: both;
height: 1px;
width: auto;
}

This will pull the background of the #content-wrapper to your #footer.

Rob_Che
06-04-2008, 02:36 PM
Hmmm.... that looks interesting...
I've added it but I'm not sure if I've done it correctly (it hasn'e worked anyway ! :))

Am I meant to add it and close it as a complete div ?

This is how I've done it:

<Div id=Content-Wrapper>
All the stuff
<div class="footer"></div>
</div>


Is that correct ?

Cheers for the help... Rob

domedia
06-04-2008, 02:43 PM
you dont need extra markup to make sure the background goes all the way down. Just add height: 1%; overflow: auto to the element with the background-image.

Death Dream
06-04-2008, 03:29 PM
I know how it is to tag a site you have created but maybe you went overboard? I always think that putting the "designed by:" in the footer. I think in the other slot where you have the wordpress thing would be a great spot.

That's just personal preference though.

~Death Dream~

Rob_Che
06-04-2008, 04:42 PM
Cheers Dom - I'll check that out.

DD, it's not final yet at all. (I usually add a footer note - see my other sites)...

This is a freebie so I'm gonna get what I can from it !
None of the links are final anyway... there's much more content too, just mocking up for trouble shooting.. cheers DD.

I'll put it up for critique once I've got these issues settled down anyway - you can pick it to pieces then ! XD

Rob

Death Dream
06-04-2008, 05:20 PM
Cheers Dom - I'll check that out.

DD, it's not final yet at all. (I usually add a footer note - see my other sites)...

This is a freebie so I'm gonna get what I can from it !
None of the links are final anyway... there's much more content too, just mocking up for trouble shooting.. cheers DD.

I'll put it up for critique once I've got these issues settled down anyway - you can pick it to pieces then ! XD

Rob

Haha! I like it just not that one part XD If it is a free site then it is cool! But if they pay was another story lol.

~Death Dream~

Cary
06-06-2008, 08:00 AM
Try the following modified styles. Watch out for the IE doubled float-margin bug (http://www.positioniseverything.net/explorer/doubled-margin.html) which occurs when an element has a left margin and is floated to the left, or it has a right margin and is floated to the right.

body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
background: url(../images/bg.jpg);
background-position: top;
background-attachment: fixed;
background-repeat: no-repeat;
text-align:center; /* because IE 5 ignores auto-margin centering */
}

/* Top Band */
#top-band {
position: absolute;
position: fixed;
background: url(../images/top-band.png);
background-repeat: repeat;
height: 18px; /* removed the width */
z-index:1;
}

#content-wrapper {
float:left;
width:710px;
margin-left: 45px;
background: url(../images/paper-main.png);
display: inline; /* to avoid IE doubled float-margin bug */
}

#content {
float:left;
width:480px;
padding: 0px;
display: inline;
}

#sidelinks {
width: 142px;
height: 248px;
float: right;
margin: 40px 32px 0px 0px;
text-align: right;
display: inline; /* to avoid doubled float-margin bug */
}

Rob_Che
06-07-2008, 09:17 PM
Excellent - I got the <IF IE 6> resolvd - thnks for your help DJ / Cary...

Outstanding issues:
1: None of the links in the sidebar work in IE6. No rollover effect. No linky.
2: The rollover effect for the header menu is about 300 pixels North when I
view it in IE6...

Any clues on this one ?

Cheers guys (any guyesses on here?)
Rob

domedia
06-09-2008, 02:22 PM
Try to remove the padding on hbuttons, and user positioning instead to put the links exactly where you want to. Currently the positioning is set to right and bottom 0.

The side nav worked fine in my IE6.