PDA

View Full Version : whats going on here....



empeee
Sep 9th, 2010, 12:47 AM
so, im trying to design a website using DIVs in css, i hear its how you make websites cool n stuff.

so anyways, this is what i set up:
http://klasseconcepts.com/kc_test/

my css:

body {
border:0;
margin:0;
padding:0;
background:#FFF;
}

.wrapper {
width:1024px;
height:850;
margin-left:auto;
margin-right:auto;
border: solid 1px black;
}

.header {
width:1024px;
height:150px;
border: solid 1px black;
}

.content {
width:1024px;
height:950px;
margin-left:auto;
margin-right:auto;
border:solid 1px black;
}

.nav {
width:700px;
height:45px;
border:solid 1px black;
float:right;
margin-top:104px;
}

.recent {
width:200px;
height:375px;
float:left;
border:solid 1px black;
margin-left:0px
}

.summary {
width:200px;
height:375px;
margin-top:376px;
border:solid 1px black;
}

.current {
width:818px;
height:200px;
border: solid 1px black;
float:right;
margin-top:0px;
}

.content1 {
width: 818px;
height: 400px;
border: solid 1px black;
float:right;
}


my html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV Layout</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet" />
</head>

<body>
<div class="content">
<div class="header"> HEADER <div class="nav"> NAV </div></div>
<div class="recent"> RECENT</div><div class="current"> CURRENT </div>
<div class="summary"> SUMMARY</div>
<div class="content1"> CONTENT </div>

</div>
</body>
</head>


anyone maybe tell me where my problem is?

boogily
Sep 9th, 2010, 01:12 AM
If you are trying to move the content up you swap the content div and the summary div.

empeee
Sep 9th, 2010, 01:16 AM
yeah, haha i just figured that out. i updated the page @ http://klasseconcepts.com/kc_test/ .

now whats next? im guessing to cut the images, then adjust the DIV sizes to accommodate the image size.

getting the content on there is probably gonna be tough.

Lerura
Sep 9th, 2010, 01:24 AM
If you don't tell us what the problem is, then we cannot tell what is going wrong.

empeee
Sep 9th, 2010, 01:26 AM
the problem has been solved haha. but what comes after the DIV setup?

Lerura
Sep 9th, 2010, 01:34 AM
eh? WHAT ARE YOU TRYING TO DO????

empeee
Sep 9th, 2010, 01:37 AM
clearly set up a webpage if you looked at the link i posted haha.
getting a little upset are we?

Doctor_Varney
Sep 9th, 2010, 02:33 AM
Please don't try to be sarcastic. You'd get a lot more help from people like Lerura if you just asked the right questions.

You come here asking "what is your problem" without informing us of your precise intentions. How is anyone supposed to know what your problem is, if you don't tell us precisely what they are and why it is not fulfilling them?

And what kind of question is: "but what comes after the div setup?" :confused:

The answer to that is: what ever you want! Haha!

Dr. V

empeee
Sep 9th, 2010, 03:24 AM
well when i initally posted something, my divs were all messed up. but i moved around the tags and fixed the problem. what i wanna know is how should i go about slicing my design, which can be found here:

http://empeee.deviantart.com/#/d2xklhq

what would be a proper way of cutting it. and how do i manage rollovers in css.
links to tutorials would be nice if you know of some good ones.

thanks, is that better?

teedoff
Sep 9th, 2010, 03:30 AM
www.w3schools.com
www.alistapart.com

Doctor_Varney
Sep 9th, 2010, 04:30 AM
You did the right thing coding up the basic div structure first.

I don't think there's really a right or wrong way to slice up but here are a few tips.

A lot depends on how flexible you want your page to be. If all of the divs are of a fixed height, the slice-model will be very straightforward. If you need divs to stretch as they are updated, you need to do some extra image planning.

