Hello, I'm trying to teach myself the ways of CSS, PHP, HTML, etc over Christmas break. I know I'll only learn the basics, but I thought that coding my portfolio website would be a good way to learn. I'm also not sure if this is in the correct forum, but I think the problem lies within the CSS, not the PHP.
This is my portfolio, well at least the navigation, header, and content DIVs all set up. When I use the PHP includes for a page, in this case "frontpage.php", it gets rid of the header and the alignment is all wrong. Here is the code:
Link: Portfolio
CSS (layout_stylesheet.css)
HTML Code:
body {
background:#181d1b;
color: #FFFFFF;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 10px;
}
#wholesite {
position: relative;
margin-left:auto;
margin-right:auto;
width:700px;
height:1000px;
background-color:#181d1b;
}
#navbackground {
position: static;
top: 0px;
width:700px;
height:52px;
background-image:url(images/nav_bg.png);
background-repeat:no-repeat;
}
#nav {
position: static;
width:261px;
height: 51px;
float:right;
}
.menu {
margin: 0;
padding: 0;
list-style: none;
background: #181d1b;
}
.menu li {
padding: 0;
margin: 0;
height: 51px;
list-style: none;
background-repeat: no-repeat;
}
.menu li a, .menu li a:visited {
display: block;
text-decoration: none;
text-indent: -1000px;
height: 51px;
background-repeat: no-repeat;
}
.frontpage {background-image: url(images/navroll/frontpage_roll.jpg); width: 70px;}
.frontpage a {background-image: url(images/nav/frontpage.jpg);}
.dossier {background-image: url(images/navroll/dossier_roll.jpg); width: 51px;}
.dossier a {background-image: url(images/nav/dossier.jpg);}
.myworks {background-image: url(images/navroll/myworks_roll.jpg); width: 61px;}
.myworks a {background-image: url(images/nav/myworks.jpg);}
.touchbase {background-image: url(images/navroll/touchbase_roll.jpg); width: 79px;}
.touchbase a {background-image: url(images/nav/touchbase.jpg);}
ul.menu li a:hover {background: none;}
.menu li {float: left;}
.menu:after {content: ""; display: block; height: 0; clear: both; visibility: visible;
}
#header {
position: static;
width: 700px;
height: 208px;
background-image:url(images/header.png);
background-repeat: no-repeat;
}
#contentarea {
position: static;
margin-top: 10px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
width:100%;
height:740px;
background:#181d1b;
}
index.php
HTML Code:
<html>
<head>
<title>mp studio - web design, logo branding, and personalization.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="layout_stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wholesite">
<div id="navbackground"><div id="nav"><ul class="menu">
<li class="frontpage"><a href="#">Frontpage</a></li>
<li class="dossier"><a href="#">Dossier</a></li>
<li class="myworks"><a href="#">Myworks</a></li>
<li class="touchbase"><a href="#">Touchbase</a></li>
</ul></div></div>
<div id="header"></div>
<div id="contentarea">
<?
switch($_GET['id']) {
default:
include('frontpage.php');
break;
case "news":
include('news.html');
break;
case "contact":
include('contact/contact.asp');
break;
}
?>
</div>
</div>
</body>
</html>
I've played with the div positions and tried adding margins. After two hours I've given up and decided to find some help. What I want to know is if what I am doing is even possible. In my head it seems very possible, but I haven't touched web design in months and I am trying to get back into it but I am rusty.
Does anyone have a solution or alternative solution, any help would be greatly appreciated! Thanks in advance!
Last edited by mpdesign; 12-20-2010 at 09:47 PM..
|
