help with layout please!

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
moisea
Forum Newbie
Posts: 13
Joined: Wed Nov 01, 2006 2:29 pm

help with layout please!

Post by moisea »

hello, i need some help please regarding the website. i use a css template but i crashed as soon as i added php into it. here is the code:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
<title>mytitle</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="">
<style type="text/css">

  body {
    margin:0;
    padding:0px 25px;
    text-align:center;
    color:#F0F0EE;
    background:#000000/*DCD9C8*/;
  }

  #header{
  position:relative;
  display:block;
  margin:0;
  padding:0;
  background-image:url(images/tyreese_header.jpg);
  background-repeat:no-repeat;
  height:65px;
  }
  #container {
   width:100%;
   margin:0 auto;
   text-align:left;
   overflow: hidden; 
   float:left;
  }

  #sub-content{
    float:right;
    width:22.9%;
    background:#3E3F3A;
	padding:5px 5px;
	text-align:center;
  }

  #wrapper {
    float:left;
    width:76% ;
	/*width:77% !important;*/
	background: #3E3F3A;
	overflow:hidden; 
	
  }

  #main-content {
    float:left;
    width:67%;
    background:#A59257;
	padding:0px 5px;
	border-bottom-style:solid;
  }

  #navigation {
    float:right;
    width:30%;
    background:#8F927F;
	padding:0px 5px;
  }
  			/*Menu*/
    #navlist{
	padding-left: 0;
	margin-left: 0;
	border-bottom: 1px dashed gray;
	width: 220px;
  }
	
	#navlist li
	{
	list-style: none;
	margin: 0;
	padding: 0.25em;
	border-top: 1px dashed gray;
  }
	
	#navlist li a { 
	display:block; 
	text-decoration:none; 
  }
	
	#navlist li a:hover{ 
	color:#FFFFFF;
	background: #3E3F3A/*A59257*/;
  }
			/*E.O.Menu*/

  #footer{
    clear: both; 
    width: 100%;
	background: #3E3F3A;
	/*color: #FFF;*/
	/*text-align: center;*/
	padding: 5px 0px;
	overflow: hidden; */
	float:left;
  }
  
  #footercopy{
	float:right;
	padding:0px 35px;
	color:#FFFFFF;
  }
  
  #header_img{
  padding:5px;
  margin:5px;
  }
  
  /*hack for faux columns*/

#main-content, #navigation, #sub-content, #wrapper  
	{
	padding-bottom: 32767px;
	margin-bottom: -32767px;
	}
* > #footer, * > form, * > #notes, * > .output  /*This hack is for Opera faux columns, called, the child selector hack*/
	{
	position: relative;
	z-index: 1000;
	}
/*End of hack for faux columns*/


</head>
<body>
<div id="header"></div>

<div id="container">

<div id="sub-content">
<img src="images/myimg.jpg" alt="" />
</div>

<div id="wrapper">
<div id="main-content">
<h2>My Gallery</h2>



<?php
if(isset($_POST['submit'])) {

  $to = "user1@yahoo.com, user2@yahoo.com";
  
  $subject = $_POST['subject'];
  $name= $_POST['name'];
  $email = $_POST['email'];
  $message = $_POST['message'];
  $body = "$message";
  $continue = "/"; // homepage or "mypage.htm" or "http://www.elsewhere.com/page.htm"

  // email validation
  $error_msg=''; 

           if(trim($name)=='')  {
              $error_msg.="Please enter your Name and/or Surname !<br>";
     } 

           if(trim($subject)=='') {
              $error_msg.="Please enter a subject title !<br>";
     } 

 if(trim($email)=='') {
           $error_msg.="Please enter an email!<br>";
     } else {
           // check if email is a valid address in this format username@domain.com
           if(!ereg("[0-9a-z]([-_.]?[0-9a-z])*@[0-9a-z]([-.]?[0-9a-z])*\\.[a-z]", $email)) $error_msg.="Please enter a valid email address<br>";
     }
      
      // display error message if any, if not, proceed to other processing
      if($error_msg=='')
{
     if(mail($to, $subject, $body))
     {
       echo "Thanks <b>$name</b>, <br>Your message has been submitted to <br><b>$to</b></br>!</br>";    //display the message to say that your message was sent to....
       echo '<br><a href="' . $continue . '">Click here to continue.</a>'; 
          
     }
     else
     {
        echo "<font color=red>please try again later</font>";//there was an error with the mail function - please try again later
     }
      
  }
    else
   {
       echo "<font color=red>$error_msg</font>";
} 

 } 

mail($to, $subject, $body);
?>


<div id="contact-message">
<div id="navigation">

<ul id="navlist">
<li id="active"><a href="index.php" id="current">Home</a></li>
<li><a href="about.php">About Me</a></li>
<li><a href="gallery.php">My Gallery</a></li>
<li><a href="links.php">Links</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>

</div>

<div align="center">
<img src="images/header_img.jpg" alt="" />
</div>

</div>
</div>

<div id="footer" align="left">
<?php
echo date("D d M , Y H:i:s");
?>
 
</div>
</body>
</html>
and i also get on Opera a big gap between the right (#sub-content) and the middle (#navigation). any idea what the problem is please.
many thanks.


feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
User avatar
TheMoose
Forum Contributor
Posts: 351
Joined: Tue May 23, 2006 10:42 am

Post by TheMoose »

You forgot to close the style tag.

You have a gap because you have sub-content set to 22.9%, and wrapper set to 76%. 22.9 + 76 = 98.9%, and each is set to float to opposite sides. Make your percentages add to 100%, or set the background of the container to be the main color so you don't notice the gap.
moisea
Forum Newbie
Posts: 13
Joined: Wed Nov 01, 2006 2:29 pm

Post by moisea »

thanks TheMoose, i found the </div and </style>, but stilll struggling with that gap on Opera eventhough it look fine on IE and FF. hey I'll find a way :D
many thanks again
Post Reply