When slicing, you need not be *too* literal all of the time. A lot of people see an area and just make a full-size slice for it without realising it isn't always necessary. For instance, the slice for the background for that header and the footer could be a mere 1px wide and you can set it to repeat-x. In many cases, you can even use the same image over and over again by altering it's positional value in the stylesheet.

The rounded edged stuff can be done with CSS borders but I tend to make extra column divs to handle those.

Box headers and buttons etc can obviously be whole images. I'll always try and use real text rather than photoshop text , so when you save for web, you can hide the text and just export the button backgrounds. It means you may only need one image to serve all buttons.

Things like, "CURRENT-PROJECT" header could be an entire image to include the rounded corner, so would include part of the white background too.

You can always keep track of what you've coded by screenshooting your browser window and pasting it into Photoshop as a kind of 'guide track' to help with slicing.

Hope that helps.

Dr. V

Lerura
Sep 9th, 2010, 04:42 AM
thanks, is that better?

Yes! Short and yet descriptive.

I will have a look into it tommorow, unless anyone else has helped.
(I'm very tired right now, (4:41 i the morning)

Lerura
Sep 9th, 2010, 04:15 PM
try to use this stylesheet:
body {
border:0;
margin:0;
padding:0;
background:#FFF;
}

.content {
position:relative;
width:1024px;
height:858px;
margin-left:auto;
margin-right:auto;
border:solid 1px black;
}

.header {
position:absolute;
width:1022px;
height:150px;
border: solid 1px black;
top:0px;
left:0px;
}

.nav {
position:absolute;
width:700px;
height:45px;
border:solid 1px black;
bottom:0px;
right:0px;
}

.recent {
position:absolute;
width:200px;
height:375px;
border:solid 1px black;
top:152px;
left:0px;
}

.summary {
position:absolute;
width:200px;
height:225px;
border:solid 1px black;
top:529px;
left:0px;
}

.current {
position:absolute;
width:820px;
height:200px;
border: solid 1px black;
top:152px;
right:0px;
}

.content1 {
position:absolute;
width: 820px;
height: 400px;
border: solid 1px black;
top:354px;
right:0px;
}
.footer {
position:absolute;
width: 1022px;
height: 100px;
border: solid 1px black;
top:756px;
left:0px;
}


notice that all divs has position:absolute;
this way they align to their parent, ignoring other divs at the same level.

Only .content has position:relative;
Without it, it would be position:static;(default), and child-elements with position:absolute; would then ignore it and align to the body instead.

And it is position:relative; in order to have margin-left:auto; and margin-right:auto; to work.
position:absolute; would ignore margins set to auto.

Doctor_Varney
Sep 9th, 2010, 08:23 PM
Lerura, that looks like a good, solid arrangement.

Dr. V

empeee
Sep 12th, 2010, 10:59 PM
thank you so much lerura, that helps alot. im currently at work so ill work on this when i get home.

sorry for the post i made, i figured you guys are much more experianced then i am and it would be easier for you to figure out how this needs to be done.

empeee
Sep 13th, 2010, 07:47 PM
update;
http://klasseconcepts.com/kc_test/

so basically thats just like 4 images. i think im going to have a problem slicing up the images. i dont know where to start because of the rounded edges and the drop shadow around it. any ideas?

Doctor_Varney
Sep 13th, 2010, 07:54 PM
You did the right thing coding up the basic div structure first.

I don't think there's really a right or wrong way to slice up but here are a few tips.

A lot depends on how flexible you want your page to be. If all of the divs are of a fixed height, the slice-model will be very straightforward. If you need divs to stretch as they are updated, you need to do some extra image planning.

When slicing, you need not be *too* literal all of the time. A lot of people see an area and just make a full-size slice for it without realising it isn't always necessary. For instance, the slice for the background for that header and the footer could be a mere 1px wide and you can set it to repeat-x. In many cases, you can even use the same image over and over again by altering it's positional value in the stylesheet.

The rounded edged stuff can be done with CSS borders but I tend to make extra column divs to handle those.

Box headers and buttons etc can obviously be whole images. I'll always try and use real text rather than photoshop text , so when you save for web, you can hide the text and just export the button backgrounds. It means you may only need one image to serve all buttons.

Things like, "CURRENT-PROJECT" header could be an entire image to include the rounded corner, so would include part of the white background too *(and including the drop shadow).

You can always keep track of what you've coded by screenshooting your browser window and pasting it into Photoshop as a kind of 'guide track' to help with slicing.

Hope that helps.

------
* Edited.

Dr. V

Did you read this?

Dr. V

empeee
Sep 13th, 2010, 07:58 PM
Did you read this?

Dr. V

so just give it a little padding and cut it out as it is? how would i get info there and how would i go about making the "recent updates", "service summary", and "site content" boxes auto expand?

Doctor_Varney
Sep 13th, 2010, 08:23 PM
If you don't mind waiting a few hours (I'm very tired) I'll try and prepare a little demo, just to get you started.

