Page 1 of 1

Having troubles with CSS and aligning stuff on the page!

Posted: Tue Nov 29, 2011 3:52 pm
by mikeashfield
Ok, So, here I am again, asking for help.

I'm trying to get a centered NavBar on the page. The HTML of the page so far is:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="/global.css">
<?php
//Function that gets the current page URL
function curPageURL() {
 $pageURL = 'http';
 if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
 $pageURL .= "://";
 if ($_SERVER["SERVER_PORT"] != "80") {
  $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
 } else {
  $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
 }
 //The output from the funtion is $pageURL
 return $pageURL;
}

//This strips the URL down to the current page filename (example: index.php)          
$URLpieces=explode('.', basename(curPageURL()));
//Get rid of the file extention and replaces all underscores with whitespaces
$pageTitle=str_replace('_',' ',$URLpieces[0]);

//NavPages Array
$navArray=array('Home', 'About Me', 'Portfolio', 'Contact');

//Declares the current server adddress
$server_addr=$_SERVER["SERVER_NAME"]."/";
?> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Lang" content="en">
<title><?php echo "Mike Ashfield - ".$pageTitle; ?></title>
<link rel="stylesheet" type="text/css" href="glabal.css">
</head>
<body>
<h1>Mike Ashfield</h1>
<p id="subhead">Self-taught PHP, MySQL and JavaScript web developer</p>
<ul>
 <?php
    foreach($navArray as $navItem) {
        echo "<li><a href='htp://192.168.0.222/".str_replace(' ','_',$navItem).".php'>".$navItem."</a></li>";
    }
?>
</ul>
</body>
</html>

Code: Select all

@import url(http://fonts.googleapis.com/css?family=Signika:400,700,600,300);
@import url(http://fonts.googleapis.com/css?family=Prociono);

h1 {
    font-family: 'Signika', sans-serif;
    font-weight: 700;
    font-size: 4em;
    color: 661177;
    text-align: center;
    padding-top: 20px;
    margin: 0px 0px 0px 0px;
}
h2 {
    font-family: 'Signika', sans-serif;
    font-weight: 600;
    font-size: 1.75em;
    color: 6666AA;
    text-align: center;
}
a {
    display: inline-block;
    width:80px;
    text-decoration: none;
    color: purple;
}
a:visited {
    text-decoration: none;
    color: 00EE99;
}
a:hover {
    text-decoration: none;
    color: 666666;
}
ul {
    list-style: none;
    text-align: center;
}
li {
    font-family: 'Signika', sans-serif;
    font-weight: 400;
    display: inline-block;
    text-align: center;
}
#subhead {
    font-family: 'Prociono', serif;    
    font-weight: 400;
    color: AAAAAA;
    text-align: center;
}
Do you see how text-align: center; works for the <h1> and <h2> but not for the NavBar. It's slightly off to the right! Any ideas how I can fix this?

Re: Having troubles with CSS and aligning stuff on the page!

Posted: Wed Nov 30, 2011 1:59 am
by maxx99

Code: Select all

ul {
     list-style: none;
     text-align: center;
     padding-left: 0px;
}
Should do the trick

Re: Having troubles with CSS and aligning stuff on the page!

Posted: Wed Nov 30, 2011 2:36 am
by social_experiment
You could also try giving the ul element a width and setting it's margin to 0 and auto;

Code: Select all

ul {
    list-style: none;   
    margin: 0 auto;    
    /*
    experiment with the width
    */
    width: 30%;
}