CSS help. +Rep

Joe! · 27-01-2009, 11:52 PM

Let me get this out the way, i'm crap at css, end of.
before you start saying, how can you have a portfolio if you cant code css, it's not for design work, so doesn't matter really.
I've got this far (http://joewarren.info/portfolio/) but i just cant get it to work properly

It should look like this:

if anyone can help it would be really appreciated :]
HTML code:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Joe Warren</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrap">
    <div id="logo"></div>
    <div id="nav">
            <a href="?page=home">home</a>
            <a href="?page=work">work</a>
            <a href="?page=about">about</a>
            <a href="?page=contact">contact</a>
    </div>
    <div id="bg_top"> </div>

  <div id="bg_main"><h1>heading 1</h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.<p></p>
    <h1>heading 2</h1>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.
  </div>
    <div id="bg_footer"></div>
</div>
</body>
</html>

CSS code:

Code:

@charset "utf-8";
/* CSS Document */
body {
background-color: #2d2d2d;
}
#wrap {
width: 70%;
margin-left: 15%;
margin-right: 15%;
}
#logo {
margin-left:40px;
height: 60px;
width: 125px;
left:auto;
background-image: url(images/logo.png);
}
#bg_top {
height: 33px;
background-image: url(images/bg_top.png);
background-repeat:no-repeat;
}
#bg_main {
background-image: url(images/bg_main.png);
background-repeat:repeat-y;
padding-left: 50px;
padding-right: 50px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:12px;
color: #9ec1ca;
}
h1 {
color:#e98427;
font-weight:bold;
font-style:italic;
font-size:36px;
font-family:Arial, Helvetica, sans-serif;
}
#bg_footer {
background-image:url(images/bg_footer.png);
background-repeat:no-repeat;
height:100px;
}
#nav {
width: 100%;
}

#nav ul {
    list-style:none;
    margin: 0px;
    padding-bottom:35px;
    list-style: none;
}
#nav li {
display:block;
}
#nav a {
    margin-left: 5px;
    padding: 6px 6px; 
    background: #353535;
    text-decoration: none;
    text-transform: uppercase;
    font-family: Arial; 
    font-weight: bold;
    font-size: 12px;
    color: #FFFFFF;
}
#nav a:hover {
background: #fa851c;
}

ty in advance

engaged · 28-01-2009, 12:06 AM

ill code the whole thing for £5 if you want.

Joe! · 28-01-2009, 12:12 AM

nah, it's okay, i'm very low on money atm, thanks for offer though

guidance would be appreciated

Iszak · 28-01-2009, 02:31 AM

Hey Joe,

I've re-did your website I hope it's what you expected it's HTML 4.01 Strict valid as well as CSS 2.1 valid, it is accessible for screen readers with image replacement techniques and should be pretty much identical in most browsers except Internet Explorer 6 but if you want me to fix it for IE6 just say so, it's not so much trouble.

Preview: http://www.iszak.net/free/joezo/
Download: http://www.iszak.net/free/joezo/Joezo.zip

Enjoy!

Joe! · 28-01-2009, 09:08 AM

I love you! Thanks a lot

I shall have a read through the code to try and understand what's going on in the css

Thanks a lot

Joe! · 28-01-2009, 06:22 PM

On question, how come the shadow on the main like box doesnt work on IE, only on firefox?:s Is it the way the images are saved or what?
Thanks again ;p

Thread: CSS help. +Rep

Thread Tools

CSS help. +Rep

Posting Permissions