Dr. V

empeee
Sep 13th, 2010, 08:41 PM
If you don't mind waiting a few hours (I'm very tired) I'll try and prepare a little demo, just to get you started.

Dr. V

thats fine i have a lot of homework to do.

Doctor_Varney
Sep 14th, 2010, 07:59 AM
Alright, lets start with the header section. If you need more advice on the rest, we can cover that later. Hopefully this will give you an idea of how controlled slicing can streamline your image folder and potentially save you bandwidth.

I'm not going to do your homework for you but I don't mind helping out a bit. The practice is good for me. Before you think of using this code, remember you're welcome - but I'm no expert coder. I take no responsibility for any errors.

I've coded up the header section to give you an idea of how they are put together, which can be found here (http://www.tengunade.pwp.blueyonder.co.uk/experiments/klasseconcepts/header.html). Remember, there are many ways of going about this, this is just one of many ways it could be done.

The image quality is poor because I'm working off the lossy compressed image you posted but you'll be able to make much cleaner images off your original PSD. You should also be able to make a slice for the glow you have around your menu and place that as a background of the menu list <ul>.

Hopefully by looking at the code and slice-model I've attached, you'll be able to work out what goes where.

Most importantly, notice how the entire project so far makes use of only four relatively small images... In the page, right click to view background images.

header_back.gif
kclogo.gif
topmenu-li_back.gif
kclogo_02.gif

In the slice-model image, you'll notice two small slices near the red guide, at top left. These are merely measurements I used to help me determine margins and relative positions for images. I've used background repeating and background positioning to get what I want in the header, using just these four very small images.

And that's basically the idea. The rounded corners are the next challenge. We can go through those later when I have more time.

Dr. V

Philip M
Sep 14th, 2010, 09:17 AM
thank you so much lerura, that helps alot. im currently at work so ill work on this when i get home.

sorry for the post i made, i figured you guys are much more experianced then i am and it would be easier for you to figure out how this needs to be done.

Tell me - how do you hold down your job when your spelling, punctuation and capitalisation is so poor?
I am not being rude or flaming you - this is mentioned in forum Posting Guideline No.4. I am simply curious.

Doctor_Varney
Sep 14th, 2010, 04:28 PM
Tell me - how do you hold down your job when your spelling, punctuation and capitalisation is so poor?
I am not being rude or flaming you - this is mentioned in forum Posting Guideline No.4. I am simply curious.

The mention of 'homework' suggests college student or school boy/girl. In which case, holding down a job would be less their concern than acquiring one in the first place...

Though consider, we are seeing signs made by professional graphics companies which are misspelled. We are witnessing a new wave of slightly illiterate journalism. I keep finding spelling mistakes in leading newspapers and magazines...

These days, I'm finding myself slightly more concerned about how standards of literacy in mainstream culture are dropping like a brick, than how one individual will fair in a world in which less is expected of them, in the way of literacy.

Dr. V

