14 replies [Last post]
kish89
Offline
newbie
croatia
Last seen: 12 years 2 weeks ago
croatia
Timezone: GMT+1
Joined: 2009-11-08
Posts: 8
Points: 9

Hello,

I have sliced my design in Photoshop and saved it for web.
HTML file is well generated with CSS and DIVs.
But when I write some text in some DIV , DIV is extending, but not pushing another DIV down which is under that DIV, it is only writing over other DIV.
Can somebody help me?
Here is the link:
www.gadget-ducan.net/test

Thanks in advance

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 7 weeks 2 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

That is inappropriate use of

That is inappropriate use of absolute positioning. http://csscreator.com/node/11291

You need a web programmer to turn a design into a workable web page. Designers usually want to treat the browser window as a piece of paper and as you have learned that just doesn't work. Photoshop is not a good tool to create markup or CSS. It's fantastic for designing but it takes skill to translate that design into a workable web page.

I'm on the other side of this fence, I'm no artist (unless you want to consider me a REALLY AWFUL artist lol) but I can take an artists work and translate it into a correctly laid out web page.

kish89
Offline
newbie
croatia
Last seen: 12 years 2 weeks ago
croatia
Timezone: GMT+1
Joined: 2009-11-08
Posts: 8
Points: 9

So,the best way would be to

So,the best way would be to write CSS code from scratch, and not to use PS to generate it?
I assume that I need to read some tutorials, can you recommend me some where this thematic is well described?
Can somebody help me with editing existing code?
Or should I stick to design, and leave code to professional programmer? Smile

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 7 weeks 2 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

kish89 wrote: So,the best way

kish89 wrote:

So,the best way would be to write CSS code from scratch, and not to use PS to generate it?

Absolutely correct.

kish89 wrote:

I assume that I need to read some tutorials, can you recommend me some where this thematic is well described?

http://htmldog.com/

kish89 wrote:

Can somebody help me with editing existing code?

Sure. Either you can make your first attempt after reading the htmldog.com tutorials and ask for help here or you could hire someone to make the web template for you.

kish89 wrote:

Or should I stick to design, and leave code to professional programmer? Smile

You can try for yourself as long as you realize it's not an overnight process. You won't be proficient for quite some time. There is no shame in hiring someone with skills you don't yet possess. It's what I do so I appreciate when someone knows his/her limit and allows me to do my work. Smile

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

kish89 wrote: So,the best way

kish89 wrote:

So,the best way would be to write CSS code from scratch, and not to use PS to generate it?

First you should mark up your content with valid semantic HTML without worrying about how it will look at all and ignoring all presentational aspects as much as possible.

Then when you have done that and only then should you start to use CSS to make the page look like your design concept.

The previous suggestions of the HTML Dog tutorials are a good starting place. Keep in mind that good design for web pages is quite different from good design for paper media. This is encapsulated in the concept "The Web is Not Paper" and a read through John Allsopp's article of that title would be wise, as well as a read through all the pages at the "Truth and Consequences" site followed by some careful thought on the matter.

Ed Seedhouse

Posting Guidelines

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

kish89
Offline
newbie
croatia
Last seen: 12 years 2 weeks ago
croatia
Timezone: GMT+1
Joined: 2009-11-08
Posts: 8
Points: 9

Thanks a lot guys! I have

Thanks a lot guys!
I have read some tutorials on HTMLdog, and now everything is more clear to me.
Also, I have started writing CSS code from scratch, and for now everything is OK and design is on it's place.
But be sure, if I stick somewhere, will ask for help Smile

kish89
Offline
newbie
croatia
Last seen: 12 years 2 weeks ago
croatia
Timezone: GMT+1
Joined: 2009-11-08
Posts: 8
Points: 9

Ok, I have stucked, so please

Ok, I have stucked, so please help.
Here is the page:
http://www.gadget-ducan.net/test/
Here is the CSS file:
http://www.gadget-ducan.net/test/stil.css
And here are DIVs marked on design
http://www.gadget-ducan.net/help.JPG

Content will be dynamic (php and mysql)and it will be loaded to this DIVs:
kategorije_content (categories in english)
vas_racun_content (your account in english)
brza_pretraga_content (quick search in english)
main_content

When I load content, I want to push down DIV's which are under DIV's with content..
How can I do that?
Also,I want that DIV's "bar_lijevi , bar_srednji_desni1 and bar_srednji_desni2" are extended regardless to content DIV's

I hope that you understood me what I'm trying to say Smile

Thanks.

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

First, use a STRICT document

First, use a STRICT document type, not transitional. What are you transitioning from?

Second correct the HTML coding errors. Valid html is a necessity, not an option, if you want to succeed.

Third, your code should not consist of a whole bunch of DIV elements like that. You have a terrible case of "DIVITIS".

You haven't followed my advice to mark up your content in valid and semantic html FIRST before proceeding to styling. In fact you have no content in your html at all!! Anyone who visits your site with CSS off (such as a visually disabled person) will see nothing but a blank page!

Ed Seedhouse

Posting Guidelines

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

kish89
Offline
newbie
croatia
Last seen: 12 years 2 weeks ago
croatia
Timezone: GMT+1
Joined: 2009-11-08
Posts: 8
Points: 9

