16 replies [Last post]
omgwtf_css
omgwtf_css's picture
Offline
newbie
Last seen: 11 years 51 weeks ago
Timezone: GMT-6
Joined: 2010-08-22
Posts: 5
Points: 6

I dont know whats wrong with me that I cant get working with divs and css. It seems ridiculously hard to do something so elementary easy! Im going bat*beep* crazy! Crap never lines up, confused on what to use when. Ive watched loads of youtube tutorial vids, most of what never answer any questions. Plus these tutorial noobs should just quit making fricken tutorials in the first place cause all they do is say click here, click this, then do that without ever explaining wtf it is they are doing and how it relates to anything. Damn frustrating.

Can someone please convert my outputted Photoshop splices html example into css/divs so i can look at it and learn from what you did. Im good at figuring things out if i can see a finished example. Although your work flow description would be helpful if you can. I would like the divs page to be centered and basically have the Photoshop outputted splices html layout made to use the standard method for webpage layout using divs, or ap or whatever, just assemble it back with no gaping holes, thin nonadjustable lines.

Im using Dreamweaver 10 cs4.

THanks so much to anyone that can help me out.

Here is my photoshop html file and its images

http://www.delta-business.com/iDoTech/Downloads/please_convert_to_divs_and_css.zip

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 23 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Welcome to the forum.

First of all, that's not what we're here for. We won't write your code for you. People who are seeking only that become known as vampires (not the sexy ones) or leeches. I imagine your request is rooted in your frustration, and I can empathize even from seven or eight years removed. Smile But, if you want to learn, we will help you to understand what's going on so you can knowledgeably write your own pages.

Moving to css to control the page's presentation is not about div(ision)s; they're merely a convenient aggregating, neutral container. The real benefit is that you can now properly mark up your document with tags that truly describe the document's structure and semantic values. With such markup, any user agent (UA) can render the page according to its capabilities. The css then describes how the graphic/aural/print/mobile/etc. UA should render it.

Until you can separate the structure (html) from the presentation (css) from the behavior (javascript) in your own mind, you will have trouble. In fact, the longer you have been coding table layouts, the more you have to unlearn. (No non-trivial table layout can be well structured or semantically tagged.)

Most of us would strongly suggest you act as if you know absolutely nothing about html or css, and work through the tutorials at htmldog.com. Don't try to jump ahead. Do them all in order. Then rewrite your html, without any consideration for how it will look. In other words, create a well structured document with proper semantic markup, and we will critique it and offer corrections. Only after the html markup is right will the css be added.

Do this first step, and post a link to your "homework". Don't offer a zipped file; that's extra work for us, and only makes the process harder. We can use the linked page much more easily; help us to help you.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

omgwtf_css
omgwtf_css's picture
Offline
newbie
Last seen: 11 years 51 weeks ago
Timezone: GMT-6
Joined: 2010-08-22
Posts: 5
Points: 6

here is an example

why wont it let me post, says i triggered a spam filter.

omgwtf_css
omgwtf_css's picture
Offline
newbie
Last seen: 11 years 51 weeks ago
Timezone: GMT-6
Joined: 2010-08-22
Posts: 5
Points: 6

Lets see if im doing this

It wont let me link my picture.....

Lets see if im doing this right. If you can look at the example picture i linked and help clarify what i should be doing.

Each of the marked areas I sliced in Photoshop to be a separate image that im trying to put back together using divs rather then tables. The images are going to be the background to my divs. Then im going to have another div on top of the background apDiv to holds text/info etc..

So currently everything is in its own apDiv container, ive named them all accordingly, and able to set their properties, positions, backgrounds. Main problem is that Apdivs cant move relative to a page right? Cause i thought i could encompass all my apDivs inside a wrapper div so i can alight center so the web page would be centered.

But that doesnt work. Any ideas how i can get that to work? Or am i completely doing it wrong?

<div id="DivWrapper"> 
<div id="apdDivHeader">/div>
<div id="apDivNavBar">
       <a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','Home','',1)" onMouseOver="MM_nbGroup('over','Home','images/btn_Home_ro.jpg','',1)"</a></td>
     	</div>
<div id="apDivUpComingEvents"></div>
<div id="apDivSteamMusic"></div>
<div id="apDivNews"></div>        
 
</div>

Thanks

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 23 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Oh?

Quote:

But that doesnt work. Any ideas how i can get that to work? Or am i completely doing it wrong?

Slicing and dicing from Photoshop is likely the worst possible way to do things, Adobe claims notwithstanding.

Please read my post again, and follow the instructions.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

omgwtf_css
omgwtf_css's picture
Offline
newbie
Last seen: 11 years 51 weeks ago
Timezone: GMT-6
Joined: 2010-08-22
Posts: 5
Points: 6

Omg, I constantly get

Omg, I constantly get conflicting information on the best way to do things. FYI ive seen more its "best method" to use photoshop to splice your webpage design image for use in tables or divs then i have any other method. I can never get a straight fricken answer.