teedoff
Sep 14th, 2010, 04:36 PM
Spelling is a pet peeve of mine! lol I hate when people don't know where or when to use "there", "their", or they're in a sentence. lol But that's just me and as I make mistakes in spelling all the time myself, I do try to do my best. Especially when presenting work to clients! Nothing worse than showing off a presentation full of spelling and grammatical errors.

In a day an age where writing and reading for one's self has all but been destroyed by the internent, I wonder what kids 20 years from now will be lacking!


After this I guess I'm REALLY going to have to watch my errors in future posts! haha

Doctor_Varney
Sep 14th, 2010, 06:19 PM
By errors, do you mean mistakes or typos? There is a difference. One is a simple keyboard misstroke, while the other points to a lack of knowledge.

Clinical evidence suggests the human brain is evolving to cope with the information age. Clinical studies show that children and teenagers have much shorter attention spans than their predecessors, which seems to point to a 'downgrade', though scientists surmise that it may give rise to faster forms of communication and digital problem solving in the human race...

Why, only last week, a baby was born with a Pentium processor inside it's head, instead of a brain...

Dr. V

teedoff
Sep 14th, 2010, 07:21 PM
By errors, do you mean mistakes or typos? There is a difference. One is a simple keyboard misstroke, while the other points to a lack of knowledge.

Clinical evidence suggests the human brain is evolving to cope with the information age. Clinical studies show that children and teenagers have much shorter attention spans than their predecessors, which seems to point to a 'downgrade', though scientists surmise that it may give rise to faster forms of communication and digital problem solving in the human race...

Why, only last week, a baby was born with a Pentium processor inside it's head, instead of a brain...

Dr. V

Yes, I mean the lack of knowledge. Typoes are a different story. In fact I have often wondered if I am suffereing from "typing dyslexia"..lol since I seem to sometimes type words jumbled from what I am thinking of typing.

I seem to think that instead of humans learning new or faster ways to communicate or process and solve problems, they more likely find easier, lazier ways to perform those tasks. Take for instance the calculator. I myself am not very good at math and would many times rely on calculators, but I remember when they were not allowed in school for doing simple arithmetic. Now, students would be lost without them. I have been in stores or banks on more than a few instances where a young person behind the counter couldn't figure out how to give me change back on a $7.27 item when I hand them a $20. Then if you give them a $20 and the .27 cents, forget about it!
I find it hard to believe young people are getting smarter in these basic areas of life. But I will say, give them a cell phone or some electronic, and they can have it hacked, modded and whatever else is possible within a few days! lol

eh who knows anymore

Doctor_Varney
Sep 14th, 2010, 11:07 PM
You know we've only had free and extensive education for all, for a very short time, relative to human existence... Spelling was not normalized until the latter part of the Elizabethan period - and even then it took a long time for standards to be commonly recognised - largely due to the birth of the modern print industry... We've had our web standards for like, how long?

Makes you think...

I always complain about poor spelling and grammar in the young. I had the opportunity, a couple of weeks ago, to run this past my brother in law who is a school teacher. He pointed out that in our day, during the early seventies - up until the mid-late eighties, we had TV advertisments for adult education. There was a huge drive, aimed at mopping up the illiteracy in adults in their early-mid twenties, many of whom worked, yet could not further themselves, due to an inability to read and write...

Where are those advertisements now?

So it seems we may have no more people today with this learning deficit than we had around twenty or thirty years ago... But something has changed. It seems to me as though the standards themselves have dropped or it's just not being addressed... so in reality - what's the truth?

It might also be worth mentioning - we have, on average, around 29 million unemployed in the UK.

Dr. V

empeee
Sep 14th, 2010, 11:30 PM
Tell me - how do you hold down your job when your spelling, punctuation and capitalisation is so poor?
I am not being rude or flaming you - this is mentioned in forum Posting Guideline No.4. I am simply curious.

