Hey everyone,

 

I'm new to CSS, but now web design. I could find a way to build this design in tables, but thought I might try the CSS thing. I've been reading a bunch and have a general plan, but any advice on where my plan could be improved or if I should stick with tables would be great.

 

Kind of hard to tell you exactly how to do this, but it seems like a pretty straight forward design to code. Your problem on this design will be the big image. Is it a static image?

 

I think you should try to build a solid layout in divs and css. Sure we will help you out.

thanks for the response. I would like if the images could be randomly pulled, but I can handle if it were static as well. Can you expand more on what divs is? I'm currently trying to hack something out in css and hope to have code to post tomorrow or so.

 

-Eric

Hi eric.

 

there's a ton and a half of sites dedicated to learning basic and advanced CSS.

i suggest you start here.

 

That said, your design above is fairly easy to build.

Is it just a test or a real project?

Thanks for the responses. I've been reading a ton and actually have the general layout done after working this evening. It is a test site.

 

thanks

The key to CSS is the <div> </div> that's what was holding me back originally from designing in pure CSS. Tables are easy and that's why many people use them but the bloat code. Too much code equals a hard time for the search engines to parse your site. I would check out http://www.w3schools.com there you can find tons of resources to help you in your endeavors. Also I would suggest putting most if not all of your CSS in an external style sheet. This is for two reasons... 1) it makes your page less bloated and easy to read by the search engines and you when you want to tweak code. 2) It keeps it almost out of sight from prying eyes who like to borrow.

 

That's just MHO.

 

-Seth

Thanks so much for the responses. I took a crack at building the site, but I have image problems in IE.

 

Please look at www.hutec-inc.com/test

 

In firefox it looks good, but no images show in IE?

 

Any help would be appreciated, here is my css:

 

body {margin:0; padding:0; background: #fff; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", verdana, helvetica, arial, sans-serif;}

html,h1,h2,h3,h4,h5,h6,p,ul,ol,li,pre {margin:0; padding:0; font-size: 0.85em; font-weight: lighter; line-height: 1.4em; text-align:left;}

h1 {margin:0; padding:0 0 10px 0; font-size:1.3em;}

h2 {margin:0; padding:0 0 10px 0; font-size:1.1em;}

h3 {margin:0; padding:0 0 10px 0; font-size:0.95em;}

h4 {width:450px; padding:0 0 10px 0; margin:0; font-size:1.2em;}

h5 {width:450px; padding:0; margin:0; font-size:1.2em;}

p {margin:0; padding:0 0 10px 0; font-size:0.85em;}

ul {margin:0; padding:0; font-size:1.0em;}

li {margin:0; padding:0;}

p {padding:0 0 10px 0; margin:0; line-height: 1.4em;}

a {color: #7ab8ca;}

a:hover {color: #5eb1d8;}

a img,:link img,:visited img {border:none;}

address {font-style:normal;}

:link,:visited {text-decoration:none;}

ul,ol {list-style:none;}

input,form {color:#262626;}

form,fieldset {border:none; margin:0; padding:0;}

{behavior: url(http://www.hutec-inc.com/test/css/iepngfix.htc) }

 

/* styles for IE 5 Mac */

#horizon {background-color: #fff; position: absolute; top: 20px; left: 20px;}

 

/* following rules are invisible to IE 5 \*/

#horizon {top: 3%; left: 0px; width: 100%; text-align: center; min-width: 760px; }

/* end IE 5 hack */

 

/* #wrapper {margin:0; padding:0; width:100%;} */

#wrapper {background-color: #fff; border: solid 5px #000; position: relative; text-align: left; height: 662px; margin: 0px auto;}

.mainwrapper {width: 930px; min-width:760px;}

.altwrapper {width: 760px;}

 

#header_wrapper {margin:0 auto 5px auto; padding:0; width:100%;}

#header {margin:0 0 0 19px; padding:0; width:96%; height: 51px; background: transparent url(../image/testlogo.png)no-repeat bottom left;}

#content {margin:0 auto 0 auto; overflow:visible;; padding:0; width:100%; height:500px;}

#logo-float {

position:absolute;

top:479px;

right:34px;

background: transparent url(../image/testlogo.png)no-repeat bottom left;

width: 207px;

height: 65px;

}

#footer_wrapper {margin:5px auto 0 auto; padding:0; width:100%; height: 30px;}

#footer {margin:0 auto 0 auto; padding:0; width:100%; color:#99b2b7;}

#copyright {float:right; margin:0; padding:0 25px 0 0; width:460px;}

#copyright p {margin:0; padding:0; color:#99b2b7; text-align:right;}

#terms {float:left; margin:0; padding: 0 0 0 23px; width:300px; color:#020202; text-align:left;}

#terms a {margin:0; padding:0; font-size: 0.85em; color:#99b2b7;}

#terms a:hover {color:#6e8084;}

 

#slide_container {margin:0 auto; padding:0; width:100%; height:570px; background: #fff;}

#slide_container_home {background: #fff url(../image/run.gif) no-repeat top left; margin:0 auto; padding:0; width:96%; height:500px;}

 

 

.slide {float: right; margin:0; padding:0 25px 0 0; width:650px; height:5800px; overflow: hidden;}

.slide a {color: #5eb1d8; /* padding-right:20px;*/}

.slide a:hover {color: #29a0d8; /* background: transparent url(../images/linkbg.png) no-repeat top right;*/}

.slide h1 {height:40px; padding:0;}

.slide h2 {height:370px; padding:0; background: #fff; border: solid 3px #000; overflow:hidden;}

.slide h3 {height:40px; padding:0;}

.slide h4 {margin:0; width:335px; padding:10px 15px 4px 15px; font-size:85%;}

.slide h4.offices {width:450px; padding:0 0 10px 0; margin:0; font-size:1.2em;}

.slide p {margin:10px 0 0 0; padding:0 15px 0 15px;}

.slide p.team {width:335px;}

.slide ul {margin:0; padding:0;}

.slide li {margin:0; padding:0 15px 10px 0;}

 

#home {height:470px;}

Screengrab from my computer: http://i28.tinypic.com/t8nujk.png

 

Win XP & IE7, LCD resolution 1680 x 1050.

 

Not sure why TinyPic has converted my PNG screengrab to a JPG, though.

exactly, so any ideas why the images aren't showing up in IE, but are there in Firefox?

 

Thanks