34 replies [Last post]
artmak
Offline
Regular
Last seen: 11 years 2 weeks ago
Joined: 2009-05-04
Posts: 16
Points: 0

Hello All,

I would like to convert my current website (www.artmak.net) to CSS format. I did my site with photoshop, where I just slice things and then put it together in dreamweaver. But it is getting really time consuming to update, sometimes a whole day... :curse:

Do you think it will be possible to create same site as my design with HTML and CSS. I am very new to CSS, and the only sites I've seen is where you have to scroll down, but I do not want scrolling. I just want to keep same design but make it with CSS, or perhaps with HTML as long as it will be easy for me to update.

I was looking at creating tables with CSS, and I think this is the way to do it. Could you please give an advice what will be the best way to re-create my website with CSS.

Thank you!

Art

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 47 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

for one, there is no such

for one, there is no such thing as table to css conversion. The hardest part about moving from table-based design, to css design, is the frame of mind and how to train your brain that css and css divs are not a replacement for tables.

two, yes, this design can be done with html, with the help of css. please keep in mind that css does not replace html. you still construct your webpages with html. But you design with css.

I recommend getting a book on css and learn how it works with html.

ABCruz
ABCruz's picture
Offline
Enthusiast
Pilipinas
Last seen: 6 years 14 weeks ago
Pilipinas
Timezone: GMT+8
Joined: 2005-06-16
Posts: 279
Points: 0

Hi there. I don't believe

Hi there.

I don't believe you'll be able to avoid scrolling. As screen resolutions of today vary greatly, there's no way to ascertain that your design elements will fit as you'd like them to fit in your visitor's screens. I guess you'll just have to rethink your way of doing things. :shrug:

As for your site's current design, the home page broken on my end, unfortunately. I'm using Firefox 3.0.10 on Ubuntu, using a 1024x768 LCD. But yeah, in other pages, I get both vertical and horizontal scrollbars.

Anyway, as for your updating woes, and since you're open to the idea of using CSS. It might be a good idea to invest some time learning a Content Management System too, like Drupal, or even WordPress. CMSes are very customisable in terms of design, so you will be able to implement your own aesthetic to your site. But again, you'll have to invest your time on those, although I'd say that that will be a good investment.

Cheers and good luck.

Arielle

I am a Man of Truth.
I am a Free Human Person.
I am a Peacemaker.

http://www.abcruz.com

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 47 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Quote: I don't believe

Quote:

I don't believe you'll be able to avoid scrolling. As screen resolutions of today vary greatly, there's no way to ascertain that your design elements will fit as you'd like them to fit in your visitor's screens.

There are techniques that will keep the page from scrolling.

Quote:

Anyway, as for your updating woes, and since you're open to the idea of using CSS. It might be a good idea to invest some time learning a Content Management System too, like Drupal, or even WordPress.

Okay, lets learn to crawl before we run. First, learn html, then css. after that, you can do many other things.

ABCruz
ABCruz's picture
Offline
Enthusiast
Pilipinas
Last seen: 6 years 14 weeks ago
Pilipinas
Timezone: GMT+8
Joined: 2005-06-16
Posts: 279
Points: 0

Quote:There are techniques

Quote:

There are techniques that will keep the page from scrolling.

Pray, do tell. :jawdrop: Examples would be nice too!

Quote:

Okay, lets learn to crawl before we run.

...and immersion is a very good way to learn.

Arielle

I am a Man of Truth.
I am a Free Human Person.
I am a Peacemaker.

http://www.abcruz.com

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 47 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Quote: Pray, do tell.

Quote:

Pray, do tell. :jawdrop: Examples would be nice too!

maybe you should start a new thread and provide code and a need.

ABCruz
ABCruz's picture
Offline
Enthusiast
Pilipinas
Last seen: 6 years 14 weeks ago
Pilipinas
Timezone: GMT+8
Joined: 2005-06-16
Posts: 279
Points: 0

No, you.

No, you. :thumbsup:

I am a Man of Truth.
I am a Free Human Person.
I am a Peacemaker.

http://www.abcruz.com

artmak
Offline
Regular
Last seen: 11 years 2 weeks ago
Joined: 2009-05-04
Posts: 16
Points: 0

Thanks guys for your

Thanks guys for your feedback, but please don't start a war over this... :blushing:

I learn that CSS needs HTML, so I can make my site in HTML and use CSS for style. Can you please take a look at this website example, is this HTML with CSS??

http://www.eypaedesign.com

Thanks!

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 47 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

artmak wrote:Can you please

artmak wrote:

Can you please take a look at this website example, is this HTML with CSS??

This website is a bad example of html and css. Before you start to desgin with css, the html must be correct and be able to validate. This site has 126 Errors and 101 warnings. This is not valid html. After you get the html done correctly and validated, then you start with css. This site has 801 css validation errors. This is not the correct use of html or css. I dont know if this is your site, or not, but the programmer needs some lessons in html and css before he or she attempts to construct another webpage.

artmak
Offline
Regular
Last seen: 11 years 2 weeks ago
Joined: 2009-05-04
Posts: 16
Points: 0

Wow thats a lot of

Wow thats a lot of error!!

Its not my site, but I am trying to build something similar. How do you validate a site for errors? is there some kind of software that checks for error?

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 47 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

the w3C has a good validator

the w3C has a good validator for html and css.

artmak
Offline
Regular
Last seen: 11 years 2 weeks ago
Joined: 2009-05-04
Posts: 16
Points: 0

cool, thank!

cool, thank!

artmak
Offline
Regular
Last seen: 11 years 2 weeks ago
Joined: 2009-05-04
Posts: 16
Points: 0

cool, thanks!

cool, thanks!

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 41 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote:There are techniques

Quote:

There are techniques that will keep the page from scrolling.