I do take it as being rude, it's none of your concern at any point. If I wanted to write like a professional, I would. I see it as if you can understand what I am saying, then the point is made. Why put the extra work in, also you misspelled capitalization. So from my eyes, it IS rude and completely off-topic. If you must know why, a personal message would have sufficed.

Anyways, I appreciate the help Dr V.

Lerura
Sep 15th, 2010, 02:23 AM
also you misspelled capitalization.

No! he did not!

Philip is from London, that'll say British.
And in Britain it is spelled "capitalisation"

Philip M
Sep 15th, 2010, 09:26 AM
No! he did not!

Philip is from London, that'll say British.
And in Britain it is spelled "capitalisation"

Thank you! :)

empeee - You will get a rude awakening when you grow up and reach the world of work. No-one will employ people who seem to be only semi-literate except as shelf-stackers. I know perfectly well what is meant by potatoe's and carrot's (and even fi'sh and chip's!) but I feel sorry for people who cannot use an apostrophe.




It might also be worth mentioning - we have, on average, around 29 million unemployed in the UK.


As many as that? I think you mean 29 million employed (in work). The claimant count for key out-of-work benefits in July was said to be 1,461,200 million (by which I think they mean 1,461,200 - but never believe the Government!).




"Illiterate? Write today for free assistance". - Government pamphlet.

Doctor_Varney
Sep 15th, 2010, 09:38 AM
No! he did not!

Philip is from London, that'll say British.
And in Britain it is spelled "capitalisation"

Due to widespread normalisation, the s and the z have become somewhat interchangeable in 'Anglo-American' culture. Most computer languages and IT jargon has come mainly from the U.S. the effect it's had on our spelling is noticable. It's where - and by whom - it is, or is not - noticable, which should be of concern to us. For instance, I use 'colour' when talking about an object and 'color' in my code - because I have to. When a person thinks I am misspelling the word: colour, a lot depends on where they are from. For an American to say it is one thing - but when British people start saying it, it is a clear sign that normalisation is having an indelible effect on our literary culture. Although many us still like to cling to it, normalis/zation - especially in an information age - is a necessary 'evil'. The same people are often unaware of the radical changes English spelling has undergone in such a short time. The 'correct formatting' and punctuation regimens of letter writing have changed radically in only twenty years... to the extent that in the span of less than ten years, "Dear John" is fast becoming "Hi John" in ink, as well as in email.


I do take it as being rude, it's none of your concern at any point. If I wanted to write like a professional, I would.

Yes, maybe it was rude but whatever is written is absolutely every readers concern. Although the idea that "I could if I wanted" shows that it does not come naturally. I have no choice but to capitalise and punctuate because it happens without me even thinking about it. There is no 'extra' effort involved, whatsoever. I'm not being nasty to you personally - I am concerned for the survival of the English language - and that survival depends on your generation.


I see it as if you can understand what I am saying, then the point is made. Why put the extra work in, also you misspelled capitalization. So from my eyes, it IS rude and completely off-topic. If you must know why, a personal message would have sufficed.

Now I'm going to say something - and it may sound rude, but I'm not having a go at you personally... The point about: "making your point, so why bother with the extra work" is unnacceptable to people like me, because correct use of language is, for some of us, a simple protocol. You say: "write like a professional" - yet, in my day, education was meant for all - not just some imaginary 'professional elite'.

Now, how would it be if we decided we could just "make our point" in our code? It would be a syntax error, for which there is no excuse and absolutely no getting around. That many user-input operations now use auto-complete - is making people lazy - and I'm afaid there's no getting away from the fact.

How would it be if we took this attitude with musical notes? What would our music sound like...?

To say that you "can when you want" makes it all the more unnaceptable because having to read badly spelled and unpunctuated garble is a strain, when you're trying to speed-read hundreds of posts. I'm not against spelling normalisation but I do view it as common courtesy to use clear speech and writing for others to read.

I apologise for my own posts being overly-verbose. I was never very good at summarising.