Ed Seedhouse wrote: First,

Ed Seedhouse wrote:

First, use a STRICT document type, not transitional. What are you transitioning from?

Second correct the HTML coding errors. Valid html is a necessity, not an option, if you want to succeed.

Third, your code should not consist of a whole bunch of DIV elements like that. You have a terrible case of "DIVITIS".

You haven't followed my advice to mark up your content in valid and semantic html FIRST before proceeding to styling. In fact you have no content in your html at all!! Anyone who visits your site with CSS off (such as a visually disabled person) will see nothing but a blank page!

Should I use this?

Hm, where do I have an error in HTML coding?
I have run HTML validator on w3.org and now site is passing the test.
Probably need to read some tutorials about HTML , not just CSS Smile

Well, what can I use instead of DIVs , tables?

What's you advice with using semantic html, is semantic html must have?

kish89
Offline
newbie
croatia
Last seen: 12 years 2 weeks ago
croatia
Timezone: GMT+1
Joined: 2009-11-08
Posts: 8
Points: 9

Ed Seedhouse wrote: First,

Ed Seedhouse wrote:

First, use a STRICT document type, not transitional. What are you transitioning from?

Second correct the HTML coding errors. Valid html is a necessity, not an option, if you want to succeed.

Third, your code should not consist of a whole bunch of DIV elements like that. You have a terrible case of "DIVITIS".

You haven't followed my advice to mark up your content in valid and semantic html FIRST before proceeding to styling. In fact you have no content in your html at all!! Anyone who visits your site with CSS off (such as a visually disabled person) will see nothing but a blank page!

Ok, I have changed to STRICT.

Hm, where do I have an error in HTML coding?
I have run HTML validator on w3.org and now site is passing the test.
I probably need to read some tutorials about HTML , not just CSS Smile
First I will play with semantic HTML, hoping for good results.

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

kish89 wrote: Ok, I have

kish89 wrote:

Ok, I have changed to STRICT.

Hm, where do I have an error in HTML coding?

It is valid now under the strict document type. However it is still completely meaningless due to the complete lack of content.

Quote:

I probably need to read some tutorials about HTML , not just CSS Smile
First I will play with semantic HTML, hoping for good results.

Indeed. CSS without html is meaningless. HTML came first and you need to understand how to write it correctly before you can do anything useful with CSS. HTML is the foundation of your web site, and as with a house, lack of a good foundation ends in disaster eventually.

Ed Seedhouse

Posting Guidelines

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

kish89
Offline
newbie
croatia
Last seen: 12 years 2 weeks ago
croatia
Timezone: GMT+1
Joined: 2009-11-08
Posts: 8
Points: 9

Ed Seedhouse wrote: It is

Ed Seedhouse wrote:

It is valid now under the strict document type. However it is still completely meaningless due to the complete lack of content.

All content will be pulled from mysql database with php, so it will be dynamic content.

Ed Seedhouse wrote:

Indeed. CSS without html is meaningless. HTML came first and you need to understand how to write it correctly before you can do anything useful with CSS. HTML is the foundation of your web site, and as with a house, lack of a good foundation ends in disaster eventually.

Any advice how to setup that content DIVs so they push down other DIVs?
Can that bars automaticlly extend regardless content?

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

kish89 wrote: All content

kish89 wrote:

All content will be pulled from mysql database with php, so it will be dynamic content.

Well, without some content there's no way to properly code html. Start with some sample content and mark that up with semantic html. Once you've got a typical page design you can remove the content and replace it with php functions to bring that in from the database.

Are you reinventing the wheel here? Designing your own cms or blog system is an extremely advanced topic and requires a lot of knowlege that you don't seem to have at this point.

Why not just pick a freeware cms like Joomla or Wordpress and use that?

Ed Seedhouse

Posting Guidelines

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

kish89
Offline
newbie
croatia
Last seen: 12 years 2 weeks ago
croatia
Timezone: GMT+1
Joined: 2009-11-08
Posts: 8
Points: 9

Ed Seedhouse wrote: Well,

Ed Seedhouse wrote:

Well, without some content there's no way to properly code html. Start with some sample content and mark that up with semantic html. Once you've got a typical page design you can remove the content and replace it with php functions to bring that in from the database.

Are you reinventing the wheel here? Designing your own cms or blog system is an extremely advanced topic and requires a lot of knowlege that you don't seem to have at this point.

Why not just pick a freeware cms like Joomla or Wordpress and use that?

Ok, I will fill some content and mark it with semantic HTML.

Problem is that I'm OK with coding in PHP , but not so good with HTML/CSS Smile
Yes, it's strange that I have learned PHP and struggling with HTML, but at the moment this is "as is".

I don't want some CMS because I have made myself nice and simple shopping cart, and that's all I need.
So, I'm actually making a template for shopping cart.

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

Well, I can't help much if

Well, I can't help much if you want to do everything in the, to my mind, backwards order. php is just a method of generating html as far as I'm concerned and if you don't already know how to design the html and CSS for a site you are a person man who wants to build a house without a foundation. It all seems rather pointless to me.

Ed Seedhouse

Posting Guidelines

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