-
CSS help. +Rep
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:
http://joewarren.info/portfolio/newishhh%20copy.png
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
-
ill code the whole thing for £5 if you want.
-
nah, it's okay, i'm very low on money atm, thanks for offer though :)
guidance would be appreciated ;)
-
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!
-
I love you! Thanks a lot :D I shall have a read through the code to try and understand what's going on in the css :P
Thanks a lot :)
-
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