Anyways, I appreciate the help Dr V.

It's a pleasure. How did you get along with the slicing of the header? We can do the rounded corners today, if you're ready...

Regards

Dr. V

Philip M
Sep 15th, 2010, 09:44 AM
. I'm not being nasty to you personally - I am concerned for the survival of the English language - and that survival depends on your generation.


Why should I do anything for posterity? What has posterity ever done for me? - Groucho Marx (1890 - 1977) :D:D

To me, education is perhaps the greatest gift of all. So I am always saddened by people who cannot be bothered to respect the education they have received. Hence my "rude" remark to empeee.

"Perhaps as a reaction to the ascendancy of American spelling, the -ize spelling is now rarely used in the UK mass media and newspapers, to the extent that it is often incorrectly regarded as an Americanism........Worldwide, -ize endings prevail in scientific writing and are commonly used by many international organizations, such as the ISO and the WHO." http://en.wikipedia.org/wiki/American_and_British_English_spelling_differences

Doctor_Varney
Sep 15th, 2010, 10:12 AM
[COLOR="Blue"]
"Perhaps as a reaction to the ascendancy of American spelling, the -ize spelling is now rarely used in the UK mass media and newspapers, to the extent that it is often incorrectly regarded as an Americanism........Worldwide, -ize endings prevail in scientific writing and are commonly used by many international organizations, such as the ISO and the WHO." http://en.wikipedia.org/wiki/American_and_British_English_spelling_differences
I'm aware that's less well described as 'Americanism' than as standardisation - because peer journals are meant to be shared internationally. The scientific community is not bound to one country, but uses a common language. For me, '-ise' or '-ize' is largely a matter of personal choice.

I wonder how many people protested when the print industry standardised spelling? Someone had to...

Dr. V

Doctor_Varney
Sep 15th, 2010, 01:14 PM
Anyway, back on topic.

Some code which makes a rounded corner box. (http://www.tengunade.pwp.blueyonder.co.uk/experiments/klasseconcepts/cornerbox.html)

Copy the code and in the CSS, notice #boxwrapper and #contentbox_wrapper have the same width. Play around with this width and watch your box get bigger and smaller whilst maintaining the appearance of having rounded corners.

This is because the corners have seperate images for left and right, while the middle section uses a mere 1px wide image, which is repeated along the x-axis to always fill whatever space it needs to. It works because DIVs for left, right, etc are nested inside each other and are all set to 100% width of whatever wrapper they are within - and the width of all of them in unison, is determined by the wrapper widths. In this version, make sure you change both wrapper widths when setting the width for your whole box.

Again, pay particular attention to the background position property (http://www.w3schools.com/css/pr_background-position.asp), which makes all of this possible.

For height, something different is going on. No height has been declared for the content divs or the left right divs. Again, because they are nested, whatever content you put in, pushes out the height, thus repeating the images either side - only this time, on the y-axis.

So wrapper widths determine your width, while content itelf auto-creates the perceived height.

That's the theory - but now here's the catch... My coding is not so good so now that you understand the principle, your challenge is to make systems like this work inside your main page. If you need help on this, you will have to ask those with much better coding skills. Hopefully I've done my bit, by showing you how carefully planned slicing can both streamline and bring ultimate flexibility to the UI of your site.

The slice plan is in the attached image. Look at each bg image to see what's what. It shows the left side, which is all you have to make. By flipping the same image and resaving it, you can easily turn it into a right hand one.

These docs will be on the server until the end of the week. After that, they will be deleted. Just so you know.

Hope this helps. Have fun with it! :)

Dr. V

PS This one only works in Firefox!

Doctor_Varney
Sep 16th, 2010, 10:54 AM
I have uploaded a greatly improved version here (http://www.tengunade.pwp.blueyonder.co.uk/experiments/klasseconcepts/cornerbox-mk2.html).

This time, featuring the bottom corners as well. Works in Firefox and IE6.

Dr. V