sicojola
26 Feb 2006, 05:38 PM
Hi, I'm starting my first web development project and I just can't get my width and height parameters to obey me. As you can see, I set my #rap width to 760px, but whenever I open up firefox and examine it with my web development extension, the rap is as wide as the entire page. Similarly, I want my header to be 198px but my tools say it's only 90px. If I change the size of my h1 font, the header height will change with it, but I want to set it manually. What's going on?
I'm also having what looks like some overlap issues on the right-hand side of my page items: the oval created by my -moz-border-radius gets slightly cut off.
Finally, is there a more elegant way to call my classForPageName function in my header?
My code is as follows:
index.php:
<?php include("header.php")?>
</body>
</html>
header.php:
<!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" xml:lang="en" lang="en">
<head>
<title>insert title</title>
<?php
$style_uri = "http://".$_SERVER['HTTP_HOST']."/style.css";
echo '<link rel="stylesheet" href="'.$style_uri.'" type="text/css">';
?>
</head>
<body>
<div id="rap">
<?php
function classForPageName($pageName)
{
if (isCurPage($pageName)) {return "current_page_item";}
else {return "page_item";}
}
function isCurPage($pageName)
{
$page = $_SERVER['SCRIPT_NAME'];
if ($page == $pageName) {return true;}
else {return false;}
}
//TODO: Is there a cleaner way to do this?
echo '<div id="header">';
echo '<h1>insert title</h1>';
echo '<ul id="headernav">';
echo '<li class='.classForPageName('/index.php').'><a href="/">home</a></li>';
echo ' ';
echo '<li class='.classForPageName('/blog/index.php').'><a href="/blog/">blog</a></li>';
echo ' ';
echo '<li class='.classForPageName('/code/index.php').'><a href="/code/">code</a></li>';
echo ' ';
echo '<li class='.classForPageName('/files/index.php').'><a href="/files/">files</a></li>';
echo '</ul>';
echo '</div>';
?>
</div>
style.css:
body {
background: white;
font: 14px "Trebuchet MS", Verdana, Arial, sans-serif;
}
body a {
color: #963;
}
body a:hover {
color: #c30;
}
h1 {
color: #ba7;
}
ol {
list-style: none;
}
#rap {
width 760px;
margin: 0;
padding 0x 8px;
}
/* HEADER */
#header {
height 198px;
width: 740px;
margin: auto;
background: #622;
text-align: center;
-moz-border-radius:20px;
}
#header ul {
margin: 0px 0px 0px 0px;
padding: 5px 5px 15px 5px;
list-style: none;
}
#headernav li {
display: inline;
}
#headernav li a {
padding: 0px 10px 0px 10px;
-moz-border-radius:25px 25px 25px 25px;
color: #ba7;
font-size:120%;
text-decoration: none;
}
#headernav li a:hover {
background-color: #950;
}
#headernav .current_page_item * {
background-color: #963;
}
Thank you for your help :karate:
I'm also having what looks like some overlap issues on the right-hand side of my page items: the oval created by my -moz-border-radius gets slightly cut off.
Finally, is there a more elegant way to call my classForPageName function in my header?
My code is as follows:
index.php:
<?php include("header.php")?>
</body>
</html>
header.php:
<!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" xml:lang="en" lang="en">
<head>
<title>insert title</title>
<?php
$style_uri = "http://".$_SERVER['HTTP_HOST']."/style.css";
echo '<link rel="stylesheet" href="'.$style_uri.'" type="text/css">';
?>
</head>
<body>
<div id="rap">
<?php
function classForPageName($pageName)
{
if (isCurPage($pageName)) {return "current_page_item";}
else {return "page_item";}
}
function isCurPage($pageName)
{
$page = $_SERVER['SCRIPT_NAME'];
if ($page == $pageName) {return true;}
else {return false;}
}
//TODO: Is there a cleaner way to do this?
echo '<div id="header">';
echo '<h1>insert title</h1>';
echo '<ul id="headernav">';
echo '<li class='.classForPageName('/index.php').'><a href="/">home</a></li>';
echo ' ';
echo '<li class='.classForPageName('/blog/index.php').'><a href="/blog/">blog</a></li>';
echo ' ';
echo '<li class='.classForPageName('/code/index.php').'><a href="/code/">code</a></li>';
echo ' ';
echo '<li class='.classForPageName('/files/index.php').'><a href="/files/">files</a></li>';
echo '</ul>';
echo '</div>';
?>
</div>
style.css:
body {
background: white;
font: 14px "Trebuchet MS", Verdana, Arial, sans-serif;
}
body a {
color: #963;
}
body a:hover {
color: #c30;
}
h1 {
color: #ba7;
}
ol {
list-style: none;
}
#rap {
width 760px;
margin: 0;
padding 0x 8px;
}
/* HEADER */
#header {
height 198px;
width: 740px;
margin: auto;
background: #622;
text-align: center;
-moz-border-radius:20px;
}
#header ul {
margin: 0px 0px 0px 0px;
padding: 5px 5px 15px 5px;
list-style: none;
}
#headernav li {
display: inline;
}
#headernav li a {
padding: 0px 10px 0px 10px;
-moz-border-radius:25px 25px 25px 25px;
color: #ba7;
font-size:120%;
text-decoration: none;
}
#headernav li a:hover {
background-color: #950;
}
#headernav .current_page_item * {
background-color: #963;
}
Thank you for your help :karate: