cssfreakie

Do you have an online example....? this code is valid enough to be displayed by IE. With link, which of the 35 you mean? the gallery? and which of those you have 2....

never mind, they are both serverside scripts. this is the html forum. html is a markup language for the clientside

although we eat diamonds for breakfast and live in the clouds, we do not have visionary skills. could you maybe give the error message? got an online example also, and in laymen terms: read the forum rules, that way you would have know that when including code we use something called bbcode to include code.

yeah you can send it through. no problem

you may also want to combine that with a local server like wamp, installation is under 5 min. on my blog i wrote a simple guide how to combine netbeans with wamp. also, while you're googling, maybe order a new shift button, yours seem to be broken

if i may advice, first make a nice framework, with no content at all. so just some divs. After that make a general layout for the content. probably also just a div, with a h2 and a paragraph in it. As soon as you are doing thing twice, you can do it better and faster. Do you have it hosted somewhere so i can take a look?

I hope you do realize, that the code you posted is serverside, and html is a clientside ,the same is for css.

don't use so many breaks, nor use no breaking spaces, it's extremely redundant. Us margin or padding depending on your needs. Keep in mind the css boxmodel

i don't use dreamweaver because it sucks for how i work, That said, i use netbeans. so where you panel is i have no idea. oveflow hidden i use that when i don't know the height of div, but i did set a width, by using overflow: hidden (little trick) it will shrinkwrap. have a read here: i wrote something about it: http://cssfreakie.blogspot.com/2011/03/fixing-clearfix-by-using-overflowhidden.html Now you question on clears and floats, in a nutshell (but you better read the w3.org manual on it): float comes in 2 flavours, left or right, clear comes in 3 flavors left right and both. The best thing to do is just play it, becaus eif i tell you you will forget it the moment you read it. If you want try to solve the attached image with as little as possible markup and css. , happy to review that code, ones you did it right, you understand clears and floats. But first read the manual: http://www.w3.org/TR/CSS2/visuren.html#floats' the only reason why that div is pushed down is either there is not enough space for it. or you removed float on the center div. The code i provided works, so if dreamweaver facks up. try out netbeans or vim, they are free, so you don't loose anything. [attachment deleted by admin]

just google for how to css image sprites, it's pretty easy ones you know how. Another good thing is that sprite reduce the amount of header requests, making your website faster than it would be if it uses crap loads of separate images

Since you work in photoshop or any other editor, you already know what the dimensions are of the elements. The best tool is your own brain. just get a decent editor like for instance netbeans, vim etc and create the code yourself. And don't use wysiwyg editors because they all suck and produce redundant code. (how could photoshop know you need a class for something and sometimes even a class is redundant if you can use the id of the outer element to set style to inner elements,.. we need our brains to decide on that) A little trick though could be to use something like a grid overlay, it places predefined guidelines on your layer so you can design within the given dimensions. Any decent design uses a form of grid (your elements are nicely aligned not? so you use a grid, without knowing it.) As for slicing, i pretty often see that people use the automated slice function of photoshop (there are even employers that find it vital that you can do that) Although those people have no idea what the fack they are talking about, most designs made in photoshop or any other editor don't need to be sliced, instead you could use on big image sprite in case it's a heavy design, which most people create. And for anything but photo's don't use a photo editor, because a 2d vector design can probably do exactly the same and it saves quite some kb's. Hope this helps in a way. cssfreakie kiss (keep it simple stupid)

Before I start of just some things to pay attention to: + your images, are missing an alt tag + don't give images dimensions in html. + and above all before you start adding content, make your framework, not the other way around. Set background colors on everything so you can see where all elements are. (remove afterwards of course) Do with this info what you want you can ignore it, but it will save you quite some time. + apply some logic to the way you build up a page, group the header elements, group the center elements group the footer elements. anyway i gave all your elements a background color and stripped it down to a framework but keeping the dimensions, and noticed pretty soon that your center div, does not use float. since it is a block element it pushes of the element (div right) So I removed that weird margin left and right which are totally not necesarry and added a float to div center. and now it works as a charm. besides that it now looks like a modern art work instead of an advertisements for big booties I also added a header div around all those header crap. and added some comments in the css and brought some proper indentation in to it. So here is the code it works, so next time you make a design, <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <link href="assets/freakstyles.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #wrapper { width: 1320px; margin-right: auto; margin-left: auto; height: 1300px; background:yellow; } #header{ width: 1320px; overflow:hidden; background:#000; } #centercolumn { width: 930px; background:greenyellow; overflow:hidden; /* you did not supply a height for it */ float:left; } #logo { height: 154px; width: 280px; float: left; background:#f4a; /* pink */ } #leftcolumn { height: 727px; width: 176px; float: left; clear: left; margin-top: 63px; margin-right: 10px; overflow: auto; background:#00ccff; } #rightcolumn { height: 727px; width: 176px; float: left; margin-top: 63px; margin-left: 10px; background:#333; } #navigation { width: 600px; text-align: right; height: 20px; float: right; background:#fff; } #squaread { height: 357px; width: 359px; float: left; clear: right; margin-top: 63px; background:#999; } #newestimages { height: 474px; width: 560px; float: left; margin-top: 63px; margin-left: 10px; background:#ff9f0e; } #popularcategories { width: 925px; height: 323px; margin-top: 10px; float: left; background:#fbc2c4; } #footer { width: 1300px; margin-left: auto; margin-right: auto; margin-top: 10px; text-align: center; background:#0000cc; } #topad { width: 736px; float: right; background:#008000; } #bottomad { margin-top: 10px; background: #00FF00; /* missing dimensions */ } body { margin-top: 0px; background: red; } </style> </head> <body> <div id="wrapper"> <div id="header"> <div id="logo">logo</div> <div id="topad">top ad</div> <div id="navigation"> <form id="form1" name="form1" method="post" action=""> upload images | contact | terms of use | search:<input type="text" name="search" id="search" /> Search<input type="submit" name="search2" id="search2" value="Submit" /> </form> </div> </div> <div id ="leftcolumn"></div> <div id="centercolumn"> <div id="squaread">Squared ad</div> <div id="newestimages">newest images</div> <div id="popularcategories">popular categories</div> </div> <div id="rightcolumn"> rightcolumn </div> </div> </body> </html>

lol sorry it was diner time, I meant sticky of the css forum. anyway in order to help the fastest way would be to post clientside code, and or an online example. Css and html are visual things.

Well, if you looked at it you can see the logic, in the grid system. efficiency and an understandable framework is the key. You don't have to use it of course, but ones you see what they do you understand that most layouts can bee achieved with just some floats and clears.

mantra, is a little sentence repeatedly mumbled by Buddhists when meditating. As far as copying an image, if it is a copyright-able expression of the author, it certainly is not legit. But you can change it a bit in order to remove his expression (which gives it the stamp of the author) so you end up with just the bare subject matter and than it's perfectly legal.

the right type of green is relaxing for the eyes, and blood is less gore on a green background. (but not just any green choose the right one, more pastel) although there is a trend to use a typical shade of purple too. nice book could be: http://books.google.nl/books?id=Ymx9ZDHzHL0C&printsec=frontcover&hl=en#v=onepage&q&f=false around page 97 more info.

I would add some mantra rules in it Like: Css, is all about targeting elements by using selectors classes and id's before you start of get a pen and pencil and shape your idea, before you start coding In addition to King Philip Maybe add a 4th series of tutorials after the real world example, named efficiency or something. That could be more advanced, in order to remove redundancy, choose a font, choose some colors. (if you have time left of course) If you require images that need to be drawn, and there are not too much of them, I am happy to provide them if you can give me a sketch.

we need code. so that's html and css. A nice thing could be o get a free host to dump your test pages so we can view it online.

look although the above may seem obvious for you, I have no idea what div you mean, besides that, some online example would be nice. or atleast the css, that give properties to these divs. While i have no idea which div you're talking about. Does the anomaly div has a position absolute?

if your experimenting, clean the lab, and ditch all tables. you clear and floats for your framework. or us ea grid system to do that for you. th yui or 960grid seems to be very nice if you want a out of the box solution.

hooray! the solved button is back from sabbatical.

It really depends on you clients, their needs and your experience. What could be nice is to ask yourself what would be a fair price? (what would i pay if i were him). say you know nothing about css, and you need 3 months to create something that is not even valid. can you even ask that amount of time? even if you ask 10 dollars an hour that would be extremely expensive and the result is garbage. While a professional probably can make that in 1 day. Now it would be pretty odd if that professional would earn less than a rookie, so they pump up the hourly rate. People that hire you expect you to know your stuff, if they know you still need to learn they probably have a max they are willing to pay for it. Making a website requires knowledge, thus time invested studying, not everyone can because they lack brains. So don't compare yourslef to someone flipping hamburgers. So don't rob your clients serve them, with quality and they will stick even if someone else is cheaper.

nice initiative crmamx, happy to review it, and and help a bit in making sure the things told are indeed correct . Although it will never be a replacement for a good book, experience from the viewpoint of someone that just learned it can be pretty useful for others. Good luck! don't forget to get outside in the sun though

well it could be that bthey use IE7 or even worse. in that case, you can try to give the div a width of 49.5% or something. If you use float left on both nooone wil notice. but use conditional comments for this so all decent browser don't get affected.

lol i thought the person means "clears"