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:
http://joewarren.info/portfolio/newishhh%20copy.png
if anyone can help it would be really appreciated :]
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:
@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
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:
<!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:
@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