So tell me then, whats the best way to lay out a web page. Please tell me use tables lol.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 1 day 14 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2051
Points: 2283

omgwtf_css wrote:... FYI ive

omgwtf_css wrote:

... FYI ive seen more its "best method" to use photoshop to splice your webpage design image for use in tables or divs then i have any other method.

What year were these articles published? If it were 11 or 12 years ago, yeah. Modern day? Not a chance. Using photoshop to slice images into appropriate parts is one thing but using photoshop to splice images that you've allowed it to cut up and place into tables is quite another. Any use of photoshop's markup is really futile.

omgwtf_css wrote:

So tell me then, whats the best way to lay out a web page. Please tell me use tables lol.

First step that I would suggest is Gary's suggestion: http://htmldog.com

omgwtf_css
omgwtf_css's picture
Offline
newbie
Last seen: 11 years 51 weeks ago
Timezone: GMT-6
Joined: 2010-08-22
Posts: 5
Points: 6

ok i think i said the wrong

ok i think i said the wrong word, i use photoshop to slice it myself and output the images.... is there a difference between slice and splice? geeze. I have a simple single question you guys refuse to answer. I can feel the elitism is rampant here. I stay away from such people as you. Me, im always willing to help anyone with anything. Been a vs6 programmer for 12 years, could teach ya anything you want in photoshop, databases, networking, 3d modeling, maya, 3dstudio max, zbrush.

Its extremely rare that i ever need to come to forums to post questions cause I able to do find every answer to any question I have within minutes. Come here to try get a straight answer about css and divs to see if i got the concept right i get pointed to newbie html links.

Your a moderator of a forum to which its purpose is to help people get their questions answered. You know how much conflicting information there is out there in regards to css and divs apdivs, when to use them, layouts, etc...

Ill read through your htmldog and probably eventually find my answer, thanks for half assing it. Ill sit and moderate these forums for a while and when someone asks a quick simple question ill link them to Wikipedia.

Thanks.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

omgwtf_css wrote: Ill sit and

omgwtf_css wrote:

Ill sit and moderate these forums for a while and when someone asks a quick simple question ill link them to Wikipedia.

Um, you have to be a moderator to moderate a forum. Why don't you make better use of your time trying to accomplish what you originally came here to do, than wasting your time making useless posts on other people's threads in some lame attempt to score points?

If you're wondering why you've got on such a bad foot here, read back through your first post: it's full of whine; not exactly conducive for people wanting to help you.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 1 day 14 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2051
Points: 2283

Midol?

Really?? You were given a "newbie link" because it seems that you lack basic understanding of semantic markup and layout. The help you honestly require was offered.

If you want an easy way out instead of understanding the whys and hows, the layout in your first post is a simple two-column layout with a header containing a menu. Use the tools link in the main menu to automate your process.

omgwtf_css wrote:

... is there a difference between slice and splice? ...

You mean other than them being exact opposites? Party

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 25 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Gary treated you with

Gary treated you with grandmotherly kindness, and this is how you treat him? Look, it's no skin off our neck if you want to do web pages the wrong way forever. Feel free, but if you need help doing things wrong you should find a forum where they accept wrong practices.

This is not such a forum, because we are here to help you do things right.

Now if you want to do things the wrong way you are, as I said, perfectly free to do that, and it won't be we who will pay the penalty, it will be you, because your use of those wrong practices will cause you, not us, long frustrating weeks and end up in failure nontheless.

You know, if you take the wrong fork in the road the solution is to turn around, go back, and then take the other one. Blindly going ahead on the wrong road will not get you where you want to go however long you stay on it.

But if that's what you want, feel free to do it. But at least realize that it is you who will have to put up with the consequences.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 23 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

On not reacting like a luser

Quote:

Omg, I constantly get conflicting information on the best way to do things. FYI ive seen more its "best method" to use photoshop to splice your webpage design image for use in tables or divs then i have any other method. I can never get a straight fricken answer.

So tell me then, whats the best way to lay out a web page. Please tell me use tables lol.

Photoshop and other html generators such as Dreamweaver, when exporting to html can do it either of two ways:

  1. create a table layout; or
  2. create a bunch of un-semantically named divs, positioned absolutely.

Paraphrasing John N. Garner, neither method is worth a bucket of warm spit.

Since you say you're a programmer, compare table layout to not being able to re-use code, to not being able to call functions. Each page must have all the layout information hard coded. For example, a three column page is desired. The positioning of the columns is hard coded, first, second and third, left to right; on each and every page. Now, the boss walks in and says, "let's move the right column to the middle and put the middle one on the left." Oops! each and every page must be rewritten. With css, a single file would be edited and the changes would propagate throughout the site.

As for absolute positioning (AP), consider that each positioned element is invisible to all the other elements. Ever have a buffer overflow? AP is like that in that a content edit may cause the element to expand or contract; either leaving a gap or sliding over or under an adjacent element depending on the relative z-indices of the elements.

The AP page is fragile, and the table layout is a maintenance nightmare.

Quote:

I have a simple single question you guys refuse to answer. I can feel the elitism is rampant here. I stay away from such people as you. Me, im always willing to help anyone with anything. Been a vs6 programmer for 12 years, could teach ya anything you want in photoshop, databases, networking, 3d modeling, maya, 3dstudio max, zbrush.

I believe I gave you a quite comprehensive answer. That you don't like it is not a reflection on the respondent, but on yourself. If by elitism you mean we take pride in using the right tool, in the right manner to do the job, and that we prefer not to give answers that just get you by but are not best practice, then yes, we are elitists.

Quote:

Its extremely rare that i ever need to come to forums to post questions cause I able to do find every answer to any question I have within minutes. Come here to try get a straight answer about css and divs to see if i got the concept right i get pointed to newbie html links.

Absolutely correct. I did that because it is obvious you lack the necessary knowledge base to mark up and style the web document. Neither html nor css is rocket surgery, but both require some basic understanding in order for you to effectively use them.

Quote:

Your [sic] a moderator of a forum to which its purpose is to help people get their questions answered. You know how much conflicting information there is out there in regards to css and divs apdivs, when to use them, layouts, etc...

Which is why I directed you where I did; so you could get a solid grounding in both languages.

Quote:

Ill read through your htmldog and probably eventually find my answer, thanks for half assing it. Ill sit and moderate these forums for a while and when someone asks a quick simple question ill link them to Wikipedia.

I'm sorry you think I half-assed it by not simply coding your page for you. That you think it does not make it so. Never the less, what I said before still stands.

I wrote:

Most of us would strongly suggest you act as if you know absolutely nothing about html or css, and work through the tutorials at htmldog.com. Don't try to jump ahead. Do them all in order. Then rewrite your html, without any consideration for how it will look. In other words, create a well structured document with proper semantic markup, and we will critique it and offer corrections. Only after the html markup is right will the css be added.

Do this first step, and post a link to your "homework". Don't offer a zipped file; that's extra work for us, and only makes the process harder. We can use the linked page much more easily; help us to help you.

gary

//edit: "Grandmotherly kindness", Ed? Puzzled

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 25 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

gary.turner wrote: //edit:

gary.turner wrote:

//edit: "Grandmotherly kindness", Ed? Puzzled

It's a japanese term I believe, coming from an old Zen story I read once.

Basically a zen student gets frustrated because his master has him spending his time cleaning the loo and other equally unpleasant chors but says nothing to the student about zen. So the student goes to another master and that one ridicules and chastises him for failing to understand the first master's "grandmotherly kindness", whereupon the student becomes instantly enlightened.

I thought the reply you gave the OP was superb, far better than I could have done, and that you indeed showed him that "grandmotherly kindness" as in the story. I played the part of the second master but it seems it doesn't work when used by fools like I.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 23 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

I hate to admit it, but I

I hate to admit it, but I think I understand the story. Grade

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Nice Zen story Ed. good job

Nice Zen story Ed.

Smile good job I came to this party late as to be honest I would have been very far removed from being so Zen like.

It's funny how we come across so conceited, cocky, and supercilious. I had always thought we made such a ******* special effort to help people in such a gentle and nurturing way. it's feels - when one takes the last 7 years in general - to have been an utter waste of ones time - sometimes Wink

Programmers! you all need to take a step back and start looking at what web development actually involves and start to be less wrapped up in your arcane little group - I'm suffering this big time at the moment and am sick of heaps of attitude all over the web dev world - Learning is a continual process it NEVER ends understand this and understand also that frontend coding is a specific aspect of web development that has depth to be understood and is not picked up overnight.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Modern day take on that Zen

Modern day take on that Zen story? actually modern reality! that story lives and breaths in the real world and as far as able to discuss it is referred to as 'The Work' IIRC. I won't name the society as they do not court publicity, have existed for a century or more and I am not a member.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 25 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Maybe we should be using the

Maybe we should be using the old Zen monastary trick, which seems to have served them well over the years, in terms of getting willing students anyway.. Basically if you go to a Zen monastry and seek to study there they will tell you go away! They will call you bad names and tell you that people like you can't be enlightened and they aren't interested, and please go away.

Now actually they will let you in, but only if you refuse to go away and vow to stand there until they let you in no matter what, after which they will allow you to sit on the steps. And if you do sit there on the doorstep for, traditionally, three days without food or water (though usually a monk will come late at night and offer you some food as "medicine" to help you endure, if you agree not to rat on them.). Then they will begrudgingly admit you on the understanding that if you want to be there you have to follow their rules and not question anything.

The point is that, first, that most people who are refused something will want it all the more. So they get a lot of people trying anyway. And second since you've agreed as a condition of entrance to follow orders.

Of course Zen monastaries do not teach CSS, and for what they believe they are teaching you, asking questions and thinking will not get you there and so they are discouraged. Generally the kind of people who are envigled into studying Zen are vastly troubled by questions that cannot possibly be answered, like "what is reality?" or "who am I really?" and the intent of Zen training is to get you to the point where you are cured of asking such silly questions.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.