I want to emphasise to the OP (artmak) that following those tricks is a Bad Idea. Stopping scrolling means you either lose content, require the use of Javascript (I sure don't have it on), or require microscopic fonts, which, what's the point? I've never seen a non-Flash site that didn't at some point require scrolling on my part. I have the same setup as ABCruz except my monitor is larger.

I learned decent HTML from this book (which is only a starter, you never quit learning HTML): Build Your Own Web Site the Right Way Using HTML and CSS by Ian Lloyd. It's old enough to be sitting in your public library if you have a decent one. Other than the fact that he starts you off in XHTML instead of HTML4.01 Strict, it's a good beginning.

I'm no expert, but I fake one on teh Internets

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 47 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Quote: I want to emphasise

Quote:

I want to emphasise to the OP (artmak) that following those tricks is a Bad Idea. Stopping scrolling means you either lose content, require the use of Javascript (I sure don't have it on), or require microscopic fonts, which, what's the point?

The site design will be easy to keep from scrolling. His content areas are small enough. He'll need to make small changes here-and-there, but overall, pretty easy.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 41 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

You think?? It's totally

You think?? It's totally exploding all over my 17 inches here.

But then, it's displayed very broken, and what normally would be just a background image on the body is clickable, and they all seem to click to some other random image, each of them taking about 10 minutes for my dsl to load... arg. I can't see enough of the site to tell what the "content" is. Most pages seem to be zero content all all image. Except at the bottom of the image is the site info: the name, some links... how can those be underneath a bazillion-pixel-tall image without a vertical scrollbar?

or would you fixed-footer this one?

I'm no expert, but I fake one on teh Internets

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 47 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

oh, i didnt notice the

oh, i didnt notice the clickable image part. Still just have a container with an a href that fills the entire container, and just apply the background image. He'll need to set the min-width to something small so it doesnt scroll, or just use a fluid layout.

artmak
Offline
Regular
Last seen: 11 years 2 weeks ago
Joined: 2009-05-04
Posts: 16
Points: 0

@Stomme - thank you for the

@Stomme - thank you for the advice on the book, I will definitely look it up! for some reason, I would like to keep the same design without scrolling because my main point is to show the images to the clients and 3d artists, sometimes it takes just a second for them to keep looking or turn away. I would like to keep it very compact, but also efficient, not too much stuff except for images. So one image on the cover page is like a decision point for them to keep looking or turn around. Perhaps it might be a good idea to expand the site with scrolling later, but this is when I get more content. For now I just would like to keep it simple and compact. But your advice on the size of the site is very important, I guess I made it too wide (its 1200x600, will probably reduce it to 1024.

@Cupids - I am reading about

? things and container box method or something its called, I think this is what I need, and with the help of the book that Stomme suggested I think I will be able to make new site sooner than I thought. Its pretty confusing right now, but I like how much more efficient this sounds than the old table method.

Thank you for your comments and I will update this post as soon as I start with new site.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 41 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Ah, re the time: the images

Ah, re the time: the images sure take forever to load on my machine and supposedly (they say) we have DSL here. So, your speed is affected either way and that's surely important? But yeah, you could stick the image as a background on the body and then it'll just be however big the user's computer screen is without causing scrollbars (but then you can't put the title and links on the bottom, not without using a trick like the sticky footer which I think I would do). A good thing to keep in mind then, when building a site, is to make your browser small. Make it 600 x 800 (the old standard). Can you reach, read, and click everything you've put on your site (even if you have to scroll to get to it, the important thing is, CAN you get to it)? Always a good test. People leave when they realise they can't get to anything. It causes frustration.

Reducing the size of the images would be a good thing for both those reasons then-- a smaller image will load faster than a larger image.

Second, the book I recommended is absolutely for beginners, and while it teaches you basic things (which of course you MUST know to figure out anything, basic or complicated) you will not learn any fancy techniques from that book. Esp since, as Cupid said, you'd likely need an anchor covering the whole page. That's actually a bit complicated.

I'm no expert, but I fake one on teh Internets

artmak
Offline
Regular
Last seen: 11 years 2 weeks ago
Joined: 2009-05-04
Posts: 16
Points: 0

Site 2.0

Hi guys!

I think I am in love with CSS!

I've been playing with CSS all week and finally grasped some things, and somethings just happened by accident! But so far I am really happy with the result, I was able to re-create my old site (made with tables) in CSS, and it looks very similar and loads much faster! Please check it out and let me know if I am doing anything wrong with the code, because I am still confused about "wrap" and stuff that is holding the whole site together. http://artmak.net/2/vis1.html

@Stomme - I tried to make my site smaller but it didn't look that nice on big screen, I mean most of the screens out there have at least resolution of 1200 pixels wide, and my target audience (architects and designers) for sure have bigger resolution monitors. Also the future is coming very soon, and I am building for the future I hope Smile

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

Yes you're correct the

Yes you're correct the future is coming and it's called Mobile Devices. If you thought you were being advised of a resolution you found too small, try around ~150px to play with Smile

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: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I have wide screens 22"

I have wide screens 22" ones, it's an utter waste to ever run my browser full screen and never do, it looks and feels wrong and is wasteful of my screen resource. My browser was set to 1154px wide, oddly wider than I normally have it at, I still had to widen it to see all your site. It always irritates me if I have to go and widen my browser to accommodate a site layout, but as horizontal scrolling is simply unacceptable I'm forced to to see all of your page.

A safe resolution or at least fairly safe (laptops would need to run browser full screen) nowadays is 1024, it's a fairly happy medium. Bear in mind that web pages are primarily for textual content and the odd graphic, with text you definitely do not want a single line stretching over a full 22" screen as it's unreadable, even with your index page it wouldn't suffer if brought down to around 1024.

Some issues that you must address, your use of ID's is incorrect an ID may only be used once per page all you duplicates will need to be changed to classes, if that is you can't feed the rules through use of descendent selectors to all those elements..

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

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 41 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Hmmm, but graphixy people do

Hmmm, but graphixy people do always seem to have their browsers open 100% wide like I do. One trick people do is load ginormous background images-- something to fill that 27" screen for the architects, while not actually having content there (or having content that sticks to the right side of the browser, so those with smaller screens can still reach the content, they just won't see the whole background image).

I think a purely design/architecture/graphics site, if ever expected to see the light of day on a mobile, would be its own page. Mobiles are NOT designed to be looking at super high resolution graphics. Then again, I also don't understand people who try to watch movies on a 100px screen either.

I'm no expert, but I fake one on teh Internets

artmak
Offline
Regular
Last seen: 11 years 2 weeks ago
Joined: 2009-05-04
Posts: 16
Points: 0

@Hugo - thanks for the

@Hugo - thanks for the comments, I guess I will make two versions so the user can decide before entering the site. Big version (1200px) and smaller version (1024px) or even (800px), but the only problem with smaller versions is that my links and boxes get too small.

Regarding ID's, I am still a bit confused where should I use classes and where id. When I go to validate my url, I find many errors regarding ID's, if I will use classes instead will it fix those errors? Like for example, I have 4 links, and I use

But then can I still use individual id for each link like

,
, and they are under same class

@Stomme - I agree with you, I don't understand either can how can people watch movies on 100px screens...

Thanks for your advice!

artmak
Offline
Regular
Last seen: 11 years 2 weeks ago
Joined: 2009-05-04
Posts: 16
Points: 0

Actually, I made it 1024px

Actually, I made it 1024px in CSS and HTML without going back to photoshop! This is great, I love coding! I kept the links and link boxes same size, and it looks actually OK to me. What do you think?

http://artmak.net/3/vis1.html

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 41 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote:Regarding ID's, I am

Quote:

Regarding ID's, I am still a bit confused where should I use classes and where id. When I go to validate my url, I find many errors regarding ID's, if I will use classes instead will it fix those errors? Like for example, I have 4 links, and I use

Yeah. If an HTML page has someone being given the name "link" as an id, then nobody else can also be #link. How would you call them? If George Foreman names all his kids George, how does he call just one? They must have something by which he can individually call each kid.

classes are for when everyone who shares that class, get shared instructions. Trying not to go overboard with either is a Good Thing. It's very easy to suffer from "classitis" where everyone and their brother is getting the class. Remember that you can also just use the actual element name too. Like if you have a menu as a ul with an id of "menu" then the li's inside don't need classes. You can instead do this:

  • stuff
  • x 5

    I'm no expert, but I fake one on teh Internets

    artmak
    Offline
    Regular
    Last seen: 11 years 2 weeks ago
    Joined: 2009-05-04
    Posts: 16
    Points: 0

    I see, thanks it is a lot

    I see, thanks it is a lot more clear now. I applied one class to all my box links, and it works like a charm. Also I validate again, and there is just 1 error now, instead of 13! I just have another question for you, about "ul", do you only use ul for drop down menus? Thats they only thing I could find for it.

    Stomme poes
    Stomme poes's picture
    Offline
    Elder
    Netherlands
    Last seen: 8 years 41 weeks ago
    Netherlands
    Timezone: GMT+2
    Joined: 2008-02-04
    Posts: 1854
    Points: 378

    Quote:about "ul", do you

    Quote:

    about "ul", do you only use ul for drop down menus?

    Since the only valid child of ul is li (so, not ul or div), the subs get contained inside a li. This is why every dropdown in existance has javascript for IE6 (except Stu's nasty cheating table trick, which is damned clever but not nice), because the way they all work on the idea that the user is hovering over the li to make the subs appear.

    Usually something like

    I'm no expert, but I fake one on teh Internets

    artmak
    Offline
    Regular
    Last seen: 11 years 2 weeks ago
    Joined: 2009-05-04
    Posts: 16
    Points: 0

    Stomme, thanks for the

    Stomme, thanks for the detailed replied! I am learning something new everyday from you! Do you know if it will be possible to create a dropdown menu from image files? Like what I have right now for my links, since I am using custom font, I am using PNG (with transparency). Do you think it is possible to create such drop down menu with png files for each word?

    I will try to give "ul" class name, and then give each "li" its own id name.

    Stomme poes
    Stomme poes's picture
    Offline
    Elder
    Netherlands
    Last seen: 8 years 41 weeks ago
    Netherlands
    Timezone: GMT+2
    Joined: 2008-02-04
    Posts: 1854
    Points: 378

    Quote:I will try to give

    Quote:

    I will try to give "ul" class name, and then give each "li" its own id name.

    Honest truth, you really only need to throw an id on the main ul-- everyone else can be referenced by what they are and who they are children of. If you look at the Suckerfish CSS, you'll see very few classes. You don't need to say, for instance, "sub" on every sub menu: every sub menu is already ul ul! Regular cascade.

    Example: view the source here: http://www.motorrijschoolemo.nl/ you'll see an id on the menu, then a class of "huidig" (current in Dutch) simply to give the "current page" link a highlight (nice, but not necessary). Another has a class of "instructeur" mostly to manipulate a background image and to help with a stubborn IE6. None of the other links have any id's or classes. There's some JS to give a delayed hover and some extra keyboarding help, but that's also just extra. IE6 is getting the CSS hover from Peterned, because as I said IE6 needs some help with hovering. IE6 users who don't have JS enabled are able to still click on the main-level links (so always make sure your main-level anchors GO somewhere, not "#"!) and from there, there's a menu in the main content area too. Redundant, but safe.

    If I have classes, it's usually on li's for things like being the only li without a border or something. Basically stylehooks.

    Quote:

    I am using custom font, I am using PNG (with transparency). Do you think it is possible to create such drop down menu with png files for each word?

    You can have images, though maybe first build a menu with normal text first-- nobody but geniuses builds one menu and have it down pat.

    png's will cause issues in IE6 if they're partially transparent. If they have transparency, either see if you can show them as gif's (if you use background images you can feed png's to modern browsers and * html #ELEMENT {gif's} to IE6).
    Or, try png's with a background too-- this would work better, as you could give everyone the png's and you could also use image replacement (sit the image right on top of the text, covering it and hiding it, and those without images can still read the text).

    But I'd do the menu first, just plain. Image replacement is extra work-- you might also be able to get away with

  • name of link
  • if they are not changing on :hover or :focus. That's simplest, and not image replacement (which usually requires extra elements).

    I'm no expert, but I fake one on teh Internets

    artmak
    Offline
    Regular
    Last seen: 11 years 2 weeks ago
    Joined: 2009-05-04
    Posts: 16
    Points: 0

    @Stomme - thanks again! I

    @Stomme - thanks again!
    I will try those techniques and post my updated site soon.

    artmak
    Offline
    Regular
    Last seen: 11 years 2 weeks ago
    Joined: 2009-05-04
    Posts: 16
    Points: 0

    Updated almost all of my

    Updated almost all of my links. I guess, I am not doing dropdown menu yet, because I don't have much content. Still need to add info somehow for every image, I am thinking of hover over effect when you hover over the "info" on the top left corner, or when you click maybe there will be somekind of css popup. At this point, I do not want to add an additional html page just for the info of every image, so any alternative will be great.

    http://www.artmak.net

    Can you please check the speed, it seems to be working slow here, maybe its my internet...

    artmak
    Offline
    Regular
    Last seen: 11 years 2 weeks ago
    Joined: 2009-05-04
    Posts: 16
    Points: 0

    I think my site is complete,

    I think my site is complete, now I need to create a blog that follows same design.

    http://www.artmak.net

    Thank you guys, especially Stomme, for all your advice and comments!

    nazar2k2
    nazar2k2's picture
    Offline
    newbie
    india
    Last seen: 11 years 4 weeks ago
    india
    Joined: 2009-07-10
    Posts: 6
    Points: 0

    Better Try a CMS

    Hai,

    It would be better to try some CMS like Drupal as this CMS supports CSS and there will be no complex in doing it.Everything will be provided by default and just you need to edit the CSS for your requirements.

    Mod edit/ Promotional links removed. Links are available to members in their signature line after a period of time on the forum.

    artmak
    Offline
    Regular
    Last seen: 11 years 2 weeks ago
    Joined: 2009-05-04
    Posts: 16
    Points: 0

    Yes! After tons of errors

    Yes!

    After tons of errors and mistakes, my first custom wordpress theme is done! I am very happy with result! Now I can take a little break from web-design and do some 3d work.

    Check it out:
    http://www.artmak.net/blog

    nazar2k2 - thanks for the info, I will look into CMS technology, Drupal and Joomla.